Improve landing page

packages/webapp/src/routes/_main.index.tsx

@@ -1,75 +1,119 @@
 import { createFileRoute } from "@tanstack/react-router"
 import { ArrowDown, ArrowUpRight, Code2, GitBranch } from "lucide-react"
+import { useEffect, useState } from "react"
 import { ProjectCard } from "@/components/portfolio/ProjectCard"
 import { SectionHeading } from "@/components/portfolio/SectionHeading"
 import { Win98Status } from "@/components/portfolio/Win98Status"
 
-
 export const Route = createFileRoute("/_main/")({
     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() {
+    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 (
-        <main>
+        <main className="portfolio-page">
-            <header className="site-header">
+            <div className="site-shell">
+                <aside className="site-rail" aria-label="Page index">
                     <a className="site-mark" href="#top" aria-label="Julien Valverde, back to top">
                         <span>JV</span>
-                    <span>Full-stack engineer<br />&amp; product builder</span>
+                        <span>Julien<br />Valverde</span>
                     </a>
 
                     <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
+                                key={section.id}
+                                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>
+
+                    <div className="site-rail__meta">
+                        <span className="availability-dot" aria-hidden="true" />
+                        Available for select projects
+                        <small>Chambéry, France</small>
+                    </div>
+                </aside>
+
+                <div className="site-content">
+                    <header className="site-header">
+                        <p><span>julien.dev</span> / {current.label}</p>
+                        <a href="mailto:hello@valverde.cloud">hello@valverde.cloud ↗</a>
                     </header>
 
                     <section className="hero" id="top">
                         <div className="hero__intro">
-                    <p className="hero__kicker">Independent engineer · Chambéry, France</p>
+                            <p className="hero__kicker">Full-stack engineer · Product builder</p>
                             <h1>
-                        I build
+                                Useful systems,
-                        <span>useful</span>
+                                <span>built properly.</span>
-                        systems.
                             </h1>
-
+                            <p className="hero__summary">
-                    <div className="hero__footer">
+                                I turn difficult domain problems into clear, durable software—from
-                        <p>
+                                open-source primitives to complete vertical products.
-                            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
+                                See the work
                                 <ArrowDown aria-hidden="true" />
                             </a>
                         </div>
-                </div>
 
                         <aside className="hero__status" aria-label="Developer status">
-                    <div className="hero__stamp" aria-hidden="true">EST. 2019 / WEB</div>
                             <Win98Status />
                         </aside>
                     </section>
 
-            <div className="ticker" aria-hidden="true">
+                    <ul className="capability-strip" aria-label="Core capabilities">
-                <div>
+                        <li>TypeScript</li>
-                    <span>Effect</span><i>✦</i>
+                        <li>Effect</li>
-                    <span>TypeScript</span><i>✦</i>
+                        <li>React</li>
-                    <span>Product engineering</span><i>✦</i>
+                        <li>Product engineering</li>
-                    <span>Open source</span><i>✦</i>
+                        <li>Open source</li>
-                    <span>Effect</span><i>✦</i>
+                    </ul>
-                    <span>TypeScript</span><i>✦</i>
-                    <span>Product engineering</span><i>✦</i>
-                    <span>Open source</span><i>✦</i>
-                </div>
-            </div>
 
                     <section className="work-section" id="work">
                         <SectionHeading
                             eyebrow="01 / Selected work"
-                    title="Tools for developers. Products for people."
+                            title="Shipped and useful."
-                    description="A selection of open-source libraries, production software, and what is currently taking shape."
+                            description="Libraries and products solving concrete problems. No concept pieces."
                         />
 
                         <div className="project-grid">
@@ -77,7 +121,7 @@ function RouteComponent() {
                                 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."
+                                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"
@@ -87,17 +131,16 @@ function RouteComponent() {
                                 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."
+                                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"
-                        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."
+                                description="A recipe workspace for nutrition, allergens, costing, and production documents."
                                 tags={["Product", "SaaS", "Food tech"]}
                                 href="https://commedeschef.com/"
                                 linkLabel="Visit website"
@@ -106,11 +149,11 @@ function RouteComponent() {
                         </div>
                     </section>
 
-            <section className="upcoming-section">
+                    <section className="upcoming-section" id="workbench">
                         <SectionHeading
-                    eyebrow="02 / On the workbench"
+                            eyebrow="02 / Workbench"
-                    title="Two new systems are booting."
+                            title="Now building."
-                    description="Early-stage products in active development. More details will appear when there is something worth showing."
+                            description="Two systems in active development."
                         />
 
                         <div className="upcoming-grid">
@@ -118,14 +161,14 @@ function RouteComponent() {
                                 index="04"
                                 title="FLOWpti"
                                 category="Upcoming / Logistics"
-                        description="Delivery route optimization for transport professionals—turning operational constraints into clearer, more efficient routes."
+                                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="A self-hosted telemetry and observability stack that synchronizes OBD-II vehicle data for visualization, diagnostics, and remote insight."
+                                description="Self-hosted OBD-II telemetry for vehicle diagnostics and remote insight."
                                 tags={["OBD-II", "Telemetry", "Self-hosted"]}
                                 variant="dark"
                             />
@@ -139,24 +182,27 @@ function RouteComponent() {
                         </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.
+                                Full-stack engineer and entrepreneur in the French Alps.
                             </p>
                             <div className="about-section__columns">
                                 <p>
-                            I like the difficult middle: where domain problems, product decisions,
+                                    I work in the difficult middle, where domain problems, product
-                            interface design, and systems engineering all meet.
+                                    decisions, interface design, and systems engineering meet.
                                 </p>
                                 <p>
-                            My current work spans typed functional programming, React, operational
+                                    Current interests: typed functional programming, React,
-                            software, optimization, and self-hosted infrastructure.
+                                    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>
+                        <SectionHeading
-                <h2>Follow the commits.</h2>
+                            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" />
@@ -172,13 +218,14 @@ function RouteComponent() {
                     </section>
 
                     <footer className="site-footer">
+                        <p>Build it well. Make it useful.</p>
                         <div>
-                    <span>Julien Valverde</span>
+                            <span>Julien Valverde © {new Date().getFullYear()}</span>
-                    <span>© {new Date().getFullYear()}</span>
-                </div>
-                <p>Build it well.<br />Make it useful.</p>
                             <a href="#top">Back to top ↑</a>
+                        </div>
                     </footer>
+                </div>
+            </div>
         </main>
     )
 }