First Portfolio (Personal Developer Portfolio)
A modern, responsive developer portfolio built with Next.js 16 featuring animated sections, a projects gallery, SEO optimization, and clean reusable UI components. The site showcases personal projects with dedicated detail pages, an integrated contact form via Web3Forms, and smooth Framer Motion & Lottie animations throughout.
Core Tech Stack
- Next.js
- React
- Tailwind CSS
- Framer Motion
Performance
- Dynamic imports and code splitting for reduced bundle size
- Lazy loading of non-critical components
- Next.js Image optimization with next/image
- Turbopack for fast development builds
- Font optimization via Google Fonts integration
Security
- Production-ready deployment
- Environment variable protection
Key Features
Hero Section with typewriter introduction and CTA buttons
About Section with animated bio and Lottie circle animation
Skills Section with auto-scrolling skills list, detail view, and circular progress indicators
Projects Gallery — JSON-driven grid with dedicated detail pages per project
Contact Section with integrated contact form via Web3Forms
Full SEO Optimization — metadata, OpenGraph, Twitter Cards, JSON-LD structured data, canonical URLs
Dynamic imports, lazy loading, and optimized images with next/image
Right-click disabled in production mode for content protection
Responsive Design — Mobile-first, fully responsive across all breakpoints
Smooth Framer Motion transitions and Lottie animations throughout
Responsive avatar with personal photo integration
CV page for downloadable resume
Project Architecture
app/ ├── layout.js # Root layout (SEO metadata, fonts, JSON-LD) ├── page.js # Home page (Hero, About, Skills, Projects, Contact) ├── globals.css # Global styles and CSS variables ├── icon.png # Favicon ├── componentes/ │ ├── layout/ # Header, Footer │ ├── sections/ # Hero, About, ProjectsList, ContactMe │ └── ui/ # Avatar, Skills, ProjectCard, DisableRightClick ├── services/ # Data layer (JSON + API helpers) ├── projects/[id]/page.js # Dynamic project detail route └── cv/ # CV page public/ ├── images/ # Project screenshots and photos ├── icons/ # Tech SVG icons and Lottie animations └── logo/ # Site logo
Engineering Strategies
- App Router architecture for clean routing and server components
- Dynamic project detail pages via [id] route segments
- JSON-driven data layer for projects and skills
- Framer Motion for declarative page and component transitions
- Lottie animations for interactive visual elements
- Web3Forms integration for serverless contact form
- SEO-first approach with comprehensive metadata and structured data
- Production hardening with right-click protection
- Component-based architecture for reusability
Visual Interface
