Julien Valverdé
+378
-385
File diff suppressed because it is too large
Load Diff
@@ -1,184 +1,231 @@
|
|||||||
import { createFileRoute } from "@tanstack/react-router"
|
import { createFileRoute } from "@tanstack/react-router"
|
||||||
import { ArrowDown, ArrowUpRight, Code2, GitBranch } from "lucide-react"
|
import { ArrowDown, ArrowUpRight, Code2, GitBranch } from "lucide-react"
|
||||||
|
import { useEffect, useState } from "react"
|
||||||
import { ProjectCard } from "@/components/portfolio/ProjectCard"
|
import { ProjectCard } from "@/components/portfolio/ProjectCard"
|
||||||
import { SectionHeading } from "@/components/portfolio/SectionHeading"
|
import { SectionHeading } from "@/components/portfolio/SectionHeading"
|
||||||
import { Win98Status } from "@/components/portfolio/Win98Status"
|
import { Win98Status } from "@/components/portfolio/Win98Status"
|
||||||
|
|
||||||
|
|
||||||
export const Route = createFileRoute("/_main/")({
|
export const Route = createFileRoute("/_main/")({
|
||||||
component: RouteComponent,
|
component: RouteComponent,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
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" },
|
||||||
|
] as const
|
||||||
|
|
||||||
function RouteComponent() {
|
function RouteComponent() {
|
||||||
|
const [activeSection, setActiveSection] = useState("top")
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const observer = new IntersectionObserver(
|
||||||
|
entries => {
|
||||||
|
const visible = entries
|
||||||
|
.filter(entry => entry.isIntersecting)
|
||||||
|
.sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]
|
||||||
|
|
||||||
|
if (visible) setActiveSection(visible.target.id)
|
||||||
|
},
|
||||||
|
{ rootMargin: "-18% 0px -62% 0px", threshold: [0, 0.15, 0.4] },
|
||||||
|
)
|
||||||
|
|
||||||
|
for (const section of sections) {
|
||||||
|
const element = document.getElementById(section.id)
|
||||||
|
if (element) observer.observe(element)
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => observer.disconnect()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const current = sections.find(section => section.id === activeSection) ?? sections[0]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main>
|
<main className="portfolio-page">
|
||||||
<header className="site-header">
|
<div className="site-shell">
|
||||||
<a className="site-mark" href="#top" aria-label="Julien Valverde, back to top">
|
<aside className="site-rail" aria-label="Page index">
|
||||||
<span>JV</span>
|
<a className="site-mark" href="#top" aria-label="Julien Valverde, back to top">
|
||||||
<span>Full-stack engineer<br />& product builder</span>
|
<span>JV</span>
|
||||||
</a>
|
<span>Julien<br />Valverde</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
<nav aria-label="Main navigation">
|
<nav aria-label="Main navigation">
|
||||||
<a href="#work">Work</a>
|
<p>Index</p>
|
||||||
<a href="#about">About</a>
|
{sections.map(section => (
|
||||||
<a href="#repositories">Repositories</a>
|
<a
|
||||||
</nav>
|
key={section.id}
|
||||||
</header>
|
href={`#${section.id}`}
|
||||||
|
className={activeSection === section.id ? "is-active" : undefined}
|
||||||
|
aria-current={activeSection === section.id ? "location" : undefined}
|
||||||
|
>
|
||||||
|
<span>{section.number}</span>
|
||||||
|
{section.label}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
|
||||||
<section className="hero" id="top">
|
<div className="site-rail__meta">
|
||||||
<div className="hero__intro">
|
<span className="availability-dot" aria-hidden="true" />
|
||||||
<p className="hero__kicker">Independent engineer · Chambéry, France</p>
|
Available for select projects
|
||||||
<h1>
|
<small>Chambéry, France</small>
|
||||||
I build
|
|
||||||
<span>useful</span>
|
|
||||||
systems.
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div className="hero__footer">
|
|
||||||
<p>
|
|
||||||
From open-source primitives to vertical products — software with strong types,
|
|
||||||
clear interfaces, and a reason to exist.
|
|
||||||
</p>
|
|
||||||
<a className="brutal-button" href="#work">
|
|
||||||
Explore selected work
|
|
||||||
<ArrowDown aria-hidden="true" />
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<aside className="hero__status" aria-label="Developer status">
|
|
||||||
<div className="hero__stamp" aria-hidden="true">EST. 2019 / WEB</div>
|
|
||||||
<Win98Status />
|
|
||||||
</aside>
|
</aside>
|
||||||
</section>
|
|
||||||
|
|
||||||
<div className="ticker" aria-hidden="true">
|
<div className="site-content">
|
||||||
<div>
|
<header className="site-header">
|
||||||
<span>Effect</span><i>✦</i>
|
<p><span>julien.dev</span> / {current.label}</p>
|
||||||
<span>TypeScript</span><i>✦</i>
|
<a href="mailto:hello@valverde.cloud">hello@valverde.cloud ↗</a>
|
||||||
<span>Product engineering</span><i>✦</i>
|
</header>
|
||||||
<span>Open source</span><i>✦</i>
|
|
||||||
<span>Effect</span><i>✦</i>
|
<section className="hero" id="top">
|
||||||
<span>TypeScript</span><i>✦</i>
|
<div className="hero__intro">
|
||||||
<span>Product engineering</span><i>✦</i>
|
<p className="hero__kicker">Full-stack engineer · Product builder</p>
|
||||||
<span>Open source</span><i>✦</i>
|
<h1>
|
||||||
|
Useful systems,
|
||||||
|
<span>built properly.</span>
|
||||||
|
</h1>
|
||||||
|
<p className="hero__summary">
|
||||||
|
I turn difficult domain problems into clear, durable software—from
|
||||||
|
open-source primitives to complete vertical products.
|
||||||
|
</p>
|
||||||
|
<a className="brutal-button" href="#work">
|
||||||
|
See the work
|
||||||
|
<ArrowDown aria-hidden="true" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside className="hero__status" aria-label="Developer status">
|
||||||
|
<Win98Status />
|
||||||
|
</aside>
|
||||||
|
</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>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<section className="work-section" id="work">
|
||||||
|
<SectionHeading
|
||||||
|
eyebrow="01 / Selected work"
|
||||||
|
title="Shipped and useful."
|
||||||
|
description="Libraries and products solving concrete problems. No concept pieces."
|
||||||
|
/>
|
||||||
|
|
||||||
|
<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"
|
||||||
|
category="Open source / React"
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
<ProjectCard
|
||||||
|
index="03"
|
||||||
|
title="Comme le Chef"
|
||||||
|
category="SaaS / Food tech"
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="upcoming-section" id="workbench">
|
||||||
|
<SectionHeading
|
||||||
|
eyebrow="02 / Workbench"
|
||||||
|
title="Now building."
|
||||||
|
description="Two systems in active development."
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="upcoming-grid">
|
||||||
|
<ProjectCard
|
||||||
|
index="04"
|
||||||
|
title="FLOWpti"
|
||||||
|
category="Upcoming / Logistics"
|
||||||
|
description="Route optimization that turns operational constraints into efficient delivery plans."
|
||||||
|
tags={["Routing", "Optimization", "B2B"]}
|
||||||
|
/>
|
||||||
|
<ProjectCard
|
||||||
|
index="05"
|
||||||
|
title="Sentinel"
|
||||||
|
category="Upcoming / Open source"
|
||||||
|
description="Self-hosted OBD-II telemetry for vehicle diagnostics and remote insight."
|
||||||
|
tags={["OBD-II", "Telemetry", "Self-hosted"]}
|
||||||
|
variant="dark"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="about-section" id="about">
|
||||||
|
<div className="about-section__label">
|
||||||
|
<span>03</span>
|
||||||
|
<span>About</span>
|
||||||
|
</div>
|
||||||
|
<div className="about-section__copy">
|
||||||
|
<p className="about-section__lead">
|
||||||
|
Full-stack engineer and entrepreneur in the French Alps.
|
||||||
|
</p>
|
||||||
|
<div className="about-section__columns">
|
||||||
|
<p>
|
||||||
|
I work in the difficult middle, where domain problems, product
|
||||||
|
decisions, interface design, and systems engineering meet.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Current interests: typed functional programming, React,
|
||||||
|
operational software, optimization, and self-hosted infrastructure.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="repo-section" id="repositories">
|
||||||
|
<SectionHeading
|
||||||
|
eyebrow="04 / Repositories"
|
||||||
|
title="Follow the commits."
|
||||||
|
description="Source code, experiments, and work in progress."
|
||||||
|
/>
|
||||||
|
<div className="repo-links">
|
||||||
|
<a href="https://git.valverde.cloud/" target="_blank" rel="noreferrer">
|
||||||
|
<GitBranch aria-hidden="true" />
|
||||||
|
<span><small>Primary forge</small>git.valverde.cloud</span>
|
||||||
|
<ArrowUpRight aria-hidden="true" />
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/Thiladev" target="_blank" rel="noreferrer">
|
||||||
|
<Code2 aria-hidden="true" />
|
||||||
|
<span><small>Public collaboration</small>github.com/Thiladev</span>
|
||||||
|
<ArrowUpRight aria-hidden="true" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer className="site-footer">
|
||||||
|
<p>Build it well. Make it useful.</p>
|
||||||
|
<div>
|
||||||
|
<span>Julien Valverde © {new Date().getFullYear()}</span>
|
||||||
|
<a href="#top">Back to top ↑</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section className="work-section" id="work">
|
|
||||||
<SectionHeading
|
|
||||||
eyebrow="01 / Selected work"
|
|
||||||
title="Tools for developers. Products for people."
|
|
||||||
description="A selection of open-source libraries, production software, and what is currently taking shape."
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="project-grid">
|
|
||||||
<ProjectCard
|
|
||||||
index="01"
|
|
||||||
title="effect-lens"
|
|
||||||
category="Open source / library"
|
|
||||||
description="An effectful Lens for focusing, subscribing to, and updating nested state—without losing typed failures or requirements along the way."
|
|
||||||
tags={["Effect", "State", "TypeScript"]}
|
|
||||||
href="https://www.npmjs.com/package/effect-lens"
|
|
||||||
linkLabel="View on npm"
|
|
||||||
variant="dark"
|
|
||||||
/>
|
|
||||||
<ProjectCard
|
|
||||||
index="02"
|
|
||||||
title="effect-view"
|
|
||||||
category="Open source / React"
|
|
||||||
description="A small bridge for writing React function components with Effect, designed around composable programs instead of scattered side effects."
|
|
||||||
tags={["Effect", "React", "DX"]}
|
|
||||||
href="https://www.npmjs.com/package/effect-view"
|
|
||||||
linkLabel="View on npm"
|
|
||||||
variant="light"
|
|
||||||
/>
|
|
||||||
<ProjectCard
|
|
||||||
index="03"
|
|
||||||
title="Comme le Chef"
|
|
||||||
category="SaaS / Food tech"
|
|
||||||
description="An online recipe workspace for composing and balancing culinary creations, tracking nutrition and allergens, and generating production documents."
|
|
||||||
tags={["Product", "SaaS", "Food tech"]}
|
|
||||||
href="https://commedeschef.com/"
|
|
||||||
linkLabel="Visit website"
|
|
||||||
variant="outline"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="upcoming-section">
|
|
||||||
<SectionHeading
|
|
||||||
eyebrow="02 / On the workbench"
|
|
||||||
title="Two new systems are booting."
|
|
||||||
description="Early-stage products in active development. More details will appear when there is something worth showing."
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="upcoming-grid">
|
|
||||||
<ProjectCard
|
|
||||||
index="04"
|
|
||||||
title="FLOWpti"
|
|
||||||
category="Upcoming / Logistics"
|
|
||||||
description="Delivery route optimization for transport professionals—turning operational constraints into clearer, more efficient routes."
|
|
||||||
tags={["Routing", "Optimization", "B2B"]}
|
|
||||||
/>
|
|
||||||
<ProjectCard
|
|
||||||
index="05"
|
|
||||||
title="Sentinel"
|
|
||||||
category="Upcoming / Open source"
|
|
||||||
description="A self-hosted telemetry and observability stack that synchronizes OBD-II vehicle data for visualization, diagnostics, and remote insight."
|
|
||||||
tags={["OBD-II", "Telemetry", "Self-hosted"]}
|
|
||||||
variant="dark"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="about-section" id="about">
|
|
||||||
<div className="about-section__label">
|
|
||||||
<span>03</span>
|
|
||||||
<span>About</span>
|
|
||||||
</div>
|
|
||||||
<div className="about-section__copy">
|
|
||||||
<p className="about-section__lead">
|
|
||||||
I’m Julien Valverde, a full-stack engineer and entrepreneur based in the French Alps.
|
|
||||||
</p>
|
|
||||||
<div className="about-section__columns">
|
|
||||||
<p>
|
|
||||||
I like the difficult middle: where domain problems, product decisions,
|
|
||||||
interface design, and systems engineering all meet.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
My current work spans typed functional programming, React, operational
|
|
||||||
software, optimization, and self-hosted infrastructure.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="repo-section" id="repositories">
|
|
||||||
<p className="repo-section__eyebrow">Source code, experiments, and works in progress</p>
|
|
||||||
<h2>Follow the commits.</h2>
|
|
||||||
<div className="repo-links">
|
|
||||||
<a href="https://git.valverde.cloud/" target="_blank" rel="noreferrer">
|
|
||||||
<GitBranch aria-hidden="true" />
|
|
||||||
<span><small>Primary forge</small>git.valverde.cloud</span>
|
|
||||||
<ArrowUpRight aria-hidden="true" />
|
|
||||||
</a>
|
|
||||||
<a href="https://github.com/Thiladev" target="_blank" rel="noreferrer">
|
|
||||||
<Code2 aria-hidden="true" />
|
|
||||||
<span><small>Public collaboration</small>github.com/Thiladev</span>
|
|
||||||
<ArrowUpRight aria-hidden="true" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<footer className="site-footer">
|
|
||||||
<div>
|
|
||||||
<span>Julien Valverde</span>
|
|
||||||
<span>© {new Date().getFullYear()}</span>
|
|
||||||
</div>
|
|
||||||
<p>Build it well.<br />Make it useful.</p>
|
|
||||||
<a href="#top">Back to top ↑</a>
|
|
||||||
</footer>
|
|
||||||
</main>
|
</main>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user