Developer Portfolio

Developer Portfolio is a free, open-source portfolio template built with SvelteKit that showcases a developer's projects and skills with an interactive scroll-reactive fluid animation in the hero section. It's created by Brendan Glancy and released under the MIT License.

What is Developer Portfolio?

Developer Portfolio is a SvelteKit-based website template for developers who want a visually distinctive personal site. You input your name, GitHub username, and contact details by editing component files in src/lib/components, and the template outputs a live portfolio with an animated hero, automatic GitHub project listing, and built-in games. It runs on SvelteKit with Svelte 5, Vite, Sveltestrap (Bootstrap 5 components), Font Awesome via Svelte FA, and Neoconfetti for confetti effects.

Key Features

• Interactive Fluid Animation — A water-like simulation in the hero that reacts to mouse movement and scroll position; scroll sensitivity, grid resolution, and particle count are adjustable in hero.svelte.
• GitHub Integration — Projects are automatically pulled and displayed based on the GitHub username configured in github.svelte.
• Built-in Games — Includes eMatchi, an emoji-matching game, and Snake, accessible from their own routes.
• Fully Responsive — The layout adapts to different screen sizes without additional configuration.
• Modern UI — Clean, professional design with smooth animations, built with Svelte 5 and Sveltestrap.
• Zero-Config Deploy — Works with any SvelteKit adapter, so you can deploy to Vercel, Netlify, or other platforms directly.
• Open Source — MIT-licensed, free to use and modify.

Who is it for?

• Software developers — who want a portfolio with an animated hero and automatic GitHub project showcase.
• Job seekers — who need a polished personal site to link from resumes and LinkedIn profiles.
• Svelte learners — who want to study a real SvelteKit project with games, animations, and component structure.

What can you do with Developer Portfolio?

• Customize content: Edit hero.svelte, github.svelte, and footer.svelte to add your name, GitHub username, and social links.
• Tune the animation: Adjust scroll sensitivity, resolution, and particle count with three variables in hero.svelte.
• Play and extend games: Use the included Snake and eMatchi games as-is, or modify them to add your own interactive elements.
• Deploy anywhere: Build the project with SvelteKit adapters and host it on Vercel, Netlify, or any Node-capable platform.

How does Developer Portfolio work?

The template is a standard SvelteKit project. After cloning the repository and running npm install, you start the dev server with npm run dev and edit component files in src/lib/components to customize your information. The fluid animation is rendered in hero.svelte using a custom simulation that reads scroll velocity and mouse position. Building for production uses npm run build, then npm run preview to test locally.

Pricing

Developer Portfolio is free and open source under the MIT License. You can use it for personal or commercial projects without paying any fees.

FAQ

Is Developer Portfolio free to use?

Yes. The project is released under the MIT License, so you can use, modify, and distribute it for personal or commercial projects without license fees.

What versions of Svelte and Node.js are required?

The template uses Svelte 5 and SvelteKit's latest framework. You'll need Node.js v18 or higher and Git installed to run the development server.

How do I show my GitHub projects on the portfolio?

Open src/lib/components/github.svelte and configure your GitHub username. The component automatically fetches and displays your repositories on the page.

Can I change the fluid animation's look and behavior?

Yes. In hero.svelte you can modify the scroll sensitivity multiplier (line 211), the grid resolution (line 36), and the particle count (line 41) to alter the animation's density and responsiveness.

What games are included in the template?

The portfolio includes two playable games: eMatchi, an emoji-matching game, and Snake. They live in the ematchi and snake routes respectively.