init

2026-01-26 18:00:50 +05:00 · 2026-01-26 18:00:50 +05:00 · ca0afc6662
commit ca0afc6662
44 changed files with 8618 additions and 0 deletions
--- a/.cta.json
+++ b/.cta.json
@ -0,0 +1,15 @@
+{
+  "projectName": "altricade",
+  "mode": "file-router",
+  "typescript": true,
+  "tailwind": true,
+  "packageManager": "npm",
+  "addOnOptions": {},
+  "git": true,
+  "version": 1,
+  "framework": "react-cra",
+  "chosenAddOns": [
+    "eslint",
+    "shadcn"
+  ]
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+count.txt
+.env
+.nitro
+.tanstack
+.wrangler
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,3 @@
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,11 @@
+{
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  }
+}
--- a/.windsurfrules
+++ b/.windsurfrules
@ -0,0 +1,29 @@
+# Project Rules
+
+## Shadcn UI
+
+Use the latest version of Shadcn to install new components:
+
+```bash
+npx shadcn@latest add button
+```
+
+## Project Configuration
+
+- **Project Name:** api-for-all
+- **Framework:** React with TanStack Router (file-based routing)
+- **Language:** TypeScript
+- **Styling:** Tailwind CSS v4
+- **Package Manager:** npm
+- **Add-ons:** ESLint, Shadcn UI
+
+## Path Aliases
+
+- `@/*` → `./src/*`
+- `@components/*` → `./src/components/*`
+- `@routes/*` → `./src/routes/*`
+- `@lib/*` → `./src/lib/*`
+- `@stores/*` → `./src/stores/*`
+- `@containers/*` → `./src/containers/*`
+- `@api/*` → `./src/api/*`
+- `@interfaces/*` → `./src/interfaces/*`
--- a/22
+++ b/22
@ -0,0 +1,22 @@
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm ci
+
+COPY . .
+
+RUN npm run build
+
+FROM nginx:alpine AS production
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
--- a/README.md
+++ b/README.md
@ -0,0 +1,98 @@
+# Omar Zaid — Frontend Developer Portfolio
+
+A modern, responsive portfolio website showcasing my skills, experience, and projects as a Frontend Developer.
+
+---
+
+## About Me
+
+I'm a passionate Frontend Developer with expertise in building high-performance, scalable web applications. I specialize in React ecosystem and modern JavaScript/TypeScript development, with a strong focus on clean code, user experience, and best practices.
+
+### Key Highlights
+
+- **80% reduction** in hiring time through a custom recruitment portal I built from scratch
+- **25% faster development** by implementing Tailwind CSS across enterprise projects
+- Experience with high-traffic e-commerce (kari.com) and enterprise HR systems
+- Full-stack capabilities with Nuxt 3, Node.js, and PostgreSQL
+
+---
+
+## Tech Stack
+
+### Frontend
+
+- **Frameworks:** React, Vue, Next.js, Nuxt
+- **Languages:** TypeScript, JavaScript
+- **Styling:** Tailwind CSS, SCSS, CSS
+
+### Backend
+
+- **Runtime:** Node.js
+- **Frameworks:** Express, NestJS
+- **Database:** PostgreSQL
+- **ORM:** Prisma
+
+### Tools & DevOps
+
+- Git, GitLab CI/CD, Docker
+- Figma, Jira
+- Linux, Windsurf, Cursor
+
+---
+
+## Features
+
+- **Blazing Fast** — Built with Vite for optimal performance
+- **Modern UI** — Clean, minimalist design with smooth animations
+- **Dark/Light Mode** — System-aware theme switching
+- **Internationalization** — English and Russian language support
+- **Fully Responsive** — Optimized for all devices
+- **Accessible** — Built with a11y best practices
+
+---
+
+## Project Structure
+
+```
+src/
+├── components/          # Reusable UI components
+│   ├── sections/        # Page sections (Hero, About, Skills, etc.)
+│   └── ui/              # Base UI components (Button, etc.)
+├── lib/                 # Utilities, config, constants
+├── locales/             # i18n translation files
+├── routes/              # TanStack Router file-based routes
+└── stores/              # Zustand state management
+```
+
+---
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+---
+
+## Contact
+
+- **Email:** omar.m.zaid@hotmail.com
+- **GitHub:** [github.com/altricade](https://github.com/altricade)
+- **LinkedIn:** [linkedin.com/in/altricade](https://www.linkedin.com/in/altricade/)
+- **Telegram:** [@altricade](https://t.me/altricade)
+
+---
+
+## License
+
+MIT © Omar Zaid
--- a/components.json
+++ b/components.json
@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -0,0 +1,20 @@
+services:
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: portfolio_front
+    networks:
+      - proxy
+    restart: unless-stopped
+    labels:
+      - traefik.enable=true
+      - traefik.docker.network=proxy
+      - traefik.http.routers.portfolio.rule=Host(`portfolio.ai-assistant-bot.xyz`)
+      - traefik.http.routers.portfolio.entrypoints=web,websecure
+      - traefik.http.routers.portfolio.tls.certresolver=le
+      - traefik.http.services.portfolio.loadbalancer.server.port=80
+
+networks:
+  proxy:
+    external: true
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,3 @@
+import { tanstackConfig } from '@tanstack/eslint-config'
+
+export default [...tanstackConfig]
--- a/index.html
+++ b/index.html
@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Omar Zaid - Frontend Developer specializing in React, TypeScript, and modern web technologies"
+    />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Omar Zaid | Frontend Developer</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/nginx.conf
+++ b/nginx.conf
@ -0,0 +1,25 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml application/javascript;
+
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,50 @@
+{
+  "name": "altricade",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3000",
+    "build": "vite build && tsc",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "lint": "eslint",
+    "format": "prettier",
+    "check": "prettier --write . && eslint --fix"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.4",
+    "@tailwindcss/vite": "^4.0.6",
+    "@tanstack/react-devtools": "^0.7.0",
+    "@tanstack/react-router": "^1.132.0",
+    "@tanstack/react-router-devtools": "^1.132.0",
+    "@tanstack/router-plugin": "^1.132.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "i18next": "^25.8.0",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "lucide-react": "^0.544.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-i18next": "^16.5.3",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss": "^4.0.6",
+    "tw-animate-css": "^1.3.6",
+    "zustand": "^5.0.10"
+  },
+  "devDependencies": {
+    "@tanstack/devtools-vite": "^0.3.11",
+    "@tanstack/eslint-config": "^0.3.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "jsdom": "^27.0.0",
+    "prettier": "^3.5.3",
+    "typescript": "^5.7.2",
+    "vite": "^7.1.7",
+    "vitest": "^3.0.5",
+    "web-vitals": "^5.1.0"
+  }
+}
--- a/prettier.config.js
+++ b/prettier.config.js
@ -0,0 +1,10 @@
+//  @ts-check
+
+/** @type {import('prettier').Config} */
+const config = {
+  semi: false,
+  singleQuote: true,
+  trailingComma: "all",
+};
+
+export default config;
--- a/public/manifest.json
+++ b/public/manifest.json
@ -0,0 +1,15 @@
+{
+  "short_name": "TanStack App",
+  "name": "Create TanStack App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/public/robots.txt
+++ b/public/robots.txt
@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/public/tanstack-circle-logo.png
+++ b/public/tanstack-circle-logo.png
--- a/public/tanstack-word-logo-white.svg
+++ b/public/tanstack-word-logo-white.svg
--- a/src/components/language-switcher.tsx
+++ b/src/components/language-switcher.tsx
@ -0,0 +1,38 @@
+import { useTranslation } from 'react-i18next'
+import { Languages } from 'lucide-react'
+import { Button } from '@components/ui/button'
+import { config } from '@lib/config'
+import type { SupportedLanguage } from '@lib/config'
+import type { FC } from 'react'
+
+const languageNames: Record<SupportedLanguage, string> = {
+  en: 'EN',
+  ru: 'RU',
+}
+
+export const LanguageSwitcher: FC = () => {
+  const { i18n, t } = useTranslation()
+
+  const cycleLanguage = () => {
+    const currentIndex = config.supportedLanguages.indexOf(
+      i18n.language as SupportedLanguage,
+    )
+    const nextIndex = (currentIndex + 1) % config.supportedLanguages.length
+    i18n.changeLanguage(config.supportedLanguages[nextIndex])
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={cycleLanguage}
+      title={t('common.language')}
+      className="h-9 gap-1.5 px-2"
+    >
+      <Languages className="h-4 w-4" />
+      <span className="text-xs font-medium">
+        {languageNames[i18n.language as SupportedLanguage]}
+      </span>
+    </Button>
+  )
+}
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@ -0,0 +1,93 @@
+import { useState } from 'react'
+import { Link } from '@tanstack/react-router'
+import { Menu, X } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { LanguageSwitcher } from '@components/language-switcher'
+import { ThemeToggle } from '@components/theme-toggle'
+import { Button } from '@components/ui/button'
+import type { FC } from 'react'
+
+const navItems = [
+  { key: 'about', href: 'about' },
+  { key: 'experience', href: 'experience' },
+  { key: 'skills', href: 'skills' },
+  { key: 'contact', href: 'contact' },
+] as const
+
+export const Navigation: FC = () => {
+  const { t } = useTranslation()
+  const [isOpen, setIsOpen] = useState(false)
+
+  const closeMenu = () => setIsOpen(false)
+
+  return (
+    <header className="fixed top-0 left-0 right-0 z-50 border-b border-border/40 bg-background/80 backdrop-blur-md">
+      <nav className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
+        <Link
+          to="/"
+          className="text-lg font-semibold tracking-tight transition-colors hover:text-primary"
+        >
+          Alricade
+        </Link>
+
+        <div className="hidden items-center gap-1 md:flex">
+          {navItems.map((item) => (
+            <Link
+              key={item.key}
+              to="/"
+              hash={item.href}
+              className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+            >
+              {t(`common.${item.key}`)}
+            </Link>
+          ))}
+          <Link
+            to="/blog"
+            className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          >
+            {t('common.blog')}
+          </Link>
+        </div>
+
+        <div className="flex items-center gap-1">
+          <LanguageSwitcher />
+          <ThemeToggle />
+          <Button
+            variant="ghost"
+            size="icon"
+            className="md:hidden"
+            onClick={() => setIsOpen(!isOpen)}
+            aria-label="Toggle menu"
+          >
+            {isOpen ? <X className="size-5" /> : <Menu className="size-5" />}
+          </Button>
+        </div>
+      </nav>
+
+      {isOpen && (
+        <div className="border-t border-border/40 bg-background/95 backdrop-blur-md md:hidden">
+          <div className="flex flex-col px-6 py-4">
+            {navItems.map((item) => (
+              <Link
+                key={item.key}
+                to="/"
+                hash={item.href}
+                onClick={closeMenu}
+                className="rounded-md px-3 py-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+              >
+                {t(`common.${item.key}`)}
+              </Link>
+            ))}
+            <Link
+              to="/blog"
+              onClick={closeMenu}
+              className="rounded-md px-3 py-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+            >
+              {t('common.blog')}
+            </Link>
+          </div>
+        </div>
+      )}
+    </header>
+  )
+}
--- a/src/components/sections/about-section.tsx
+++ b/src/components/sections/about-section.tsx
@ -0,0 +1,58 @@
+import { useTranslation } from 'react-i18next'
+import { Code2, Palette, Zap } from 'lucide-react'
+import type { FC } from 'react'
+
+const highlights = [
+  { icon: Code2, key: 'clean' },
+  { icon: Palette, key: 'design' },
+  { icon: Zap, key: 'performance' },
+] as const
+
+export const AboutSection: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <section id="about" className="scroll-mt-20 px-6 py-24">
+      <div className="mx-auto max-w-4xl">
+        <header className="text-center">
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+            {t('about.title')}
+          </h2>
+          <p className="mt-2 text-muted-foreground">{t('about.subtitle')}</p>
+        </header>
+
+        <div className="mt-12 grid gap-8 md:grid-cols-2">
+          <article className="space-y-4">
+            <p className="leading-relaxed text-muted-foreground">
+              {t('about.description')}
+            </p>
+            <p className="leading-relaxed text-muted-foreground">
+              {t('about.paragraph2')}
+            </p>
+          </article>
+
+          <aside className="space-y-4">
+            {highlights.map(({ icon: Icon, key }) => (
+              <div
+                key={key}
+                className="flex items-start gap-4 rounded-lg border border-border/50 bg-card p-4 transition-colors hover:border-primary/30"
+              >
+                <div className="rounded-md bg-primary/10 p-2 text-primary">
+                  <Icon className="h-5 w-5" />
+                </div>
+                <div>
+                  <h3 className="font-medium">
+                    {t(`about.highlights.${key}.title`)}
+                  </h3>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    {t(`about.highlights.${key}.description`)}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </aside>
+        </div>
+      </div>
+    </section>
+  )
+}
--- a/src/components/sections/contact-section.tsx
+++ b/src/components/sections/contact-section.tsx
@ -0,0 +1,52 @@
+import { Mail } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@components/ui/button'
+import { CONTACT_EMAIL, SOCIAL_LINKS } from '@lib/constants'
+import type { FC } from 'react'
+
+export const ContactSection: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <section id="contact" className="scroll-mt-20 bg-muted/30 px-6 py-24">
+      <div className="mx-auto max-w-2xl text-center">
+        <header>
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+            {t('contact.title')}
+          </h2>
+          <p className="mt-2 text-muted-foreground">{t('contact.subtitle')}</p>
+        </header>
+
+        <div className="mt-10">
+          <Button size="lg" asChild>
+            <a href={`mailto:${CONTACT_EMAIL}`} className="gap-2">
+              <Mail className="h-4 w-4" />
+              {t('contact.send')}
+            </a>
+          </Button>
+        </div>
+
+        <div className="mt-8">
+          <p className="text-sm text-muted-foreground">{t('contact.or')}</p>
+          <nav
+            className="mt-4 flex items-center justify-center gap-4"
+            aria-label="Social links"
+          >
+            {SOCIAL_LINKS.map((link) => (
+              <a
+                key={link.label}
+                href={link.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="rounded-full border border-border/50 p-3 text-muted-foreground transition-all hover:border-primary/30 hover:bg-accent hover:text-foreground"
+                aria-label={link.label}
+              >
+                <link.icon className="h-5 w-5" />
+              </a>
+            ))}
+          </nav>
+        </div>
+      </div>
+    </section>
+  )
+}
--- a/src/components/sections/experience-section.tsx
+++ b/src/components/sections/experience-section.tsx
@ -0,0 +1,108 @@
+import { useTranslation } from 'react-i18next'
+import { Briefcase, GraduationCap } from 'lucide-react'
+import type { FC } from 'react'
+
+interface ExperienceItem {
+  id: string
+  titleKey: string
+  companyKey: string
+  periodKey: string
+  descriptionKey: string
+}
+
+const workExperience: Array<ExperienceItem> = [
+  {
+    id: 'work-1',
+    titleKey: 'experience.items.work1.title',
+    companyKey: 'experience.items.work1.company',
+    periodKey: 'experience.items.work1.period',
+    descriptionKey: 'experience.items.work1.description',
+  },
+  {
+    id: 'work-2',
+    titleKey: 'experience.items.work2.title',
+    companyKey: 'experience.items.work2.company',
+    periodKey: 'experience.items.work2.period',
+    descriptionKey: 'experience.items.work2.description',
+  },
+]
+
+const education: Array<ExperienceItem> = [
+  {
+    id: 'edu-1',
+    titleKey: 'experience.items.edu1.title',
+    companyKey: 'experience.items.edu1.company',
+    periodKey: 'experience.items.edu1.period',
+    descriptionKey: 'experience.items.edu1.description',
+  },
+]
+
+interface TimelineItemProps {
+  item: ExperienceItem
+  t: (key: string) => string
+}
+
+const TimelineItem: FC<TimelineItemProps> = ({ item, t }) => {
+  return (
+    <article className="relative pl-8 pb-8 last:pb-0">
+      <div className="absolute left-0 top-0 h-full w-px bg-border">
+        <div className="absolute -left-1 top-1 h-2.5 w-2.5 rounded-full border-2 border-primary bg-background" />
+      </div>
+      <div className="space-y-1">
+        <h4 className="font-semibold">{t(item.titleKey)}</h4>
+        <p className="text-sm text-primary">{t(item.companyKey)}</p>
+        <p className="text-xs text-muted-foreground">{t(item.periodKey)}</p>
+        <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+          {t(item.descriptionKey)}
+        </p>
+      </div>
+    </article>
+  )
+}
+
+export const ExperienceSection: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <section id="experience" className="scroll-mt-20 bg-muted/30 px-6 py-24">
+      <div className="mx-auto max-w-4xl">
+        <header className="text-center">
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+            {t('experience.title')}
+          </h2>
+          <p className="mt-2 text-muted-foreground">
+            {t('experience.subtitle')}
+          </p>
+        </header>
+
+        <div className="mt-12 grid gap-12 md:grid-cols-2">
+          <div>
+            <div className="mb-6 flex items-center gap-2">
+              <Briefcase className="h-5 w-5 text-primary" />
+              <h3 className="text-lg font-semibold">{t('experience.work')}</h3>
+            </div>
+            <div>
+              {workExperience.map((item) => (
+                <TimelineItem key={item.id} item={item} t={t} />
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <div className="mb-6 flex items-center gap-2">
+              <GraduationCap className="h-5 w-5 text-primary" />
+              <h3 className="text-lg font-semibold">
+                {t('experience.education')}
+              </h3>
+            </div>
+            <div>
+              {education.map((item) => (
+                <TimelineItem key={item.id} item={item} t={t} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
--- a/src/components/sections/footer.tsx
+++ b/src/components/sections/footer.tsx
@ -0,0 +1,22 @@
+import { useTranslation } from 'react-i18next'
+import { Heart } from 'lucide-react'
+import type { FC } from 'react'
+
+export const Footer: FC = () => {
+  const { t } = useTranslation()
+  const currentYear = new Date().getFullYear()
+
+  return (
+    <footer className="border-t border-border/40 px-6 py-8">
+      <div className="mx-auto flex max-w-4xl flex-col items-center justify-between gap-4 text-center text-sm text-muted-foreground sm:flex-row sm:text-left">
+        <p>
+          © {currentYear} Alricade. {t('footer.rights')}
+        </p>
+        <p className="flex items-center gap-1">
+          {t('footer.madeWith')} <Heart className="h-4 w-4 text-primary" />{' '}
+          React & TypeScript
+        </p>
+      </div>
+    </footer>
+  )
+}
--- a/src/components/sections/hero-section.tsx
+++ b/src/components/sections/hero-section.tsx
@ -0,0 +1,74 @@
+import { ArrowDown } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@components/ui/button'
+import { SOCIAL_LINKS } from '@lib/constants'
+import type { FC } from 'react'
+
+export const HeroSection: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <section className="relative flex min-h-svh items-center justify-center px-6 pb-16 pt-20">
+      <div className="mx-auto max-w-4xl text-center">
+        <div className="animate-fade-in">
+          <span className="mb-4 inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-4 py-1.5 text-sm text-primary">
+            <span className="h-2 w-2 animate-pulse rounded-full bg-primary" />
+            {t('hero.available')}
+          </span>
+        </div>
+
+        <h1 className="animate-fade-in-up mt-6 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
+          <span className="text-muted-foreground">{t('hero.greeting')}</span>
+          <br />
+          <span className="bg-linear-to-r from-primary via-primary/80 to-primary bg-clip-text text-transparent">
+            {t('hero.name')}
+          </span>
+        </h1>
+
+        <p className="animate-fade-in-up animation-delay-100 mt-4 text-xl font-medium text-muted-foreground sm:text-2xl">
+          {t('hero.title')}
+        </p>
+
+        <p className="animate-fade-in-up animation-delay-200 mx-auto mt-6 max-w-2xl text-base leading-relaxed text-muted-foreground/80 sm:text-lg">
+          {t('hero.description')}
+        </p>
+
+        <div className="animate-fade-in-up animation-delay-300 mt-10 flex flex-wrap items-center justify-center gap-4">
+          <Button size="lg" asChild>
+            <a href="#contact">{t('common.getInTouch')}</a>
+          </Button>
+          <Button variant="outline" size="lg" asChild>
+            <a href="#about">{t('hero.cta')}</a>
+          </Button>
+        </div>
+
+        <div className="animate-fade-in-up animation-delay-400 mt-8 flex items-center justify-center gap-4 sm:mt-12">
+          {SOCIAL_LINKS.map((link) => (
+            <a
+              key={link.label}
+              href={link.href}
+              target={link.href.startsWith('mailto:') ? undefined : '_blank'}
+              rel={
+                link.href.startsWith('mailto:')
+                  ? undefined
+                  : 'noopener noreferrer'
+              }
+              className="rounded-full p-3 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+              aria-label={link.label}
+            >
+              <link.icon className="h-5 w-5" />
+            </a>
+          ))}
+        </div>
+      </div>
+
+      <a
+        href="#about"
+        className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce text-muted-foreground transition-colors hover:text-foreground"
+        aria-label="Scroll to about section"
+      >
+        <ArrowDown className="h-6 w-6" />
+      </a>
+    </section>
+  )
+}
--- a/src/components/sections/skills-section.tsx
+++ b/src/components/sections/skills-section.tsx
@ -0,0 +1,115 @@
+import {
+  Atom,
+  ClipboardList,
+  Code2,
+  Container,
+  Database,
+  Figma,
+  FileCode2,
+  FileType,
+  GitBranch,
+  GitMerge,
+  Globe,
+  Hexagon,
+  Layers,
+  Link,
+  MousePointer2,
+  Palette,
+  Terminal,
+  Triangle,
+  Wind,
+  Zap,
+} from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import type { LucideIcon } from 'lucide-react'
+import type { FC } from 'react'
+
+interface Skill {
+  name: string
+  icon: LucideIcon
+}
+
+interface SkillCategory {
+  key: string
+  skills: Array<Skill>
+}
+
+const skillCategories: Array<SkillCategory> = [
+  {
+    key: 'frontend',
+    skills: [
+      { name: 'React', icon: Atom },
+      { name: 'Vue', icon: Triangle },
+      { name: 'Next.js', icon: Triangle },
+      { name: 'Nuxt', icon: Hexagon },
+      { name: 'TypeScript', icon: FileCode2 },
+      { name: 'JavaScript', icon: Code2 },
+      { name: 'Tailwind CSS', icon: Palette },
+      { name: 'SCSS', icon: FileType },
+      { name: 'CSS', icon: Palette },
+      { name: 'HTML', icon: Globe },
+    ],
+  },
+  {
+    key: 'backend',
+    skills: [
+      { name: 'Node.js', icon: Hexagon },
+      { name: 'Express', icon: Zap },
+      { name: 'NestJS', icon: Layers },
+      { name: 'PostgreSQL', icon: Database },
+      { name: 'REST API', icon: Link },
+      { name: 'Prisma', icon: Layers },
+    ],
+  },
+  {
+    key: 'tools',
+    skills: [
+      { name: 'Git', icon: GitBranch },
+      { name: 'GitLab CI/CD', icon: GitMerge },
+      { name: 'Docker', icon: Container },
+      { name: 'Figma', icon: Figma },
+      { name: 'Jira', icon: ClipboardList },
+      { name: 'Linux', icon: Terminal },
+      { name: 'Windsurf', icon: Wind },
+      { name: 'Cursor', icon: MousePointer2 },
+    ],
+  },
+]
+
+export const SkillsSection: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <section id="skills" className="scroll-mt-20 px-6 py-24">
+      <div className="mx-auto max-w-4xl">
+        <header className="text-center">
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+            {t('skills.title')}
+          </h2>
+          <p className="mt-2 text-muted-foreground">{t('skills.subtitle')}</p>
+        </header>
+
+        <div className="mt-12 grid gap-8 md:grid-cols-3">
+          {skillCategories.map((category) => (
+            <article key={category.key} className="space-y-4">
+              <h3 className="text-center text-lg font-semibold">
+                {t(`skills.${category.key}`)}
+              </h3>
+              <ul className="grid grid-cols-2 gap-3">
+                {category.skills.map((skill) => (
+                  <li
+                    key={skill.name}
+                    className="flex items-center gap-2 rounded-lg border border-border/50 bg-card px-3 py-2 text-sm transition-all hover:border-primary/30 hover:shadow-sm"
+                  >
+                    <skill.icon className="size-4" />
+                    <span>{skill.name}</span>
+                  </li>
+                ))}
+              </ul>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
--- a/src/components/theme-toggle.tsx
+++ b/src/components/theme-toggle.tsx
@ -0,0 +1,37 @@
+import { Moon, Sun } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@components/ui/button'
+import { useThemeStore } from '@stores/theme-store'
+import type { Theme } from '@lib/config'
+import type { FC } from 'react'
+
+const themes: Array<{ value: Theme; icon: typeof Sun }> = [
+  { value: 'light', icon: Sun },
+  { value: 'dark', icon: Moon },
+]
+
+export const ThemeToggle: FC = () => {
+  const { t } = useTranslation()
+  const { theme, setTheme } = useThemeStore()
+
+  const cycleTheme = () => {
+    const currentIndex = themes.findIndex((item) => item.value === theme)
+    const nextIndex = (currentIndex + 1) % themes.length
+    setTheme(themes[nextIndex].value)
+  }
+
+  const CurrentIcon = themes.find((item) => item.value === theme)?.icon ?? Sun
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={cycleTheme}
+      title={t('common.theme')}
+      className="h-9 w-9"
+    >
+      <CurrentIcon className="h-4 w-4" />
+      <span className="sr-only">{t('common.theme')}</span>
+    </Button>
+  )
+}
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@ -0,0 +1,65 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva } from 'class-variance-authority'
+import type { VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Button({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@ -0,0 +1,8 @@
+export const config = {
+  defaultLanguage: 'en',
+  defaultTheme: 'dark' as 'light' | 'dark' | 'system',
+  supportedLanguages: ['en', 'ru'] as const,
+}
+
+export type SupportedLanguage = (typeof config.supportedLanguages)[number]
+export type Theme = 'light' | 'dark' | 'system'
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@ -0,0 +1,29 @@
+import { Briefcase, Github, Linkedin, Send } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+
+export interface SocialLink {
+  icon: LucideIcon
+  href: string
+  label: string
+}
+
+export const SOCIAL_LINKS: Array<SocialLink> = [
+  {
+    icon: Github,
+    href: 'https://github.com/altricade',
+    label: 'GitHub',
+  },
+  {
+    icon: Linkedin,
+    href: 'https://www.linkedin.com/in/altricade/',
+    label: 'LinkedIn',
+  },
+  {
+    icon: Briefcase,
+    href: 'https://nizhny-tagil.hh.ru/resume/df78aefbff0be340910039ed1f46394f7a3157',
+    label: 'HeadHunter',
+  },
+  { icon: Send, href: 'https://t.me/altricade', label: 'Telegram' },
+]
+
+export const CONTACT_EMAIL = 'omar.m.zaid@hotmail.com'
--- a/src/lib/i18n.ts
+++ b/src/lib/i18n.ts
@ -0,0 +1,31 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import { config } from '@lib/config'
+
+import en from '@/locales/en.json'
+import ru from '@/locales/ru.json'
+
+const resources = {
+  en: { translation: en },
+  ru: { translation: ru },
+}
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    fallbackLng: config.defaultLanguage,
+    supportedLngs: config.supportedLanguages,
+    interpolation: {
+      escapeValue: false,
+    },
+    detection: {
+      order: ['localStorage', 'navigator'],
+      caches: ['localStorage'],
+      lookupLocalStorage: 'language',
+    },
+  })
+
+export default i18n
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@ -0,0 +1,7 @@
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import type { ClassValue } from 'clsx'
+
+export function cn(...inputs: Array<ClassValue>) {
+  return twMerge(clsx(inputs))
+}
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -0,0 +1,103 @@
+{
+  "common": {
+    "home": "Home",
+    "about": "About",
+    "experience": "Experience",
+    "skills": "Skills",
+    "projects": "Projects",
+    "blog": "Blog",
+    "contact": "Contact",
+    "language": "Language",
+    "theme": "Theme",
+    "lightMode": "Light",
+    "darkMode": "Dark",
+    "systemMode": "System",
+    "viewResume": "View Resume",
+    "getInTouch": "Get in Touch"
+  },
+  "hero": {
+    "greeting": "Hi, I'm",
+    "name": "Omar",
+    "title": "Frontend Developer",
+    "subtitle": "Crafting Digital Experiences",
+    "description": "I build modern, performant, and accessible web applications with clean code and thoughtful design.",
+    "cta": "See My Work",
+    "available": "Available for opportunities"
+  },
+  "about": {
+    "title": "About Me",
+    "subtitle": "Get to know me better",
+    "description": "I'm a passionate frontend developer with a keen eye for design and a love for creating seamless user experiences. With expertise in modern JavaScript frameworks and a commitment to clean, maintainable code, I transform ideas into elegant digital solutions.",
+    "paragraph2": "When I'm not coding, you'll find me exploring new technologies, contributing to open source, or sharing knowledge through technical writing.",
+    "highlights": {
+      "clean": {
+        "title": "Clean Code",
+        "description": "Writing maintainable, scalable, and well-documented code."
+      },
+      "design": {
+        "title": "Design Focused",
+        "description": "Creating beautiful interfaces with attention to detail."
+      },
+      "performance": {
+        "title": "Performance",
+        "description": "Building fast, optimized applications for the best UX."
+      }
+    }
+  },
+  "experience": {
+    "title": "Experience",
+    "subtitle": "My professional journey",
+    "work": "Work",
+    "education": "Education",
+    "present": "Present",
+    "items": {
+      "work1": {
+        "title": "Frontend Developer",
+        "company": "Ecosoft",
+        "period": "2024 - Present",
+        "description": "UI development for e-commerce (kari.com) and HR systems. Built recruitment portal reducing hiring time by 80%. Implemented Tailwind CSS, speeding up development by 25%."
+      },
+      "work2": {
+        "title": "Frontend Developer",
+        "company": "Vverh digital",
+        "period": "2023 - 2024",
+        "description": "Full-stack development with Nuxt 3. Launched avtovybor-ekb.rf from scratch: frontend, backend, PostgreSQL. Built custom CMS enabling client's SEO efforts."
+      },
+      "edu1": {
+        "title": "Computer Engineering",
+        "company": "Ural Federal University",
+        "period": "2019 - 2023",
+        "description": "Bachelor's degree in Informatics and Computer Engineering with focus on software engineering and web technologies."
+      }
+    }
+  },
+  "skills": {
+    "title": "Tech Stack",
+    "subtitle": "Technologies I work with",
+    "frontend": "Frontend",
+    "backend": "Backend",
+    "tools": "Tools & Others"
+  },
+  "projects": {
+    "title": "Featured Projects",
+    "subtitle": "Some things I've built",
+    "viewProject": "View Project",
+    "viewCode": "View Code"
+  },
+  "contact": {
+    "title": "Let's Connect",
+    "subtitle": "Have a project in mind? Let's talk.",
+    "email": "Email",
+    "message": "Message",
+    "send": "Send Message",
+    "or": "or find me on"
+  },
+
+  "blog": {
+    "comingSoon": "Blog posts coming soon. Stay tuned for articles about web development, design, and technology."
+  },
+  "footer": {
+    "rights": "All rights reserved.",
+    "madeWith": "Made with"
+  }
+}
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@ -0,0 +1,102 @@
+{
+  "common": {
+    "home": "Главная",
+    "about": "Обо мне",
+    "experience": "Опыт",
+    "skills": "Навыки",
+    "projects": "Проекты",
+    "blog": "Блог",
+    "contact": "Контакты",
+    "language": "Язык",
+    "theme": "Тема",
+    "lightMode": "Светлая",
+    "darkMode": "Тёмная",
+    "systemMode": "Системная",
+    "viewResume": "Резюме",
+    "getInTouch": "Связаться"
+  },
+  "hero": {
+    "greeting": "Привет, я",
+    "name": "Омар",
+    "title": "Фронтенд-разработчик",
+    "subtitle": "Создаю цифровой опыт",
+    "description": "Разрабатываю современные, производительные и доступные веб-приложения с чистым кодом и продуманным дизайном.",
+    "cta": "Мои работы",
+    "available": "Открыт для предложений"
+  },
+  "about": {
+    "title": "Обо мне",
+    "subtitle": "Узнайте меня лучше",
+    "description": "Я увлечённый фронтенд-разработчик с острым взглядом на дизайн и любовью к созданию безупречного пользовательского опыта. Обладая экспертизой в современных JavaScript-фреймворках и приверженностью к чистому, поддерживаемому коду, я превращаю идеи в элегантные цифровые решения.",
+    "paragraph2": "Когда я не пишу код, вы найдёте меня изучающим новые технологии, участвующим в open source или делящимся знаниями через технические статьи.",
+    "highlights": {
+      "clean": {
+        "title": "Чистый код",
+        "description": "Пишу поддерживаемый, масштабируемый и документированный код."
+      },
+      "design": {
+        "title": "Фокус на дизайн",
+        "description": "Создаю красивые интерфейсы с вниманием к деталям."
+      },
+      "performance": {
+        "title": "Производительность",
+        "description": "Разрабатываю быстрые, оптимизированные приложения."
+      }
+    }
+  },
+  "experience": {
+    "title": "Опыт",
+    "subtitle": "Мой профессиональный путь",
+    "work": "Работа",
+    "education": "Образование",
+    "present": "Настоящее время",
+    "items": {
+      "work1": {
+        "title": "Фронтенд-разработчик",
+        "company": "Экософт",
+        "period": "2024 - Настоящее время",
+        "description": "Разработка UI для e-commerce (kari.com) и HR-систем. Создал портал рекрутинга, сокративший время найма на 80%. Внедрил Tailwind CSS, ускорив разработку на 25%."
+      },
+      "work2": {
+        "title": "Фронтенд-разработчик",
+        "company": "Vverh digital",
+        "period": "2023 - 2024",
+        "description": "Full-stack разработка на Nuxt 3. Запустил автовыбор-екб.рф с нуля: фронтенд, бэкенд, PostgreSQL. Создал кастомную CMS для SEO-продвижения клиентом."
+      },
+      "edu1": {
+        "title": "Информатика и вычислительная техника",
+        "company": "Уральский федеральный университет",
+        "period": "2019 - 2023",
+        "description": "Степень бакалавра по информатике и вычислительной технике с фокусом на разработку ПО и веб-технологии."
+      }
+    }
+  },
+  "skills": {
+    "title": "Технологии",
+    "subtitle": "С чем я работаю",
+    "frontend": "Фронтенд",
+    "backend": "Бэкенд",
+    "tools": "Инструменты"
+  },
+  "projects": {
+    "title": "Избранные проекты",
+    "subtitle": "Некоторые мои работы",
+    "viewProject": "Смотреть проект",
+    "viewCode": "Смотреть код"
+  },
+  "contact": {
+    "title": "Давайте свяжемся",
+    "subtitle": "Есть проект? Давайте обсудим.",
+    "email": "Email",
+    "message": "Сообщение",
+    "send": "Отправить",
+    "or": "или найдите меня в"
+  },
+  "blog": {
+    "comingSoon": "Статьи скоро появятся. Следите за обновлениями о веб-разработке, дизайне и технологиях."
+  },
+  "footer": {
+    "rights": "Все права защищены.",
+    "madeWith": "Сделано с"
+  }
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,44 @@
+import ReactDOM from 'react-dom/client'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+import '@/lib/i18n'
+import './styles.css'
+
+const initializeTheme = () => {
+  const stored = localStorage.getItem('theme-storage')
+  if (stored) {
+    const { state } = JSON.parse(stored)
+    const theme = state?.theme ?? 'dark'
+    const resolved =
+      theme === 'system'
+        ? window.matchMedia('(prefers-color-scheme: dark)').matches
+          ? 'dark'
+          : 'light'
+        : theme
+    document.documentElement.classList.add(resolved)
+  } else {
+    document.documentElement.classList.add('dark')
+  }
+}
+initializeTheme()
+
+const router = createRouter({
+  routeTree,
+  context: {},
+  defaultPreload: 'intent',
+  scrollRestoration: true,
+  defaultStructuralSharing: true,
+  defaultPreloadStaleTime: 0,
+})
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+const rootElement = document.getElementById('app')
+if (rootElement && !rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(<RouterProvider router={router} />)
+}
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@ -0,0 +1,77 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as BlogRouteImport } from './routes/blog'
+import { Route as IndexRouteImport } from './routes/index'
+
+const BlogRoute = BlogRouteImport.update({
+  id: '/blog',
+  path: '/blog',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/blog': typeof BlogRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/blog': typeof BlogRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/blog': typeof BlogRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/blog'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/blog'
+  id: '__root__' | '/' | '/blog'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  BlogRoute: typeof BlogRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/blog': {
+      id: '/blog'
+      path: '/blog'
+      fullPath: '/blog'
+      preLoaderRoute: typeof BlogRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  BlogRoute: BlogRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@ -0,0 +1,26 @@
+import { Outlet, createRootRoute } from '@tanstack/react-router'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import { Navigation } from '@components/navigation'
+
+export const Route = createRootRoute({
+  component: () => (
+    <div className="min-h-screen bg-background text-foreground">
+      <Navigation />
+      <main>
+        <Outlet />
+      </main>
+      <TanStackDevtools
+        config={{
+          position: 'bottom-right',
+        }}
+        plugins={[
+          {
+            name: 'Tanstack Router',
+            render: <TanStackRouterDevtoolsPanel />,
+          },
+        ]}
+      />
+    </div>
+  ),
+})
--- a/src/routes/blog.tsx
+++ b/src/routes/blog.tsx
@ -0,0 +1,21 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+
+export const Route = createFileRoute('/blog')({
+  component: BlogPage,
+})
+
+function BlogPage() {
+  const { t } = useTranslation()
+
+  return (
+    <main className="min-h-screen px-6 pt-24 pb-16">
+      <div className="mx-auto max-w-4xl">
+        <h1 className="text-4xl font-bold tracking-tight">
+          {t('common.blog')}
+        </h1>
+        <p className="mt-4 text-muted-foreground">{t('blog.comingSoon')}</p>
+      </div>
+    </main>
+  )
+}
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@ -0,0 +1,24 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { AboutSection } from '@components/sections/about-section'
+import { ContactSection } from '@components/sections/contact-section'
+import { ExperienceSection } from '@components/sections/experience-section'
+import { Footer } from '@components/sections/footer'
+import { HeroSection } from '@components/sections/hero-section'
+import { SkillsSection } from '@components/sections/skills-section'
+
+export const Route = createFileRoute('/')({
+  component: HomePage,
+})
+
+function HomePage() {
+  return (
+    <>
+      <HeroSection />
+      <AboutSection />
+      <ExperienceSection />
+      <SkillsSection />
+      <ContactSection />
+      <Footer />
+    </>
+  )
+}
--- a/src/stores/theme-store.ts
+++ b/src/stores/theme-store.ts
@ -0,0 +1,55 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { config } from '@lib/config'
+import type { Theme } from '@lib/config'
+
+interface ThemeState {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const getSystemTheme = (): 'light' | 'dark' => {
+  if (typeof window === 'undefined') return 'light'
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light'
+}
+
+const applyTheme = (theme: Theme) => {
+  const root = document.documentElement
+  const resolvedTheme = theme === 'system' ? getSystemTheme() : theme
+
+  root.classList.remove('light', 'dark')
+  root.classList.add(resolvedTheme)
+}
+
+export const useThemeStore = create<ThemeState>()(
+  persist(
+    (set) => ({
+      theme: config.defaultTheme,
+      setTheme: (theme) => {
+        applyTheme(theme)
+        set({ theme })
+      },
+    }),
+    {
+      name: 'theme-storage',
+      onRehydrateStorage: () => (state) => {
+        if (state) {
+          applyTheme(state.theme)
+        }
+      },
+    },
+  ),
+)
+
+if (typeof window !== 'undefined') {
+  window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', () => {
+      const { theme } = useThemeStore.getState()
+      if (theme === 'system') {
+        applyTheme('system')
+      }
+    })
+}
--- a/src/styles.css
+++ b/src/styles.css
@ -0,0 +1,185 @@
+@import 'tailwindcss';
+
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+body {
+  @apply m-0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+:root {
+  --background: oklch(0.985 0.002 270);
+  --foreground: oklch(0.145 0.015 270);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0.015 270);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0.015 270);
+  --primary: oklch(0.5 0.19 285);
+  --primary-foreground: oklch(0.98 0.002 270);
+  --secondary: oklch(0.96 0.008 270);
+  --secondary-foreground: oklch(0.2 0.02 270);
+  --muted: oklch(0.96 0.005 270);
+  --muted-foreground: oklch(0.45 0.015 270);
+  --accent: oklch(0.94 0.012 270);
+  --accent-foreground: oklch(0.2 0.02 270);
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(0.98 0.002 270);
+  --border: oklch(0.91 0.008 270);
+  --input: oklch(0.91 0.008 270);
+  --ring: oklch(0.5 0.19 285);
+  --chart-1: oklch(0.5 0.19 285);
+  --chart-2: oklch(0.6 0.16 200);
+  --chart-3: oklch(0.55 0.18 330);
+  --chart-4: oklch(0.65 0.14 160);
+  --chart-5: oklch(0.6 0.16 45);
+  --radius: 0.5rem;
+  --sidebar: oklch(0.98 0.004 270);
+  --sidebar-foreground: oklch(0.145 0.015 270);
+  --sidebar-primary: oklch(0.5 0.19 285);
+  --sidebar-primary-foreground: oklch(0.98 0.002 270);
+  --sidebar-accent: oklch(0.94 0.012 270);
+  --sidebar-accent-foreground: oklch(0.2 0.02 270);
+  --sidebar-border: oklch(0.91 0.008 270);
+  --sidebar-ring: oklch(0.5 0.19 285);
+}
+
+.dark {
+  --background: oklch(0.1 0.015 270);
+  --foreground: oklch(0.93 0.005 270);
+  --card: oklch(0.13 0.018 270);
+  --card-foreground: oklch(0.93 0.005 270);
+  --popover: oklch(0.13 0.018 270);
+  --popover-foreground: oklch(0.93 0.005 270);
+  --primary: oklch(0.7 0.18 285);
+  --primary-foreground: oklch(0.1 0.015 270);
+  --secondary: oklch(0.18 0.02 270);
+  --secondary-foreground: oklch(0.9 0.005 270);
+  --muted: oklch(0.18 0.015 270);
+  --muted-foreground: oklch(0.6 0.01 270);
+  --accent: oklch(0.2 0.025 270);
+  --accent-foreground: oklch(0.9 0.005 270);
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(0.93 0.005 270);
+  --border: oklch(0.22 0.02 270);
+  --input: oklch(0.18 0.02 270);
+  --ring: oklch(0.7 0.18 285);
+  --chart-1: oklch(0.7 0.18 285);
+  --chart-2: oklch(0.6 0.16 200);
+  --chart-3: oklch(0.65 0.16 330);
+  --chart-4: oklch(0.6 0.14 160);
+  --chart-5: oklch(0.65 0.16 45);
+  --sidebar: oklch(0.08 0.012 270);
+  --sidebar-foreground: oklch(0.93 0.005 270);
+  --sidebar-primary: oklch(0.7 0.18 285);
+  --sidebar-primary-foreground: oklch(0.1 0.015 270);
+  --sidebar-accent: oklch(0.2 0.025 270);
+  --sidebar-accent-foreground: oklch(0.9 0.005 270);
+  --sidebar-border: oklch(0.22 0.02 270);
+  --sidebar-ring: oklch(0.7 0.18 285);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  html {
+    scroll-behavior: smooth;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.6s ease-out forwards;
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out forwards;
+}
+
+.animation-delay-100 {
+  animation-delay: 100ms;
+}
+
+.animation-delay-200 {
+  animation-delay: 200ms;
+}
+
+.animation-delay-300 {
+  animation-delay: 300ms;
+}
+
+.animation-delay-400 {
+  animation-delay: 400ms;
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,36 @@
+{
+  "include": ["**/*.ts", "**/*.tsx", "eslint.config.js", "prettier.config.js", "vite.config.js"],
+  
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    /* Linting */
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@components/*": ["./src/components/*"],
+      "@routes/*": ["./src/routes/*"],
+      "@lib/*": ["./src/lib/*"],
+      "@stores/*": ["./src/stores/*"],
+      "@api/*": ["./src/api/*"],
+      "@containers/*": ["./src/containers/*"],
+      "@interfaces/*": ["./src/interfaces/*"]
+    }
+  }
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,37 @@
+import { URL, fileURLToPath } from 'node:url'
+import { defineConfig } from 'vite'
+import { devtools } from '@tanstack/devtools-vite'
+import viteReact from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    devtools(),
+    tanstackRouter({
+      target: 'react',
+      autoCodeSplitting: true,
+    }),
+    viteReact(),
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@components': fileURLToPath(
+        new URL('./src/components', import.meta.url),
+      ),
+      '@routes': fileURLToPath(new URL('./src/routes', import.meta.url)),
+      '@lib': fileURLToPath(new URL('./src/lib', import.meta.url)),
+      '@stores': fileURLToPath(new URL('./src/stores', import.meta.url)),
+      '@containers': fileURLToPath(
+        new URL('./src/containers', import.meta.url),
+      ),
+      '@interfaces': fileURLToPath(
+        new URL('./src/interfaces', import.meta.url),
+      ),
+      '@api': fileURLToPath(new URL('./src/api', import.meta.url)),
+    },
+  },
+})