A modern, responsive portfolio website built with Next.js 15, showcasing my skills, projects, and professional experience as a Full Stack Developer.
- Modern Design: Clean, professional UI with dark/light mode support
- Responsive: Fully responsive design that works on all devices
- Interactive: Smooth animations and transitions using Framer Motion
- Contact Form: Working contact form with EmailJS integration
- SEO Optimized: Built-in SEO optimization and metadata management
- Performance: Optimized for speed and performance
- Accessible: Built with accessibility best practices
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS with shadcn/ui components
- Animations: Framer Motion
- Email: EmailJS for contact form
- Font: Geist Sans, Geist Mono, Manrope (Google Fonts)
- Deployment: Vercel
- Analytics: Vercel Analytics
├── app/ # Next.js App Router
│ ├── globals.css # Global styles and CSS variables
│ ├── layout.tsx # Root layout component
│ └── page.tsx # Home page
├── components/ # React components
│ ├── common/ # Reusable common components
│ ├── providers/ # Context providers
│ ├── sections/ # Page section components
│ └── ui/ # shadcn/ui components
├── hooks/ # Custom React hooks
├── lib/ # Utility functions and data
├── public/ # Static assets
└── ...config files
- Node.js 18+ and npm
- Git
- Clone the repository:
git clone https://github.com/SidathRanasinghe/portfolio.git
cd portfolio- Install dependencies:
npm install- Create environment variables:
cp .env.example .env.local- Add your EmailJS configuration to
.env.local:
NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key
- Run the development server:
npm run dev- Open http://localhost:3000 in your browser.
Edit lib/portfolio-data.ts to update:
- Personal details
- Skills and technologies
- Work experience
- Projects
- Testimonials
- Colors: Modify color scheme in
app/globals.cssandtailwind.config.ts - Fonts: Update font configuration in
app/layout.tsx - Components: Customize components in
components/directory
- Hero:
components/sections/hero-section.tsx - About:
components/sections/about-section.tsx - Skills:
components/sections/skills-section.tsx - Experience:
components/sections/experience-section.tsx - Projects:
components/sections/projects-section.tsx - Testimonials:
components/sections/testimonials-section.tsx - Contact:
components/sections/contact-section.tsx
This portfolio uses EmailJS for the contact form. To set it up:
- Create an account at EmailJS
- Create an email service (Gmail, Outlook, etc.)
- Create an email template
- Get your Service ID, Template ID, and Public Key
- Add them to your environment variables
- Push your code to GitHub
- Connect your repository to Vercel
- Add environment variables in Vercel dashboard
- Deploy!
This Next.js app can be deployed on any platform that supports Node.js:
- Netlify
- Railway
- DigitalOcean App Platform
- AWS Amplify
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLintnpm run lint:fix- Fix ESLint issuesnpm run format- Format code with Prettiernpm run type-check- Run TypeScript type checking
- 100/100 Lighthouse Performance Score
- Tree-shaking for optimal bundle size
- Image optimization with Next.js Image component
- Font optimization with next/font
- CSS optimization with Tailwind CSS purging
This project is open source and available under the MIT License.
While this is a personal portfolio, suggestions and feedback are welcome! Feel free to:
- Open an issue for bugs or suggestions
- Submit a pull request for improvements
- Fork the project for your own use
Sidath Ranasinghe
- Email: sidath.ranasinghe@gmail.com
- LinkedIn: linkedin.com/in/sidath-ranasinghe
- GitHub: github.com/SidathRanasinghe
- Website: sidath.io
⭐ If you found this project helpful, please consider giving it a star!