🌟 Modern Portfolio Website

Important

This project has moved. The actively maintained fork is now at EliteSalman/Astro-Portfolio-Salman-Shafi. Please open issues, pull requests, and discussions there.

---

A premium, fully responsive portfolio website built with Next.js 15, featuring a working contact form, SEO optimisation, and modern design principles.

🚀 Features

🎨 Design & UI

• Premium Glass Morphism: Modern glass effects and gradients
• Fully Responsive: Mobile-first design with perfect mobile optimisation
• Smooth Animations: Framer Motion animations and transitions
• Premium Typography: Geist font with optimised readability
• Modern Card Layouts: Interactive hover effects and shadows

📧 Contact System

• Working Contact Form: Fully functional with validation
• Email Integration: AWS SES SMTP configuration
• Premium Email Templates: Beautiful HTML email styling
• Loading States: Smooth form submission experience
• Error Handling: Comprehensive error management

🔍 SEO Optimised

• 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 Optimised: 99.7kB first load with optimal loading

🛡️ Security & Performance

• Security Headers: XSS protection, frame options, CSP
• Image Optimisation: WebP/AVIF formats with Next.js Image
• Code Splitting: Automatic chunking for faster loads
• Production Ready: Console removal, minification, compression

🛠️ Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React
• Email: Nodemailer + AWS SES
• Deployment: Vercel

📦 Installation

1. Clone the repository

   git clone https://github.com/asma019/Next.js-Portfolio-for-System-Admins.git
   cd Next.js-Portfolio-for-System-Admins

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env.local

   Edit .env.local with your actual values:

   # SMTP Configuration for AWS SES
   SMTP_HOST=email-smtp.ap-southeast-1.amazonaws.com
   SMTP_USERNAME=your-aws-ses-username
   SMTP_PASSWORD=your-aws-ses-password
   SMTP_PORT=587
   SMTP_SECURE=false
   
   # Email Configuration
   FROM_EMAIL_NAME=Your Name Contact
   FROM_EMAIL=no-reply@yourdomain.com
   TO_EMAIL=your-email@gmail.com
   
   # Application Configuration
   NEXT_PUBLIC_SITE_URL=https://yourdomain.com

4. Run development server

   npm run dev

5. Open in browser

   http://localhost:3000
   

🔧 Configuration

Personal Information

Update the following files with your information:

• src/app/page.tsx — Hero section, about, experience, skills
• src/components/Header.tsx — Navigation and branding
• src/components/Footer.tsx — Footer links and contact info
• src/app/layout.tsx — SEO meta tags and site information

Images

Replace these images in the public/ folder:

• photo.webp — Your profile photo
• share.webp — Social media preview image (1200×630px)

---

👤 Active Maintainer

• Name: Salman Shafi
• Email: hello@salmanshafi.net
• Repository: EliteSalman/NextJS-Portfolio-Salman-Shafi

👤 Original Author

• Name: Mehedi Hasan
• Email: hello@mehedims.com
• GitHub: asma019

---

📄 Licence

MIT Licence

---

Made with ❤️ using Next.js