diff --git a/app/globals.css b/app/globals.css index 23448f9..578a98b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,12 +1,9 @@ -@import url("https://fonts.googleapis.com/css2?family=Niconne&display=swap") - layer(base); - @import "tailwindcss"; @config "../tailwind.config.js"; -@theme { - --font-cursive: "Niconne", "ui-cursive", "cursive"; +@theme inline { + --font-cursive: var(--font-niconne), "ui-cursive", "cursive"; } html { @@ -21,3 +18,38 @@ html[data-scroll="true"] .scroll-show { html[data-scroll="true"] .scroll-hide { opacity: 0; } + +/* fade cards up as they scroll into view, where supported */ +@supports (animation-timeline: view()) { + @media (prefers-reduced-motion: no-preference) { + @keyframes reveal { + from { + opacity: 0; + transform: translateY(3rem); + } + } + + .reveal { + animation: reveal linear both; + animation-timeline: view(); + animation-range: cover 0% cover 40%; + } + } +} + +/* subtle zoom on the hero photo as it scrolls away, where supported */ +@supports (animation-timeline: scroll()) { + @media (prefers-reduced-motion: no-preference) { + @keyframes hero-zoom { + to { + transform: scale(1.1); + } + } + + .hero-zoom { + animation: hero-zoom linear both; + animation-timeline: scroll(root); + animation-range: 0 100vh; + } + } +} diff --git a/app/layout.tsx b/app/layout.tsx index 13a23ec..91a4c56 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,15 +1,23 @@ +import { Niconne } from "next/font/google"; import type { ReactElement, ReactNode } from "react"; import ScrollProvider from "../components/scroll"; import ThemeProvider from "../components/theme"; import "./globals.css"; +const niconne = Niconne({ + weight: "400", + subsets: ["latin"], + variable: "--font-niconne", + display: "swap", +}); + export default function RootLayout({ children, }: { children: ReactNode; }): ReactElement { return ( - + {children} diff --git a/app/page.tsx b/app/page.tsx index ddcecef..7f76310 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -11,6 +11,7 @@ import hafa from "../images/hafa.svg"; import splash from "../images/irina-shishkina-FMlZAUFmkvw-unsplash.jpg"; import repub from "../images/repub.svg"; import riso from "../images/riso-logo.svg"; +import scenicRoute from "../images/scenic-route.svg"; export const metadata: Metadata = { title: "hafa.io", @@ -30,7 +31,7 @@ function FooterIcon({ return ( {icon} @@ -39,9 +40,9 @@ function FooterIcon({ export default function Hero(): ReactElement { return ( -
-
-
+
+
+
-
- +
+ +
+ hafa.io
-
-

- Projects -

-
    +
    +
    +

    + Projects +

    + +
    +
      , }, @@ -98,6 +109,32 @@ export default function Hero(): ReactElement { ]} /> + } + name="Spot Color Separation" + description="Website for separating an image into spot colors. Intended for decomposing images for a Risograph." + buttons={[ + { + text: "Website", + href: "https://hafaio.github.io/color-separation", + icon: , + }, + { + text: "Github", + href: "https://github.com/hafaio/color-separation", + icon: , + }, + ]} + /> + 🐀} name="Loose RAT Helper" description="Helper for finding 'loose' (homophone) Remote Associates Tests given a starting word." @@ -115,6 +152,7 @@ export default function Hero(): ReactElement { ]} /> , }, @@ -139,31 +177,50 @@ export default function Hero(): ReactElement { ]} /> } - name="Spot Color Separation" - description="Website for separating an image into spot colors. Intended for decomposing images for a Risograph." + name="Scenic Route" + description="Navigation for taking the scenic route." buttons={[ { text: "Website", - href: "https://hafaio.github.io/color-separation", + href: "https://hafaio.github.io/scenic-route", icon: , }, { text: "Github", - href: "https://github.com/hafaio/color-separation", + href: "https://github.com/hafaio/scenic-route", + icon: , + }, + ]} + /> + 🎹} + name="Synesthizer" + description="A synesthetic synthesizer that converts images into piano compositions." + buttons={[ + { + text: "Website", + href: "https://hafaio.github.io/synesthizer", + icon: , + }, + { + text: "Github", + href: "https://github.com/hafaio/synesthizer", icon: , }, ]} />
    -
    +
    } />
    diff --git a/components/project.tsx b/components/project.tsx index f02c569..379c867 100644 --- a/components/project.tsx +++ b/components/project.tsx @@ -12,7 +12,7 @@ function Button({ text, href, icon }: ButtonProps): ReactElement { diff --git a/images/repub.svg b/images/repub.svg index 37948fa..c5ebbc2 100755 --- a/images/repub.svg +++ b/images/repub.svg @@ -1,75 +1,50 @@ - - + id="defs1" /> + inkscape:deskcolor="#d1d1d1" + inkscape:zoom="2.4848121" + inkscape:cx="84.915876" + inkscape:cy="62.580183" + inkscape:window-width="1400" + inkscape:window-height="946" + inkscape:window-x="259" + inkscape:window-y="79" + inkscape:window-maximized="0" + inkscape:current-layer="svg1" /> - - - - - - - - + id="g2" + transform="matrix(4.6180607,0,0,4.6180607,-115.93137,53.619019)" + style="stroke-width:0.216541"> + + diff --git a/images/scenic-route.svg b/images/scenic-route.svg new file mode 100644 index 0000000..6a11ea1 --- /dev/null +++ b/images/scenic-route.svg @@ -0,0 +1,13 @@ + + + + + + + + +