PERSONAL PORTFOLIO .

🛠️ Technical Stack

Frontend (Modern & Dynamic)

Framework: Next.js (App Router, React 19)

Language: TypeScript for robust, type-safe development.

Styling: Tailwind CSS with PostCSS.

Animations: Framer Motion and tailwindcss-animate for smooth, premium transitions.

UI Components:

Radix UI (Accessible primitives like Dialogs, Tabs, and Selects).

Lucide React for a clean, consistent icon set.

shadcn/ui inspired component architecture.

Themes: next-themes providing full support for Dark and Light modes.

Backend (Robust & Fast)

Framework: FastAPI (Python) for a high-performance, asynchronous API.

Database: SQLite for lightweight yet powerful data persistence.

Hosting: PythonAnywhere deployment for the backend services.

Utilities & Best Practices

Data Fetching: Hybrid approach using Server Actions, standard Fetch API, and Axios.

Form Handling: React Hook Form with Zod for strict schema validation.

SEO: Comprehensive metadata strategy including OpenGraph, Twitter Cards, and JSON-LD schema for search engine dominance.

✨ Key Functionalities

1. Dynamic Project Showcase

A sophisticated gallery that pulls live data from the FastAPI backend.

Search & Filter: Users can search projects by keyword or filter by technology tags.

Server-Side Rendering: Optimized performance with data revalidation every hour.

2. Interactive "Execution Pipeline" Terminal

A unique, developer-themed section that simulates a terminal environment. It showcases technical principles and workflows in a visually engaging way, reinforcing the "engineer" persona.

3. Performance & Evolution Tracking

Live Stats: Real-time metrics reflecting project growth and impact.

Interactive Timeline: A visual representation of technical evolution and professional milestones.

4. Network Background Design

An advanced UI feature (NetworkBackground) that provides a persistent, tech-inspired visual layer throughout the site, enhancing the premium feel.

5. Professional Service Offerings

Dedicated sections for specialized services, allowing potential clients or employers to quickly understand the value proposition.

📈 SEO & Performance

The project is built with performance in mind:

Image Optimization: Uses Next.js next/image for responsive, lazy-loaded assets.

Dynamic SEO: Page titles and descriptions are dynamically updated via the backend API to ensure each project is indexed correctly.

Accessibility: Built on Radix UI primitives to ensure the portfolio is usable by everyone.