Personal portfolio website of Pramuditha Nadun - AI Researcher & Software Engineer based in Sri Lanka.
Hero
This is my personal portfolio website built with Astro.js and React, showcasing my work as an Associate Software Engineer at LOLC Technologies. The site includes:
- A cinematic hero section with a split dark/red visual design
- A developer page with experience timeline, live GitHub project cards, and testimonials
- A designer page featuring a gallery of creative work, logo designs, and VFX showreel
- A gallery of photography and digital art
- A contact page
The project is fully SSR-enabled via @astrojs/node, deployed on Vercel, and supports dark/light mode with smooth animations powered by Framer Motion.
- 🚀 Blazing fast - Built with Astro.js for optimal loading speeds
- 🎨 Modern UI - Dark/red cinematic design with Tailwind CSS
- 🌙 Dark mode - Seamless light/dark theme switching
- 📱 Fully responsive - Works great on all screen sizes
- 🔍 SEO optimized - Structured data and meta tags
- 💼 GitHub project cards - Live data from the GitHub API
- 🖼️ Designer portfolio - Logo designs, VFX, and gallery
- 📋 Experience timeline - Work history with tech stack badges
- 💬 Testimonials - Collapsible testimonial section
- 📄 Resume download - Direct PDF download
| Layer | Technology |
|---|---|
| Framework | Astro.js v5 |
| UI Components | React 19 |
| Styling | Tailwind CSS v4 |
| Language | TypeScript |
| Animations | Framer Motion |
| Icons | Iconify |
| Deployment | Vercel |
| Database | Neon (PostgreSQL) |
git clone https://github.com/PramudithaN/dev-portfolio.git
cd dev-portfolionpm installCreate a .env file in the project root:
DATABASE_URL=your_neon_postgresql_connection_stringnpm run devOpen http://localhost:3000 in your browser.
| Command | Description |
|---|---|
npm run dev |
Start development server at localhost:3000 |
npm run build |
Type-check and build for production |
npm run preview |
Preview the production build locally |
npm run prettier |
Format all .ts, .tsx, .css, .astro files |
dev-portfolio/
├── public/
│ ├── Documents/ # Resume PDF
│ ├── Images/ # Personal photos and artwork
│ ├── fonts/ # Custom fonts
│ └── static/ # Static images for projects
├── src/
│ ├── components/ # Astro & React UI components
│ │ ├── react/ # Interactive React components
│ │ └── ui/ # Base UI primitives (shadcn)
│ ├── content/
│ │ ├── blog/ # Blog posts (MD/MDX)
│ │ └── projects/ # Project entries (MD)
│ ├── layouts/ # Page layout wrappers
│ ├── lib/ # Utility functions and DB helpers
│ ├── pages/ # File-based routes
│ │ ├── api/ # API endpoints
│ │ ├── blog/ # Blog routes
│ │ ├── gallery/ # Gallery route
│ │ ├── projects/ # Projects route
│ │ └── contact/ # Contact route
│ ├── styles/ # Global CSS and typography
│ ├── consts.ts # Site metadata, nav, social links, skills
│ └── types.ts # TypeScript type definitions
├── astro.config.ts # Astro configuration
├── tsconfig.json # TypeScript configuration
└── package.json
The site detects the user's system preference on first load and allows manual toggling via the theme button in the navbar. The preference is persisted in localStorage.
This project is licensed under the MIT License - see the LICENSE file for details.
- GitHub: github.com/PramudithaN
- LinkedIn: linkedin.com/in/pramuditha-nadun-612b1b204
- Email: pramudithanadun@gmail.com