-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Redesign cover page and improve dock animations
- Loading branch information
1 parent
6088931
commit 95c963c
Showing
21 changed files
with
471 additions
and
136 deletions.
There are no files selected for viewing
Submodule css-styles
updated
from 66ce2d to a3f2b9
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Submodule react-components
updated
from f78a86 to 84d20f
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| import { distance, Icon, inverseLerp, lerp, Link, SocialIcon, useSmoothDamp } from '@zigurous/react-components'; // prettier-ignore | ||
| import { Link as GatsbyLink } from 'gatsby'; | ||
| import React, { useEffect, useRef } from 'react'; | ||
| import type { LinkType } from '../types'; | ||
|
|
||
| const settings = { | ||
| minSize: 44, | ||
| maxSize: 64, | ||
| minFontSize: 20, | ||
| maxFontSize: 30, | ||
| distance: 150, | ||
| smoothTime: 50, | ||
| }; | ||
|
|
||
| export interface DockItemProps { | ||
| asButton?: boolean; | ||
| external?: boolean; | ||
| link: LinkType; | ||
| mouseState: { x: number; y: number; entered: boolean }; | ||
| onClick?: () => void; | ||
| } | ||
|
|
||
| export default function DockItem({ | ||
| asButton = false, | ||
| external = false, | ||
| link, | ||
| mouseState, | ||
| onClick, | ||
| }: DockItemProps) { | ||
| const ref = useRef<HTMLDivElement>(null); | ||
| const targetSizeRef = useRef<number>(settings.minSize); | ||
| const size = useSmoothDamp( | ||
| settings.minSize, | ||
| targetSizeRef, | ||
| settings.smoothTime, | ||
| ); | ||
| const iconSize = size * 0.45; | ||
|
|
||
| useEffect(() => { | ||
| if (!ref.current) return; | ||
| if (mouseState.entered) { | ||
| targetSizeRef.current = getSize(ref.current, mouseState.x, mouseState.y); | ||
| } else { | ||
| targetSizeRef.current = settings.minSize; | ||
| } | ||
| }, [ref, mouseState]); | ||
|
|
||
| return ( | ||
| <div | ||
| className="dock__item" | ||
| id={link.id} | ||
| ref={ref} | ||
| style={{ | ||
| width: `${size}px`, | ||
| height: `${size}px`, | ||
| fontSize: `${iconSize}px`, | ||
| transform: `translateY(${-(size - settings.minSize) / 2}px)`, | ||
| }} | ||
| > | ||
| {asButton ? ( | ||
| <button onClick={onClick}> | ||
| {link.icon && <Icon name={link.icon} size="inherit" />} | ||
| {link.socialIcon && ( | ||
| <SocialIcon | ||
| icon={link.socialIcon} | ||
| innerPadding={0} | ||
| size={iconSize - 2} | ||
| /> | ||
| )} | ||
| </button> | ||
| ) : ( | ||
| <Link | ||
| as={external ? 'a' : GatsbyLink} | ||
| external={external} | ||
| to={link.to} | ||
| unstyled | ||
| > | ||
| {link.icon && <Icon name={link.icon} size="inherit" />} | ||
| {link.socialIcon && ( | ||
| <SocialIcon | ||
| icon={link.socialIcon} | ||
| innerPadding={0} | ||
| size={iconSize - 2} | ||
| /> | ||
| )} | ||
| </Link> | ||
| )} | ||
| <div className="dock__tooltip">{link.name}</div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function getSize(el: HTMLDivElement, mouseX: number, mouseY: number) { | ||
| const rect = el.getBoundingClientRect(); | ||
| const d = distance( | ||
| mouseX, | ||
| mouseY, | ||
| rect.left + rect.width / 2, | ||
| rect.top + rect.height / 2, | ||
| ); | ||
| return lerp( | ||
| settings.minSize, | ||
| settings.maxSize, | ||
| inverseLerp(settings.distance, 0, d), | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import '../styles/grid-3d.css'; | ||
| import React from 'react'; | ||
|
|
||
| export interface Grid3DProps { | ||
| width?: number; | ||
| height?: number; | ||
| } | ||
|
|
||
| export default function Grid3D({ width = 30, height = 30 }: Grid3DProps) { | ||
| const cells = []; | ||
| for (let i = 0; i < width * height; i++) { | ||
| cells.push(<div className="grid-3d__cell" key={i} />); | ||
| } | ||
| return ( | ||
| <div | ||
| aria-hidden="true" | ||
| className="grid-3d" | ||
| style={{ | ||
| gridTemplateColumns: `repeat(${width}, 1fr)`, | ||
| gridTemplateRows: `repeat(${height}, 1fr)`, | ||
| }} | ||
| > | ||
| {cells.map(cell => cell)} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.