A premium, fully responsive portfolio website built with Next.js 16, featuring a working contact form, SEO optimization, and modern design principles.
- Modern Red & Black Theme: Modern glass effects and gradients
- Fully Responsive: Mobile-first design with perfect mobile optimization
- Smooth Animations: Framer Motion animations and transitions
- Premium Typography: Geist font with optimized readability
- Modern Card Layouts: Interactive hover effects and shadows
- Working Contact Form: Fully functional with validation
- Cloudflare Turnstile Captcha: Bot Protection on Contact Form.
- Email Integration: You can use any E-Mail provider that supports SMTP
- Premium Email Templates: Beautiful HTML email styling
- Loading States: Smooth form submission experience
- Error Handling: Comprehensive error management
- Complete Meta Tags: OpenGraph, Twitter Cards, and more
- Structured Data: JSON-LD schema for rich snippets
- Dynamic Sitemap: Auto-generated XML sitemap
- Robots.txt: Proper crawling instructions
- Performance Optimized: 99.7kB first load with optimal loading
- Image Optimization: WebP/AVIF formats with Next.js Image
- Code Splitting: Automatic chunking for faster loads
- Production Ready: Console removal, minification, compression
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Animations: Framer Motion
- Icons: Lucide React
- Email: Nodemailer
- Deployment: Podman
- Install Podman & Podman Compose
sudo dnf install podman podman-compose
- Clone this GitHub Repo
git clone https://github.com/EliteSalman/NextJS-Portfolio-Salman-Shafi.git
- Do your changes then
podman build -t nextjs-portfolio .
Before build edit .env.local with your actual values:
# SMTP Configuration
# Replace these with your actual SMTP credentials
SMTP_HOST=host.example.tld
SMTP_USERNAME=your-smtp-username
SMTP_PASSWORD=your-smtp-password
SMTP_PORT=587
SMTP_SECURE=false
# Email Configuration
# Update these with your actual email addresses
FROM_EMAIL_NAME=Your Name
FROM_EMAIL=no-reply@example.tld
TO_EMAIL=your-email@example.tld
# Application Configuration
# Update with your actual domain
NEXT_PUBLIC_SITE_URL=https://example.tld
# Cloudflare Turnstile Configuration
# Get these from https://dash.cloudflare.com/?to=/:account/turnstile
TURNSTILE_SITE_KEY=your-turnstile-site-key
TURNSTILE_SECRET_KEY=your-turnstile-secret-key-
Run
podman-compose up -d
-
Open in browser
http://your-server-ip:3001
Update the following files with your information:
src/app/page.tsx- Hero section, about, experience, skillssrc/components/Header.tsx- Navigation and brandingsrc/components/Footer.tsx- Footer links and contact infosrc/app/layout.tsx- SEO meta tags and site information
Replace these images in the public/ folder:
photo.webp- Your profile photoshare.webp- Social media preview image (1200x630px)
The contact form uses SMTP for email sending and Cloudflare Turnstile for bot protection. To set up:
-
Get SMTP Credentials from your E-Mail Provider
-
Set up Cloudflare Turnstile
- Go to Cloudflare Turnstile Dashboard
- Create a new site key for your domain
- Choose "Managed" challenge type
- Copy the Site Key & Secret Key 🔑
-
Configure Environment Variables
- Add your SMTP credentials to
.env.local - Add your Turnstile keys to
.env.local - Update sender/receiver email addresses
- Add your SMTP credentials to
-
Test the Form
- Submit a test message
- Complete the Turnstile challenge
- Check your email inbox
- Verify email formatting
- First Load JS: 99.7kB
- Build Time: ~8 seconds
- Lighthouse Score: 100/100
- Mobile Optimized: Perfect responsive design
- Meta Tags: Complete OpenGraph and Twitter Cards
- Structured Data: Person schema with job details
- Sitemap:
/sitemap.xml - Robots:
/robots.txt - Canonical URLs: Proper link structure
- Input Validation: Form sanitization
- Bot Protection: Cloudflare Turnstile integration
- Rate Limiting: Form submission protection
Primary colors are defined in src/app/globals.css:
.text-premium { color: #3b82f6; }
.bg-premium-blue { background: #3b82f6; }
.text-gradient-premium { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); }Font configuration in src/app/layout.tsx:
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});Framer Motion variants in src/app/page.tsx:
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}- Responsive Design: Mobile-first approach
- Touch Friendly: Proper touch targets
- Fast Loading: Optimized images and code
- Gesture Support: Smooth scrolling and interactions
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run lint:fix # Fix ESLint issues├── src/
│ ├── app/
│ │ ├── api/contact/ # Contact form API
│ │ ├── globals.css # Global styles
│ │ ├── layout.tsx # Root layout
│ │ ├── page.tsx # Home page
│ │ └── sitemap.ts # Dynamic sitemap
│ └── components/
│ ├── Header.tsx # Navigation
│ └── Footer.tsx # Footer
├── public/
│ ├── photo.webp # Profile photo
│ ├── share.webp # Social preview
│ └── ...
└── ...
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js - React framework
- Tailwind CSS - Utility-first CSS
- Framer Motion - Animation library
- Lucide - Icon library
- Podman - Containerzation
If you found this project helpful, please give it a ⭐ star on GitHub!
For questions or support:
- 📧 Email: hello@salmanshafi.net
- 🐛 Issues: GitHub Issues
- 💬 Discussions: GitHub Discussions
Original Project:
- Author: Mehedi Hasan
- E-Mail: hello@mehedims.com
- GitHub Profile: https://github.com/asma019
- Project Repo: https://github.com/asma019/Next.js-Portfolio-for-System-Admins
Made with ❤️ using Next.js