+
+ )}
+
+
+ {client.avatar &&
+
- ))}
-
- {/* Testimonials */}
- {client.testimonials && client.testimonials.length > 0 && (
- {client.name}
+
+
+ {client.role}
+ /
+
+ {client.start} - {client.end ?? "Present"}
+
- {project.description}
-
- {/* Links */}
- {project.links && project.links.length > 0 && (
-
- {project.links.map((link) => (
-
- {link.name}
-
- ))}
-
- )}
-
- {/* Media carousel */}
- {project.media && project.media.length > 0 && (
-
- {project.media.map((media, mediaIdx) => (
- // biome-ignore lint/suspicious/noArrayIndexKey: No other option
-
- )}
- {media.type === "video" || media.type === "embed" ? (
- // Website embeds
-
- ))}
-
- {media.caption}
-
- )}
-
-
Testimonials
- - I've worked with some amazing people, here's what they have to say about me. - - -
- {client.testimonials.map((testimonial) => (
-
+
+ )}
+
);
}
diff --git a/src/app/clients/page.tsx b/src/app/clients/page.tsx
index 4c82556..e54dd13 100644
--- a/src/app/clients/page.tsx
+++ b/src/app/clients/page.tsx
@@ -1,17 +1,53 @@
-import { Header } from "@/components/base/header";
-import { ClientCallToAction } from "@/components/clients/client-call-to-action";
+import Image from "next/image";
+import Link from "next/link";
+import { MdArrowOutward } from "react-icons/md";
import { allClients } from "@/lib/content";
-// biome-ignore lint/style/noDefaultExport: NextJS
export default function ClientsPage() {
return (
-
-
-
- {testimonial.avatar && (
-
+
+ {client.description && (
+
- {testimonial.name}
- {testimonial.role}
-
+ {client.description}
+ )} + + + {client.projects && client.projects.length > 0 && ( +
+ {client.projects.map((project, projectIdx) => (
+
+ {projectIdx > 0 &&
} + +
+
+
- )}
- } + +
+
+
+
+ {project.avatar && (
+
+
+ {project.links && project.links.length > 0 && (
+ {project.name}
+
+ {project.links.map((link) => (
+
+ {link.name}
+
+ ))}
+ )}
+ {project.description}
- {/* Testimonial text with highlighting */} -
- {testimonial.testimonial.split("*").map((part, partIdx) =>
- partIdx % 2 ? (
- // biome-ignore lint/suspicious/noArrayIndexKey: Needed
-
- {part}
-
+ {project.media && project.media.length > 0 && (
+
+ )}
+
+ {client.testimonials && client.testimonials.length > 0 && (
+
+ {project.media.map((media, mediaIdx) => (
+
+ )}
+
+ ))}
+
+ {media.type === "video" || media.type === "embed" ? (
+
+ ))}
+ {media.caption}
} ++
Testimonials
+ +
+ {client.testimonials.map((testimonial) => (
+
+
+ ))}
++ “ + {testimonial.testimonial.split("*").map((part, partIdx) => + partIdx % 2 ? ( + // oxlint-disable-next-line react/no-array-index-key + + {part} + + ) : ( + part + ) + )} + ” +
+ ++ {testimonial.avatar && ( +- ))} -+ )} + + {testimonial.name} + {testimonial.role}
-
- Some of the amazing people I've had the pleasure of working with.
-
-
+ >) {
- // noinspection HtmlRequiredTitleElement
return (
- {/* TODO: Fix Google translate breaking the DOM properly, see fixes below */}
- {/* https://www.npmjs.com/package/eslint-plugin-react-google-translate */}
-
-
+
diff --git a/src/app/globals.css b/src/app/globals.css
index bea82eb..85d4055 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -6,8 +6,6 @@
@custom-variant dark (&:is(.dark *));
:root {
- /* Font Smoothing */
- /*font-synthesis: none;*/
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -44,9 +42,6 @@
--sidebar-accent-foreground: oklch(1 0 0);
--sidebar-border: oklch(0.25 0.0295 269.9587);
--sidebar-ring: oklch(0.6201 0.1902 264.8967);
- --font-sans: var(--font-poppins);
- --font-serif: ui-serif, Georgia, serif;
- --font-mono: ui-monospace, "SF Mono", monospace;
--radius: 0.5rem;
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
@@ -148,9 +143,8 @@
--color-primary-800: #0f071d;
--color-primary-900: #0d0a13;
- --font-sans: var(--font-poppins);
- /*--font-mono: var(--font-mono);*/
- /*--font-serif: var(--font-serif);*/
+ --font-serif: var(--font-instrument-serif);
+ --font-sans: var(--font-switzer);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
@@ -174,7 +168,6 @@
--tracking-widest: calc(var(--tracking-normal) + 0.1em);
}
-/* TODO: Revert this */
@utility container {
margin-inline: auto;
padding-inline: 2rem;
@@ -196,96 +189,22 @@
@apply border-border/40 outline-ring/40;
}
- body {
- letter-spacing: var(--tracking-normal);
- }
-}
-
-/* Old styles */
-@layer utilities {
- /* Typography */
- .text-title {
- @apply text-2xl font-bold dark:text-neutral-300;
- }
-
- .text-subtitle {
- @apply text-lg text-neutral-600 dark:text-neutral-400;
+ :focus-visible {
+ @apply outline-2 outline-offset-2 outline-ring;
}
- /* Basic Cards */
- .basic-card {
- @apply rounded-md border-[1px] border-neutral-300 bg-neutral-100/70 p-4 dark:border-neutral-700 dark:bg-neutral-800/70;
+ body {
+ letter-spacing: var(--tracking-normal);
}
- /* Links */
- .link {
- @apply text-neutral-400 transition-all hover:text-neutral-200;
+ @media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
}
}
-
-/* Icon sizing */
-.icon.sm {
- @apply h-[24px] w-[24px];
-}
-
-/* Layout */
-.layout-container {
- @apply mx-8 md:mx-32 xl:mx-48;
-}
-
-/* Hoverable */
-.hoverable {
- --mouse-x: -9999px;
- --mouse-y: -9999px;
-}
-
-.hoverable.hoverable-card {
- @apply relative flex grow flex-col overflow-clip opacity-100;
-}
-
-.hoverable.hoverable-card:hover::before {
- @apply opacity-100;
-}
-
-.hoverable.hoverable-card::before,
-.hoverable.hoverable-card::after {
- @apply absolute left-0 top-0 h-full w-full opacity-0 transition-opacity content-[''];
-}
-
-.hoverable.hoverable-card::before {
- /* Less intense hover effect */
-
- @apply z-[3];
- background: radial-gradient(
- 800px circle at var(--mouse-x) var(--mouse-y),
- rgba(255, 255, 255, 0.06),
- transparent 40%
- );
-}
-
-.hoverable.hoverable-card::after {
- /* Outline that shows regardless of hover state */
-
- @apply z-[1] rounded-[inherit] border opacity-100;
- border-image: radial-gradient(
- 600px circle at var(--mouse-x) var(--mouse-y),
- rgba(255, 255, 255, 0.4),
- transparent 40%
- );
- border-image-slice: 1;
-
- /* TODO: Fix the rounding */
- /* Create a mask that is rounded on all corners, to create a rounded outline */
- /* This is because the border-image property does not support border-radius */
-
- /* --border-radius: 0.5rem; */
- /* background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.4), transparent 40%); */
- /* mask-image: */
- /* linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) calc(var(--border-radius) - 1px), rgba(0, 0, 0, 0) calc(var(--border-radius)), rgba(0, 0, 0, 0) 100%),
- linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) calc(var(--border-radius) - 1px), rgba(0, 0, 0, 0) calc(var(--border-radius)), rgba(0, 0, 0, 0) 100%),
- linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) calc(var(--border-radius) - 1px), rgba(0, 0, 0, 0) calc(var(--border-radius)), rgba(0, 0, 0, 0) 100%),
- linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) calc(var(--border-radius) - 1px), rgba(0, 0, 0, 0) calc(var(--border-radius)), rgba(0, 0, 0, 0) 100%), */
-
- /* Round the inside corners */
- /* radial-gradient(circle at var(--border-radius) var(--border-radius), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) calc(var(--border-radius) - 1px), rgba(0, 0, 0, 0) calc(var(--border-radius)), rgba(0, 0, 0, 0) 100%); */
-}
diff --git a/src/app/icon.png b/src/app/icon.png
index 62ab0a9..978adba 100644
Binary files a/src/app/icon.png and b/src/app/icon.png differ
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 77306a2..1bc778a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,17 +1,21 @@
import "@/app/globals.css";
import type { Metadata, Viewport } from "next";
-import { Poppins } from "next/font/google";
+import localFont from "next/font/local";
import NextTopLoader from "nextjs-toploader";
import { ViewTransition } from "react";
-import { HoverListener } from "@/components/interactive/hoverable";
import { Navbar } from "@/components/layout/navbar";
import { cn } from "@/lib/utils";
-const poppins = Poppins({
- subsets: ["latin"],
- weight: ["400", "500", "700"],
- variable: "--font-poppins",
+const instrumentSerifFont = localFont({
+ weight: "400",
+ variable: "--font-instrument-serif",
+ src: "../assets/fonts/InstrumentSerif-Regular.ttf",
+});
+
+const switzerFont = localFont({
+ variable: "--font-switzer",
+ src: "../assets/fonts/Switzer-Variable.woff2",
});
export const metadata: Metadata = {
@@ -34,43 +38,48 @@ export const metadata: Metadata = {
};
export const viewport: Viewport = {
- colorScheme: "dark",
+ colorScheme: "light",
initialScale: 1,
themeColor: "#9145FF",
viewportFit: "cover",
width: "device-width",
};
-// biome-ignore lint/style/noDefaultExport: NextJS
export default function RootLayout({ children }: ReadonlyClients
++ Some of the amazing people I've had the pleasure of working with +
+ +
{allClients.map((client) => (
-
+
+
))}
+ {!client.end && }
+
+ {client.start} - {client.end ?? "Present"}
+
+
+
+
+ {client.avatar && (
+
+
+ {client.description && (
+ {client.description}
+ )} +
+
+
+
+ Skip to content
+
+
- {children}
- {/* Footer */}
-
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index dfd7a7e..c498a41 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,4 +1,5 @@
import type { Metadata } from "next";
+import Link from "next/link";
export const metadata: Metadata = {
title: "Page Not Found",
@@ -6,19 +7,22 @@ export const metadata: Metadata = {
robots: { index: false },
};
-// biome-ignore lint/style/noDefaultExport: NextJS
export default function NotFound() {
return (
-
-
+ {children}
+
- Copyright © Koding Development 2025
- Stella, Software Engineer
-
+
-
-
+ 404
- -
+
404
-
-
);
}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5deb238..fb440b4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,129 +1,162 @@
import type { Metadata } from "next";
-import { Header } from "@/components/base/header";
-import { Project } from "@/components/home/project";
+import Image from "next/image";
+import type { Route } from "next";
+import Link from "next/link";
+import { MdArrowOutward } from "react-icons/md";
+import Hazel from "@/assets/photos/hazel.png";
+import StellaIntro from "@/assets/photos/stella-intro.png";
+import { ProjectRow } from "@/components/home/project-row";
import { TwinklingStar } from "@/components/home/twinkling-star";
-import { CallToAction } from "@/components/interactive/call-to-action";
+import { allClients } from "@/lib/content";
+import { NAV_SOCIALS } from "@/lib/data/layout";
import { PROJECTS } from "@/lib/data/projects";
export const metadata: Metadata = {
description: "Hi, I'm Stella. Crafting rich, engaging gameplay experiences for 8 years.",
};
-// biome-ignore lint/style/noDefaultExport: NextJS
+const featured = PROJECTS.filter((p) => p.featured);
+const rest = PROJECTS.filter((p) => !p.featured);
+
export default function HomePage() {
return (
- Page Not Found
-Looks like you got lost... how peculiar
+
+
+
+
+ Go home
+
Page Not Found
+How did you get here?!?
- {/* calc = full height - h-24 (navbar / 6 rem) */}
- {/* Header */}
-
-
- {/* Titles */}
-
- Crafting rich, engaging gameplay experiences for{" "}
- 8 years.
-
+
+
+
+
- {/* Highlights */}
- Stella Inwood
++ Game developer and software engineer with a love for building things that people enjoy. +
+
- {/* Highlight - Yellow Start (Top Right) */}
-
+
- {/* Projects */}
-
-
-
-
-
+
+
- {/* Highlight - Yellow Star (Bottom Left) */}
-
-
-
-
-
+
+
- {/* Highlight - Blue Star (Bottom Right) */}
-
-
-
-
+
+
+
-
+
- {/* Highlight - Curly Arrow */}
-
+
+
+ Clients
+People I've worked with
+
+ {allClients.slice(0, 4).map((client, i) => (
+
+ {client.avatar && (
+
+
+
My cat Hazel (mraow!)
-
+ > = ({ className, ...props }) => {
- const canvasRef = useRef(null);
-
- useEffect(() => {
- const canvas = canvasRef.current;
- if (!canvas) return;
-
- const ctx = canvas.getContext("2d")!;
- let time = Math.random() * 1000;
-
- const setColor = (x: number, y: number, r: number, g: number, b: number) => {
- ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
- ctx.fillRect(x, y, 1, 1);
- };
-
- const calcR = (x: number, y: number, t: number) => Math.floor(200 + 64 * Math.cos((x * x - y * y) / 300 + t));
-
- const calcB = (x: number, y: number, t: number) =>
- Math.floor(192 + 64 * Math.sin(5 * Math.sin(t / 9) + ((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 1100));
-
- const draw = () => {
- for (let x = 0; x <= 35; x++) {
- for (let y = 0; y <= 35; y++) {
- const r = calcR(x, y, time);
- const b = calcB(x, y, time);
- setColor(x, y, r, 1, b);
- }
- }
-
- time += 0.02;
- requestAnimationFrame(draw);
- };
-
- draw();
- canvas.classList.remove("opacity-0");
- }, []);
-
- return (
- >;
-
-export const Header: React.FC = ({ emoji, title, children, className, ...props }) => (
- & React.ComponentProps<"video">, "src">;
+ title?: string;
+};
const YOUTUBE_REGEX =
/(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))([\w-]{11})(?:\S+)?/;
-const MP4_REGEX = /(\/[^/]+)+\.mp4$/;
+const MP4_REGEX = /\.mp4$/i;
-export const MediaEmbed: React.FC = ({ src, ...props }) => {
+export const MediaEmbed: React.FC = ({ src, className, title }) => {
const youtubeMatch = src.match(YOUTUBE_REGEX);
if (youtubeMatch) {
return (
+ // oxlint-disable-next-line jsx-a11y/iframe-has-title, react/iframe-missing-sandbox
);
}
if (MP4_REGEX.test(src)) {
- return ;
+ return , "src">;
-
-export const Video: React.FC = ({ src, ...props }) => {
- const videoRef = useRef(null);
- const [paused, setPaused] = useState(false);
+ className?: string;
+};
- useEffect(() => {
- if (paused) {
- videoRef.current?.pause();
- } else {
- videoRef.current?.play();
- }
- }, [paused]);
+const chromeVars = {
+ "--media-primary-color": "var(--primary)",
+ "--media-secondary-color": "transparent",
+ "--media-text-color": "white",
+ "--media-control-hover-background": "rgba(255,255,255,0.1)",
+ "--media-font-family": "var(--font-sans)",
+ "--media-range-track-background": "rgba(255,255,255,0.2)",
+ "--media-control-background": "transparent",
+ "--media-range-thumb-background": "white",
+} as CSSProperties;
- return (
-
+
+
+);
diff --git a/src/components/clients/client-call-to-action.tsx b/src/components/clients/client-call-to-action.tsx
deleted file mode 100644
index 718d4cb..0000000
--- a/src/components/clients/client-call-to-action.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { Clients } from "@content";
-import type { Route } from "next";
-import Image from "next/image";
-import type React from "react";
-import { MdArrowOutward } from "react-icons/md";
-import { CallToAction } from "@/components/interactive/call-to-action";
-
-type ClientCallToActionProps = {
- client: Clients;
-};
-
-export const ClientCallToAction: React.FC = ({ client }) => (
-
-
-);
diff --git a/src/components/home/project-row.tsx b/src/components/home/project-row.tsx
new file mode 100644
index 0000000..af0468d
--- /dev/null
+++ b/src/components/home/project-row.tsx
@@ -0,0 +1,38 @@
+import type { Route } from "next";
+import Link from "next/link";
+import type React from "react";
+import { MdArrowOutward } from "react-icons/md";
+import { LANGUAGES, type Project } from "@/lib/data/projects";
+
+type ProjectRowProps = {
+ project: Project;
+ featured?: boolean;
+};
+
+export const ProjectRow: React.FC = ({ project, featured }) => {
+ const language = LANGUAGES[project.language];
+
+ return (
+
+ = ({ project }) => {
- const language = LANGUAGES[project.language];
-
- return (
-
- = ({ children }) => {
- const [data, setData] = useState({ x: 0, y: 0, size: 0, opacity: 0 });
+ const elRef = useRef(null);
const animationRef = useRef(undefined);
- const offsetRef = useRef(Math.random() * 5);
- const speedRef = useRef(0);
- const directionsRef = useRef([-1, 1]);
+ const offsetRef = useRef(Math.random() * 100);
+ const speedRef = useRef(Math.random() * 15 + 5);
+ const directionsRef = useRef([Math.random() * 2 - 1, Math.random() * 2 - 1]);
useEffect(() => {
+ const el = elRef.current;
+ if (!el) return;
+
+ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+ if (prefersReducedMotion) {
+ el.style.opacity = "0.7";
+ return;
+ }
+
const render = () => {
- if (speedRef.current === 0 || data.opacity < 0.001) {
+ const now = Date.now() / 1000;
+ const offset = offsetRef.current;
+ const speed = speedRef.current;
+ const sin = Math.sin(now + offset);
+ const opacity = sin * 0.5 + 0.5;
+
+ if (opacity < 0.001) {
speedRef.current = Math.random() * 15 + 5;
directionsRef.current = [Math.random() * 2 - 1, Math.random() * 2 - 1];
}
- const now = Date.now() / 1000;
- const offset = offsetRef.current;
+ const tx = (directionsRef.current[0] ?? 0) * sin * speed;
+ const ty = (directionsRef.current[1] ?? 0) * sin * speed;
+ const scale = (sin * speed + 20) / 20;
- setData({
- x: (directionsRef.current?.[0] ?? 0) * Math.sin(now + offset) * speedRef.current,
- y: (directionsRef.current?.[1] ?? 0) * Math.sin(now + offset) * speedRef.current,
- size: Math.sin(now + offset) * speedRef.current + 20,
- opacity: Math.sin(now + offset) * 0.5 + 0.5,
- });
+ el.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
+ el.style.opacity = String(opacity);
animationRef.current = requestAnimationFrame(render);
};
@@ -37,20 +49,11 @@ export const TwinklingStar: React.FC = ({ children }) =
cancelAnimationFrame(animationRef.current);
}
};
- }, [data.opacity]);
+ }, []);
return (
-
+ - 💻 Projects -
- Some of the cool things I've worked on. -Projects
+Some things I've built
-
- {PROJECTS.map((project) => (
-
+
- {/* Clients */}
-
+ {featured.map((project) => (
+
+
+
+
+
- See more
+
+
+ Client work
+
-
-
);
}
diff --git a/src/app/robots.ts b/src/app/robots.ts
index e4ee3da..1eb2d05 100644
--- a/src/app/robots.ts
+++ b/src/app/robots.ts
@@ -1,6 +1,5 @@
import type { MetadataRoute } from "next";
-// biome-ignore lint/style/noDefaultExport: NextJS
export default function robots(): MetadataRoute.Robots {
return {
rules: {
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
index dc6671d..bc7cfb8 100644
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@@ -3,7 +3,6 @@ import { allArtists, allClients } from "@/lib/content";
const BASE_URL = "https://koding.dev";
-// biome-ignore lint/style/noDefaultExport: NextJS
export default function sitemap(): MetadataRoute.Sitemap {
return [
// Home
diff --git a/src/assets/brand/avatar.png b/src/assets/brand/avatar.png
new file mode 100644
index 0000000..978adba
Binary files /dev/null and b/src/assets/brand/avatar.png differ
diff --git a/src/assets/fonts/InstrumentSerif-Regular.ttf b/src/assets/fonts/InstrumentSerif-Regular.ttf
new file mode 100644
index 0000000..9763031
Binary files /dev/null and b/src/assets/fonts/InstrumentSerif-Regular.ttf differ
diff --git a/src/assets/fonts/Switzer-Variable.woff2 b/src/assets/fonts/Switzer-Variable.woff2
new file mode 100644
index 0000000..91f868a
Binary files /dev/null and b/src/assets/fonts/Switzer-Variable.woff2 differ
diff --git a/src/assets/photos/hazel.png b/src/assets/photos/hazel.png
new file mode 100644
index 0000000..207ce5f
Binary files /dev/null and b/src/assets/photos/hazel.png differ
diff --git a/src/assets/photos/stella-intro.png b/src/assets/photos/stella-intro.png
new file mode 100644
index 0000000..f111106
Binary files /dev/null and b/src/assets/photos/stella-intro.png differ
diff --git a/src/components/base/gradient-background.tsx b/src/components/base/gradient-background.tsx
deleted file mode 100644
index bb78dcc..0000000
--- a/src/components/base/gradient-background.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-"use client";
-
-import type React from "react";
-import { useEffect, useRef } from "react";
-import { cn } from "@/lib/utils";
-
-export const GradientBackground: React.FC
- Want to see more of my work?
- Check out some of my clients.
+
+
+
+ Say hello
++ Interested in working together, or just want to chat? I'd love to hear from you. +
+
+ {NAV_SOCIALS.map((social) => (
+
+
+
+ ))}
-
-
-
-
- );
-};
diff --git a/src/components/base/header.tsx b/src/components/base/header.tsx
deleted file mode 100644
index bc9a16c..0000000
--- a/src/components/base/header.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type React from "react";
-import { cn } from "@/lib/utils";
-
-type HeaderProps = {
- title: string;
- emoji: string;
-} & React.PropsWithChildren
-
-);
diff --git a/src/components/base/media-embed.tsx b/src/components/base/media-embed.tsx
index e0680d2..06ae7c4 100644
--- a/src/components/base/media-embed.tsx
+++ b/src/components/base/media-embed.tsx
@@ -1,33 +1,35 @@
import type React from "react";
-import { Video } from "./video";
+import { cn } from "@/lib/utils";
+import { VideoPlayer } from "./video";
type MediaEmbedProps = {
src: string;
className?: string;
-} & Omit- {emoji} {title} -
-{children}
-
-
+export const VideoPlayer: React.FC = ({ src, className }) => (
+
+
-
- );
-};
+
-
-
- {paused && (
-
-
-
- )}
-
-
-
-
-
- {client.start ?? "Unknown"} - {client.end ?? "Now"}
-
-
-
-
- {client.avatar && (
-
-
- {client.description && {client.description}}
-
+
+ {project.name}
+
+
+
+ {project.year ?? "Current"}
+
+ + {project.description} +
+
-
-
-
-
-
- {project.description}
-
- );
-};
diff --git a/src/components/home/twinkling-star.tsx b/src/components/home/twinkling-star.tsx
index eed10b2..2b3df39 100644
--- a/src/components/home/twinkling-star.tsx
+++ b/src/components/home/twinkling-star.tsx
@@ -1,31 +1,43 @@
"use client";
import type React from "react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
export const TwinklingStar: React.FC{project.name}
-
- ;
-
-export const CallToAction: React.FC = ({ picture, className, children, ...props }) => (
-
- = ({ active = false, children, hoverContent }) => (
- (".hoverable").forEach((element) => {
- const { left, top } = element.getBoundingClientRect();
- element.style.setProperty("--mouse-x", `${event.clientX - left}px`);
- element.style.setProperty("--mouse-y", `${event.clientY - top}px`);
- });
- };
-
- document.body.addEventListener("mousemove", onMouseMove);
-
- return () => {
- document.body.removeEventListener("mousemove", onMouseMove);
- };
- }, []);
-
- return null;
-};
diff --git a/src/components/interactive/icon-link.tsx b/src/components/interactive/icon-link.tsx
index 6e0973a..24ce176 100644
--- a/src/components/interactive/icon-link.tsx
+++ b/src/components/interactive/icon-link.tsx
@@ -14,12 +14,12 @@ export const IconLink: React.FC = ({ icon: Icon, className, child
rel="noopener noreferrer"
{...props}
className={cn(
- "group flex flex-row items-center gap-2 rounded-full border-2 border-white/10 px-5 py-3 transition-all hover:border-white/25",
+ "group inline-flex items-center gap-2 rounded-full border border-foreground/15 px-4 py-2 text-sm transition-colors hover:border-foreground/30 hover:bg-foreground/5",
className
)}
>
- {Icon && , "href">;
-
-export const SiteLink: React.FC = ({
- href,
- picture,
- type = "default",
- picClass = "size-11 rounded-xl",
- className,
- children,
- ...props
-}) => {
- const Comp = href ? Link : "span";
- return (
-
- {type === "back" &&
- );
-};
diff --git a/src/components/layout/desktop-nav-bar.tsx b/src/components/layout/desktop-nav-bar.tsx
index ed2e909..53e0078 100644
--- a/src/components/layout/desktop-nav-bar.tsx
+++ b/src/components/layout/desktop-nav-bar.tsx
@@ -4,7 +4,7 @@ import type { Route } from "next";
import Link from "next/link";
import { usePathname } from "next/navigation";
import type React from "react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
import { NAV_LINKS, NAV_SOCIALS } from "@/lib/data/layout";
import { cn } from "@/lib/utils";
import { SocialButton } from "./social-button";
@@ -12,24 +12,27 @@ import { SocialButton } from "./social-button";
export const DesktopNavBar: React.FC = () => {
const pathname = usePathname();
const [visible, setVisible] = useState(false);
- const [navTween, setNavTween] = useState({
- left: "50%",
- top: "0px",
- right: "50%",
- });
+ const [indicator, setIndicator] = useState({ x: 0, width: 0, y: 0 });
+ const containerRef = useRef(null);
const indicatorRefs = useRef<(HTMLAnchorElement | null)[]>([]);
const updateLink = (el: HTMLElement) => {
+ const container = containerRef.current;
+ if (!container) return;
+
+ const containerRect = container.getBoundingClientRect();
+ const elRect = el.getBoundingClientRect();
+
setVisible(true);
- setNavTween({
- left: `${el.offsetLeft}px`,
- right: `${el.parentElement!.offsetWidth - el.offsetLeft - el.clientWidth}px`,
- top: `${el.offsetTop + el.offsetHeight}px`,
+ setIndicator({
+ x: elRect.left - containerRect.left,
+ width: elRect.width,
+ y: elRect.bottom - containerRect.top,
});
};
- const recompute = () => {
+ const recompute = useEffectEvent(() => {
const currentLink = NAV_LINKS.find((link) => link.match.test(pathname));
if (!currentLink) {
setVisible(false);
@@ -37,25 +40,17 @@ export const DesktopNavBar: React.FC = () => {
}
const index = NAV_LINKS.indexOf(currentLink);
- const indicator = indicatorRefs.current[index];
- if (!indicator) return;
+ const el = indicatorRefs.current[index];
+ if (!el) return;
- updateLink(indicator);
- };
-
- // biome-ignore lint/correctness/useExhaustiveDependencies: TODO: Fix
- useEffect(() => {
- recompute();
- }, [pathname]);
+ updateLink(el);
+ });
- // biome-ignore lint/correctness/useExhaustiveDependencies: TODO: Fix
- useEffect(() => {
- recompute();
- }, []);
+ useEffect(() => recompute(), [pathname]);
return (
- <>
-
+
diff --git a/src/components/interactive/call-to-action.tsx b/src/components/interactive/call-to-action.tsx
deleted file mode 100644
index 2f19766..0000000
--- a/src/components/interactive/call-to-action.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import Image, { type StaticImageData } from "next/image";
-import Link from "next/link";
-import type React from "react";
-import { GradientBackground } from "@/components/base/gradient-background";
-import { cn } from "@/lib/utils";
-
-type CallToActionProps = {
- picture?: {
- src: StaticImageData;
- alt?: string;
- };
-} & React.PropsWithChildren &
- React.ComponentProps
{children}
- {picture ? (
- <>
-
-
- {children}
-
-);
diff --git a/src/components/interactive/hoverable.tsx b/src/components/interactive/hoverable.tsx
deleted file mode 100644
index c990f2d..0000000
--- a/src/components/interactive/hoverable.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-"use client";
-
-import type React from "react";
-import type { ReactNode } from "react";
-import { useEffect } from "react";
-
-type HoverableProps = {
- active?: boolean;
- hoverContent?: ReactNode;
-} & React.PropsWithChildren;
-
-export const Hoverable: React.FC
- {children}
-
- {hoverContent && active && (
-
-);
-
-export const HoverListener: React.FC = () => {
- useEffect(() => {
- const onMouseMove = (event: MouseEvent) => {
- document.querySelectorAll
-
- )}
-
- {hoverContent}
-
- {children}
- {type === "default" &&
+
+
{NAV_LINKS.map((link, index) => (
{
ref={(el) => {
indicatorRefs.current[index] = el;
}}
- className="group relative font-medium text-lg text-white opacity-75"
+ className="group relative py-2 text-lg font-medium text-foreground/75"
>
{link.name}
@@ -77,22 +72,27 @@ export const DesktopNavBar: React.FC = () => {
-
+
);
};
diff --git a/src/components/layout/mobile-nav-bar.tsx b/src/components/layout/mobile-nav-bar.tsx
new file mode 100644
index 0000000..f82a744
--- /dev/null
+++ b/src/components/layout/mobile-nav-bar.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import type { Route } from "next";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import type React from "react";
+import { useEffect, useState } from "react";
+import { MdClose, MdMenu } from "react-icons/md";
+import { NAV_LINKS, NAV_SOCIALS } from "@/lib/data/layout";
+import { cn } from "@/lib/utils";
+import { SocialButton } from "./social-button";
+
+export const MobileNavBar: React.FC = () => {
+ const pathname = usePathname();
+ const [open, setOpen] = useState(false);
+
+ useEffect(() => setOpen(false), [pathname]);
+
+ useEffect(() => {
+ if (!open) return;
+ const onKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Escape") setOpen(false);
+ };
+ document.addEventListener("keydown", onKeyDown);
+ return () => document.removeEventListener("keydown", onKeyDown);
+ }, [open]);
+
+ useEffect(() => {
+ const main = document.getElementById("main");
+ if (!main) return;
+ if (open) {
+ main.setAttribute("inert", "");
+ } else {
+ main.removeAttribute("inert");
+ }
+ return () => main.removeAttribute("inert");
+ }, [open]);
+
+ return (
+
{NAV_SOCIALS.map((social) => (
-
-
+
+
+
+ {open && (
+ // oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+ >;
+ label: string;
} & React.ComponentProps;
-export const SocialButton: React.FC = ({ icon: Icon, className, ...props }) => (
+export const SocialButton: React.FC = ({ icon: Icon, label, className, ...props }) => (
-
setOpen(false)}
+ />
+ )}
+
+ {/* Menu panel — always in DOM for height animation */}
+
+ );
+};
diff --git a/src/components/layout/navbar.tsx b/src/components/layout/navbar.tsx
index de76e3b..02b074d 100644
--- a/src/components/layout/navbar.tsx
+++ b/src/components/layout/navbar.tsx
@@ -1,25 +1,19 @@
import Image from "next/image";
import Link from "next/link";
import type React from "react";
-import { FEATURED_ARTIST, getArtRefImage } from "@/lib/content";
+import Avatar from "@/assets/brand/avatar.png";
import { DesktopNavBar } from "./desktop-nav-bar";
+import { MobileNavBar } from "./mobile-nav-bar";
export const Navbar: React.FC = () => (
-
+
+
+
+
+
+
+ {NAV_LINKS.map((link) => (
+ setOpen(false)}
+ className={cn(
+ "rounded-lg px-4 py-3 text-lg font-medium transition-colors",
+ link.match.test(pathname) ? "bg-primary/10 text-primary" : "text-foreground/75"
+ )}
+ >
+ {link.name}
+
+ ))}
+
+
+
+ {NAV_SOCIALS.map((social) => (
+
+
+
+
);
diff --git a/src/components/layout/social-button.tsx b/src/components/layout/social-button.tsx
index 7d43217..fc179ad 100644
--- a/src/components/layout/social-button.tsx
+++ b/src/components/layout/social-button.tsx
@@ -4,20 +4,22 @@ import { cn } from "@/lib/utils";
type SocialButtonProps = {
icon: React.FC
- >;
- className: string;
+ label: string;
+ className?: string;
};
export const NAV_LINKS: NavLink[] = [
@@ -36,16 +37,19 @@ export const NAV_SOCIALS: SocialLink[] = [
{
href: "https://twitter.com/KodingDev_",
icon: FaTwitter,
+ label: "Twitter",
className: "bg-[#1E96E8]/5",
},
{
href: "mailto:hello@koding.dev",
icon: FaEnvelope,
+ label: "Email",
className: "bg-[#8439FF]/5",
},
{
href: "https://github.com/KodingDev",
icon: FaGithub,
+ label: "GitHub",
className: "bg-[#000000]/5",
},
];
diff --git a/src/lib/data/projects.ts b/src/lib/data/projects.ts
index ee10dc6..9271be1 100644
--- a/src/lib/data/projects.ts
+++ b/src/lib/data/projects.ts
@@ -1,13 +1,13 @@
import type React from "react";
-import { SiKotlin, SiSvelte, SiTypescript } from "react-icons/si";
+import { SiKotlin, SiTypescript } from "react-icons/si";
-const SUPPORTED_LANGUAGES = ["typescript", "kotlin", "svelte"] as const;
+const SUPPORTED_LANGUAGES = ["typescript", "kotlin"] as const;
export type Language = (typeof SUPPORTED_LANGUAGES)[number];
-export interface LanguageData {
+export type LanguageData = {
name: string;
icon: React.FC>;
-}
+};
export const LANGUAGES: Record = {
typescript: {
@@ -18,19 +18,16 @@ export const LANGUAGES: Record = {
name: "Kotlin",
icon: SiKotlin,
},
- svelte: {
- name: "Svelte",
- icon: SiSvelte,
- },
};
-export interface Project {
+export type Project = {
language: Language;
name: string;
description: string;
url: string;
year?: number;
-}
+ featured?: boolean;
+};
export const PROJECTS: Project[] = [
{
@@ -38,11 +35,12 @@ export const PROJECTS: Project[] = [
name: "PSYLOCKE.GG",
description: "A helper website for Marvel Rivals, providing character information, achievements, and more.",
url: "https://psylocke.gg",
+ featured: true,
},
{
- language: "svelte",
+ language: "typescript",
name: "koding.dev",
- description: "This website, built with SvelteKit and TailwindCSS.",
+ description: "This website, built with Next.js and Tailwind CSS.",
url: "https://github.com/KodingDev/koding.dev",
},
{
diff --git a/velite.config.ts b/velite.config.ts
index 7ab4d58..6cb4e2f 100644
--- a/velite.config.ts
+++ b/velite.config.ts
@@ -10,7 +10,9 @@ export default defineConfig({
slug: s.slug(),
name: s.string(),
description: s.string(),
+ role: s.string().default("Software Engineer"),
href: s.string().optional(),
+ wordmark: s.image().optional(),
avatar: s.image().optional(),
banner: s.image().optional(),
start: s.string().optional(),
+
);
diff --git a/src/env.config.ts b/src/env.config.ts
index fd75900..5bdf02f 100644
--- a/src/env.config.ts
+++ b/src/env.config.ts
@@ -1,4 +1,3 @@
-/** biome-ignore-all assist/source/useSortedKeys: Prettier this way */
import { defineEnv } from "envin";
import { vercel } from "envin/presets/zod";
// noinspection JSFileReferences -- Needed, don't ask me why
diff --git a/src/instrumentation-client.ts b/src/instrumentation-client.ts
index 28ba36a..c4791aa 100644
--- a/src/instrumentation-client.ts
+++ b/src/instrumentation-client.ts
@@ -3,14 +3,12 @@ import { env } from "@/env.config";
if (env.NEXT_PUBLIC_POSTHOG_KEY) {
posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, {
- // biome-ignore-start lint/style/useNamingConvention: Posthog expects this format
api_host: "/ingest",
capture_exceptions: true,
capture_pageleave: true,
- capture_pageview: "history_change", // Enable pageleave capture
- debug: process.env.NODE_ENV === "development", // This enables capturing exceptions using Error Tracking, set to false if you don't want this
+ capture_pageview: "history_change",
+ debug: process.env.NODE_ENV === "development",
ui_host: "https://us.posthog.com",
defaults: "2025-05-24",
- // biome-ignore-end lint/style/useNamingConvention: Posthog expects this format
});
}
diff --git a/src/lib/content.ts b/src/lib/content.ts
index d384701..489b654 100644
--- a/src/lib/content.ts
+++ b/src/lib/content.ts
@@ -8,7 +8,10 @@ export const allClients = pipe(
clients,
filter((client) => !client.hidden),
// Sort the clients by their end date descending (if any), and leave "current" clients at the top.
- sortBy((client) => (client.end ? -parseDate(client.end as ClientDate).getTime() : Number.NEGATIVE_INFINITY))
+ sortBy(
+ (client) => (client.end ? -parseDate(client.end as ClientDate).getTime() : Number.NEGATIVE_INFINITY),
+ (client) => client.name
+ )
);
type ArtRef = {
diff --git a/src/lib/data/layout.ts b/src/lib/data/layout.ts
index 29d2476..37fcc2f 100644
--- a/src/lib/data/layout.ts
+++ b/src/lib/data/layout.ts
@@ -11,7 +11,8 @@ export type NavLink = {
export type SocialLink = {
href: string;
icon: React.FC