JK
>ΦΟΡΤΩΣΗ // ΦΟΡΤΩΣΗ
ΑΡΧΙΚΟΠΟΙΗΣΗ ΠΡΟΒΟΛΗΣ
Completednextjsreacttypescripttailwind
Portfolio Jitin K
Χαρτοφυλάκιο full-stack μηχανικού που παρουσιάζει αρχιτεκτονικές μικροϋπηρεσιών, κατανεμημένα συστήματα και σύγχρονο frontend.
Πρόβλημα & Λύση
Δημιουργία εντυπωσιακής εμπειρίας με ρευστές κινήσεις, πλήρη πολυγλωσσικότητα και κορυφαία Core Web Vitals.
Χαρακτηριστικά
- Next.js App Router με next-intl σε 9 γλώσσες
- Διαδραστικά διαγράμματα αρχιτεκτονικής με React Flow
- Κινητική τυπογραφία και σύγχρονος προφορτωτής
- Ασφαλές API επικοινωνίας με περιορισμό ρυθμού και αποστολή SMTP
- Πρόγραμμα προβολής δομής έργων
Τεχνολογικό stack
| Τεχνολογία | Έκδοση | Σκοπός | Γιατί επιλέχθηκε |
|---|---|---|---|
| Next.js | ^16.1.6 | App Router framework | Server Components, file-based routing, API routes, image optimization |
| React | ^19.2.4 | UI library | Server Components and concurrent rendering |
| TypeScript | ^5 | Type safety | Typed project content catches slug/data mismatches at compile time |
| Tailwind CSS | ^4 | Utility-first styling | CSS-first config with @theme/oklch tokens, no JS config file |
| Framer Motion | ^12 | Animations | Stagger/fade/hover primitives with useInView and useReducedMotion |
| @xyflow/react + dagre | ^12.11.5 / ^0.8.5 | Architecture diagrams | Data-driven interactive graphs with automatic layout |
| Nodemailer | ^7.0.11 | Contact email delivery | Simple Gmail SMTP transport from a single API route |
| @upstash/ratelimit + @vercel/kv | ^2.1.0 / ^3.0.0 | Distributed rate limiting | Shared sliding-window counter across serverless instances |
| Radix UI + shadcn/ui | primitives + copied source | Accessible UI primitives | Accessible tooltips/labels with full style control via copied components |
| Vercel | — | Hosting & analytics | Zero-config Next.js deploys, CDN, Web Analytics |
Αρχιτεκτονική
App Router Pages
- Root layout (server): fonts, metadata, Providers, Navbar, Footer, hexagon background
- Home (server): composes Profile, Recent Projects (first 4), Techstack, About sections
- /projects (client): stagger-animated grid of all ProjectCards
- /projects/[slug] (server): joins projects[] + projectDetails[] by slug at request time
- /about, /contact (client) and styled not-found page
Component Layer
- components/projects/: Project, ProjectCard, ReactFlowDiagram, FolderTree, MermaidDiagram
- components/animation/: Framer Motion wrappers (stagger, fade-up, hover glow, border trail)
- components/pattern/: InteractiveHexagonBg (rAF-optimized SVG grid), CssPattern, AnimatedHero
- components/ui/: shadcn/ui primitives (Badge, Button, Input, Label, Textarea, Tooltip)
- components/terminal/: Terminal typing preview component
Data & API Layer
- lib/projects/*.ts: one file per project exporting ProjectType + ProjectDetailType
- lib/projects/index.ts: aggregates projects[] and projectDetails[] arrays
- lib/types.ts: TECH_ICONS registry, PROFILE_DATA, and all content type definitions
- POST /api/contact: server-side validation, rate limiting, Nodemailer → Gmail SMTP
Δομή έργου
app
about
, app
contact
api
contact
projects
[slug]
components
animation
navbar
, components
footer
, components
profile
, components
theme
pattern
projects
terminal
ui
lib
projects
types.ts
utils.ts
public
API endpoints
Portfolio API (θύρα 3000)
| Μέθοδος | Διαδρομή | Σκοπός |
|---|---|---|
| POST | /api/contact | Validate contact form input, rate-limit by IP, send email via Gmail SMTP |
Βασικές σχεδιαστικές αποφάσεις
Static TypeScript Data Instead of CMS
Απόφαση: Store all project content as typed constants in lib/projects/*.ts joined by slug
Λόγος: Type safety, zero runtime fetch cost, no database or CMS dependency
Οφέλη: Compile-time checks, ships with bundle, server-renderable, free hosting footprint
Ανταλλάγματα: Content changes require code changes and redeployment
Server/Client Component Split
Απόφαση: Detail pages and layout are server components; lists, diagrams, and forms are client components
Λόγος: Minimize client JS while keeping interactive features
Οφέλη: Smaller bundle, faster first paint, SEO-friendly detail pages
Ανταλλάγματα: Mental overhead of the serialization boundary
Tailwind CSS v4 CSS-First Config
Απόφαση: Configure theme via @theme directives in globals.css instead of tailwind.config.js
Λόγος: Tailwind v4 removes the JS config in favor of CSS-native tokens
Οφέλη: One file for design tokens, oklch dark/light variables, simpler setup
Ανταλλάγματα: Different from v3 muscle memory
React Flow + Dagre for Diagrams
Απόφαση: Derive architecture diagrams from data (nodes/edges) with Dagre auto-layout
Λόγος: Diagrams stay consistent with content and render interactively
Οφέλη: No hand-drawn images, zoom/pan, themable, ER table nodes supported
Ανταλλάγματα: Client bundle cost on pages that render diagrams
Layered Contact API Protection
Απόφαση: Validate + HTML-escape inputs, then rate-limit via Upstash sliding window with in-memory fallback
Λόγος: Serverless instances don't share memory; shared KV store gives consistent limits
Οφέλη: XSS-safe output, 5 req/min/IP abuse protection, graceful degradation
Ανταλλάγματα: Requires KV env vars for full protection; no CSRF token yet
Gmail SMTP via Nodemailer
Απόφαση: Send contact emails through an existing Gmail account
Λόγος: Simplest delivery path for a personal portfolio with no backend infra
Οφέλη: One route handler, no third-party email SaaS
Ανταλλάγματα: App password rotation, self-email only, SMTP rate limits
Δοκιμές
None configured•0 μονάδες δοκιμών
Τι δοκιμάζεται
Κενά κάλυψης
- Unit tests for contact API validation and escapeHtml()
- Unit tests for slug join logic between projects[] and projectDetails[]
- Component tests for ProjectCard and detail page sections
- E2E tests for contact form and project navigation flows
- CI pipeline with lint, typecheck, and build gates (GitHub Actions)
Βασικές προκλήσεις
- Αποτροπή σφαλμάτων hydration σε dark mode και εναλλαγή γλωσσών
- Βελτιστοποίηση κινήσεων για χρήστες με προτίμηση μειωμένης κίνησης
Βασικά διδάγματα
- Σύγχρονη αρχιτεκτονική διεθνοποίησης στο Next.js App Router
- Βέλτιστες πρακτικές απόδοσης σύμφωνα με τις προδιαγραφές του Vercel