https://github.com/dnuzi/portfolio-site
Clean & Free Portfolio Website Codes by Kelum'Xz and Danu'Zz.
https://github.com/dnuzi/portfolio-site
creative-portfolio developer-portfolio developer-portfolio-template frontend gsap javascript open-source personal-website portfolio portfolio-template responsive-design smooth-scrolling tailwind-css vite web-development
Last synced: 5 months ago
JSON representation
Clean & Free Portfolio Website Codes by Kelum'Xz and Danu'Zz.
- Host: GitHub
- URL: https://github.com/dnuzi/portfolio-site
- Owner: dnuzi
- License: mit
- Created: 2026-01-21T13:59:07.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-01-21T14:46:48.000Z (5 months ago)
- Last Synced: 2026-01-27T21:22:20.198Z (5 months ago)
- Topics: creative-portfolio, developer-portfolio, developer-portfolio-template, frontend, gsap, javascript, open-source, personal-website, portfolio, portfolio-template, responsive-design, smooth-scrolling, tailwind-css, vite, web-development
- Language: HTML
- Homepage: https://portfolio-site-rosy-nine.vercel.app
- Size: 300 KB
- Stars: 9
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# A Nest Level Portfolio 🚀
[](https://github.com/dnuzi/Portfolio-Site/stargazers) [](https://github.com/dnuzi/Portfolio-Site/network/members) [](https://github.com/dnuzi/Portfolio-Site/blob/main/LICENSE) [](https://vercel.com/new/git/external?repository-url=https://github.com/dnuzi/Portfolio-Site)
A sleek, **full-stack creative portfolio template** built with modern tools like **Vite**, **Tailwind CSS**, **GSAP**, and **Lenis** for buttery-smooth animations. Inspired by the misty hills of Sri Lanka, it blends tranquility with cutting-edge code. Perfect for developers, designers, and creators who want to stand out. **100% free, open-source, and customizable** – deploy in minutes!
### 📸 Site Preview
*(Full-site preview: Hero, works, skills, and chronometer in action. Replace with your actual screenshot for live vibes!)*
## ✨ Features
- **Hero Section**: Magnetic cursor, typewriter effect, and parallax text for an immersive intro.
- **Smooth Scrolling**: Powered by Lenis + GSAP ScrollTrigger – no jank, just flow.
- **Horizontal Work Scroll**: Sticky, pinned gallery with grayscale hover reveals and rotate animations.
- **Live Chronometer**: Real-time age calculator (years/months/days/hours/minutes/seconds) with progress bars.
- **Interactive Map**: SVG-based location pin with radar ping and bounce effects.
- **Timeline Skills**: Vertical progress line with staggered reveals for expertise showcase.
- **Marquee & Badges**: Infinite scrolling tags and floating credentials.
- **Single-File Build**: Obfuscated JS + inlined assets for easy deployment (under 1MB!).
- **Responsive & Accessible**: Mobile-first, with ARIA hints and semantic HTML.
- **Advanced Animations**: Bi-directional scrolls, clip-path masks, and shadow lifts.
| Feature | Tech | Why? |
|---------|------|------|
| Animations | GSAP + ScrollTrigger | Pixel-perfect, performant timelines. |
| Styling | Tailwind CSS | Rapid, utility-first design. |
| Bundling | Vite + SingleFile | Lightning-fast builds & deploys. |
| Obfuscation | JS Obfuscator Plugin | "Encrypted" code for security flair. |
| Smooth Scroll | Lenis | Native-feel scrolling without libraries. |
## 🛠 Quick Start
### Prerequisites
- Node.js (v18+)
- Git
### Installation
1. **Clone the Repo**:
```bash
git clone https://github.com/dnuzi/Portfolio-Site.git
cd danuzz-portfolio
```
2. **Install Dependencies**:
```bash
npm install
```
3. **Development Server**:
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) – watch the magic unfold!
4. **Build for Production**:
```bash
npm run build
```
Outputs a single `dist/index.html` (obfuscated & minified).
5. **Preview Build**:
```bash
npm run preview
```
### Customization
- **Images**: Swap files in `/public/` (e.g., `kelum-viduranga-portrait.jpg` for hero).
- **Content**: Edit `index.html` sections (hero text, work cards, skills list).
- **Colors/Themes**: Tweak `--bg-color`, `--text-main` in `src/main.css`.
- **Animations**: Adjust GSAP timelines in `src/main.js`.
- **Add Projects**: Duplicate work cards in HTML; update `src` paths.
For a full guide, see [CUSTOMIZATION.md](CUSTOMIZATION.md) (create if needed).
## ☁️ Deployment
### Vercel (Recommended – Free & Instant)
1. Push to GitHub.
2. Import repo at [vercel.com](https://vercel.com/import).
3. Set `vercel.json` (auto-detected for Vite).
4. Deploy – Custom domain optional!
### Other Options
- **Netlify**: Drag `/dist` or link GitHub.
- **GitHub Pages**: Use `gh-pages` branch.
- **Self-Host**: Serve `dist/` via Apache/Nginx.
## 📚 Tech Stack
- **Build Tools**: Vite, PostCSS, Tailwind.
- **Animations**: GSAP (3.12.5), ScrollTrigger, TextPlugin.
- **Icons**: Remix Icon (4.1.0).
- **Fonts**: Inter & Space Mono (Google Fonts).
- **CDNs**: Minimal – GSAP/Lenis for speed.
## 🤝 Contributing
Love it? Fork, tweak, and PR! Ideas for features like dark mode or React integration? Open an issue.
1. Fork the repo.
2. Create your branch (`git checkout -b feature/awesome`).
3. Commit (`git commit -m 'Add awesome feature'`).
4. Push (`git push origin feature/awesome`).
5. Open a Pull Request.
See [CONTRIBUTING.md](CONTRIBUTING.md) for details.
## 📄 License
This project is [MIT](LICENSE) licensed – use it freely, even commercially. Built with ❤️ from the sunny shores of Sri Lanka (Negombo vibes!).
---
**Made by [Danu'Zz & Kelum'Xz](https://github.com/dnuzi) – Full-Stack Creative from Sri Lanka.**
*January 2026 Edition* | [YouTube](https://www.youtube.com/@MovaNest) | [MainSite](https://www.movanest.xyz)
> "Code like a hill country breeze – calm, yet unstoppable." 🌿💻
