Personal portfolio site for Abdelaziz Biad, Senior Full-Stack Engineer.
Built with Next.js 16, TypeScript, Tailwind CSS v4, Framer Motion, and shadcn/ui (base-nova style).
| Layer | Tech |
|---|---|
| Framework | Next.js 16.2.6 (App Router, Turbopack) — pinned exact |
| Language | TypeScript ^5 (strict) |
| Styling | Tailwind CSS ^4 |
| Components | shadcn (base-nova style) on top of @base-ui/react ^1.5.0 |
| Animations | Framer Motion ^12 |
| Theme | next-themes ^0.4 (dark-first) |
| Contact | Email-first mailto: flow, plus Cal.com and LinkedIn |
| Fonts | Inter (body), Sora (headings) |
| Icons | lucide-react, react-icons/si, react-icons/fa |
| Deployment | Vercel |
Next.js is pinned to exact
16.2.6(no caret). Pinned to avoid canary breakage — bump intentionally. The@base-ui/reactprimitives that ship inside shadcn components are sensitive to minor Next/ React version shifts, so we only upgrade after a manual smoke test.
# Install dependencies
npm install
# Start dev server
npm run dev
# → http://localhost:3000
# Type check
npx tsc --noEmit
# Production build
npm run buildsrc/
├── app/
│ ├── layout.tsx # Root layout: fonts, ThemeProvider, metadata
│ ├── page.tsx # Home — assembles all sections
│ ├── globals.css # Tailwind v4 theme: amber/gold accent, dark base
│ ├── sitemap.ts # Dynamic sitemap
│ └── robots.ts # robots.txt
├── components/
│ ├── ui/ # shadcn primitives (Button, Badge, Input, etc.)
│ ├── Navbar.tsx # Sticky nav with mobile sheet drawer
│ ├── Footer.tsx # Footer with social links
│ ├── ThemeToggle.tsx # Dark/light toggle
│ ├── ThemeProvider.tsx # next-themes wrapper
│ ├── AnimatedSection.tsx # Reusable scroll-triggered fade-up
│ └── sections/
│ ├── Hero.tsx # Full-viewport hero with animated orbs
│ ├── About.tsx # Bio + animated stats
│ ├── Experience.tsx # Expandable timeline
│ ├── Projects.tsx # Bento grid
│ ├── Skills.tsx # Staggered skill cards
│ └── Contact.tsx # Email-first contact, calendar, and social links
└── data/
├── experience.ts # Role[], bullets, tech tags
├── projects.ts # Project[], descriptions, links
└── skills.ts # SkillGroup[], icons, skill chips
Content — All copy lives in src/data/. Edit experience.ts, projects.ts, and skills.ts — components read from these directly, no hardcoded strings in JSX.
Accent color — Change --amber in src/app/globals.css (both :root and .dark blocks). The value is oklch; use a converter like https://oklch.com to find your colour.
Résumé download — The current file is public/Abdelaziz_BIAD_Resume.pdf.
Contact — The email channel opens the visitor's mail client with a direct
mailto: link. The section also offers Cal.com and LinkedIn as alternate
channels, so it always has a working user-facing state without runtime
configuration.
Availability toggle — src/data/status.ts exposes OPEN_TO_WORK and the labels used by both Hero badge and Footer. Flip the flag to hide both at once.
No environment variables are required to build or deploy the portfolio.
- Push the repo to GitHub
- Import at https://vercel.com/new — framework preset auto-detected as Next.js
- No build configuration needed
- Deploy
All pages are statically pre-rendered (/, /sitemap.xml, /robots.txt) and deploy to the edge instantly.
AI-powered real-estate analysis product for evaluating listings, pricing context, comparable properties and potential risks.
AI document intelligence workspace for structured analysis, risk detection, document comparison and document Q&A.
Luxury Arabic fragrance experience focused on visual storytelling, interaction design and frontend craftsmanship.