Personal portfolio website of Dehya Qalbi — a Full-Stack AI Engineer specializing in LLM pipelines, FastAPI backends, and React/Next.js frontends.
🔗 Live: https://dehyabi.com
This is a modern, SEO-optimized portfolio built with Next.js 16 and Tailwind CSS v4. It features a futuristic dark aesthetic with particle animations, aurora gradients, and responsive design.
- Hero — Animated particle network, perspective grid floor, scan line, and rotating glow rings
- About — Professional summary with categorized skill tags
- Contact — Email, LinkedIn, and GitHub links with copy-to-clipboard support
- Footer — Minimal footer with social links
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| Fonts | Geist Sans + Mono |
| Icons | Lucide React |
| Build | Static export (output: "export") |
app/
├── components/
│ ├── Navigation.tsx # Fixed header with active section tracking
│ ├── HeroSection.tsx # Futuristic hero with canvas particle network
│ ├── AboutSection.tsx # Bio and categorized skills
│ ├── ContactSection.tsx # Contact links with copy-to-clipboard
│ └── Footer.tsx # Minimal footer
├── globals.css # Tailwind theme + custom animations
├── layout.tsx # Root layout with fonts
├── page.tsx # Homepage with metadata + JSON-LD
├── robots.ts # Search engine robots config
└── sitemap.ts # XML sitemap generator
public/
├── favicon.svg # Hexagon logo favicon
├── apple-touch-icon.png # iOS home screen icon
└── og-image.png # Open Graph social preview image
scripts/
└── generate-og-image.js # Sharp-based OG image generator
- Node.js 18+
- npm / yarn / pnpm
npm installnpm run devOpen http://localhost:3000 in your browser.
npm run buildThe static site is exported to the dist/ directory.
- Comprehensive metadata (title, description, keywords, author)
- Open Graph tags for social sharing
- Twitter Card support
- JSON-LD structured data (Person schema)
robots.txtwith sitemap reference- XML sitemap with change frequency and priority
- Semantic HTML (
<main>,<section>,<header>,<footer>)
- Particle Network — Canvas-based constellation animation with drifting dots and connecting lines
- Perspective Grid — Retro-futuristic wireframe floor fading into the distance
- Aurora Blobs — Multi-layer animated gradient orbs (indigo, violet, cyan)
- Rotating Rings — Subtle spin-animated glow rings behind the name
- Scan Line — Horizontal sweep line for a CRT/monitor aesthetic
- Responsive — Mobile-first, works seamlessly across all screen sizes
© Dehya Qalbi. All rights reserved.