A blazing-fast, SEO-optimized personal portfolio built with Next.js 15
Built with performance in mind • Optimized for Google PageSpeed • Production-ready
Live Demo • Features • Performance • Getting Started • Changelog
A production-ready, high-performance portfolio template featuring:
- ⚡ 90% image size reduction through WebP optimization (8.4MB → 793KB)
- 🚀 Sub-3s LCP (Largest Contentful Paint)
- 🎨 Modern animations with Framer Motion & GSAP
- 📧 Integrated contact form with email notifications
- 🔍 Complete SEO setup with structured data
- 📱 Fully responsive design for all devices
- 🎯 56+ technology icons with primary color overlay
- 🔐 Cloudflare Turnstile security integration
- ✨ NEW: Engagement Layer - Smart contact form & live GitHub integration (Demo)
- ⚡ Next.js 15 with App Router and React Server Components
- 🎨 Tailwind CSS 4 with custom design system
- 🧩 ShadCN UI components for consistent design
- 🎭 Framer Motion for smooth animations
- 📧 Contact Form with Resend API integration
- 🌐 Cloudflare Pages Functions for serverless email handling
- 📦 Dynamic Imports - Lazy loading for heavy components
- 🖼️ WebP Images - 90% size reduction (8.4MB → 793KB)
- 🔤 Font Optimization -
display: swapwith fallbacks - ⚡ Code Splitting - Optimized bundle sizes
- 🎯 Priority Loading - Critical resources loaded first
- 🎨 CSS Filter Overlay - Primary color branding for all icons
- 📊 Structured Data - JSON-LD for rich results
- 🏷️ Complete Meta Tags - Open Graph, Twitter Cards
- 🗺️ Sitemap & Robots.txt - Automated generation
- 🔗 Canonical URLs - Prevent duplicate content
- 📱 Social Media Integration - Optimized sharing
- 🌈 Custom Color Palette - DarkNavy + Rose Red theme
- ✨ Smooth Animations - Scroll-triggered effects with Framer Motion
- 🎭 Interactive Components - Hover states and transitions
- 📱 Mobile-First - Responsive on all devices
- 🌙 Glass Morphism - Modern UI effects with backdrop blur
- 🎨 3D Holographic Card - Interactive profile card with tilt effects
- 🎪 Curved Text Marquee - Infinite scrolling text animation
- 🖼️ Vignette Effect - Elliptical image vignette with soft feather
- 🎨 Smart Desaturation - Images desaturate to 30%, restore to 90% on hover
- 🏷️ Category-Colored Badges - Dynamic color-coded tech stack badges
- ⚡ Smooth Ease-In Transitions - Professional hover animations (0.7s ease-in)
- 🌓 Theme Toggle - Animated dark/light mode button with smooth transitions
- 📤 Multi-Platform Share - Share portfolio across 6+ platforms
- 📅 Calendly Integration - Direct meeting booking with optimized UI
- 🎯 Floating Action Buttons - Consistent spacing and animations (Share, WhatsApp, Back to Top)
| Category | Tools |
|---|---|
| Framework | Next.js 15 (App Router, RSC) |
| Styling | Tailwind CSS 4 + ShadCN UI |
| Animations | Framer Motion + GSAP |
| Icons | Lucide React + Simple Icons (56+) |
| Resend API + Nodemailer | |
| Deployment | Cloudflare Pages + GitHub Actions |
| Forms | React Hook Form + Zod |
| Security | Cloudflare Turnstile |
| Analytics | Vercel Analytics |
| Version Control | Git & GitHub |
| Type | Color | Hex | Usage |
|---|---|---|---|
| Primary | 🔴 Rose Red | #e11d48 |
Buttons, links, CTAs |
| Background | 🌑 Deep Navy | #0a122c |
Main background |
| Foreground | ⚪ Almost White | #f8fafc |
Text, headings |
| Muted | 🔵 Blue Gray | #94a3b8 |
Secondary text |
```text 🎯 Performance Score: 90+ ⚡ LCP (Largest Contentful Paint): < 3s 🎨 CLS (Cumulative Layout Shift): < 0.1 ⏱️ FID (First Input Delay): < 100ms 📦 Total Bundle Size: ~250KB (images) 🧰 Best Practices: 96/100 ```
- ✅ Converted all project images to WebP format
- ✅ Reduced total image size by 90% (8.4MB → 793KB)
- ✅ media-server.png: 6.2MB → 534KB (91% reduction)
- ✅ Implemented lazy loading for below-the-fold images
- ✅ Used
next/imagefor automatic optimization
- ✅ Dynamic imports for heavy components
- ✅ Lazy loading for Testimonials, Projects, Services
- ✅ Reduced initial JavaScript bundle size by 42%
- ✅
display: swapto prevent font blocking - ✅ Preloaded critical fonts
- ✅ System font fallbacks for better CLS
- ✅ Removed unused font weights
- ✅ Complete structured data (JSON-LD)
- ✅ Optimized meta tags for all platforms
- ✅ Automatic sitemap generation
- ✅ Robots.txt configuration
```bash git clone https://github.com/tariqsaidofficial/portfolio-onepage.git ```
```bash cd portfolio-onepage ```
```bash pnpm install ```
```bash pnpm dev ```
```bash pnpm build ```
-
Update Personal Info
- Edit
components/about.tsxfor bio and timeline - Modify
components/hero.tsxfor main heading - Update
components/contact.tsxfor contact details
- Edit
-
Change Colors ```css /* In app/globals.css / :root { --primary: #e11d48; / Your brand color / --background: #0a122c; / Your background */ } ```
-
Update Images
- Replace images in
public/folder - Use WebP format for best performance
- Update image references in components
- Replace images in
-
Modify Sections
- Add/remove sections in
app/page.tsx - Create new components in
components/ - Follow existing patterns for consistency
- Add/remove sections in
```typescript // tailwind.config.ts export default { theme: { extend: { colors: { primary: '#e11d48', background: '#0a122c', // Add your custom colors }, animation: { // Add custom animations } } } } ```
-
Get Resend API Key
- Sign up at resend.com
- Verify your domain
- Get your API key
-
Add to Cloudflare Pages
- Go to Settings → Environment Variables
- Add
RESEND_API_KEYwith your key - Redeploy the site
-
Customize Email Templates
- Edit
functions/api/send-email.js - Modify HTML templates
- Test with your email
- Edit
-
Fork the Repository ```bash
git clone https://github.com/YOUR_USERNAME/portfolio-onepage.git ```
-
Connect to Cloudflare Pages
- Go to Cloudflare Dashboard
- Pages → Create a project
- Connect your GitHub repository
- Build settings:
- Build command:
pnpm build - Output directory:
out
- Build command:
-
Set Environment Variables
RESEND_API_KEY: Your Resend API keyNODE_VERSION: 18 or higher
-
Deploy
- Push to
mainbranch - GitHub Actions will auto-deploy
- Check deployment status in Actions tab
- Push to
Current Version: 6.2.0 (2025-10-23)
- 🎨 New theme toggle button with smooth animations
- 📤 Multi-platform share button (6+ platforms)
- 📅 Calendly integration for direct meeting booking
- 🧪 Jest testing framework and ESLint setup
- 📚 Comprehensive documentation (11 new guides)
For detailed version history and complete changelog, see CHANGELOG.md
- Production: https://portfolio-1yp.pages.dev/
- Last update: 2026-01-15T00:15:23.039Z
- Stars: 3
- Forks: 0
- Last commit:
8f104c5— chore(readme): auto-update profile block (2026-01-13T00:13:17Z)
Created and maintained by: Tariq Said
- 🌐 Portfolio: portfolio.dxbmark.com
- 💼 LinkedIn: tariqsaidofficial
- 🐙 GitHub: tariqsaidofficial
Built with:
- ⚡ Next.js - React framework
- 🎨 Tailwind CSS - Styling
- 🧩 ShadCN UI - Components
- 🎭 Framer Motion - Animations
- 📧 Resend - Email API
- ☁️ Cloudflare Pages - Hosting
Special Thanks:
- 🎨 v0.dev by Vercel for initial design inspiration
- 🌐 Cloudflare for excellent hosting and edge functions
- 💙 Open source community for amazing tools
This project is licensed under the MIT License. Feel free to use, modify, and distribute it.
© 2025 Tariq Said • LinkedIn • GitHub