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 Torus Knot with custom iridescent GLSL shaders Fluid cursor — Custom canvas-based liquid cursor, gracefully disabled on touch Smooth scroll — GPU-accelerated inertia via Lenis Motion — Hand-crafted CSS keyframes & Houdini @property for zero-overhead, LCP-stable animations

Engineering App Router — React Server Components, 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 three, drei, lucide, lenis Hardened headers — DNS prefetch, X-Content-Type-Options, aggressive asset caching SEO & AI — Open Graph + Twitter cards, JSON-LD Person schema, sitemap, robots, manifest, llms.txt

---

Tech stack

Layer	Technology
Framework	Next.js 16 (App Router, RSC)
Language	TypeScript 5 (strict)
Styling	Tailwind CSS v4 with CSS-variable design tokens
Animation	Hand-crafted CSS animations + Houdini @property keyframes
3D / WebGL	Three.js · @react-three/fiber · @react-three/drei · Custom GLSL
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 (static export + CDN, automatic AVIF/WebP)

---

Architecture

         ┌──────────────────────────────────────────────────┐
         │                  app/layout.tsx                  │
         │             Base metadata & root shell           │
         └──────────────────────────────────────────────────┘
                                 │
         ┌──────────────────────────────────────────────────┐
         │              app/[locale]/layout.tsx             │
         │  Metadata · JSON-LD · Viewport · Global fonts    │
         └──────────────────────────────────────────────────┘
                                 │
              ┌──────────────────┼──────────────────┐
              ▼                  ▼                  ▼
        AppProvider       LenisProvider      FluidCursorWrapper
        (i18n state)      (inertia scroll)   (deferred canvas)
                                 │
                                 ▼
                     ┌──────────────────────┐
                     │ app/[locale]/page.tsx│  ←  SSR hero skeleton & LCP tokens
                     └──────────────────────┘
                                 │
                                 ▼
                     ClientHomePage (hydrates)
                                 │
         ┌───────────────┬───────┴────────┬───────────────┐
         ▼               ▼                ▼               ▼
        Hero        Philosophy        StackGrid       ContactHub
                        +             (Bento grid)    (Personal & Team)
                   HolographicScene
                  (Three.js + GLSL)

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 metadata layout
│   ├── [locale]/
│   │   ├── layout.tsx        Locale root layout · metadata · JSON-LD · providers
│   │   └── 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
│
├── context/
│   └── AppContext.tsx        Language context · RU/EN translation dictionary
│
└── proxy.ts                  Locale routing & i18n redirect handler

---

Getting started

Prerequisites

• Node.js ≥ 20
• 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
npm run typecheck	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 StackGrid 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 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 npm run typecheck 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}