Port portfolio from Next.js/React to SolidJS #4
47 changed files with 2615 additions and 2640 deletions
5
.gitignore
vendored
5
.gitignore
vendored
|
|
@ -13,11 +13,10 @@
|
||||||
# testing
|
# testing
|
||||||
/coverage
|
/coverage
|
||||||
|
|
||||||
# next.js
|
# vite
|
||||||
/.next/
|
|
||||||
/out/
|
|
||||||
/dist/
|
/dist/
|
||||||
|
|
||||||
|
|
||||||
# production
|
# production
|
||||||
/build
|
/build
|
||||||
|
|
||||||
|
|
|
||||||
30
index.html
Normal file
30
index.html
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de" data-scroll-behavior="smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Mike Karl — Portfolio</title>
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Portfolio von Mike Karl — Systementwickler & Creative Technologist. Projekte aus Systems Programming, Computer Graphics und Low-Level-Entwicklung."
|
||||||
|
/>
|
||||||
|
<link rel="icon" href="/favicon.svg" />
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--font-space-grotesk: "Space Grotesk", sans-serif;
|
||||||
|
--font-inter: "Inter", sans-serif;
|
||||||
|
--font-ibm-plex-mono: "IBM Plex Mono", monospace;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="min-h-screen bg-deep-space text-text-primary antialiased">
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/index.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
import type { NextConfig } from "next";
|
|
||||||
|
|
||||||
const nextConfig: NextConfig = {
|
|
||||||
output: "export",
|
|
||||||
distDir: "dist",
|
|
||||||
compress: true,
|
|
||||||
images: {
|
|
||||||
unoptimized: true,
|
|
||||||
},
|
|
||||||
experimental: {
|
|
||||||
inlineCss: true,
|
|
||||||
optimizePackageImports: ["lucide-react", "gsap"],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default nextConfig;
|
|
||||||
2962
package-lock.json
generated
2962
package-lock.json
generated
File diff suppressed because it is too large
Load diff
22
package.json
22
package.json
|
|
@ -4,21 +4,18 @@
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "vite",
|
||||||
"build": "next build",
|
"build": "vite build",
|
||||||
"postbuild": "node scripts/cleanup-legacy.js",
|
"preview": "vite preview"
|
||||||
"start": "next start",
|
|
||||||
"lint": "next lint"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@solidjs/router": "^0.15.3",
|
||||||
"@vercel/analytics": "^2.0.1",
|
"@vercel/analytics": "^2.0.1",
|
||||||
"@vercel/speed-insights": "^2.0.0",
|
"@vercel/speed-insights": "^2.0.0",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"gsap": "^3.15.0",
|
"gsap": "^3.15.0",
|
||||||
"lucide-react": "^1.8.0",
|
"lucide-solid": "^0.511.0",
|
||||||
"next": "^16.2.4",
|
"solid-js": "^1.9.7",
|
||||||
"react": "^19.2.5",
|
|
||||||
"react-dom": "^19.2.5",
|
|
||||||
"tailwind-merge": "^3.5.0",
|
"tailwind-merge": "^3.5.0",
|
||||||
"tailwindcss": "^4.2.4"
|
"tailwindcss": "^4.2.4"
|
||||||
},
|
},
|
||||||
|
|
@ -31,10 +28,9 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/postcss": "^4.2.4",
|
"@tailwindcss/postcss": "^4.2.4",
|
||||||
"@types/node": "^24.12.2",
|
"@types/node": "^24.12.2",
|
||||||
"@types/react": "^19.2.14",
|
|
||||||
"@types/react-dom": "^19.2.3",
|
|
||||||
"eslint": "^10.2.1",
|
|
||||||
"postcss": "^8.5.0",
|
"postcss": "^8.5.0",
|
||||||
"typescript": "~6.0.2"
|
"typescript": "~6.0.2",
|
||||||
|
"vite": "^6.3.5",
|
||||||
|
"vite-plugin-solid": "^2.11.6"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
import { readFileSync, writeFileSync, unlinkSync, readdirSync, statSync } from "fs";
|
|
||||||
import { join } from "path";
|
|
||||||
|
|
||||||
const distDir = "./dist";
|
|
||||||
|
|
||||||
function walk(dir, callback) {
|
|
||||||
for (const entry of readdirSync(dir)) {
|
|
||||||
const fullPath = join(dir, entry);
|
|
||||||
const stats = statSync(fullPath);
|
|
||||||
if (stats.isDirectory()) {
|
|
||||||
walk(fullPath, callback);
|
|
||||||
} else {
|
|
||||||
callback(fullPath, stats);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove noModule script tags from all HTML files
|
|
||||||
let htmlCount = 0;
|
|
||||||
walk(distDir, (filePath) => {
|
|
||||||
if (filePath.endsWith(".html")) {
|
|
||||||
let content = readFileSync(filePath, "utf-8");
|
|
||||||
const before = content.length;
|
|
||||||
// Remove both <script ... noModule=""> and self-closing variants
|
|
||||||
content = content.replace(/<script[^>]*\snoModule[^>]*>(?:[^<]*(?:<(?!\/script>)[^<]*)*)?<\/script>/gi, "");
|
|
||||||
content = content.replace(/<script[^>]*\snoModule[^>]*\/>/gi, "");
|
|
||||||
if (content.length !== before) {
|
|
||||||
writeFileSync(filePath, content);
|
|
||||||
htmlCount++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (htmlCount > 0) {
|
|
||||||
console.log(`Cleaned noModule scripts from ${htmlCount} HTML files`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove core-js polyfill chunks
|
|
||||||
let removedCount = 0;
|
|
||||||
walk(distDir, (filePath) => {
|
|
||||||
if (filePath.endsWith(".js")) {
|
|
||||||
try {
|
|
||||||
const content = readFileSync(filePath, "utf-8");
|
|
||||||
if (content.includes('"zloirock"') || content.includes("core-js")) {
|
|
||||||
unlinkSync(filePath);
|
|
||||||
console.log("Removed legacy polyfill:", filePath);
|
|
||||||
removedCount++;
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// ignore
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (removedCount === 0) {
|
|
||||||
console.log("No legacy polyfills found to remove");
|
|
||||||
}
|
|
||||||
91
src/App.tsx
Normal file
91
src/App.tsx
Normal file
|
|
@ -0,0 +1,91 @@
|
||||||
|
import { Route } from "@solidjs/router";
|
||||||
|
import Layout from "./components/Layout";
|
||||||
|
import PageTransition from "./components/PageTransition";
|
||||||
|
import HomePage from "./pages/HomePage";
|
||||||
|
import AboutPage from "./pages/AboutPage";
|
||||||
|
import HobbiesPage from "./pages/HobbiesPage";
|
||||||
|
import ProjectsPage from "./pages/ProjectsPage";
|
||||||
|
import TimelinePage from "./pages/TimelinePage";
|
||||||
|
import ContactPage from "./pages/ContactPage";
|
||||||
|
import RaycasterPage from "./pages/project/RaycasterPage";
|
||||||
|
import RaytracerPage from "./pages/project/RaytracerPage";
|
||||||
|
import EmulatorPage from "./pages/project/EmulatorPage";
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<Route path="/" component={Layout}>
|
||||||
|
<Route
|
||||||
|
path="/"
|
||||||
|
component={() => (
|
||||||
|
<PageTransition>
|
||||||
|
<HomePage />
|
||||||
|
</PageTransition>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="/about"
|
||||||
|
component={() => (
|
||||||
|
<PageTransition>
|
||||||
|
<AboutPage />
|
||||||
|
</PageTransition>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="/hobbies"
|
||||||
|
component={() => (
|
||||||
|
<PageTransition>
|
||||||
|
<HobbiesPage />
|
||||||
|
</PageTransition>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="/projects"
|
||||||
|
component={() => (
|
||||||
|
<PageTransition>
|
||||||
|
<ProjectsPage />
|
||||||
|
</PageTransition>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="/timeline"
|
||||||
|
component={() => (
|
||||||
|
<PageTransition>
|
||||||
|
<TimelinePage />
|
||||||
|
</PageTransition>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="/contact"
|
||||||
|
component={() => (
|
||||||
|
<PageTransition>
|
||||||
|
<ContactPage />
|
||||||
|
</PageTransition>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="/project/raycaster"
|
||||||
|
component={() => (
|
||||||
|
<PageTransition>
|
||||||
|
<RaycasterPage />
|
||||||
|
</PageTransition>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="/project/raytracer"
|
||||||
|
component={() => (
|
||||||
|
<PageTransition>
|
||||||
|
<RaytracerPage />
|
||||||
|
</PageTransition>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="/project/emulator"
|
||||||
|
component={() => (
|
||||||
|
<PageTransition>
|
||||||
|
<EmulatorPage />
|
||||||
|
</PageTransition>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Route>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,136 +0,0 @@
|
||||||
import type { Metadata } from "next";
|
|
||||||
import Link from "next/link";
|
|
||||||
import { ArrowRight } from "lucide-react";
|
|
||||||
import { values, aboutPage } from "@/data/about";
|
|
||||||
import { site } from "@/data/site";
|
|
||||||
import { Icon } from "@/lib/icons";
|
|
||||||
|
|
||||||
export const metadata: Metadata = aboutPage.metadata;
|
|
||||||
|
|
||||||
export default function AboutPage() {
|
|
||||||
return (
|
|
||||||
<main className="min-h-screen bg-deep-space">
|
|
||||||
{/* Header */}
|
|
||||||
<section className="pt-32 pb-20 px-[5vw] bg-charcoal">
|
|
||||||
<div className="max-w-[1200px] mx-auto space-y-6">
|
|
||||||
<p className="section-label">{aboutPage.label}</p>
|
|
||||||
<h1
|
|
||||||
className="font-display font-bold text-text-primary leading-[0.9] tracking-tight"
|
|
||||||
style={{ fontSize: "clamp(2.5rem, 8vw, 5rem)" }}
|
|
||||||
>
|
|
||||||
{aboutPage.pageTitle}
|
|
||||||
</h1>
|
|
||||||
<p className="text-text-secondary max-w-2xl text-lg leading-relaxed">
|
|
||||||
{aboutPage.pageSubtitle}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<section className="py-20 md:py-32 px-[5vw]">
|
|
||||||
<div className="max-w-[1200px] mx-auto grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-16">
|
|
||||||
<div className="space-y-8">
|
|
||||||
<h2 className="font-display font-semibold text-text-primary text-2xl tracking-tight">
|
|
||||||
{aboutPage.philosophyTitle}
|
|
||||||
</h2>
|
|
||||||
<p className="text-text-secondary leading-relaxed">
|
|
||||||
{aboutPage.philosophyText[0]}
|
|
||||||
</p>
|
|
||||||
<p className="text-text-secondary leading-relaxed">
|
|
||||||
{aboutPage.philosophyText[1]}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2 className="font-display font-semibold text-text-primary text-2xl tracking-tight pt-8">
|
|
||||||
{aboutPage.backgroundTitle}
|
|
||||||
</h2>
|
|
||||||
<p className="text-text-secondary leading-relaxed">
|
|
||||||
{aboutPage.backgroundText[0]}
|
|
||||||
</p>
|
|
||||||
<p className="text-text-secondary leading-relaxed">
|
|
||||||
{aboutPage.backgroundText[1]}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="pt-4">
|
|
||||||
<Link
|
|
||||||
href="/hobbies"
|
|
||||||
className="inline-flex items-center gap-2 text-amber hover:text-amber-hover transition-colors group"
|
|
||||||
>
|
|
||||||
<span className="text-link">
|
|
||||||
{aboutPage.linkText}
|
|
||||||
</span>
|
|
||||||
<ArrowRight
|
|
||||||
size={18}
|
|
||||||
className="group-hover:translate-x-1 transition-transform"
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-8">
|
|
||||||
<div className="border border-warm-grey p-6 space-y-4">
|
|
||||||
<h3 className="font-display font-medium text-text-primary">
|
|
||||||
{aboutPage.sidebarFocusTitle}
|
|
||||||
</h3>
|
|
||||||
<ul className="space-y-2 text-text-secondary text-sm">
|
|
||||||
{aboutPage.sidebarFocusItems.map((item) => (
|
|
||||||
<li key={item}>{item}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border border-warm-grey p-6 space-y-4">
|
|
||||||
<h3 className="font-display font-medium text-text-primary">
|
|
||||||
{aboutPage.sidebarLocationTitle}
|
|
||||||
</h3>
|
|
||||||
<p className="text-text-secondary text-sm">
|
|
||||||
{site.location}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border border-warm-grey p-6 space-y-4">
|
|
||||||
<h3 className="font-display font-medium text-text-primary">
|
|
||||||
{aboutPage.sidebarHobbiesTitle}
|
|
||||||
</h3>
|
|
||||||
<ul className="space-y-2 text-text-secondary text-sm">
|
|
||||||
{aboutPage.sidebarHobbiesItems.map((item) => (
|
|
||||||
<li key={item}>{item}</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
<Link
|
|
||||||
href="/hobbies"
|
|
||||||
className="text-link text-amber text-sm"
|
|
||||||
>
|
|
||||||
{aboutPage.sidebarHobbiesLink}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Values */}
|
|
||||||
<section className="py-20 md:py-32 px-[5vw] bg-charcoal">
|
|
||||||
<div className="max-w-[1200px] mx-auto">
|
|
||||||
<p className="section-label mb-12">{aboutPage.valuesTitle}</p>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
|
|
||||||
{values.map((value) => (
|
|
||||||
<div key={value.title} className="space-y-6">
|
|
||||||
<div className="w-10 h-10 flex items-center justify-center border border-warm-grey">
|
|
||||||
<Icon name={value.icon} size={20} className="text-amber" />
|
|
||||||
</div>
|
|
||||||
<h3 className="font-display font-semibold text-text-primary text-2xl tracking-tight">
|
|
||||||
{value.title}
|
|
||||||
</h3>
|
|
||||||
<p className="text-text-secondary leading-relaxed">
|
|
||||||
{value.text}
|
|
||||||
</p>
|
|
||||||
<p className="font-display text-text-primary italic border-l-2 border-amber pl-4">
|
|
||||||
“{value.quote}”
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
import type { Metadata } from "next";
|
|
||||||
import { site } from "@/data/site";
|
|
||||||
import { contactContent, contactPage } from "@/data/contact";
|
|
||||||
import { Mail } from "lucide-react";
|
|
||||||
|
|
||||||
export const metadata: Metadata = contactPage.metadata;
|
|
||||||
|
|
||||||
export default function ContactPage() {
|
|
||||||
return (
|
|
||||||
<main className="min-h-screen bg-deep-space">
|
|
||||||
{/* Header */}
|
|
||||||
<section className="pt-32 pb-20 px-[5vw] bg-charcoal">
|
|
||||||
<div className="max-w-[1200px] mx-auto space-y-6">
|
|
||||||
<p className="section-label">{contactPage.label}</p>
|
|
||||||
<h1
|
|
||||||
className="font-display font-bold text-text-primary leading-[0.9] tracking-tight"
|
|
||||||
style={{ fontSize: "clamp(2.5rem, 8vw, 5rem)" }}
|
|
||||||
>
|
|
||||||
{contactContent.heading}
|
|
||||||
</h1>
|
|
||||||
<p className="text-text-secondary max-w-2xl text-lg leading-relaxed">
|
|
||||||
{contactPage.pageSubtitle}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<section className="py-20 md:py-32 px-[5vw]">
|
|
||||||
<div className="max-w-[1200px] mx-auto grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-16">
|
|
||||||
<div className="space-y-8">
|
|
||||||
<h2 className="font-display font-semibold text-text-primary text-2xl tracking-tight">
|
|
||||||
{contactPage.contentTitle}
|
|
||||||
</h2>
|
|
||||||
<p className="text-text-secondary leading-relaxed">
|
|
||||||
{contactContent.text}
|
|
||||||
</p>
|
|
||||||
<p className="text-text-secondary leading-relaxed">
|
|
||||||
{contactPage.contentPlaceholder1}
|
|
||||||
</p>
|
|
||||||
<p className="text-text-secondary leading-relaxed">
|
|
||||||
{contactPage.contentPlaceholder2}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="pt-4">
|
|
||||||
<a
|
|
||||||
href={`mailto:${site.email}`}
|
|
||||||
className="inline-flex items-center gap-3 px-6 py-3 bg-amber text-deep-space font-display font-medium hover:bg-amber-hover transition-colors"
|
|
||||||
>
|
|
||||||
<Mail size={18} />
|
|
||||||
{contactContent.cta}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-8">
|
|
||||||
<div className="border border-warm-grey p-6 space-y-4">
|
|
||||||
<h3 className="font-display font-medium text-text-primary">
|
|
||||||
{contactPage.sidebarEmailTitle}
|
|
||||||
</h3>
|
|
||||||
<a
|
|
||||||
href={`mailto:${site.email}`}
|
|
||||||
className="text-link text-amber font-mono text-sm"
|
|
||||||
>
|
|
||||||
{site.email}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border border-warm-grey p-6 space-y-4">
|
|
||||||
<h3 className="font-display font-medium text-text-primary">
|
|
||||||
{contactPage.sidebarSocialTitle}
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-2 text-sm">
|
|
||||||
<a
|
|
||||||
href={site.github}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="block text-text-secondary hover:text-amber transition-colors"
|
|
||||||
>
|
|
||||||
{contactPage.sidebarSocialGithub}
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href={site.linkedin}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="block text-text-secondary hover:text-amber transition-colors"
|
|
||||||
>
|
|
||||||
{contactPage.sidebarSocialLinkedin}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
import type { Metadata } from "next";
|
|
||||||
import { hobbies, hobbiesPage } from "@/data/hobbies";
|
|
||||||
import { Icon } from "@/lib/icons";
|
|
||||||
|
|
||||||
export const metadata: Metadata = hobbiesPage.metadata;
|
|
||||||
|
|
||||||
export default function HobbiesPage() {
|
|
||||||
return (
|
|
||||||
<main className="min-h-screen bg-deep-space">
|
|
||||||
{/* Header */}
|
|
||||||
<section className="pt-32 pb-20 px-[5vw] bg-charcoal">
|
|
||||||
<div className="max-w-[1200px] mx-auto space-y-6">
|
|
||||||
<p className="section-label">{hobbiesPage.label}</p>
|
|
||||||
<h1
|
|
||||||
className="font-display font-bold text-text-primary leading-[0.9] tracking-tight"
|
|
||||||
style={{ fontSize: "clamp(2.5rem, 8vw, 5rem)" }}
|
|
||||||
>
|
|
||||||
{hobbiesPage.pageTitle}
|
|
||||||
</h1>
|
|
||||||
<p className="text-text-secondary max-w-2xl text-lg leading-relaxed">
|
|
||||||
{hobbiesPage.pageSubtitle}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Hobbies Content */}
|
|
||||||
<section className="py-20 md:py-32 px-[5vw]">
|
|
||||||
<div className="max-w-[1200px] mx-auto space-y-24">
|
|
||||||
{hobbies.map((hobby, index) => {
|
|
||||||
const isEven = index % 2 === 0;
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={hobby.id}
|
|
||||||
className={`grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-12 items-start ${
|
|
||||||
isEven ? "" : "lg:grid-cols-[2fr_1fr]"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div className={`space-y-6 ${isEven ? "" : "lg:order-2"}`}>
|
|
||||||
<div className="w-12 h-12 flex items-center justify-center border border-warm-grey">
|
|
||||||
<Icon name={hobby.icon} size={24} className="text-amber" />
|
|
||||||
</div>
|
|
||||||
<h2 className="font-display font-semibold text-text-primary text-3xl tracking-tight">
|
|
||||||
{hobby.title}
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div className={`space-y-6 ${isEven ? "" : "lg:order-1"}`}>
|
|
||||||
{hobby.description.map((paragraph, i) => (
|
|
||||||
<p key={i} className="text-text-secondary leading-relaxed">
|
|
||||||
{paragraph}
|
|
||||||
</p>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Quote */}
|
|
||||||
<section className="py-20 px-[5vw] bg-charcoal">
|
|
||||||
<div className="max-w-[800px] mx-auto text-center space-y-6">
|
|
||||||
<p className="font-display text-text-primary text-2xl md:text-3xl italic leading-relaxed">
|
|
||||||
“{hobbiesPage.quote}”
|
|
||||||
</p>
|
|
||||||
<p className="text-text-secondary text-sm font-mono">
|
|
||||||
{hobbiesPage.quoteAuthor}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
import type { Metadata } from "next";
|
|
||||||
import { Space_Grotesk, Inter, IBM_Plex_Mono } from "next/font/google";
|
|
||||||
import { Analytics } from "@vercel/analytics/next";
|
|
||||||
import { SpeedInsights } from "@vercel/speed-insights/next";
|
|
||||||
import "./globals.css";
|
|
||||||
import Navigation from "@/components/Navigation";
|
|
||||||
import Footer from "@/components/Footer";
|
|
||||||
import PreviewBanner from "@/components/PreviewBanner";
|
|
||||||
|
|
||||||
const spaceGrotesk = Space_Grotesk({
|
|
||||||
subsets: ["latin"],
|
|
||||||
weight: ["400", "500", "600", "700"],
|
|
||||||
variable: "--font-space-grotesk",
|
|
||||||
display: "swap",
|
|
||||||
});
|
|
||||||
|
|
||||||
const inter = Inter({
|
|
||||||
subsets: ["latin"],
|
|
||||||
weight: ["400", "500", "600"],
|
|
||||||
variable: "--font-inter",
|
|
||||||
display: "swap",
|
|
||||||
preload: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const ibmPlexMono = IBM_Plex_Mono({
|
|
||||||
subsets: ["latin"],
|
|
||||||
weight: ["400", "500"],
|
|
||||||
variable: "--font-ibm-plex-mono",
|
|
||||||
display: "swap",
|
|
||||||
preload: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
|
||||||
title: {
|
|
||||||
default: "Mike Karl — Portfolio",
|
|
||||||
template: "%s — Mike Karl",
|
|
||||||
},
|
|
||||||
description:
|
|
||||||
"Portfolio von Mike Karl — Systementwickler & Creative Technologist. Projekte aus Systems Programming, Computer Graphics und Low-Level-Entwicklung.",
|
|
||||||
icons: {
|
|
||||||
icon: "/favicon.svg",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function RootLayout({
|
|
||||||
children,
|
|
||||||
}: Readonly<{
|
|
||||||
children: React.ReactNode;
|
|
||||||
}>) {
|
|
||||||
return (
|
|
||||||
<html
|
|
||||||
lang="de"
|
|
||||||
data-scroll-behavior="smooth"
|
|
||||||
className={`${spaceGrotesk.variable} ${inter.variable} ${ibmPlexMono.variable}`}
|
|
||||||
>
|
|
||||||
<body className="min-h-screen bg-deep-space text-text-primary antialiased">
|
|
||||||
<PreviewBanner />
|
|
||||||
<Navigation />
|
|
||||||
{children}
|
|
||||||
<Footer />
|
|
||||||
<Analytics />
|
|
||||||
<SpeedInsights />
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
import type { Metadata } from "next";
|
|
||||||
import Link from "next/link";
|
|
||||||
import { projects, projectsPage } from "@/data/projects";
|
|
||||||
import { ArrowRight } from "lucide-react";
|
|
||||||
|
|
||||||
export const metadata: Metadata = projectsPage.metadata;
|
|
||||||
|
|
||||||
export default function ProjectsPage() {
|
|
||||||
return (
|
|
||||||
<main className="min-h-screen bg-deep-space">
|
|
||||||
{/* Header */}
|
|
||||||
<section className="pt-32 pb-20 px-[5vw] bg-charcoal">
|
|
||||||
<div className="max-w-[1200px] mx-auto space-y-6">
|
|
||||||
<p className="section-label">{projectsPage.pageLabel}</p>
|
|
||||||
<h1
|
|
||||||
className="font-display font-bold text-text-primary leading-[0.9] tracking-tight"
|
|
||||||
style={{ fontSize: "clamp(2.5rem, 8vw, 5rem)" }}
|
|
||||||
>
|
|
||||||
{projectsPage.pageTitle}
|
|
||||||
</h1>
|
|
||||||
<p className="text-text-secondary max-w-2xl text-lg leading-relaxed">
|
|
||||||
{projectsPage.subtitle}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Project Grid */}
|
|
||||||
<section className="py-20 md:py-32 px-[5vw]">
|
|
||||||
<div className="max-w-[1200px] mx-auto space-y-16">
|
|
||||||
{projects.map((project) => (
|
|
||||||
<div
|
|
||||||
key={project.id}
|
|
||||||
className="grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-12 items-start border-t border-warm-grey pt-12"
|
|
||||||
>
|
|
||||||
<div className="border border-warm-grey overflow-hidden group/image">
|
|
||||||
<img
|
|
||||||
src={project.image}
|
|
||||||
alt={project.title}
|
|
||||||
className="w-full h-auto group-hover/image:scale-105 transition-transform duration-700 ease-out"
|
|
||||||
loading="lazy"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{project.tags.map((tag) => (
|
|
||||||
<span key={tag} className="chip">
|
|
||||||
{tag}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<h2 className="font-display font-semibold text-text-primary text-3xl tracking-tight">
|
|
||||||
{project.title}
|
|
||||||
</h2>
|
|
||||||
<p className="text-text-secondary leading-relaxed">
|
|
||||||
{project.description}
|
|
||||||
</p>
|
|
||||||
<p className="text-text-secondary leading-relaxed">
|
|
||||||
{projectsPage.detailText}
|
|
||||||
</p>
|
|
||||||
<Link
|
|
||||||
href={project.link}
|
|
||||||
className="inline-flex items-center gap-2 text-amber hover:text-amber-hover transition-colors group"
|
|
||||||
>
|
|
||||||
<span className="text-link">{projectsPage.linkText}</span>
|
|
||||||
<ArrowRight
|
|
||||||
size={18}
|
|
||||||
className="group-hover:translate-x-1 transition-transform"
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
import PageTransition from "@/components/PageTransition";
|
|
||||||
|
|
||||||
export default function Template({ children }: { children: React.ReactNode }) {
|
|
||||||
return <PageTransition>{children}</PageTransition>;
|
|
||||||
}
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
import type { Metadata } from "next";
|
|
||||||
import { timeline, timelinePage } from "@/data/timeline";
|
|
||||||
|
|
||||||
export const metadata: Metadata = timelinePage.metadata;
|
|
||||||
|
|
||||||
export default function TimelinePage() {
|
|
||||||
return (
|
|
||||||
<main className="min-h-screen bg-deep-space">
|
|
||||||
{/* Header */}
|
|
||||||
<section className="pt-32 pb-20 px-[5vw] bg-charcoal">
|
|
||||||
<div className="max-w-[1200px] mx-auto space-y-6">
|
|
||||||
<p className="section-label">{timelinePage.label}</p>
|
|
||||||
<h1
|
|
||||||
className="font-display font-bold text-text-primary leading-[0.9] tracking-tight"
|
|
||||||
style={{ fontSize: "clamp(2.5rem, 8vw, 5rem)" }}
|
|
||||||
>
|
|
||||||
{timelinePage.pageTitle}
|
|
||||||
</h1>
|
|
||||||
<p className="text-text-secondary max-w-2xl text-lg leading-relaxed">
|
|
||||||
{timelinePage.subtitle}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Timeline Content */}
|
|
||||||
<section className="py-20 md:py-32 px-[5vw]">
|
|
||||||
<div className="max-w-[1200px] mx-auto space-y-16">
|
|
||||||
{timeline.map((item) => (
|
|
||||||
<div
|
|
||||||
key={item.year}
|
|
||||||
className="grid grid-cols-1 md:grid-cols-[120px_1fr] gap-8 border-t border-warm-grey pt-12"
|
|
||||||
>
|
|
||||||
<span className="font-mono text-amber text-xl">{item.year}</span>
|
|
||||||
<div className="space-y-4">
|
|
||||||
<h2 className="font-display font-semibold text-text-primary text-2xl tracking-tight">
|
|
||||||
{item.title}
|
|
||||||
</h2>
|
|
||||||
<p className="text-text-secondary leading-relaxed">
|
|
||||||
{item.description}
|
|
||||||
</p>
|
|
||||||
<p className="text-text-secondary leading-relaxed">
|
|
||||||
{timelinePage.detailText}
|
|
||||||
</p>
|
|
||||||
<div className="flex flex-wrap gap-2 pt-2">
|
|
||||||
{item.tags.map((tag) => (
|
|
||||||
<span key={tag} className="chip">
|
|
||||||
{tag}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -2,12 +2,12 @@ import { site, footerContent } from "../data/site";
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
return (
|
return (
|
||||||
<footer className="border-t border-warm-grey py-8 px-[5vw]">
|
<footer class="border-t border-warm-grey py-8 px-[5vw]">
|
||||||
<div className="max-w-[1200px] mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
|
<div class="max-w-[1200px] mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
|
||||||
<p className="text-sm text-text-secondary">
|
<p class="text-sm text-text-secondary">
|
||||||
{footerContent.copyright(new Date().getFullYear(), site.name)}
|
{footerContent.copyright(new Date().getFullYear(), site.name)}
|
||||||
</p>
|
</p>
|
||||||
<p className="text-sm text-text-secondary font-mono">
|
<p class="text-sm text-text-secondary font-mono">
|
||||||
{footerContent.builtWith}
|
{footerContent.builtWith}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
23
src/components/Layout.tsx
Normal file
23
src/components/Layout.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { onMount } from "solid-js";
|
||||||
|
import { inject } from "@vercel/analytics";
|
||||||
|
import { injectSpeedInsights } from "@vercel/speed-insights";
|
||||||
|
import type { RouteSectionProps } from "@solidjs/router";
|
||||||
|
import Navigation from "./Navigation";
|
||||||
|
import Footer from "./Footer";
|
||||||
|
import PreviewBanner from "./PreviewBanner";
|
||||||
|
|
||||||
|
export default function Layout(props: RouteSectionProps) {
|
||||||
|
onMount(() => {
|
||||||
|
inject();
|
||||||
|
injectSpeedInsights();
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<PreviewBanner />
|
||||||
|
<Navigation />
|
||||||
|
{props.children}
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,71 +1,70 @@
|
||||||
"use client";
|
import { createSignal, createEffect, onMount, onCleanup, For } from "solid-js";
|
||||||
|
import { A, useLocation } from "@solidjs/router";
|
||||||
import { useState, useEffect, useRef, useCallback } from "react";
|
|
||||||
import Link from "next/link";
|
|
||||||
import { usePathname } from "next/navigation";
|
|
||||||
import gsap from "gsap";
|
import gsap from "gsap";
|
||||||
import { Menu, X } from "lucide-react";
|
import { Menu, X } from "lucide-solid";
|
||||||
import { site, navLinks, socialLinks } from "../data/site";
|
import { site, navLinks, socialLinks } from "../data/site";
|
||||||
import { Icon } from "@/lib/icons";
|
import { Icon } from "@/lib/icons";
|
||||||
|
|
||||||
export default function Navigation() {
|
export default function Navigation() {
|
||||||
const [scrolled, setScrolled] = useState(false);
|
const [scrolled, setScrolled] = createSignal(false);
|
||||||
const [mobileOpen, setMobileOpen] = useState(false);
|
const [mobileOpen, setMobileOpen] = createSignal(false);
|
||||||
const pathname = usePathname();
|
const location = useLocation();
|
||||||
const menuRef = useRef<HTMLDivElement>(null);
|
|
||||||
const backdropRef = useRef<HTMLDivElement>(null);
|
|
||||||
const linksRef = useRef<HTMLUListElement>(null);
|
|
||||||
const socialsRef = useRef<HTMLDivElement>(null);
|
|
||||||
const timelineRef = useRef<gsap.core.Timeline | null>(null);
|
|
||||||
const prefersReducedMotion = useRef(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
let menuRef: HTMLDivElement | undefined;
|
||||||
prefersReducedMotion.current = window.matchMedia(
|
let backdropRef: HTMLDivElement | undefined;
|
||||||
|
let linksRef: HTMLUListElement | undefined;
|
||||||
|
let socialsRef: HTMLDivElement | undefined;
|
||||||
|
let timelineRef: gsap.core.Timeline | null = null;
|
||||||
|
let prefersReducedMotion = false;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
prefersReducedMotion = window.matchMedia(
|
||||||
"(prefers-reduced-motion: reduce)"
|
"(prefers-reduced-motion: reduce)"
|
||||||
).matches;
|
).matches;
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handleScroll = () => setScrolled(window.scrollY > 50);
|
const handleScroll = () => setScrolled(window.scrollY > 50);
|
||||||
window.addEventListener("scroll", handleScroll, { passive: true });
|
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||||
handleScroll();
|
handleScroll();
|
||||||
return () => window.removeEventListener("scroll", handleScroll);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
onCleanup(() => window.removeEventListener("scroll", handleScroll));
|
||||||
|
});
|
||||||
|
|
||||||
|
createEffect(() => {
|
||||||
|
location.pathname;
|
||||||
setMobileOpen(false);
|
setMobileOpen(false);
|
||||||
window.scrollTo(0, 0);
|
window.scrollTo(0, 0);
|
||||||
}, [pathname]);
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
createEffect(() => {
|
||||||
if (mobileOpen) {
|
if (mobileOpen()) {
|
||||||
document.body.style.overflow = "hidden";
|
document.body.style.overflow = "hidden";
|
||||||
} else {
|
} else {
|
||||||
document.body.style.overflow = "";
|
document.body.style.overflow = "";
|
||||||
}
|
}
|
||||||
return () => {
|
});
|
||||||
document.body.style.overflow = "";
|
|
||||||
};
|
|
||||||
}, [mobileOpen]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
onCleanup(() => {
|
||||||
|
document.body.style.overflow = "";
|
||||||
|
});
|
||||||
|
|
||||||
|
createEffect(() => {
|
||||||
const handleKeyDown = (e: KeyboardEvent) => {
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
if (e.key === "Escape" && mobileOpen) {
|
if (e.key === "Escape" && mobileOpen()) {
|
||||||
setMobileOpen(false);
|
setMobileOpen(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
window.addEventListener("keydown", handleKeyDown);
|
window.addEventListener("keydown", handleKeyDown);
|
||||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
onCleanup(() => window.removeEventListener("keydown", handleKeyDown));
|
||||||
}, [mobileOpen]);
|
});
|
||||||
|
|
||||||
const animateOpen = useCallback(() => {
|
const animateOpen = () => {
|
||||||
const menu = menuRef.current;
|
const menu = menuRef;
|
||||||
const backdrop = backdropRef.current;
|
const backdrop = backdropRef;
|
||||||
const links = linksRef.current;
|
const links = linksRef;
|
||||||
const socials = socialsRef.current;
|
const socials = socialsRef;
|
||||||
if (!menu || !backdrop || !links || !socials) return;
|
if (!menu || !backdrop || !links || !socials) return;
|
||||||
|
|
||||||
if (prefersReducedMotion.current) {
|
if (prefersReducedMotion) {
|
||||||
gsap.set(menu, { opacity: 1, y: 0 });
|
gsap.set(menu, { opacity: 1, y: 0 });
|
||||||
gsap.set(backdrop, { opacity: 1 });
|
gsap.set(backdrop, { opacity: 1 });
|
||||||
gsap.set([...links.children, ...socials.children], { opacity: 1, y: 0 });
|
gsap.set([...links.children, ...socials.children], { opacity: 1, y: 0 });
|
||||||
|
|
@ -73,7 +72,7 @@ export default function Navigation() {
|
||||||
}
|
}
|
||||||
|
|
||||||
const tl = gsap.timeline();
|
const tl = gsap.timeline();
|
||||||
timelineRef.current = tl;
|
timelineRef = tl;
|
||||||
|
|
||||||
tl.set(menu, { display: "block" })
|
tl.set(menu, { display: "block" })
|
||||||
.fromTo(
|
.fromTo(
|
||||||
|
|
@ -111,20 +110,20 @@ export default function Navigation() {
|
||||||
},
|
},
|
||||||
"-=0.15"
|
"-=0.15"
|
||||||
);
|
);
|
||||||
}, []);
|
};
|
||||||
|
|
||||||
const animateClose = useCallback(() => {
|
const animateClose = () => {
|
||||||
const menu = menuRef.current;
|
const menu = menuRef;
|
||||||
const backdrop = backdropRef.current;
|
const backdrop = backdropRef;
|
||||||
const links = linksRef.current;
|
const links = linksRef;
|
||||||
const socials = socialsRef.current;
|
const socials = socialsRef;
|
||||||
if (!menu || !backdrop || !links || !socials) return;
|
if (!menu || !backdrop || !links || !socials) return;
|
||||||
|
|
||||||
if (timelineRef.current) {
|
if (timelineRef) {
|
||||||
timelineRef.current.kill();
|
timelineRef.kill();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (prefersReducedMotion.current) {
|
if (prefersReducedMotion) {
|
||||||
gsap.set(menu, { display: "none", opacity: 0 });
|
gsap.set(menu, { display: "none", opacity: 0 });
|
||||||
gsap.set(backdrop, { opacity: 0, display: "none" });
|
gsap.set(backdrop, { opacity: 0, display: "none" });
|
||||||
return;
|
return;
|
||||||
|
|
@ -151,132 +150,134 @@ export default function Navigation() {
|
||||||
)
|
)
|
||||||
.to(menu, { opacity: 0, y: -8, duration: 0.2, ease: "power2.in" }, "-=0.08")
|
.to(menu, { opacity: 0, y: -8, duration: 0.2, ease: "power2.in" }, "-=0.08")
|
||||||
.to(backdrop, { opacity: 0, duration: 0.2, ease: "power2.in" }, "<");
|
.to(backdrop, { opacity: 0, duration: 0.2, ease: "power2.in" }, "<");
|
||||||
}, []);
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
createEffect(() => {
|
||||||
if (mobileOpen) {
|
if (mobileOpen()) {
|
||||||
animateOpen();
|
animateOpen();
|
||||||
} else {
|
} else {
|
||||||
animateClose();
|
animateClose();
|
||||||
}
|
}
|
||||||
}, [mobileOpen, animateOpen, animateClose]);
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header
|
<header
|
||||||
className={`fixed top-0 left-0 right-0 z-50 transition-colors duration-300 [will-change:transform] ${
|
class={`fixed top-0 left-0 right-0 z-50 transition-colors duration-300 [will-change:transform] ${
|
||||||
scrolled
|
scrolled()
|
||||||
? "bg-deep-space/95 border-b border-warm-grey/50"
|
? "bg-deep-space/95 border-b border-warm-grey/50"
|
||||||
: "bg-transparent border-b border-transparent"
|
: "bg-transparent border-b border-transparent"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<nav className="max-w-[1400px] mx-auto px-[5vw] py-5 flex items-center justify-between">
|
<nav class="max-w-[1400px] mx-auto px-[5vw] py-5 flex items-center justify-between">
|
||||||
<Link
|
<A
|
||||||
href="/"
|
href="/"
|
||||||
className="font-display font-bold text-text-primary tracking-tight text-lg"
|
class="font-display font-bold text-text-primary tracking-tight text-lg"
|
||||||
>
|
>
|
||||||
{site.name.toUpperCase()}
|
{site.name.toUpperCase()}
|
||||||
</Link>
|
</A>
|
||||||
|
|
||||||
{/* Desktop Nav */}
|
<div class="hidden md:flex items-center gap-8">
|
||||||
<div className="hidden md:flex items-center gap-8">
|
<ul class="flex items-center gap-6">
|
||||||
<ul className="flex items-center gap-6">
|
<For each={navLinks}>
|
||||||
{navLinks.map((link) => {
|
{(link) => {
|
||||||
const isActive = pathname === link.href;
|
const isActive = () => location.pathname === link.href;
|
||||||
return (
|
return (
|
||||||
<li key={link.href}>
|
<li>
|
||||||
<Link
|
<A
|
||||||
href={link.href}
|
href={link.href}
|
||||||
className={`text-sm transition-colors ${
|
class={`text-sm transition-colors ${
|
||||||
isActive
|
isActive()
|
||||||
? "text-text-primary"
|
? "text-text-primary"
|
||||||
: "text-text-secondary hover:text-text-primary"
|
: "text-text-secondary hover:text-text-primary"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{link.label}
|
{link.label}
|
||||||
</Link>
|
</A>
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
})}
|
}}
|
||||||
|
</For>
|
||||||
</ul>
|
</ul>
|
||||||
<div className="flex items-center gap-4 border-l border-warm-grey pl-6">
|
<div class="flex items-center gap-4 border-l border-warm-grey pl-6">
|
||||||
{socialLinks.map((link) => (
|
<For each={socialLinks}>
|
||||||
|
{(link) => (
|
||||||
<a
|
<a
|
||||||
key={link.label}
|
|
||||||
href={link.href}
|
href={link.href}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
aria-label={link.label}
|
aria-label={link.label}
|
||||||
className="text-text-secondary hover:text-amber transition-colors"
|
class="text-text-secondary hover:text-amber transition-colors"
|
||||||
>
|
>
|
||||||
<Icon name={link.icon} size={18} />
|
<Icon name={link.icon} size={18} />
|
||||||
</a>
|
</a>
|
||||||
))}
|
)}
|
||||||
|
</For>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Mobile Menu Button */}
|
|
||||||
<button
|
<button
|
||||||
className="md:hidden relative w-6 h-6"
|
class="md:hidden relative w-6 h-6"
|
||||||
onClick={() => setMobileOpen(!mobileOpen)}
|
onClick={() => setMobileOpen(!mobileOpen())}
|
||||||
aria-label={mobileOpen ? "Close menu" : "Open menu"}
|
aria-label={mobileOpen() ? "Close menu" : "Open menu"}
|
||||||
aria-expanded={mobileOpen}
|
aria-expanded={mobileOpen()}
|
||||||
>
|
>
|
||||||
<Menu
|
<Menu
|
||||||
size={24}
|
size={24}
|
||||||
className={`absolute inset-0 text-text-primary transition-opacity duration-200 ease-out ${
|
class={`absolute inset-0 text-text-primary transition-opacity duration-200 ease-out ${
|
||||||
mobileOpen ? "opacity-0" : "opacity-100"
|
mobileOpen() ? "opacity-0" : "opacity-100"
|
||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
<X
|
<X
|
||||||
size={24}
|
size={24}
|
||||||
className={`absolute inset-0 text-text-primary transition-opacity duration-200 ease-out ${
|
class={`absolute inset-0 text-text-primary transition-opacity duration-200 ease-out ${
|
||||||
mobileOpen ? "opacity-100" : "opacity-0"
|
mobileOpen() ? "opacity-100" : "opacity-0"
|
||||||
}`}
|
}`}
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{/* Backdrop */}
|
|
||||||
<div
|
<div
|
||||||
ref={backdropRef}
|
ref={backdropRef}
|
||||||
className="fixed inset-0 bg-black/40 backdrop-blur-sm z-40 md:hidden"
|
class="fixed inset-0 bg-black/40 backdrop-blur-sm z-40 md:hidden"
|
||||||
style={{ display: "none", opacity: 0 }}
|
style={{ display: "none", opacity: 0 }}
|
||||||
onClick={() => setMobileOpen(false)}
|
onClick={() => setMobileOpen(false)}
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Mobile Menu */}
|
|
||||||
<div
|
<div
|
||||||
ref={menuRef}
|
ref={menuRef}
|
||||||
className="md:hidden bg-deep-space/98 border-t border-warm-grey/50 px-[5vw] py-8 z-40"
|
class="md:hidden bg-deep-space/98 border-t border-warm-grey/50 px-[5vw] py-8 z-40"
|
||||||
style={{ display: "none", opacity: 0 }}
|
style={{ display: "none", opacity: 0 }}
|
||||||
>
|
>
|
||||||
<ul ref={linksRef} className="space-y-4 mb-8">
|
<ul ref={linksRef} class="space-y-4 mb-8">
|
||||||
{navLinks.map((link) => (
|
<For each={navLinks}>
|
||||||
<li key={link.href}>
|
{(link) => (
|
||||||
<Link
|
<li>
|
||||||
|
<A
|
||||||
href={link.href}
|
href={link.href}
|
||||||
className="block text-lg text-text-primary"
|
class="block text-lg text-text-primary"
|
||||||
onClick={() => setMobileOpen(false)}
|
onClick={() => setMobileOpen(false)}
|
||||||
>
|
>
|
||||||
{link.label}
|
{link.label}
|
||||||
</Link>
|
</A>
|
||||||
</li>
|
</li>
|
||||||
))}
|
)}
|
||||||
|
</For>
|
||||||
</ul>
|
</ul>
|
||||||
<div ref={socialsRef} className="flex items-center gap-6">
|
<div ref={socialsRef} class="flex items-center gap-6">
|
||||||
{socialLinks.map((link) => (
|
<For each={socialLinks}>
|
||||||
|
{(link) => (
|
||||||
<a
|
<a
|
||||||
key={link.label}
|
|
||||||
href={link.href}
|
href={link.href}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
aria-label={link.label}
|
aria-label={link.label}
|
||||||
className="text-text-secondary hover:text-amber transition-colors"
|
class="text-text-secondary hover:text-amber transition-colors"
|
||||||
>
|
>
|
||||||
<Icon name={link.icon} size={20} />
|
<Icon name={link.icon} size={20} />
|
||||||
</a>
|
</a>
|
||||||
))}
|
)}
|
||||||
|
</For>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,11 @@
|
||||||
"use client";
|
import { onMount } from "solid-js";
|
||||||
|
|
||||||
import { useLayoutEffect, useRef } from "react";
|
|
||||||
import gsap from "gsap";
|
import gsap from "gsap";
|
||||||
|
|
||||||
export default function PageTransition({
|
export default function PageTransition(props: { children: import("solid-js").JSX.Element }) {
|
||||||
children,
|
let containerRef: HTMLDivElement | undefined;
|
||||||
}: {
|
|
||||||
children: React.ReactNode;
|
|
||||||
}) {
|
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
useLayoutEffect(() => {
|
onMount(() => {
|
||||||
const el = containerRef.current;
|
const el = containerRef;
|
||||||
if (!el) return;
|
if (!el) return;
|
||||||
|
|
||||||
const prefersReducedMotion = window.matchMedia(
|
const prefersReducedMotion = window.matchMedia(
|
||||||
|
|
@ -32,7 +26,7 @@ export default function PageTransition({
|
||||||
});
|
});
|
||||||
|
|
||||||
return () => ctx.revert();
|
return () => ctx.revert();
|
||||||
}, []);
|
});
|
||||||
|
|
||||||
return <div ref={containerRef}>{children}</div>;
|
return <div ref={containerRef}>{props.children}</div>;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,4 @@
|
||||||
"use client";
|
import { onMount, onCleanup } from "solid-js";
|
||||||
|
|
||||||
import { useEffect, useRef } from "react";
|
|
||||||
|
|
||||||
interface Particle {
|
interface Particle {
|
||||||
x: number;
|
x: number;
|
||||||
|
|
@ -11,12 +9,12 @@ interface Particle {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ParticleGrid() {
|
export default function ParticleGrid() {
|
||||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
let canvasRef: HTMLCanvasElement | undefined;
|
||||||
const animRef = useRef<number>(0);
|
let animRef = 0;
|
||||||
const mouseRef = useRef({ x: -1000, y: -1000 });
|
const mouseRef = { x: -1000, y: -1000 };
|
||||||
|
|
||||||
useEffect(() => {
|
onMount(() => {
|
||||||
const canvas = canvasRef.current;
|
const canvas = canvasRef;
|
||||||
if (!canvas) return;
|
if (!canvas) return;
|
||||||
const ctx = canvas.getContext("2d");
|
const ctx = canvas.getContext("2d");
|
||||||
if (!ctx) return;
|
if (!ctx) return;
|
||||||
|
|
@ -30,6 +28,7 @@ export default function ParticleGrid() {
|
||||||
const h = window.innerHeight;
|
const h = window.innerHeight;
|
||||||
canvas.width = w * dpr;
|
canvas.width = w * dpr;
|
||||||
canvas.height = h * dpr;
|
canvas.height = h * dpr;
|
||||||
|
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||||
ctx.scale(dpr, dpr);
|
ctx.scale(dpr, dpr);
|
||||||
|
|
||||||
const spacing = Math.min(w, h) / 35;
|
const spacing = Math.min(w, h) / 35;
|
||||||
|
|
@ -56,7 +55,7 @@ export default function ParticleGrid() {
|
||||||
const h = window.innerHeight;
|
const h = window.innerHeight;
|
||||||
ctx.clearRect(0, 0, w, h);
|
ctx.clearRect(0, 0, w, h);
|
||||||
|
|
||||||
const mouse = mouseRef.current;
|
const mouse = mouseRef;
|
||||||
const radius = 180;
|
const radius = 180;
|
||||||
|
|
||||||
for (const p of particles) {
|
for (const p of particles) {
|
||||||
|
|
@ -86,16 +85,18 @@ export default function ParticleGrid() {
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
}
|
}
|
||||||
|
|
||||||
animRef.current = requestAnimationFrame(animate);
|
animRef = requestAnimationFrame(animate);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleMouseMove = (e: MouseEvent) => {
|
const handleMouseMove = (e: MouseEvent) => {
|
||||||
const rect = canvas.getBoundingClientRect();
|
const rect = canvas.getBoundingClientRect();
|
||||||
mouseRef.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
|
mouseRef.x = e.clientX - rect.left;
|
||||||
|
mouseRef.y = e.clientY - rect.top;
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleMouseLeave = () => {
|
const handleMouseLeave = () => {
|
||||||
mouseRef.current = { x: -1000, y: -1000 };
|
mouseRef.x = -1000;
|
||||||
|
mouseRef.y = -1000;
|
||||||
};
|
};
|
||||||
|
|
||||||
const isTouchDevice = window.matchMedia("(hover: none)").matches;
|
const isTouchDevice = window.matchMedia("(hover: none)").matches;
|
||||||
|
|
@ -108,21 +109,21 @@ export default function ParticleGrid() {
|
||||||
canvas.addEventListener("mouseleave", handleMouseLeave);
|
canvas.addEventListener("mouseleave", handleMouseLeave);
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {
|
onCleanup(() => {
|
||||||
cancelAnimationFrame(animRef.current);
|
cancelAnimationFrame(animRef);
|
||||||
window.removeEventListener("resize", init);
|
window.removeEventListener("resize", init);
|
||||||
if (!isTouchDevice) {
|
if (!isTouchDevice) {
|
||||||
canvas.removeEventListener("mousemove", handleMouseMove);
|
canvas.removeEventListener("mousemove", handleMouseMove);
|
||||||
canvas.removeEventListener("mouseleave", handleMouseLeave);
|
canvas.removeEventListener("mouseleave", handleMouseLeave);
|
||||||
}
|
}
|
||||||
};
|
});
|
||||||
}, []);
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<canvas
|
<canvas
|
||||||
ref={canvasRef}
|
ref={canvasRef}
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
className="absolute inset-0 w-full h-full"
|
class="absolute inset-0 w-full h-full"
|
||||||
style={{ display: "block" }}
|
style={{ display: "block" }}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
export default function PreviewBanner() {
|
export default function PreviewBanner() {
|
||||||
return (
|
return (
|
||||||
<div className="fixed top-0 left-0 z-[60] pointer-events-none">
|
<div class="fixed top-0 left-0 z-[60] pointer-events-none">
|
||||||
<div className="absolute w-[320px] bg-amber text-deep-space text-center text-sm font-bold font-mono uppercase tracking-widest py-2.5 rotate-[-45deg] top-10 -left-20 shadow-lg">
|
<div class="absolute w-[320px] bg-amber text-deep-space text-center text-sm font-bold font-mono uppercase tracking-widest py-2.5 rotate-[-45deg] top-10 -left-20 shadow-lg">
|
||||||
Preview Build
|
Preview Build
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,6 @@
|
||||||
"use client";
|
import { A, useNavigate } from "@solidjs/router";
|
||||||
|
import { ArrowLeft, ArrowRight } from "lucide-solid";
|
||||||
import Link from "next/link";
|
import { For } from "solid-js";
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
import { ArrowLeft, ArrowRight } from "lucide-react";
|
|
||||||
import { useScrollReveal } from "../hooks/useScrollReveal";
|
import { useScrollReveal } from "../hooks/useScrollReveal";
|
||||||
import { projectLayout } from "../data/projects";
|
import { projectLayout } from "../data/projects";
|
||||||
|
|
||||||
|
|
@ -43,185 +41,160 @@ interface ProjectPageLayoutProps {
|
||||||
nextProject: AdjacentProject;
|
nextProject: AdjacentProject;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ProjectPageLayout({
|
export default function ProjectPageLayout(props: ProjectPageLayoutProps) {
|
||||||
title,
|
const navigate = useNavigate();
|
||||||
subtitle,
|
|
||||||
tags,
|
|
||||||
year,
|
|
||||||
duration,
|
|
||||||
status,
|
|
||||||
description,
|
|
||||||
image,
|
|
||||||
imageAlt,
|
|
||||||
features,
|
|
||||||
stats,
|
|
||||||
gallery,
|
|
||||||
prevProject,
|
|
||||||
nextProject,
|
|
||||||
}: ProjectPageLayoutProps) {
|
|
||||||
const router = useRouter();
|
|
||||||
const heroRef = useScrollReveal<HTMLDivElement>({ stagger: 0.1, start: "top 90%" });
|
const heroRef = useScrollReveal<HTMLDivElement>({ stagger: 0.1, start: "top 90%" });
|
||||||
const descRef = useScrollReveal<HTMLDivElement>({ stagger: 0.15 });
|
const descRef = useScrollReveal<HTMLDivElement>({ stagger: 0.15 });
|
||||||
const techRef = useScrollReveal<HTMLDivElement>({ stagger: 0.15 });
|
const techRef = useScrollReveal<HTMLDivElement>({ stagger: 0.15 });
|
||||||
const galleryRef = useScrollReveal<HTMLDivElement>({ stagger: 0.1 });
|
const galleryRef = useScrollReveal<HTMLDivElement>({ stagger: 0.1 });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="min-h-screen bg-deep-space">
|
<main class="min-h-screen bg-deep-space">
|
||||||
{/* Hero */}
|
<section class="pt-32 pb-20 px-[5vw] bg-charcoal">
|
||||||
<section className="pt-32 pb-20 px-[5vw] bg-charcoal">
|
<div ref={heroRef} class="max-w-[1200px] mx-auto space-y-8">
|
||||||
<div ref={heroRef} className="max-w-[1200px] mx-auto space-y-8">
|
|
||||||
<button
|
<button
|
||||||
onClick={() => router.back()}
|
onClick={() => navigate(-1)}
|
||||||
className="inline-flex items-center gap-2 text-link text-amber hover:opacity-80 transition-opacity cursor-pointer"
|
class="inline-flex items-center gap-2 text-link text-amber hover:opacity-80 transition-opacity cursor-pointer"
|
||||||
>
|
>
|
||||||
<ArrowLeft size={16} />
|
<ArrowLeft size={16} />
|
||||||
<span>{projectLayout.backLabel}</span>
|
<span>{projectLayout.backLabel}</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div class="space-y-4">
|
||||||
<h1
|
<h1
|
||||||
className="font-display font-bold text-text-primary leading-[0.9] tracking-tight"
|
class="font-display font-bold text-text-primary leading-[0.9] tracking-tight"
|
||||||
style={{ fontSize: "clamp(2.5rem, 8vw, 6rem)" }}
|
style={{ "font-size": "clamp(2.5rem, 8vw, 6rem)" }}
|
||||||
>
|
>
|
||||||
{title}
|
{props.title}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="font-display font-medium text-amber text-xl md:text-2xl">
|
<p class="font-display font-medium text-amber text-xl md:text-2xl">
|
||||||
{subtitle}
|
{props.subtitle}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-2">
|
<div class="flex flex-wrap gap-2">
|
||||||
{tags.map((tag) => (
|
<For each={props.tags}>
|
||||||
<span key={tag} className="chip">
|
{(tag) => <span class="chip">{tag}</span>}
|
||||||
{tag}
|
</For>
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="font-mono text-text-secondary text-sm flex flex-wrap gap-x-6 gap-y-2">
|
<div class="font-mono text-text-secondary text-sm flex flex-wrap gap-x-6 gap-y-2">
|
||||||
<span>{projectLayout.yearLabel}: {year}</span>
|
<span>{projectLayout.yearLabel}: {props.year}</span>
|
||||||
<span>|</span>
|
<span>|</span>
|
||||||
<span>{projectLayout.durationLabel}: {duration}</span>
|
<span>{projectLayout.durationLabel}: {props.duration}</span>
|
||||||
<span>|</span>
|
<span>|</span>
|
||||||
<span>{projectLayout.statusLabel}: {status}</span>
|
<span>{projectLayout.statusLabel}: {props.status}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Project Description */}
|
<section class="py-20 md:py-32 px-[5vw]">
|
||||||
<section className="py-20 md:py-32 px-[5vw]">
|
<div class="max-w-[1200px] mx-auto grid grid-cols-1 lg:grid-cols-[3fr_2fr] gap-16 items-start">
|
||||||
<div className="max-w-[1200px] mx-auto grid grid-cols-1 lg:grid-cols-[3fr_2fr] gap-16 items-start">
|
<div ref={descRef} class="space-y-8">
|
||||||
<div ref={descRef} className="space-y-8">
|
<h2 class="font-display font-semibold text-text-primary text-3xl md:text-4xl tracking-tight">
|
||||||
<h2 className="font-display font-semibold text-text-primary text-3xl md:text-4xl tracking-tight">
|
|
||||||
{projectLayout.descriptionTitle}
|
{projectLayout.descriptionTitle}
|
||||||
</h2>
|
</h2>
|
||||||
<div className="space-y-6 text-text-secondary leading-relaxed">
|
<div class="space-y-6 text-text-secondary leading-relaxed">
|
||||||
{description.map((p, i) => (
|
<For each={props.description}>
|
||||||
<p key={i}>{p}</p>
|
{(p) => <p>{p}</p>}
|
||||||
))}
|
</For>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="border border-warm-grey overflow-hidden">
|
<div class="border border-warm-grey overflow-hidden">
|
||||||
<img
|
<img
|
||||||
src={image}
|
src={props.image}
|
||||||
alt={imageAlt}
|
alt={props.imageAlt}
|
||||||
className="w-full h-auto"
|
class="w-full h-auto"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Technical Implementation */}
|
<section class="py-20 md:py-32 px-[5vw] bg-charcoal">
|
||||||
<section className="py-20 md:py-32 px-[5vw] bg-charcoal">
|
<div ref={techRef} class="max-w-[800px] mx-auto space-y-12">
|
||||||
<div ref={techRef} className="max-w-[800px] mx-auto space-y-12">
|
<h2 class="font-display font-semibold text-text-primary text-3xl md:text-4xl tracking-tight">
|
||||||
<h2 className="font-display font-semibold text-text-primary text-3xl md:text-4xl tracking-tight">
|
|
||||||
{projectLayout.techTitle}
|
{projectLayout.techTitle}
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
{features.map((feature) => (
|
<For each={props.features}>
|
||||||
<div
|
{(feature) => (
|
||||||
key={feature.title}
|
<div class="border border-warm-grey p-6 space-y-4">
|
||||||
className="border border-warm-grey p-6 space-y-4"
|
<h3 class="font-display font-medium text-text-primary text-lg">
|
||||||
>
|
|
||||||
<h3 className="font-display font-medium text-text-primary text-lg">
|
|
||||||
{feature.title}
|
{feature.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-text-secondary text-sm leading-relaxed">
|
<p class="text-text-secondary text-sm leading-relaxed">
|
||||||
{feature.description}
|
{feature.description}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
)}
|
||||||
|
</For>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Stats */}
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 pt-8 border-t border-warm-grey">
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 pt-8 border-t border-warm-grey">
|
<For each={props.stats}>
|
||||||
{stats.map((stat) => (
|
{(stat) => (
|
||||||
<div key={stat.label} className="text-center space-y-2">
|
<div class="text-center space-y-2">
|
||||||
<p className="font-display font-bold text-text-primary text-2xl md:text-3xl text-amber">
|
<p class="font-display font-bold text-text-primary text-2xl md:text-3xl text-amber">
|
||||||
{stat.value}
|
{stat.value}
|
||||||
</p>
|
</p>
|
||||||
<p className="text-text-secondary text-xs font-mono uppercase tracking-wider">
|
<p class="text-text-secondary text-xs font-mono uppercase tracking-wider">
|
||||||
{stat.label}
|
{stat.label}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
)}
|
||||||
|
</For>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Gallery */}
|
<section class="py-20 md:py-32 px-[5vw]">
|
||||||
<section className="py-20 md:py-32 px-[5vw]">
|
<div ref={galleryRef} class="max-w-[1200px] mx-auto space-y-12">
|
||||||
<div ref={galleryRef} className="max-w-[1200px] mx-auto space-y-12">
|
<h2 class="font-display font-semibold text-text-primary text-3xl md:text-4xl tracking-tight">
|
||||||
<h2 className="font-display font-semibold text-text-primary text-3xl md:text-4xl tracking-tight">
|
|
||||||
{projectLayout.galleryTitle}
|
{projectLayout.galleryTitle}
|
||||||
</h2>
|
</h2>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
{gallery.map((item) => (
|
<For each={props.gallery}>
|
||||||
<div
|
{(item) => (
|
||||||
key={item.src}
|
<div class="border border-warm-grey overflow-hidden">
|
||||||
className="border border-warm-grey overflow-hidden"
|
|
||||||
>
|
|
||||||
<img
|
<img
|
||||||
src={item.src}
|
src={item.src}
|
||||||
alt={item.alt}
|
alt={item.alt}
|
||||||
className="w-full h-48 object-cover hover:scale-105 transition-transform duration-500"
|
class="w-full h-48 object-cover hover:scale-105 transition-transform duration-500"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
))}
|
)}
|
||||||
|
</For>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Prev / Next Navigation */}
|
<section class="py-20 px-[5vw] bg-charcoal">
|
||||||
<section className="py-20 px-[5vw] bg-charcoal">
|
<div class="max-w-[1200px] mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
|
||||||
<div className="max-w-[1200px] mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
|
<A
|
||||||
<Link
|
href={props.prevProject.link}
|
||||||
href={prevProject.link}
|
class="inline-flex items-center gap-3 px-6 py-3 border border-warm-grey text-text-primary hover:border-amber hover:text-amber transition-colors"
|
||||||
replace
|
|
||||||
className="inline-flex items-center gap-3 px-6 py-3 border border-warm-grey text-text-primary hover:border-amber hover:text-amber transition-colors"
|
|
||||||
>
|
>
|
||||||
<ArrowLeft size={16} />
|
<ArrowLeft size={16} />
|
||||||
<div className="text-left">
|
<div class="text-left">
|
||||||
<p className="text-text-secondary text-xs mb-0.5">{projectLayout.prevProjectLabel}</p>
|
<p class="text-text-secondary text-xs mb-0.5">{projectLayout.prevProjectLabel}</p>
|
||||||
<p className="font-display font-medium text-sm">{prevProject.title}</p>
|
<p class="font-display font-medium text-sm">{props.prevProject.title}</p>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</A>
|
||||||
|
|
||||||
<Link
|
<A
|
||||||
href={nextProject.link}
|
href={props.nextProject.link}
|
||||||
replace
|
class="inline-flex items-center gap-3 px-6 py-3 border border-warm-grey text-text-primary hover:border-amber hover:text-amber transition-colors"
|
||||||
className="inline-flex items-center gap-3 px-6 py-3 border border-warm-grey text-text-primary hover:border-amber hover:text-amber transition-colors"
|
|
||||||
>
|
>
|
||||||
<div className="text-right">
|
<div class="text-right">
|
||||||
<p className="text-text-secondary text-xs mb-0.5">{projectLayout.nextProjectLabel}</p>
|
<p class="text-text-secondary text-xs mb-0.5">{projectLayout.nextProjectLabel}</p>
|
||||||
<p className="font-display font-medium text-sm">{nextProject.title}</p>
|
<p class="font-display font-medium text-sm">{props.nextProject.title}</p>
|
||||||
</div>
|
</div>
|
||||||
<ArrowRight size={16} />
|
<ArrowRight size={16} />
|
||||||
</Link>
|
</A>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ export const socialLinks = [
|
||||||
export const footerContent = {
|
export const footerContent = {
|
||||||
copyright: (year: number, name: string) =>
|
copyright: (year: number, name: string) =>
|
||||||
`\u00A9 ${year} ${name}. All rights reserved.`,
|
`\u00A9 ${year} ${name}. All rights reserved.`,
|
||||||
builtWith: "Built with Next.js, React & Tailwind CSS",
|
builtWith: "Built with SolidJS & Tailwind CSS",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const homeMetadata = {
|
export const homeMetadata = {
|
||||||
|
|
|
||||||
4
src/global.d.ts
vendored
4
src/global.d.ts
vendored
|
|
@ -1,4 +0,0 @@
|
||||||
declare module '*.css' {
|
|
||||||
const content: { [className: string]: string };
|
|
||||||
export default content;
|
|
||||||
}
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { useLayoutEffect, useRef } from "react";
|
import { onMount } from "solid-js";
|
||||||
import gsap from "gsap";
|
import gsap from "gsap";
|
||||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||||
|
|
||||||
|
|
@ -17,10 +17,10 @@ interface ScrollRevealOptions {
|
||||||
export function useScrollReveal<T extends HTMLElement>(
|
export function useScrollReveal<T extends HTMLElement>(
|
||||||
options: ScrollRevealOptions = {}
|
options: ScrollRevealOptions = {}
|
||||||
) {
|
) {
|
||||||
const ref = useRef<T>(null);
|
let ref: T | undefined;
|
||||||
|
|
||||||
useLayoutEffect(() => {
|
onMount(() => {
|
||||||
const el = ref.current;
|
const el = ref;
|
||||||
if (!el) return;
|
if (!el) return;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
|
|
@ -58,7 +58,9 @@ export function useScrollReveal<T extends HTMLElement>(
|
||||||
if (st.trigger === el) st.kill();
|
if (st.trigger === el) st.kill();
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
}, []);
|
});
|
||||||
|
|
||||||
return ref;
|
return (el: T) => {
|
||||||
|
ref = el;
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
20
src/index.tsx
Normal file
20
src/index.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
/* @refresh reload */
|
||||||
|
import { render } from "solid-js/web";
|
||||||
|
import { Router } from "@solidjs/router";
|
||||||
|
import App from "./App";
|
||||||
|
import "./globals.css";
|
||||||
|
|
||||||
|
const root = document.getElementById("root");
|
||||||
|
|
||||||
|
if (!root) {
|
||||||
|
throw new Error("Root element not found");
|
||||||
|
}
|
||||||
|
|
||||||
|
render(
|
||||||
|
() => (
|
||||||
|
<Router>
|
||||||
|
<App />
|
||||||
|
</Router>
|
||||||
|
),
|
||||||
|
root
|
||||||
|
);
|
||||||
|
|
@ -5,27 +5,22 @@ import {
|
||||||
Mail,
|
Mail,
|
||||||
Bike,
|
Bike,
|
||||||
Camera,
|
Camera,
|
||||||
} from "lucide-react";
|
} from "lucide-solid";
|
||||||
import type { ComponentType } from "react";
|
import type { Component } from "solid-js";
|
||||||
|
|
||||||
function GithubIcon({
|
function GithubIcon(props: { size?: number; class?: string }) {
|
||||||
size = 18,
|
const size = () => props.size ?? 18;
|
||||||
className = "",
|
|
||||||
}: {
|
|
||||||
size?: number;
|
|
||||||
className?: string;
|
|
||||||
}) {
|
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
width={size}
|
width={size()}
|
||||||
height={size}
|
height={size()}
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
strokeWidth="2"
|
stroke-width="2"
|
||||||
strokeLinecap="round"
|
stroke-linecap="round"
|
||||||
strokeLinejoin="round"
|
stroke-linejoin="round"
|
||||||
className={className}
|
class={props.class}
|
||||||
>
|
>
|
||||||
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
|
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
|
||||||
<path d="M9 18c-4.51 2-5-2-7-2" />
|
<path d="M9 18c-4.51 2-5-2-7-2" />
|
||||||
|
|
@ -33,24 +28,19 @@ function GithubIcon({
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function LinkedInIcon({
|
function LinkedInIcon(props: { size?: number; class?: string }) {
|
||||||
size = 18,
|
const size = () => props.size ?? 18;
|
||||||
className = "",
|
|
||||||
}: {
|
|
||||||
size?: number;
|
|
||||||
className?: string;
|
|
||||||
}) {
|
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
width={size}
|
width={size()}
|
||||||
height={size}
|
height={size()}
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
strokeWidth="2"
|
stroke-width="2"
|
||||||
strokeLinecap="round"
|
stroke-linecap="round"
|
||||||
strokeLinejoin="round"
|
stroke-linejoin="round"
|
||||||
className={className}
|
class={props.class}
|
||||||
>
|
>
|
||||||
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
|
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
|
||||||
<rect width="4" height="12" x="2" y="9" />
|
<rect width="4" height="12" x="2" y="9" />
|
||||||
|
|
@ -61,7 +51,7 @@ function LinkedInIcon({
|
||||||
|
|
||||||
const iconMap: Record<
|
const iconMap: Record<
|
||||||
string,
|
string,
|
||||||
ComponentType<{ size?: number; className?: string }>
|
Component<{ size?: number; class?: string }>
|
||||||
> = {
|
> = {
|
||||||
Crosshair,
|
Crosshair,
|
||||||
Layers,
|
Layers,
|
||||||
|
|
@ -73,19 +63,15 @@ const iconMap: Record<
|
||||||
LinkedInIcon,
|
LinkedInIcon,
|
||||||
};
|
};
|
||||||
|
|
||||||
export function Icon({
|
export function Icon(props: {
|
||||||
name,
|
|
||||||
size = 18,
|
|
||||||
className = "",
|
|
||||||
}: {
|
|
||||||
name: string;
|
name: string;
|
||||||
size?: number;
|
size?: number;
|
||||||
className?: string;
|
class?: string;
|
||||||
}) {
|
}) {
|
||||||
const Component = iconMap[name];
|
const Component = iconMap[props.name];
|
||||||
if (!Component) {
|
if (!Component) {
|
||||||
console.warn(`Icon "${name}" not found`);
|
console.warn(`Icon "${props.name}" not found`);
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
return <Component size={size} className={className} />;
|
return <Component size={props.size} class={props.class} />;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
13
src/lib/meta.ts
Normal file
13
src/lib/meta.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { onMount } from "solid-js";
|
||||||
|
|
||||||
|
export function usePageMeta(title: string, description?: string) {
|
||||||
|
onMount(() => {
|
||||||
|
document.title = title.includes("—") ? title : `${title} — Mike Karl`;
|
||||||
|
if (description) {
|
||||||
|
const meta = document.querySelector('meta[name="description"]');
|
||||||
|
if (meta) {
|
||||||
|
meta.setAttribute("content", description);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
127
src/pages/AboutPage.tsx
Normal file
127
src/pages/AboutPage.tsx
Normal file
|
|
@ -0,0 +1,127 @@
|
||||||
|
import { A } from "@solidjs/router";
|
||||||
|
import { For } from "solid-js";
|
||||||
|
import { ArrowRight } from "lucide-solid";
|
||||||
|
import { usePageMeta } from "@/lib/meta";
|
||||||
|
import { values, aboutPage } from "@/data/about";
|
||||||
|
import { site } from "@/data/site";
|
||||||
|
import { Icon } from "@/lib/icons";
|
||||||
|
|
||||||
|
export default function AboutPage() {
|
||||||
|
usePageMeta(aboutPage.metadata.title as string, aboutPage.metadata.description as string);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main class="min-h-screen bg-deep-space">
|
||||||
|
<section class="pt-32 pb-20 px-[5vw] bg-charcoal">
|
||||||
|
<div class="max-w-[1200px] mx-auto space-y-6">
|
||||||
|
<p class="section-label">{aboutPage.label}</p>
|
||||||
|
<h1
|
||||||
|
class="font-display font-bold text-text-primary leading-[0.9] tracking-tight"
|
||||||
|
style={{ "font-size": "clamp(2.5rem, 8vw, 5rem)" }}
|
||||||
|
>
|
||||||
|
{aboutPage.pageTitle}
|
||||||
|
</h1>
|
||||||
|
<p class="text-text-secondary max-w-2xl text-lg leading-relaxed">
|
||||||
|
{aboutPage.pageSubtitle}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-20 md:py-32 px-[5vw]">
|
||||||
|
<div class="max-w-[1200px] mx-auto grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-16">
|
||||||
|
<div class="space-y-8">
|
||||||
|
<h2 class="font-display font-semibold text-text-primary text-2xl tracking-tight">
|
||||||
|
{aboutPage.philosophyTitle}
|
||||||
|
</h2>
|
||||||
|
<p class="text-text-secondary leading-relaxed">
|
||||||
|
{aboutPage.philosophyText[0]}
|
||||||
|
</p>
|
||||||
|
<p class="text-text-secondary leading-relaxed">
|
||||||
|
{aboutPage.philosophyText[1]}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="font-display font-semibold text-text-primary text-2xl tracking-tight pt-8">
|
||||||
|
{aboutPage.backgroundTitle}
|
||||||
|
</h2>
|
||||||
|
<p class="text-text-secondary leading-relaxed">
|
||||||
|
{aboutPage.backgroundText[0]}
|
||||||
|
</p>
|
||||||
|
<p class="text-text-secondary leading-relaxed">
|
||||||
|
{aboutPage.backgroundText[1]}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="pt-4">
|
||||||
|
<A
|
||||||
|
href="/hobbies"
|
||||||
|
class="inline-flex items-center gap-2 text-amber hover:text-amber-hover transition-colors group"
|
||||||
|
>
|
||||||
|
<span class="text-link">{aboutPage.linkText}</span>
|
||||||
|
<ArrowRight
|
||||||
|
size={18}
|
||||||
|
class="group-hover:translate-x-1 transition-transform"
|
||||||
|
/>
|
||||||
|
</A>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-8">
|
||||||
|
<div class="border border-warm-grey p-6 space-y-4">
|
||||||
|
<h3 class="font-display font-medium text-text-primary">
|
||||||
|
{aboutPage.sidebarFocusTitle}
|
||||||
|
</h3>
|
||||||
|
<ul class="space-y-2 text-text-secondary text-sm">
|
||||||
|
<For each={aboutPage.sidebarFocusItems}>
|
||||||
|
{(item) => <li>{item}</li>}
|
||||||
|
</For>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border border-warm-grey p-6 space-y-4">
|
||||||
|
<h3 class="font-display font-medium text-text-primary">
|
||||||
|
{aboutPage.sidebarLocationTitle}
|
||||||
|
</h3>
|
||||||
|
<p class="text-text-secondary text-sm">{site.location}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border border-warm-grey p-6 space-y-4">
|
||||||
|
<h3 class="font-display font-medium text-text-primary">
|
||||||
|
{aboutPage.sidebarHobbiesTitle}
|
||||||
|
</h3>
|
||||||
|
<ul class="space-y-2 text-text-secondary text-sm">
|
||||||
|
<For each={aboutPage.sidebarHobbiesItems}>
|
||||||
|
{(item) => <li>{item}</li>}
|
||||||
|
</For>
|
||||||
|
</ul>
|
||||||
|
<A href="/hobbies" class="text-link text-amber text-sm">
|
||||||
|
{aboutPage.sidebarHobbiesLink}
|
||||||
|
</A>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-20 md:py-32 px-[5vw] bg-charcoal">
|
||||||
|
<div class="max-w-[1200px] mx-auto">
|
||||||
|
<p class="section-label mb-12">{aboutPage.valuesTitle}</p>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
|
||||||
|
<For each={values}>
|
||||||
|
{(value) => (
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="w-10 h-10 flex items-center justify-center border border-warm-grey">
|
||||||
|
<Icon name={value.icon} size={20} class="text-amber" />
|
||||||
|
</div>
|
||||||
|
<h3 class="font-display font-semibold text-text-primary text-2xl tracking-tight">
|
||||||
|
{value.title}
|
||||||
|
</h3>
|
||||||
|
<p class="text-text-secondary leading-relaxed">{value.text}</p>
|
||||||
|
<p class="font-display text-text-primary italic border-l-2 border-amber pl-4">
|
||||||
|
“{value.quote}”
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
92
src/pages/ContactPage.tsx
Normal file
92
src/pages/ContactPage.tsx
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
import { usePageMeta } from "@/lib/meta";
|
||||||
|
import { site } from "@/data/site";
|
||||||
|
import { contactContent, contactPage } from "@/data/contact";
|
||||||
|
import { Mail } from "lucide-solid";
|
||||||
|
|
||||||
|
export default function ContactPage() {
|
||||||
|
usePageMeta(contactPage.metadata.title as string, contactPage.metadata.description as string);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main class="min-h-screen bg-deep-space">
|
||||||
|
<section class="pt-32 pb-20 px-[5vw] bg-charcoal">
|
||||||
|
<div class="max-w-[1200px] mx-auto space-y-6">
|
||||||
|
<p class="section-label">{contactPage.label}</p>
|
||||||
|
<h1
|
||||||
|
class="font-display font-bold text-text-primary leading-[0.9] tracking-tight"
|
||||||
|
style={{ "font-size": "clamp(2.5rem, 8vw, 5rem)" }}
|
||||||
|
>
|
||||||
|
{contactContent.heading}
|
||||||
|
</h1>
|
||||||
|
<p class="text-text-secondary max-w-2xl text-lg leading-relaxed">
|
||||||
|
{contactPage.pageSubtitle}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-20 md:py-32 px-[5vw]">
|
||||||
|
<div class="max-w-[1200px] mx-auto grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-16">
|
||||||
|
<div class="space-y-8">
|
||||||
|
<h2 class="font-display font-semibold text-text-primary text-2xl tracking-tight">
|
||||||
|
{contactPage.contentTitle}
|
||||||
|
</h2>
|
||||||
|
<p class="text-text-secondary leading-relaxed">{contactContent.text}</p>
|
||||||
|
<p class="text-text-secondary leading-relaxed">
|
||||||
|
{contactPage.contentPlaceholder1}
|
||||||
|
</p>
|
||||||
|
<p class="text-text-secondary leading-relaxed">
|
||||||
|
{contactPage.contentPlaceholder2}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="pt-4">
|
||||||
|
<a
|
||||||
|
href={`mailto:${site.email}`}
|
||||||
|
class="inline-flex items-center gap-3 px-6 py-3 bg-amber text-deep-space font-display font-medium hover:bg-amber-hover transition-colors"
|
||||||
|
>
|
||||||
|
<Mail size={18} />
|
||||||
|
{contactContent.cta}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-8">
|
||||||
|
<div class="border border-warm-grey p-6 space-y-4">
|
||||||
|
<h3 class="font-display font-medium text-text-primary">
|
||||||
|
{contactPage.sidebarEmailTitle}
|
||||||
|
</h3>
|
||||||
|
<a
|
||||||
|
href={`mailto:${site.email}`}
|
||||||
|
class="text-link text-amber font-mono text-sm"
|
||||||
|
>
|
||||||
|
{site.email}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border border-warm-grey p-6 space-y-4">
|
||||||
|
<h3 class="font-display font-medium text-text-primary">
|
||||||
|
{contactPage.sidebarSocialTitle}
|
||||||
|
</h3>
|
||||||
|
<div class="space-y-2 text-sm">
|
||||||
|
<a
|
||||||
|
href={site.github}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="block text-text-secondary hover:text-amber transition-colors"
|
||||||
|
>
|
||||||
|
{contactPage.sidebarSocialGithub}
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href={site.linkedin}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="block text-text-secondary hover:text-amber transition-colors"
|
||||||
|
>
|
||||||
|
{contactPage.sidebarSocialLinkedin}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
71
src/pages/HobbiesPage.tsx
Normal file
71
src/pages/HobbiesPage.tsx
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
import { For } from "solid-js";
|
||||||
|
import { usePageMeta } from "@/lib/meta";
|
||||||
|
import { hobbies, hobbiesPage } from "@/data/hobbies";
|
||||||
|
import { Icon } from "@/lib/icons";
|
||||||
|
|
||||||
|
export default function HobbiesPage() {
|
||||||
|
usePageMeta(hobbiesPage.metadata.title as string, hobbiesPage.metadata.description as string);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main class="min-h-screen bg-deep-space">
|
||||||
|
<section class="pt-32 pb-20 px-[5vw] bg-charcoal">
|
||||||
|
<div class="max-w-[1200px] mx-auto space-y-6">
|
||||||
|
<p class="section-label">{hobbiesPage.label}</p>
|
||||||
|
<h1
|
||||||
|
class="font-display font-bold text-text-primary leading-[0.9] tracking-tight"
|
||||||
|
style={{ "font-size": "clamp(2.5rem, 8vw, 5rem)" }}
|
||||||
|
>
|
||||||
|
{hobbiesPage.pageTitle}
|
||||||
|
</h1>
|
||||||
|
<p class="text-text-secondary max-w-2xl text-lg leading-relaxed">
|
||||||
|
{hobbiesPage.pageSubtitle}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-20 md:py-32 px-[5vw]">
|
||||||
|
<div class="max-w-[1200px] mx-auto space-y-24">
|
||||||
|
<For each={hobbies}>
|
||||||
|
{(hobby, index) => {
|
||||||
|
const isEven = () => index() % 2 === 0;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
class={`grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-12 items-start ${
|
||||||
|
isEven() ? "" : "lg:grid-cols-[2fr_1fr]"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div class={`space-y-6 ${isEven() ? "" : "lg:order-2"}`}>
|
||||||
|
<div class="w-12 h-12 flex items-center justify-center border border-warm-grey">
|
||||||
|
<Icon name={hobby.icon} size={24} class="text-amber" />
|
||||||
|
</div>
|
||||||
|
<h2 class="font-display font-semibold text-text-primary text-3xl tracking-tight">
|
||||||
|
{hobby.title}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div class={`space-y-6 ${isEven() ? "" : "lg:order-1"}`}>
|
||||||
|
<For each={hobby.description}>
|
||||||
|
{(paragraph) => (
|
||||||
|
<p class="text-text-secondary leading-relaxed">{paragraph}</p>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-20 px-[5vw] bg-charcoal">
|
||||||
|
<div class="max-w-[800px] mx-auto text-center space-y-6">
|
||||||
|
<p class="font-display text-text-primary text-2xl md:text-3xl italic leading-relaxed">
|
||||||
|
“{hobbiesPage.quote}”
|
||||||
|
</p>
|
||||||
|
<p class="text-text-secondary text-sm font-mono">
|
||||||
|
{hobbiesPage.quoteAuthor}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import type { Metadata } from "next";
|
import { usePageMeta } from "@/lib/meta";
|
||||||
import { homeMetadata } from "@/data/site";
|
import { homeMetadata } from "@/data/site";
|
||||||
import HeroSection from "@/sections/HeroSection";
|
import HeroSection from "@/sections/HeroSection";
|
||||||
import AboutSection from "@/sections/AboutSection";
|
import AboutSection from "@/sections/AboutSection";
|
||||||
|
|
@ -7,9 +7,9 @@ import ProjectsSection from "@/sections/ProjectsSection";
|
||||||
import TimelineSection from "@/sections/TimelineSection";
|
import TimelineSection from "@/sections/TimelineSection";
|
||||||
import ContactSection from "@/sections/ContactSection";
|
import ContactSection from "@/sections/ContactSection";
|
||||||
|
|
||||||
export const metadata: Metadata = homeMetadata;
|
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
|
usePageMeta(homeMetadata.title, homeMetadata.description);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main>
|
<main>
|
||||||
<HeroSection />
|
<HeroSection />
|
||||||
73
src/pages/ProjectsPage.tsx
Normal file
73
src/pages/ProjectsPage.tsx
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
import { A } from "@solidjs/router";
|
||||||
|
import { For } from "solid-js";
|
||||||
|
import { ArrowRight } from "lucide-solid";
|
||||||
|
import { usePageMeta } from "@/lib/meta";
|
||||||
|
import { projects, projectsPage } from "@/data/projects";
|
||||||
|
|
||||||
|
export default function ProjectsPage() {
|
||||||
|
usePageMeta(projectsPage.metadata.title as string, projectsPage.metadata.description as string);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main class="min-h-screen bg-deep-space">
|
||||||
|
<section class="pt-32 pb-20 px-[5vw] bg-charcoal">
|
||||||
|
<div class="max-w-[1200px] mx-auto space-y-6">
|
||||||
|
<p class="section-label">{projectsPage.pageLabel}</p>
|
||||||
|
<h1
|
||||||
|
class="font-display font-bold text-text-primary leading-[0.9] tracking-tight"
|
||||||
|
style={{ "font-size": "clamp(2.5rem, 8vw, 5rem)" }}
|
||||||
|
>
|
||||||
|
{projectsPage.pageTitle}
|
||||||
|
</h1>
|
||||||
|
<p class="text-text-secondary max-w-2xl text-lg leading-relaxed">
|
||||||
|
{projectsPage.subtitle}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-20 md:py-32 px-[5vw]">
|
||||||
|
<div class="max-w-[1200px] mx-auto space-y-16">
|
||||||
|
<For each={projects}>
|
||||||
|
{(project) => (
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-12 items-start border-t border-warm-grey pt-12">
|
||||||
|
<div class="border border-warm-grey overflow-hidden group/image">
|
||||||
|
<img
|
||||||
|
src={project.image}
|
||||||
|
alt={project.title}
|
||||||
|
class="w-full h-auto group-hover/image:scale-105 transition-transform duration-700 ease-out"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<For each={project.tags}>
|
||||||
|
{(tag) => <span class="chip">{tag}</span>}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
<h2 class="font-display font-semibold text-text-primary text-3xl tracking-tight">
|
||||||
|
{project.title}
|
||||||
|
</h2>
|
||||||
|
<p class="text-text-secondary leading-relaxed">
|
||||||
|
{project.description}
|
||||||
|
</p>
|
||||||
|
<p class="text-text-secondary leading-relaxed">
|
||||||
|
{projectsPage.detailText}
|
||||||
|
</p>
|
||||||
|
<A
|
||||||
|
href={project.link}
|
||||||
|
class="inline-flex items-center gap-2 text-amber hover:text-amber-hover transition-colors group"
|
||||||
|
>
|
||||||
|
<span class="text-link">{projectsPage.linkText}</span>
|
||||||
|
<ArrowRight
|
||||||
|
size={18}
|
||||||
|
class="group-hover:translate-x-1 transition-transform"
|
||||||
|
/>
|
||||||
|
</A>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
54
src/pages/TimelinePage.tsx
Normal file
54
src/pages/TimelinePage.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
import { For } from "solid-js";
|
||||||
|
import { usePageMeta } from "@/lib/meta";
|
||||||
|
import { timeline, timelinePage } from "@/data/timeline";
|
||||||
|
|
||||||
|
export default function TimelinePage() {
|
||||||
|
usePageMeta(timelinePage.metadata.title as string, timelinePage.metadata.description as string);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main class="min-h-screen bg-deep-space">
|
||||||
|
<section class="pt-32 pb-20 px-[5vw] bg-charcoal">
|
||||||
|
<div class="max-w-[1200px] mx-auto space-y-6">
|
||||||
|
<p class="section-label">{timelinePage.label}</p>
|
||||||
|
<h1
|
||||||
|
class="font-display font-bold text-text-primary leading-[0.9] tracking-tight"
|
||||||
|
style={{ "font-size": "clamp(2.5rem, 8vw, 5rem)" }}
|
||||||
|
>
|
||||||
|
{timelinePage.pageTitle}
|
||||||
|
</h1>
|
||||||
|
<p class="text-text-secondary max-w-2xl text-lg leading-relaxed">
|
||||||
|
{timelinePage.subtitle}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-20 md:py-32 px-[5vw]">
|
||||||
|
<div class="max-w-[1200px] mx-auto space-y-16">
|
||||||
|
<For each={timeline}>
|
||||||
|
{(item) => (
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-[120px_1fr] gap-8 border-t border-warm-grey pt-12">
|
||||||
|
<span class="font-mono text-amber text-xl">{item.year}</span>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<h2 class="font-display font-semibold text-text-primary text-2xl tracking-tight">
|
||||||
|
{item.title}
|
||||||
|
</h2>
|
||||||
|
<p class="text-text-secondary leading-relaxed">
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
|
<p class="text-text-secondary leading-relaxed">
|
||||||
|
{timelinePage.detailText}
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap gap-2 pt-2">
|
||||||
|
<For each={item.tags}>
|
||||||
|
{(tag) => <span class="chip">{tag}</span>}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
import type { Metadata } from "next";
|
import { usePageMeta } from "@/lib/meta";
|
||||||
import ProjectPageLayout from "@/components/ProjectPageLayout";
|
import ProjectPageLayout from "@/components/ProjectPageLayout";
|
||||||
import { emulatorProject } from "@/data/projects";
|
import { emulatorProject } from "@/data/projects";
|
||||||
|
|
||||||
export const metadata: Metadata = emulatorProject.metadata;
|
export default function EmulatorPage() {
|
||||||
|
usePageMeta(emulatorProject.metadata.title as string, emulatorProject.metadata.description as string);
|
||||||
|
|
||||||
export default function ProjectEmulatorPage() {
|
|
||||||
return (
|
return (
|
||||||
<ProjectPageLayout
|
<ProjectPageLayout
|
||||||
title={emulatorProject.title}
|
title={emulatorProject.title}
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
import type { Metadata } from "next";
|
import { usePageMeta } from "@/lib/meta";
|
||||||
import ProjectPageLayout from "@/components/ProjectPageLayout";
|
import ProjectPageLayout from "@/components/ProjectPageLayout";
|
||||||
import { raycasterProject } from "@/data/projects";
|
import { raycasterProject } from "@/data/projects";
|
||||||
|
|
||||||
export const metadata: Metadata = raycasterProject.metadata;
|
export default function RaycasterPage() {
|
||||||
|
usePageMeta(raycasterProject.metadata.title as string, raycasterProject.metadata.description as string);
|
||||||
|
|
||||||
export default function ProjectRaycasterPage() {
|
|
||||||
return (
|
return (
|
||||||
<ProjectPageLayout
|
<ProjectPageLayout
|
||||||
title={raycasterProject.title}
|
title={raycasterProject.title}
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
import type { Metadata } from "next";
|
import { usePageMeta } from "@/lib/meta";
|
||||||
import ProjectPageLayout from "@/components/ProjectPageLayout";
|
import ProjectPageLayout from "@/components/ProjectPageLayout";
|
||||||
import { raytracerProject } from "@/data/projects";
|
import { raytracerProject } from "@/data/projects";
|
||||||
|
|
||||||
export const metadata: Metadata = raytracerProject.metadata;
|
export default function RaytracerPage() {
|
||||||
|
usePageMeta(raytracerProject.metadata.title as string, raytracerProject.metadata.description as string);
|
||||||
|
|
||||||
export default function ProjectRaytracerPage() {
|
|
||||||
return (
|
return (
|
||||||
<ProjectPageLayout
|
<ProjectPageLayout
|
||||||
title={raytracerProject.title}
|
title={raytracerProject.title}
|
||||||
|
|
@ -1,36 +1,33 @@
|
||||||
"use client";
|
import { A } from "@solidjs/router";
|
||||||
|
import { For } from "solid-js";
|
||||||
import Link from "next/link";
|
import { ArrowRight } from "lucide-solid";
|
||||||
import { useScrollReveal } from "../hooks/useScrollReveal";
|
import { useScrollReveal } from "../hooks/useScrollReveal";
|
||||||
import { aboutContent, aboutPage } from "../data/about";
|
import { aboutContent, aboutPage } from "../data/about";
|
||||||
import { ArrowRight } from "lucide-react";
|
|
||||||
|
|
||||||
export default function AboutSection() {
|
export default function AboutSection() {
|
||||||
const revealRef = useScrollReveal<HTMLDivElement>({ stagger: 0.15 });
|
const revealRef = useScrollReveal<HTMLDivElement>({ stagger: 0.15 });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="about" className="py-20 md:py-32 px-[5vw]">
|
<section id="about" class="py-20 md:py-32 px-[5vw]">
|
||||||
<div className="max-w-[1200px] mx-auto">
|
<div class="max-w-[1200px] mx-auto">
|
||||||
<div ref={revealRef} className="space-y-8">
|
<div ref={revealRef} class="space-y-8">
|
||||||
<h2 className="section-label">{aboutPage.label}</h2>
|
<h2 class="section-label">{aboutPage.label}</h2>
|
||||||
<div className="max-w-3xl space-y-6 text-text-secondary leading-relaxed">
|
<div class="max-w-3xl space-y-6 text-text-secondary leading-relaxed">
|
||||||
{aboutContent.paragraphs.map((p, i) => (
|
<For each={aboutContent.paragraphs}>
|
||||||
<p key={i}>{p}</p>
|
{(p) => <p>{p}</p>}
|
||||||
))}
|
</For>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Link
|
<A
|
||||||
href="/hobbies"
|
href="/hobbies"
|
||||||
className="inline-flex items-center gap-2 text-amber hover:text-amber-hover transition-colors group"
|
class="inline-flex items-center gap-2 text-amber hover:text-amber-hover transition-colors group"
|
||||||
>
|
>
|
||||||
<span className="text-link">
|
<span class="text-link">{aboutPage.linkText}</span>
|
||||||
{aboutPage.linkText}
|
|
||||||
</span>
|
|
||||||
<ArrowRight
|
<ArrowRight
|
||||||
size={18}
|
size={18}
|
||||||
className="group-hover:translate-x-1 transition-transform"
|
class="group-hover:translate-x-1 transition-transform"
|
||||||
/>
|
/>
|
||||||
</Link>
|
</A>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,30 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { useScrollReveal } from "../hooks/useScrollReveal";
|
import { useScrollReveal } from "../hooks/useScrollReveal";
|
||||||
import { site } from "../data/site";
|
import { site } from "../data/site";
|
||||||
import { contactContent, contactPage } from "../data/contact";
|
import { contactContent, contactPage } from "../data/contact";
|
||||||
import { Mail } from "lucide-react";
|
import { Mail } from "lucide-solid";
|
||||||
|
|
||||||
export default function ContactSection() {
|
export default function ContactSection() {
|
||||||
const revealRef = useScrollReveal<HTMLDivElement>({ stagger: 0.15 });
|
const revealRef = useScrollReveal<HTMLDivElement>({ stagger: 0.15 });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="contact" className="py-20 md:py-32 px-[5vw]">
|
<section id="contact" class="py-20 md:py-32 px-[5vw]">
|
||||||
<div className="max-w-[1200px] mx-auto">
|
<div class="max-w-[1200px] mx-auto">
|
||||||
<div ref={revealRef} className="max-w-2xl space-y-8">
|
<div ref={revealRef} class="max-w-2xl space-y-8">
|
||||||
<h2 className="section-label">{contactPage.label}</h2>
|
<h2 class="section-label">{contactPage.label}</h2>
|
||||||
<p className="text-text-secondary leading-relaxed text-lg">
|
<p class="text-text-secondary leading-relaxed text-lg">
|
||||||
{contactContent.text}
|
{contactContent.text}
|
||||||
</p>
|
</p>
|
||||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-6">
|
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-6">
|
||||||
<a
|
<a
|
||||||
href={`mailto:${site.email}`}
|
href={`mailto:${site.email}`}
|
||||||
className="inline-flex items-center gap-3 px-6 py-3 bg-amber text-deep-space font-display font-medium hover:bg-amber-hover transition-colors"
|
class="inline-flex items-center gap-3 px-6 py-3 bg-amber text-deep-space font-display font-medium hover:bg-amber-hover transition-colors"
|
||||||
>
|
>
|
||||||
<Mail size={18} />
|
<Mail size={18} />
|
||||||
{contactContent.cta}
|
{contactContent.cta}
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href={`mailto:${site.email}`}
|
href={`mailto:${site.email}`}
|
||||||
className="text-link text-amber font-mono text-sm"
|
class="text-link text-amber font-mono text-sm"
|
||||||
>
|
>
|
||||||
{site.email}
|
{site.email}
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,4 @@
|
||||||
"use client";
|
import { onMount, For } from "solid-js";
|
||||||
|
|
||||||
import { useEffect, useRef } from "react";
|
|
||||||
import gsap from "gsap";
|
import gsap from "gsap";
|
||||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||||
import ParticleGrid from "../components/ParticleGrid";
|
import ParticleGrid from "../components/ParticleGrid";
|
||||||
|
|
@ -11,14 +9,14 @@ const subtitles = heroContent.subtitle;
|
||||||
gsap.registerPlugin(ScrollTrigger);
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
export default function HeroSection() {
|
export default function HeroSection() {
|
||||||
const sectionRef = useRef<HTMLElement>(null);
|
let sectionRef: HTMLElement | undefined;
|
||||||
const contentRef = useRef<HTMLDivElement>(null);
|
let contentRef: HTMLDivElement | undefined;
|
||||||
const bgRef = useRef<HTMLDivElement>(null);
|
let bgRef: HTMLDivElement | undefined;
|
||||||
|
|
||||||
useEffect(() => {
|
onMount(() => {
|
||||||
const section = sectionRef.current;
|
const section = sectionRef;
|
||||||
const content = contentRef.current;
|
const content = contentRef;
|
||||||
const bg = bgRef.current;
|
const bg = bgRef;
|
||||||
if (!section || !content || !bg) return;
|
if (!section || !content || !bg) return;
|
||||||
|
|
||||||
const ctx = gsap.context(() => {
|
const ctx = gsap.context(() => {
|
||||||
|
|
@ -46,56 +44,49 @@ export default function HeroSection() {
|
||||||
}, section);
|
}, section);
|
||||||
|
|
||||||
return () => ctx.revert();
|
return () => ctx.revert();
|
||||||
}, []);
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
ref={sectionRef}
|
ref={sectionRef}
|
||||||
id="hero"
|
id="hero"
|
||||||
className="relative min-h-[100dvh] flex items-center justify-center overflow-hidden"
|
class="relative min-h-[100dvh] flex items-center justify-center overflow-hidden"
|
||||||
>
|
>
|
||||||
{/* Particle grid background */}
|
<div ref={bgRef} class="absolute inset-0 z-0">
|
||||||
<div ref={bgRef} className="absolute inset-0 z-0">
|
|
||||||
<ParticleGrid />
|
<ParticleGrid />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Amber radial gradient from top */}
|
|
||||||
<div
|
<div
|
||||||
className="absolute inset-0 z-[1] pointer-events-none"
|
class="absolute inset-0 z-[1] pointer-events-none"
|
||||||
style={{
|
style={{
|
||||||
background:
|
background:
|
||||||
"radial-gradient(ellipse at 50% 0%, rgba(232,97,1,0.08) 0%, transparent 60%)",
|
"radial-gradient(ellipse at 50% 0%, rgba(232,97,1,0.08) 0%, transparent 60%)",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Bottom fade to deep space */}
|
|
||||||
<div
|
<div
|
||||||
className="absolute inset-0 z-[1] pointer-events-none"
|
class="absolute inset-0 z-[1] pointer-events-none"
|
||||||
style={{
|
style={{
|
||||||
background:
|
background:
|
||||||
"linear-gradient(to bottom, transparent 50%, #0F0E0C 100%)",
|
"linear-gradient(to bottom, transparent 50%, #0F0E0C 100%)",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Content */}
|
<div ref={contentRef} class="relative z-10 text-center px-6">
|
||||||
<div
|
<div class="font-mono text-amber text-sm md:text-base tracking-[0.1em] uppercase mb-6 overflow-hidden">
|
||||||
ref={contentRef}
|
|
||||||
className="relative z-10 text-center px-6"
|
|
||||||
>
|
|
||||||
<div className="font-mono text-amber text-sm md:text-base tracking-[0.1em] uppercase mb-6 overflow-hidden">
|
|
||||||
<SubtitleFlipper />
|
<SubtitleFlipper />
|
||||||
</div>
|
</div>
|
||||||
<h1
|
<h1
|
||||||
className="font-display font-bold text-text-primary leading-[0.9] tracking-tight"
|
class="font-display font-bold text-text-primary leading-[0.9] tracking-tight"
|
||||||
style={{ fontSize: "clamp(4rem, 12vw, 10rem)" }}
|
style={{ "font-size": "clamp(4rem, 12vw, 10rem)" }}
|
||||||
>
|
>
|
||||||
{heroContent.nameFirst}
|
{heroContent.nameFirst}
|
||||||
<br />
|
<br />
|
||||||
{heroContent.nameLast}
|
{heroContent.nameLast}
|
||||||
</h1>
|
</h1>
|
||||||
<div className="flex items-center justify-center gap-4 mt-6">
|
<div class="flex items-center justify-center gap-4 mt-6">
|
||||||
<div className="w-[60px] h-px bg-amber" />
|
<div class="w-[60px] h-px bg-amber" />
|
||||||
<p className="font-mono text-text-secondary text-xs md:text-sm tracking-wider">
|
<p class="font-mono text-text-secondary text-xs md:text-sm tracking-wider">
|
||||||
{site.location}
|
{site.location}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -105,10 +96,10 @@ export default function HeroSection() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function SubtitleFlipper() {
|
function SubtitleFlipper() {
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
let containerRef: HTMLDivElement | undefined;
|
||||||
|
|
||||||
useEffect(() => {
|
onMount(() => {
|
||||||
const container = containerRef.current;
|
const container = containerRef;
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
|
|
||||||
const items = container.querySelectorAll<HTMLSpanElement>(".subtitle-item");
|
const items = container.querySelectorAll<HTMLSpanElement>(".subtitle-item");
|
||||||
|
|
@ -148,19 +139,20 @@ function SubtitleFlipper() {
|
||||||
clearTimeout(timeoutId);
|
clearTimeout(timeoutId);
|
||||||
gsap.killTweensOf(items);
|
gsap.killTweensOf(items);
|
||||||
};
|
};
|
||||||
}, []);
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={containerRef} className="grid place-items-center">
|
<div ref={containerRef} class="grid place-items-center">
|
||||||
{subtitles.map((text, i) => (
|
<For each={subtitles}>
|
||||||
|
{(text, i) => (
|
||||||
<span
|
<span
|
||||||
key={text}
|
class="subtitle-item col-start-1 row-start-1 whitespace-nowrap"
|
||||||
className="subtitle-item col-start-1 row-start-1 whitespace-nowrap"
|
aria-hidden={i() !== 0}
|
||||||
aria-hidden={i !== 0}
|
|
||||||
>
|
>
|
||||||
{text}
|
{text}
|
||||||
</span>
|
</span>
|
||||||
))}
|
)}
|
||||||
|
</For>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
"use client";
|
import { A } from "@solidjs/router";
|
||||||
|
import { For } from "solid-js";
|
||||||
import Link from "next/link";
|
import { ArrowRight } from "lucide-solid";
|
||||||
import { ArrowRight } from "lucide-react";
|
|
||||||
import { useScrollReveal } from "../hooks/useScrollReveal";
|
import { useScrollReveal } from "../hooks/useScrollReveal";
|
||||||
import { hobbies, hobbiesPage } from "../data/hobbies";
|
import { hobbies, hobbiesPage } from "../data/hobbies";
|
||||||
import { Icon } from "@/lib/icons";
|
import { Icon } from "@/lib/icons";
|
||||||
|
|
@ -10,41 +9,40 @@ export default function HobbiesSection() {
|
||||||
const revealRef = useScrollReveal<HTMLDivElement>({ stagger: 0.2 });
|
const revealRef = useScrollReveal<HTMLDivElement>({ stagger: 0.2 });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="hobbies" className="py-20 md:py-32 px-[5vw]">
|
<section id="hobbies" class="py-20 md:py-32 px-[5vw]">
|
||||||
<div className="max-w-[1200px] mx-auto">
|
<div class="max-w-[1200px] mx-auto">
|
||||||
<div className="space-y-4 mb-12">
|
<div class="space-y-4 mb-12">
|
||||||
<h2 className="section-label">{hobbiesPage.label}</h2>
|
<h2 class="section-label">{hobbiesPage.label}</h2>
|
||||||
<p className="text-text-secondary max-w-xl">
|
<p class="text-text-secondary max-w-xl">
|
||||||
{hobbiesPage.sectionSubtitle}
|
{hobbiesPage.sectionSubtitle}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div ref={revealRef} className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
<div ref={revealRef} class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
{hobbies.map((hobby) => (
|
<For each={hobbies}>
|
||||||
<div
|
{(hobby) => (
|
||||||
key={hobby.id}
|
<div class="border border-warm-grey p-8 space-y-6 group hover:border-amber/30 transition-colors">
|
||||||
className="border border-warm-grey p-8 space-y-6 group hover:border-amber/30 transition-colors"
|
<div class="w-10 h-10 flex items-center justify-center border border-warm-grey">
|
||||||
>
|
<Icon name={hobby.icon} size={20} class="text-amber" />
|
||||||
<div className="w-10 h-10 flex items-center justify-center border border-warm-grey">
|
|
||||||
<Icon name={hobby.icon} size={20} className="text-amber" />
|
|
||||||
</div>
|
</div>
|
||||||
<h3 className="font-display font-semibold text-text-primary text-2xl tracking-tight">
|
<h3 class="font-display font-semibold text-text-primary text-2xl tracking-tight">
|
||||||
{hobby.title}
|
{hobby.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-text-secondary leading-relaxed">
|
<p class="text-text-secondary leading-relaxed">
|
||||||
{hobby.shortDescription}
|
{hobby.shortDescription}
|
||||||
</p>
|
</p>
|
||||||
<Link
|
<A
|
||||||
href="/hobbies"
|
href="/hobbies"
|
||||||
className="inline-flex items-center gap-2 text-amber hover:text-amber-hover transition-colors group/link"
|
class="inline-flex items-center gap-2 text-amber hover:text-amber-hover transition-colors group/link"
|
||||||
>
|
>
|
||||||
<span className="text-link">{hobbiesPage.linkText}</span>
|
<span class="text-link">{hobbiesPage.linkText}</span>
|
||||||
<ArrowRight
|
<ArrowRight
|
||||||
size={18}
|
size={18}
|
||||||
className="group-hover/link:translate-x-1 transition-transform"
|
class="group-hover/link:translate-x-1 transition-transform"
|
||||||
/>
|
/>
|
||||||
</Link>
|
</A>
|
||||||
</div>
|
</div>
|
||||||
))}
|
)}
|
||||||
|
</For>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,62 +1,60 @@
|
||||||
"use client";
|
import { A } from "@solidjs/router";
|
||||||
|
import { For } from "solid-js";
|
||||||
import Link from "next/link";
|
import { ArrowRight } from "lucide-solid";
|
||||||
import { useScrollReveal } from "../hooks/useScrollReveal";
|
import { useScrollReveal } from "../hooks/useScrollReveal";
|
||||||
import { projects, projectsPage } from "../data/projects";
|
import { projects, projectsPage } from "../data/projects";
|
||||||
import { ArrowRight } from "lucide-react";
|
|
||||||
|
|
||||||
export default function ProjectsSection() {
|
export default function ProjectsSection() {
|
||||||
const revealRef = useScrollReveal<HTMLDivElement>({ stagger: 0.15 });
|
const revealRef = useScrollReveal<HTMLDivElement>({ stagger: 0.15 });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="projects" className="py-20 md:py-32 px-[5vw] bg-charcoal">
|
<section id="projects" class="py-20 md:py-32 px-[5vw] bg-charcoal">
|
||||||
<div className="max-w-[1200px] mx-auto">
|
<div class="max-w-[1200px] mx-auto">
|
||||||
<div ref={revealRef} className="space-y-12">
|
<div ref={revealRef} class="space-y-12">
|
||||||
<div className="space-y-4">
|
<div class="space-y-4">
|
||||||
<h2 className="section-label">{projectsPage.sectionLabel}</h2>
|
<h2 class="section-label">{projectsPage.sectionLabel}</h2>
|
||||||
<p className="text-text-secondary max-w-xl">
|
<p class="text-text-secondary max-w-xl">
|
||||||
{projectsPage.subtitle}
|
{projectsPage.subtitle}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
{projects.map((project) => (
|
<For each={projects}>
|
||||||
<Link
|
{(project) => (
|
||||||
key={project.id}
|
<A
|
||||||
href={project.link}
|
href={project.link}
|
||||||
className="group block border border-warm-grey bg-deep-space overflow-hidden hover:border-amber/50 transition-colors duration-300"
|
class="group block border border-warm-grey bg-deep-space overflow-hidden hover:border-amber/50 transition-colors duration-300"
|
||||||
>
|
>
|
||||||
<div className="relative overflow-hidden aspect-[4/3]">
|
<div class="relative overflow-hidden aspect-[4/3]">
|
||||||
<img
|
<img
|
||||||
src={project.image}
|
src={project.image}
|
||||||
alt={project.title}
|
alt={project.title}
|
||||||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 ease-out"
|
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 ease-out"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
<div className="absolute inset-0 bg-deep-space/60 translate-y-full group-hover:translate-y-0 transition-transform duration-500 ease-[cubic-bezier(0.33,1,0.68,1)] flex items-center justify-center">
|
<div class="absolute inset-0 bg-deep-space/60 translate-y-full group-hover:translate-y-0 transition-transform duration-500 ease-[cubic-bezier(0.33,1,0.68,1)] flex items-center justify-center">
|
||||||
<span className="inline-flex items-center gap-2 text-amber translate-y-3 group-hover:translate-y-0 transition-transform duration-500 ease-[cubic-bezier(0.33,1,0.68,1)] delay-100">
|
<span class="inline-flex items-center gap-2 text-amber translate-y-3 group-hover:translate-y-0 transition-transform duration-500 ease-[cubic-bezier(0.33,1,0.68,1)] delay-100">
|
||||||
{projectsPage.caseStudyLabel}
|
{projectsPage.caseStudyLabel}
|
||||||
<ArrowRight size={16} className="group-hover:translate-x-1 transition-transform duration-300" />
|
<ArrowRight size={16} class="group-hover:translate-x-1 transition-transform duration-300" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="p-6 space-y-4">
|
<div class="p-6 space-y-4">
|
||||||
<div className="flex flex-wrap gap-2">
|
<div class="flex flex-wrap gap-2">
|
||||||
{project.tags.map((tag) => (
|
<For each={project.tags}>
|
||||||
<span key={tag} className="chip">
|
{(tag) => <span class="chip">{tag}</span>}
|
||||||
{tag}
|
</For>
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
<h3 className="font-display font-semibold text-text-primary text-xl tracking-tight">
|
<h3 class="font-display font-semibold text-text-primary text-xl tracking-tight">
|
||||||
{project.title}
|
{project.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-text-secondary text-sm leading-relaxed">
|
<p class="text-text-secondary text-sm leading-relaxed">
|
||||||
{project.description}
|
{project.description}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</A>
|
||||||
))}
|
)}
|
||||||
|
</For>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
"use client";
|
import { For } from "solid-js";
|
||||||
|
|
||||||
import { useScrollReveal } from "../hooks/useScrollReveal";
|
import { useScrollReveal } from "../hooks/useScrollReveal";
|
||||||
import { timeline, timelinePage } from "../data/timeline";
|
import { timeline, timelinePage } from "../data/timeline";
|
||||||
|
|
||||||
|
|
@ -7,64 +6,58 @@ export default function TimelineSection() {
|
||||||
const revealRef = useScrollReveal<HTMLDivElement>({ stagger: 0.12 });
|
const revealRef = useScrollReveal<HTMLDivElement>({ stagger: 0.12 });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="timeline" className="py-20 md:py-32 px-[5vw] bg-charcoal">
|
<section id="timeline" class="py-20 md:py-32 px-[5vw] bg-charcoal">
|
||||||
<div className="max-w-[1200px] mx-auto">
|
<div class="max-w-[1200px] mx-auto">
|
||||||
<div className="space-y-4 mb-16">
|
<div class="space-y-4 mb-16">
|
||||||
<h2 className="section-label">{timelinePage.label}</h2>
|
<h2 class="section-label">{timelinePage.label}</h2>
|
||||||
<p className="text-text-secondary max-w-xl">
|
<p class="text-text-secondary max-w-xl">
|
||||||
{timelinePage.subtitle}
|
{timelinePage.subtitle}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div ref={revealRef} className="relative">
|
<div ref={revealRef} class="relative">
|
||||||
{/* Vertical line */}
|
<div class="absolute left-4 md:left-1/2 top-0 bottom-0 w-px bg-warm-grey md:-translate-x-px" />
|
||||||
<div className="absolute left-4 md:left-1/2 top-0 bottom-0 w-px bg-warm-grey md:-translate-x-px" />
|
|
||||||
|
|
||||||
<div className="space-y-12">
|
<div class="space-y-12">
|
||||||
{timeline.map((item) => {
|
<For each={timeline}>
|
||||||
const isLeft = item.side === "left";
|
{(item) => {
|
||||||
|
const isLeft = () => item.side === "left";
|
||||||
return (
|
return (
|
||||||
<div
|
<div class="relative flex items-start md:items-center">
|
||||||
key={item.year}
|
<div class="absolute left-4 md:left-1/2 w-3 h-3 bg-amber border-2 border-deep-space -translate-x-1/2 mt-2 md:mt-0 z-10" />
|
||||||
className="relative flex items-start md:items-center"
|
|
||||||
>
|
|
||||||
{/* Dot */}
|
|
||||||
<div className="absolute left-4 md:left-1/2 w-3 h-3 bg-amber border-2 border-deep-space -translate-x-1/2 mt-2 md:mt-0 z-10" />
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div
|
<div
|
||||||
className={`pl-12 md:pl-0 md:w-1/2 ${
|
class={`pl-12 md:pl-0 md:w-1/2 ${
|
||||||
isLeft
|
isLeft()
|
||||||
? "md:pr-12 md:text-right"
|
? "md:pr-12 md:text-right"
|
||||||
: "md:pl-12 md:ml-auto"
|
: "md:pl-12 md:ml-auto"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="space-y-3">
|
<div class="space-y-3">
|
||||||
<span className="font-mono text-amber text-sm">
|
<span class="font-mono text-amber text-sm">
|
||||||
{item.year}
|
{item.year}
|
||||||
</span>
|
</span>
|
||||||
<h3 className="font-display font-semibold text-text-primary text-xl tracking-tight">
|
<h3 class="font-display font-semibold text-text-primary text-xl tracking-tight">
|
||||||
{item.title}
|
{item.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-text-secondary text-sm leading-relaxed">
|
<p class="text-text-secondary text-sm leading-relaxed">
|
||||||
{item.description}
|
{item.description}
|
||||||
</p>
|
</p>
|
||||||
<div
|
<div
|
||||||
className={`flex flex-wrap gap-2 ${
|
class={`flex flex-wrap gap-2 ${
|
||||||
isLeft ? "md:justify-end" : ""
|
isLeft() ? "md:justify-end" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{item.tags.map((tag) => (
|
<For each={item.tags}>
|
||||||
<span key={tag} className="chip">
|
{(tag) => <span class="chip">{tag}</span>}
|
||||||
{tag}
|
</For>
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
}}
|
||||||
|
</For>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
@ -1,10 +1,6 @@
|
||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"lib": [
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
"dom",
|
|
||||||
"dom.iterable",
|
|
||||||
"esnext"
|
|
||||||
],
|
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"strict": true,
|
"strict": true,
|
||||||
|
|
@ -14,30 +10,15 @@
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"jsx": "react-jsx",
|
"jsx": "preserve",
|
||||||
|
"jsxImportSource": "solid-js",
|
||||||
"incremental": true,
|
"incremental": true,
|
||||||
"plugins": [
|
|
||||||
{
|
|
||||||
"name": "next"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": [
|
"@/*": ["./src/*"]
|
||||||
"./src/*"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"target": "ES2017"
|
"target": "ES2017",
|
||||||
|
"types": ["vite/client"]
|
||||||
},
|
},
|
||||||
"include": [
|
"include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.ts"],
|
||||||
"**/*.ts",
|
"exclude": ["node_modules", "dist"]
|
||||||
"**/*.tsx",
|
|
||||||
".next/types/**/*.ts",
|
|
||||||
"next-env.d.ts",
|
|
||||||
"dist/types/**/*.ts",
|
|
||||||
".next/dev/types/**/*.ts",
|
|
||||||
"dist/dev/types/**/*.ts"
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"node_modules"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
3
vercel.json
Normal file
3
vercel.json
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
|
||||||
|
}
|
||||||
15
vite.config.ts
Normal file
15
vite.config.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
import solid from "vite-plugin-solid";
|
||||||
|
import { resolve } from "path";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [solid()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": resolve(__dirname, "./src"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
outDir: "dist",
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Add table
Reference in a new issue