Developer Portfolio

A modern, interactive portfolio built with SvelteKit featuring a stunning scroll-reactive fluid animation

Live Demo • Features • Getting Started • Technologies

---

Overview

A cutting-edge developer portfolio template that showcases your projects and skills with style. Built with SvelteKit for blazing-fast performance and featuring an interactive fluid simulation that responds to both mouse movement and scroll.

View Live Demo →

https://github.com/user-attachments/assets/70b0dfe9-0fcc-4219-b5e5-391b6ad58e91

Features

✨ Interactive Fluid Animation - Beautiful scroll-reactive water simulation in the hero section 📱 Fully Responsive - Looks great on all devices 🚀 Lightning Fast - Built with SvelteKit and Vite for optimal performance 🎮 Built-in Games - Includes eMatchi (emoji matching) and Snake 🔗 GitHub Integration - Automatically showcases your GitHub projects 🎨 Modern UI - Clean, professional design with smooth animations ⚡ Zero-Config Deploy - Deploy anywhere with SvelteKit adapters

Getting Started

Prerequisites

• Node.js (v18 or higher)
• Git

Installation

1. Clone the repository

   git clone https://github.com/BrendanGlancy/dev-port.git
   cd dev-port
   

2. Install dependencies

   npm install
   

3. Start the development server

   npm run dev
   

4. Open your browser Navigate to http://localhost:5173

Build for Production

npm run build
npm run preview

Customization

Update Your Information

Edit the component files in src/lib/components/ to customize:

• Hero Section: hero.svelte - Your name and animated background
• GitHub Projects: github.svelte - Configure your GitHub username
• Footer: footer.svelte - Contact information and social links

Customize the Fluid Animation

The scroll-reactive water animation can be customized in src/lib/components/hero.svelte:

// Control scroll sensitivity (line 211)
var scroll_yv = (scroll.y - scroll.py) * 0.16; // Increase for faster movement

// Grid resolution (line 36)
var resolution = 100; // Lower = smoother (e.g., 50), Higher = coarser (e.g., 100)

// Particle count (line 41)
var speck_count = 1000; // More particles = denser effect

Technologies

• SvelteKit - Web application framework
• Svelte 5 - UI component framework
• Vite - Next-generation frontend tooling
• Sveltestrap - Bootstrap 5 components for Svelte
• Svelte FA - Font Awesome integration
• Neoconfetti - Confetti animations

Project Structure

dev-port/
├── src/
│   ├── lib/
│   │   └── components/      # Reusable Svelte components
│   ├── routes/              # SvelteKit routes
│   │   ├── +page.svelte    # Home page
│   │   ├── ematchi/        # Emoji matching game
│   │   ├── games/          # Games showcase
│   │   └── snake/          # Snake game
│   ├── app.html            # HTML template
│   └── styles.css          # Global styles
├── static/                  # Static assets
└── package.json

Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is open source and available under the MIT License.

Show Your Support

If you find this project useful, please consider giving it a star ⭐️

It helps others discover this template and motivates continued development!

---

Made with ❤️ using SvelteKit