Julien Valverdé
@@ -1,5 +1,23 @@
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { ArrowDown, ArrowUpRight, Code2, GitBranch } from "lucide-react"
|
||||
import {
|
||||
AppWindow,
|
||||
ArrowDown,
|
||||
ArrowUpRight,
|
||||
BriefcaseBusiness,
|
||||
ChefHat,
|
||||
Code2,
|
||||
CodeXml,
|
||||
Database,
|
||||
GitBranch,
|
||||
Hammer,
|
||||
Home,
|
||||
Library,
|
||||
MapPin,
|
||||
PackageOpen,
|
||||
PanelsTopLeft,
|
||||
Radio,
|
||||
UserRound,
|
||||
} from "lucide-react"
|
||||
import { useEffect, useState } from "react"
|
||||
import { ProjectCard } from "@/components/portfolio/ProjectCard"
|
||||
import { SectionHeading } from "@/components/portfolio/SectionHeading"
|
||||
@@ -10,11 +28,11 @@ export const Route = createFileRoute("/_main/")({
|
||||
})
|
||||
|
||||
const sections = [
|
||||
{ id: "top", number: "00", label: "Home" },
|
||||
{ id: "work", number: "01", label: "Selected work" },
|
||||
{ id: "workbench", number: "02", label: "Workbench" },
|
||||
{ id: "about", number: "03", label: "About" },
|
||||
{ id: "repositories", number: "04", label: "Repositories" },
|
||||
{ id: "top", number: "00", label: "Home", icon: Home },
|
||||
{ id: "work", number: "01", label: "Selected work", icon: BriefcaseBusiness },
|
||||
{ id: "workbench", number: "02", label: "Workbench", icon: Hammer },
|
||||
{ id: "about", number: "03", label: "About", icon: UserRound },
|
||||
{ id: "repositories", number: "04", label: "Repositories", icon: GitBranch },
|
||||
] as const
|
||||
|
||||
function RouteComponent() {
|
||||
@@ -60,6 +78,7 @@ function RouteComponent() {
|
||||
className={activeSection === section.id ? "is-active" : undefined}
|
||||
aria-current={activeSection === section.id ? "location" : undefined}
|
||||
>
|
||||
<section.icon aria-hidden="true" />
|
||||
<span>{section.number}</span>
|
||||
{section.label}
|
||||
</a>
|
||||
@@ -81,7 +100,7 @@ function RouteComponent() {
|
||||
|
||||
<section className="hero" id="top">
|
||||
<div className="hero__intro">
|
||||
<p className="hero__kicker">Full-stack engineer · Product builder</p>
|
||||
<p className="hero__kicker"><MapPin aria-hidden="true" /> Full-stack engineer · Product builder</p>
|
||||
<h1>
|
||||
Useful systems,
|
||||
<span>built properly.</span>
|
||||
@@ -102,11 +121,11 @@ function RouteComponent() {
|
||||
</section>
|
||||
|
||||
<ul className="capability-strip" aria-label="Core capabilities">
|
||||
<li>TypeScript</li>
|
||||
<li>Effect</li>
|
||||
<li>React</li>
|
||||
<li>Product engineering</li>
|
||||
<li>Open source</li>
|
||||
<li><CodeXml aria-hidden="true" /> TypeScript</li>
|
||||
<li><Radio aria-hidden="true" /> Effect</li>
|
||||
<li><PanelsTopLeft aria-hidden="true" /> React</li>
|
||||
<li><AppWindow aria-hidden="true" /> Product engineering</li>
|
||||
<li><PackageOpen aria-hidden="true" /> Open source</li>
|
||||
</ul>
|
||||
|
||||
<section className="work-section" id="work">
|
||||
@@ -119,32 +138,44 @@ function RouteComponent() {
|
||||
<div className="project-grid">
|
||||
<ProjectCard
|
||||
index="01"
|
||||
title="effect-lens"
|
||||
category="Open source / library"
|
||||
description="Focus, subscribe to, and update nested state without losing typed failures or requirements."
|
||||
tags={["Effect", "State", "TypeScript"]}
|
||||
href="https://www.npmjs.com/package/effect-lens"
|
||||
linkLabel="View on npm"
|
||||
variant="dark"
|
||||
/>
|
||||
<ProjectCard
|
||||
index="02"
|
||||
title="effect-view"
|
||||
title="Effect View"
|
||||
category="Open source / React"
|
||||
categoryIcon={<PanelsTopLeft aria-hidden="true" />}
|
||||
description="A small bridge for writing React function components as composable Effect programs."
|
||||
tags={["Effect", "React", "DX"]}
|
||||
href="https://www.npmjs.com/package/effect-view"
|
||||
linkLabel="View on npm"
|
||||
accent="teal"
|
||||
logo={<img src="/logos/effect-view.svg" alt="Effect View" />}
|
||||
/>
|
||||
<ProjectCard
|
||||
index="02"
|
||||
title="Effect Lens"
|
||||
category="Open source / library"
|
||||
categoryIcon={<Library aria-hidden="true" />}
|
||||
description="Focus, subscribe to, and update nested state without losing typed failures or requirements."
|
||||
tags={["Effect", "State", "TypeScript"]}
|
||||
href="https://www.npmjs.com/package/effect-lens"
|
||||
linkLabel="View on npm"
|
||||
accent="violet"
|
||||
logo={<img src="/logos/effect-lens.svg" alt="Effect Lens" />}
|
||||
/>
|
||||
<ProjectCard
|
||||
index="03"
|
||||
title="Comme le Chef"
|
||||
category="SaaS / Food tech"
|
||||
categoryIcon={<ChefHat aria-hidden="true" />}
|
||||
description="A recipe workspace for nutrition, allergens, costing, and production documents."
|
||||
tags={["Product", "SaaS", "Food tech"]}
|
||||
href="https://commedeschef.com/"
|
||||
linkLabel="Visit website"
|
||||
variant="outline"
|
||||
accent="chef"
|
||||
logo={
|
||||
<span className="comme-le-chef-logo" role="img" aria-label="Comme le Chef">
|
||||
<span>Comme</span><span>le Chef</span>
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
@@ -161,6 +192,7 @@ function RouteComponent() {
|
||||
index="04"
|
||||
title="FLOWpti"
|
||||
category="Upcoming / Logistics"
|
||||
categoryIcon={<MapPin aria-hidden="true" />}
|
||||
description="Route optimization that turns operational constraints into efficient delivery plans."
|
||||
tags={["Routing", "Optimization", "B2B"]}
|
||||
/>
|
||||
@@ -168,6 +200,7 @@ function RouteComponent() {
|
||||
index="05"
|
||||
title="Sentinel"
|
||||
category="Upcoming / Open source"
|
||||
categoryIcon={<Database aria-hidden="true" />}
|
||||
description="Self-hosted OBD-II telemetry for vehicle diagnostics and remote insight."
|
||||
tags={["OBD-II", "Telemetry", "Self-hosted"]}
|
||||
variant="dark"
|
||||
|
||||
Reference in New Issue
Block a user