A modern, high-performance personal portfolio website built with Next.js 14, App Router, and Tailwind CSS. The website showcases my projects, career experience, detailed technical articles, and highlights of my work. The platform also includes a bilingual interface (EN/RU) and is fully optimized for static export and CDN deployment.
This project was a deep exploration of modern frontend architecture, internationalization, UI component systems, and scalable monorepo workflows.
🚀 Features
- Project Showcase — Detailed pages for each project with screenshots, descriptions, and tech stack.
- Bilingual Interface — Full EN/RU localization powered by next-intl.
- Responsive Layout — Tailored UI for mobile, tablet, and desktop.
- Smooth Scrolling — Beautiful navigation experience via custom smooth-scroll engine.
- Blog Integration — MDX-based technical articles with clean typography.
- Static Export — Fully static build deployed to Yandex Cloud Object Storage + CDN.
🛠 Tech Stack
Core
- Next.js 14 with App Router
- React 19 architecture
- TypeScript for type-safe components
- Tailwind CSS with custom UI tokens
- shadcn/ui components in "New York" style
- next-intl for internationalization
Content
- MDX for articles and structured content
- Custom build pipeline for generating HTML and project pages
- Markdown → HTML compilation with marked
Deployment
- Static export (
output: export) - Deployment to Yandex Cloud Object Storage
- Distribution through Yandex CDN
- Cache-optimized builds via Turborepo
🔧 Implementation Details
Frontend Architecture
- Modular UI with reusable components
- Dynamic section animations
- Fully client-side rendering with smooth scrolling
- Clean content separation using a monorepo structure
Localization
- Locale-specific routes (
/en,/ru) - Automatic message loading via next-intl loaders
- Shared translation dictionary
Project Pages
- Each project stored as MDX
- Compiled into static HTML at build time
- Individual pages generated automatically
- SEO-friendly metadata included
🧭 How It Works
- Landing Page — Visitors see a hero section with introduction and summary.
- Projects Section — An interactive carousel and grid of featured work.
- About Page — A detailed biography, skills overview, and experience timeline.
- Blog — Technical articles with MDX and clean typography.
- Localized Interface — Users can instantly switch between EN/RU.
⚠️ Challenges Faced
- Designing smooth animations without sacrificing performance.
- Integrating next-intl with static export workflows.
- Building an MDX-to-HTML generator compatible with App Router.
- Maintaining design consistency across multiple languages.
🔮 Future Enhancements
- Automatic OG-image generation for articles and projects.
- A fully integrated “Docs mode” for long technical writing.
- Search engine with prebuilt indexes for posts and projects.
- Interactive 3D elements on the landing page.