Personal Portfolio Website

Ez a projekt a saját portfolio weboldalamnak a fejlesztése volt, ahol modern web technológiákat használtam egy gyors, reszponzív és felhasználóbarát élmény létrehozásához.

Főbb Funkciók

Dinamikus Tartalom Kezelés

• Astro Content Collections használata blog és projekt tartalmakhoz
• Markdown alapú tartalom szerkesztés
• Automatikus oldal generálás

Modern Design

• Minimális, tiszta design
• Dark mode támogatás
• Smooth scroll animációk
• Reszponzív elrendezés minden eszközön

Teljesítmény Optimalizáció

• Astro static site generation
• Optimalizált képek és betöltési idők
• Minimális JavaScript használat
• Perfect Lighthouse scores

Technikai Megvalósítás

Astro Framework

Az Astro-t választottam a projekt alapjának, mert:

• Kiváló teljesítmény static site generation-nel
• Modern fejlesztői élmény TypeScript támogatással
• Flexibilis komponens architektúra
• Beépített optimalizációk

CSS Architecture

/* Modern CSS változók használata */
:root {
  --primary-color: #6366f1;
  --text-primary: rgba(255, 255, 255, 0.9);
  --text-secondary: rgba(255, 255, 255, 0.7);
}

/* Smooth animációk */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

Content Management

A tartalom kezeléshez Astro Content Collections-t használok:

• Type-safe content schema
• Automatikus TypeScript típusok
• Markdown támogatás frontmatter-rel
• Git-based workflow

Eredmények

• Teljesítmény: 100/100 Lighthouse score
• Hozzáférhetőség: WCAG AA megfelelőség
• SEO: Optimalizált meta adatok és struktúra
• Felhasználói élmény: Gyors betöltés, smooth interakciók

Tanulságok

Ez a projekt során mélyebben megismertem:

• Modern static site generation előnyeit
• CSS Grid és Flexbox haladó használatát
• Web performance optimization technikákat
• Accessibility best practices-t

A projekt folyamatosan fejlődik, új funkciókkal és tartalmakkal bővül.