Personal Portfolio Website

Ziad Tamim / April 21, 2025

Next.jsWeb DevCSSMDXVercelResend

Overview

I built this portfolio to present my AI and web‑development work in a clean, organized way—combining a project gallery, resume, and blog into one cohesive site. My aim was to balance simplicity with functionality: visitors can quickly find what they need, whether that’s a deep‑dive article or an overview of my most recent projects.

Design Principles

Content‑First: Prioritize readability and clear hierarchy over decorative elements.
Accessibility: Support keyboard navigation, proper contrast ratios, and semantic HTML for screen readers.
Responsiveness: Ensure layouts adapt smoothly from mobile screens to wide desktop displays.
User Choice: Provide both light and dark themes to suit different viewing preferences.

Tech Stack

Next.js 14 & TypeScript
Tailwind CSS for utility‑first styling
MDX (via next‑mdx‑remote) for blog and project content
Resend for newsletter sign‑ups
Vercel & GitHub for CI/CD and hosting
Additional Libraries:
- shadcn/ui (accessible components)
- react‑hook‑form + zod (form handling & validation)
- Lucide Icons

Core Features

Blog System

Write posts in MDX with embedded React components
Frontmatter‑driven metadata for SEO and organization

Project Gallery

Consistent MDX template featuring overview, tools, challenges, and solutions

Resume Page

Structured, printable layout for work experience, education, and skills

Newsletter Integration

Form validation, success/error feedback, and secure email delivery via Resend

Performance Optimizations

Static generation for most pages
Dynamic imports and code splitting
Next.js Image optimization
Caching headers for assets

Deployment & Domain

Continuous Deployment: Every push to main triggers a Vercel build and deploy
Custom Domain: Configured ziadtamim.com with DNS and SSL via Vercel

Results