This site, built from scratch
Portfolio
Next.js
React
TypeScript
Tailwind
MotionGSAPLenisReact Three Fiber
What it is
This site — a portfolio built from scratch. English by default with an instant switch to Russian and no page reload, a pre-entry sequence, an artistic hooded-unicorn mascot cut out by hand, and the whole thing assembled as one flowing story rather than a set of separate pages.
How it's built
01Framework & rendering
Next.js 16 on the App Router with React 19 and TypeScript. Every page is statically prerendered — the home page and a page per project via generateStaticParams — while the contact form is a dynamic Node route handler. It's fast because most of the site is plain static HTML.
02Styling & design system
Tailwind 4 with an @theme token layer — one warm-paper palette, a single flame accent, hairline borders as ink with low alpha. Cyrillic-capable fonts (Onest, Inter, JetBrains Mono) because the site is bilingual. Paper grain is a tiled PNG, and there's one easing curve across the whole site.
03Motion
Motion (Framer) for entrances, the preloader and the mascot's float; GSAP available for scroll work; Lenis for smooth scroll that anchor links ride too; React Three Fiber wired in for 3D. All of it respects prefers-reduced-motion and degrades to a still, readable page.
04Bilingual without a reload
Language lives in a React context, not in the route — switching is instant, keeps the scroll position and never restarts the scenes. next-intl was deliberately skipped because route-based locales reload the page. Both languages are complete, down to the terminal comments and every case write-up.
05The pre-entry sequence
A dark opener: the sun's rim draws in, the guardian's visor lights, the wordmark rises, the curtain lifts to the cream site. It can never trap the site — the exit is on timers with a safety fallback, and it's suppressed on project pages and under reduced-motion.
06The mascot & icons
The hooded unicorn is cut out of its brand board by hand — flood-fill won't work when the cloak matches the paper — so it stands right on the page and the sun passes behind it. The arsenal and every case stack use official project marks (kali.org for the security tools, simple-icons for the rest).
07Contact form
A form that actually sends: a Node route handler forwards the message to Telegram, with the bot token and chat id read only from the environment — never in the code or the bundle. A honeypot field, server-side validation, and a graceful fallback to the contact cards when the channel isn't configured.
Full stack: Next.js 16, React 19, TypeScript, Tailwind 4, Motion, GSAP, Lenis, React Three Fiber, Zustand. The previous version at unicorn-web.ru still lives — an open template with a boot screen and a dark terminal theme. This one is the ground-up rebuild.