wwew.tech

A minimalist, performance-obsessed developer portfolio

bilingual  ·  3D WebGL  ·  inertia scroll  ·  fluid cursor  ·  SSR-safe i18n

  Visit the site →  

---

Table of contents

• Overview
• Highlights
• Tech stack
• Architecture
• Project structure
• Getting started
• Scripts
• Performance
• Internationalization
• Deployment
• Contributing
• License

---

Overview

wwew.tech is a full-stack developer's personal landing page — a single-page experience designed around three principles: speed, restraint, and craft. The site is built on the Next.js App Router with React Server Components, a Lenis-driven smooth-scroll pipeline, a Three.js holographic scene, and a bilingual (RU / EN) copy system that stays hydration-safe.

Not a template. Every section — from the shiny-text hero to the fluid cursor — is written in-house.

Live at wwew.tech.

---

Highlights

Experience Bilingual — Russian & English, toggled from the navbar, synchronized with SSR 3D scene — Holographic WebGL background with postprocessing effects Fluid cursor — Custom canvas-based liquid cursor, gracefully disabled on touch Smooth scroll — GPU-accelerated inertia via Lenis Motion — Framer Motion spring physics plus CSS-only hero animations for LCP stability

Engineering App Router — React Server Components, streaming, typed metadata SSR skeleton — Hero text rendered on the server for instant LCP Lazy loading — Below-the-fold sections code-split and deferred Tree shaking — optimizePackageImports for framer-motion, three, drei, lucide Hardened headers — DNS prefetch, X-Content-Type-Options, aggressive asset caching SEO — Open Graph + Twitter cards, JSON-LD Person schema, sitemap, robots, manifest

---

Tech stack

Layer	Technology
Framework	Next.js 16 (App Router, RSC, streaming)
Language	TypeScript 5 (strict)
Styling	Tailwind CSS v4 with CSS-variable design tokens
Animation	Framer Motion 12 + hand-written CSS keyframes
3D / WebGL	Three.js · @react-three/fiber · @react-three/drei · postprocessing
Scroll	Lenis 1.3 (inertia, RAF-synchronized)
Icons	Lucide React
Fonts	Geist Sans (next/font, preloaded, fallback-adjusted)
CI	GitHub Actions (lint · typecheck · build)
Hosting	Vercel (edge runtime, automatic AVIF/WebP)

---

Architecture

         ┌──────────────────────────────────────────────────┐
         │                  app/layout.tsx                  │
         │  Metadata · JSON-LD · Viewport · Global fonts    │
         └──────────────────────────────────────────────────┘
                                 │
              ┌──────────────────┼──────────────────┐
              ▼                  ▼                  ▼
        AppProvider       LenisProvider      FluidCursorWrapper
        (i18n state)      (inertia scroll)   (deferred canvas)
                                 │
                                 ▼
                       ┌──────────────────┐
                       │   app/page.tsx   │  ←  SSR hero skeleton
                       └──────────────────┘
                                 │
                                 ▼
                     ClientHomePage (hydrates)
                                 │
         ┌───────────────┬───────┴────────┬───────────────┐
         ▼               ▼                ▼               ▼
        Hero        Philosophy        Projects       ContactHub
                        +                 +
                   HolographicScene   StackGrid
                     (Three.js)       (lazy)

Rendering strategy. The hero is server-rendered as a skeleton for an instant LCP, then ClientHomePage hydrates on top of it. FluidCursorWrapper mounts a canvas deferred behind requestIdleCallback, and heavy below-the-fold components (HolographicScene, StackGrid) are dynamically imported.

---

Project structure

src/
├── app/
│   ├── layout.tsx            Root layout · metadata · JSON-LD
│   ├── page.tsx              SSR entry · hero skeleton
│   ├── opengraph-image.tsx   Dynamic OG image
│   ├── twitter-image.tsx     Dynamic Twitter card
│   ├── sitemap.ts            Sitemap generation
│   ├── robots.ts             Robots policy
│   └── globals.css           Tokens · keyframes · utilities
│
├── components/
│   ├── ClientHomePage.tsx    Client shell that composes sections
│   ├── layout/               Navbar · Footer
│   ├── providers/            LenisProvider · FluidCursorWrapper
│   ├── sections/             Hero · Philosophy · ContactHub
│   └── ui/                   HolographicScene · FluidCursor · ShinyText · StackGrid · InteractiveBlob
│
├── context/
│   └── AppContext.tsx        Language context · RU/EN translation dictionary
│
└── lib/
    └── utils.ts              cn() and shared helpers

---

Getting started

Prerequisites

• Node.js ≥ 18
• npm, yarn, or pnpm

Install

git clone https://github.com/wwewtech/wwew.tech.git
cd wwew.tech
npm install

Develop

npm run dev

Open http://localhost:3000.

Build for production

npm run build && npm run start

No environment variables are required. Optionally set NEXT_PUBLIC_SITE_URL to override the canonical URL used in metadata.

---

Scripts

Command	Purpose
npm run dev	Start the Next.js dev server with HMR
npm run build	Create an optimized production build
npm run start	Serve the production build on port 3000
npm run lint	Run ESLint with the Next.js config
npx tsc --noEmit	Type-check the project without emitting files

---

Performance

The site is engineered for sub-second interaction on mid-range mobile hardware.

• LCP-first hero — plain-text H1 rendered server-side, zero animation on the critical path
• Code splitting — HolographicScene, FluidCursor, and the projects grid are dynamic imports
• Font strategy — next/font with display: swap, adjustFontFallback, and preload
• Image pipeline — AVIF → WebP fallback, custom deviceSizes, immutable 1-year cache on hashed assets
• Bundle size — optimizePackageImports applied to framer-motion, three, @react-three/*, lucide-react, lenis
• Source maps — disabled in production to shrink artifacts
• Caching headers — public, max-age=31536000, immutable for static assets and /_next/static/*

---

Internationalization

Language state is managed by a lightweight context in src/context/AppContext.tsx:

• Translation dictionaries for Russian and English live inline — no network round-trip
• The default language is rendered in SSR so the first paint is never empty
• The toggle persists to localStorage and updates <html lang> on the client

Adding a locale is a matter of extending the translations record and the Language union.

---

Deployment

The project is deployed continuously to Vercel from the main branch.

To deploy your own copy:

1. Fork this repository
2. Import it into Vercel
3. Accept the defaults — no environment variables required
4. (Optional) Set NEXT_PUBLIC_SITE_URL to your custom domain

CI (lint + type-check + build) runs on every push and pull request via .github/workflows/ci.yml.

---

Contributing

Issues and pull requests are welcome. Please:

1. Open an issue first for non-trivial changes — templates are in .github/ISSUE_TEMPLATE
2. Keep commits focused and write meaningful messages
3. Make sure npm run lint and npx tsc --noEmit both pass
4. Follow the existing style — no comment noise, no speculative abstractions

---

License

Released under the MIT License.

_{Designed & built by wwew — contact via Telegram}