How this was built.

Framework

• ◆Next.js 15 (App Router): RSC for server rendering, client components at the boundary
• ◆TypeScript strict mode: no implicit any, no exceptions
• ◆React 19: concurrent features, server actions

Styling

• ◆Tailwind CSS v4: utility classes for responsive layout only
• ◆CSS custom properties: the actual design system, defined in globals.css
• ◆No CSS-in-JS: zero runtime style overhead

Animation

• ◆Framer Motion: scroll reveals, page transitions, count-ups, magnetic CTAs
• ◆GSAP + ScrollTrigger: parallax (scrub:1), pinned hero, scrub animations
• ◆Lenis: smooth scroll at lerp 0.08, drives GSAP tick

3D

• ◆React Three Fiber + Three.js: 13-node agentic network scene
• ◆Lazy-loaded via next/dynamic: zero impact on initial bundle
• ◆Static SVG fallback for prefers-reduced-motion

Content

• ◆MDX via next-mdx-remote/rsc: server-rendered, custom components
• ◆gray-matter for frontmatter parsing
• ◆All case studies written from primary engagement material

Email

• ◆Resend: contact form delivery to hello@jeremenkovic.com
• ◆Server Actions for form submission: no client-side secrets
• ◆Honeypot field for bot prevention: no CAPTCHA

Infrastructure

• ◆Vercel: production deployment, edge network
• ◆@vercel/analytics + @vercel/speed-insights: lightweight observability
• ◆@vercel/og: Edge Runtime OG image generation at /og
• ◆View Transitions API: experimental, gated behind Next.js config flag

Typography

• ◆PP Editorial New: display copy, headings, pull quotes
• ◆Inter: body text at -0.011em tracking for improved readability
• ◆JetBrains Mono: metadata, timestamps, labels, code
• ◆All loaded via next/font with subset optimisation

Performance

• ◆Three.js lazy-loaded: excluded from initial JS bundle
• ◆Animations gated behind prefers-reduced-motion media query
• ◆AVIF images with explicit dimensions: no layout shift
• ◆Target: Lighthouse 95+ mobile

Accessibility

• ◆Focus-visible states on all interactive elements, styled in gold
• ◆Semantic HTML throughout: nav, main, section, article
• ◆ARIA labels on all icon-only elements
• ◆Reduced motion respected at animation, 3D, and Lenis layers

The palette

The color system is designed around temperature, not contrast. The background is not black: it is #0a0f1c, a midnight navy with warm undertone that reads as refined rather than harsh. The text is not white: it is #f5f1e8, the color of old paper. This pairing is warmer and more legible than pure black-on-white at the scale used here. Gold (#c9a961) is used sparingly: no more than three gold elements are visible in any viewport at once. This restraint is the point. When gold appears, it means something.

The typography

PP Editorial New (a high-contrast serif with sharp ink traps) is used exclusively for display copy: headings, pull quotes, hero text. It is never used for body copy, because high-contrast serifs become hard to read at small sizes in dark-on-dark environments. Body text is Inter, a geometric sans-serif with -0.011em letter-spacing, which subtly improves readability at the sizes used here. JetBrains Mono is used for metadata, timestamps, labels, and anything that needs to feel structural rather than expressive. The three-font system creates a clear information hierarchy: display (narrative), body (content), mono (data).

The motion

Every animation has a purpose. The custom cursor communicates state: a 12px navy dot at rest, a 56px blurred ring on hover, a solid gold ring with "OPEN" text on project cards. The cursor itself reads the page and tells you what an element is before you click it. The scroll progress bar gives spatial orientation on long pages. The count-up animations reward continued attention. The parallax layers at 0.2x/0.6x/1x/1.4x velocities give the hero spatial depth without 3D. The page transition curtain wipes navy-to-navy so route changes feel like turning a page rather than teleporting. None of this is decoration. It is information encoded in motion.

The 3D scene

The hero contains a network of 13 nodes connected by weighted edges, with three travelling light pulses animating along paths: a literal representation of an agentic LLM network. The scene auto-rotates at ~6RPM and tilts toward the cursor. It is built in React Three Fiber, lazy-loaded behind a dynamic import so it does not appear in the initial JS bundle, and replaced with a static SVG for users who prefer reduced motion. The scene was not added because 3D is impressive. It was added because the subject of the site is multi-agent AI systems, and the hero should communicate that at a glance.

The agentic build process

This site was designed, specified, and built end-to-end using Claude Code as the primary development environment. The process took approximately 14 hours across two sessions. The workflow: detailed specification first, then systematic implementation with Claude Code handling the full stack: components, routing, styling, animation, content, SEO, OG image generation, email delivery. No scaffolded template was used. Every file was written from the spec. The site is a live demonstration of what an agentic development workflow produces when the specifications are precise and the operator understands the output.

Decisions not taken

No dark/light mode toggle. The dark palette is the brand: a mode switch would dilute it. No Storybook or design system tooling. The component surface is small enough to maintain without it. No CMS. The MDX files are straightforward to edit and the content is stable. No analytics beyond Vercel's built-in: this site does not need a dashboard, it needs clients. No cookie banner: no third-party trackers are used. No animation library beyond Framer Motion and GSAP: no need for a third animation dependency when two already cover the surface.