I recently built a portfolio template called Glitch, and I wanted to share it with the dev community. It's designed for developers and creatives who want something more engaging than the usual portfolio sites but don't want to sacrifice performance.
Demo
You can check it out live here: iamovi.github.io/glitch
Why I built this
Most portfolio templates fall into two camps - either they're super minimal and boring, or they're packed with animations that tank performance. I wanted something in between. Something that feels modern and interactive but still loads fast and runs smoothly.
What's inside
Here's what I used to build it:
- React 18 + Vite + TypeScript
- GSAP for animations (it's just really good at this)
- Tailwind CSS for styling
- shadcn/ui components
- Framer Motion for some declarative animations
The main features are:
- Glitch text effects (hence the name)
- Magnetic buttons that react to your cursor
- Smooth scroll animations
- Fully responsive
- Pretty decent performance thanks to GSAP's context API
Setup
It's pretty standard React stuff:
git clone https://github.com/iamovi/glitch.git
npm install
npm run dev
Or use bun if that's your thing.
Making it yours
All the content lives in src/components/sections/. Just update:
-
Hero.tsx- your name and what you do -
About.tsx- bio and skills -
Work.tsx- add your projects to the array -
Contact.tsx- email and socials
For styling, the theme is in tailwind.config.ts and global styles are in src/index.css.
Deployment
Standard Vite build:
npm run build
Everything ends up in dist/ ready to deploy wherever you host static sites.
Some notes
The animations use GSAP ScrollTrigger which is really powerful once you get the hang of it. I tried to keep the code pretty clean so it's easier to understand if you want to modify things or learn from it.
It's all MIT licensed so feel free to use it however you want. The repo is here: github.com/iamovi/glitch
Let me know if you end up using it or have suggestions for improvements.
Made by Ovi ren
Top comments (0)