A modern, SEO-optimized portfolio website built with Next.js 14, React, and Tailwind CSS.
- Modern UI/UX: Beautiful, responsive design with smooth animations
- SEO Optimized: Comprehensive meta tags, structured data, sitemap, and robots.txt
- Dark Mode: Full dark mode support with persistent preference
- Performance: Optimized for speed with Next.js App Router and modern best practices
- Accessibility: WCAG compliant with proper ARIA labels
- Mobile First: Fully responsive design for all devices
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Animations: Framer Motion
- Icons: Lucide React
- Deployment: Vercel (recommended)
- Clone the repository:
git clone <repository-url>
cd gabusingh-portfolio- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev- Open http://localhost:3000 in your browser.
npm run build
npm startUpdate SEO metadata in app/layout.tsx:
- Update
metadataBaseURL - Add your Google Search Console verification code
- Customize Open Graph images (add to
/public/og-image.jpg)
The contact form currently shows an alert on submission. To integrate with a backend:
- Update
components/Contact.tsxto send data to your API - Consider using services like:
- Formspree
- EmailJS
- Your own API endpoint
All social links are configured in:
components/Hero.tsxcomponents/Contact.tsxcomponents/Footer.tsx
Update these URLs as needed.
Edit tailwind.config.js to customize the color scheme:
colors: {
primary: {
// Your color palette
},
}Update content in respective component files:
- Hero section:
components/Hero.tsx - About section:
components/About.tsx - Services:
components/Services.tsx - Portfolio:
components/Portfolio.tsx - Testimonials:
components/Testimonials.tsx
The site includes PWA manifest. Add app icons:
/public/icon-192.png(192x192)/public/icon-512.png(512x512)/public/apple-touch-icon.png(180x180)/public/favicon.ico
- ✅ Meta tags (title, description, keywords)
- ✅ Open Graph tags
- ✅ Twitter Card tags
- ✅ Structured data (JSON-LD)
- ✅ Sitemap.xml
- ✅ Robots.txt
- ✅ Semantic HTML
- ✅ Alt text for images (add when adding images)
⚠️ Google Search Console verification (update in layout.tsx)⚠️ Google Analytics (add if needed)
- Push your code to GitHub
- Import project in Vercel
- Deploy automatically on push
The site can be deployed to any platform supporting Next.js:
- Netlify
- AWS Amplify
- Cloudflare Pages
- Custom server with Node.js
This project is private and proprietary.
Pradipta Sinha
- Website: gabusingh.in
- Agency: WPFreelance
- LinkedIn: pradiptasinha
- Upwork: Profile
- Fiverr: wpfreelance