FOLIO

Live Demo

To cater to my goal of having my own portfolio website since 2016 🚀

How did I create this?

1. UI/UX is brainstormed using inspiration from winning portfolios from awwwards. High-fidelity mockup aggregating the ideas using Figma.
2. This project uses React for simplicity to break down sections as components. Also uses next.js to achieve SSG. SVGs have been animated using CSS.
3. Section scrolling and reveal animations uses GSAP. Card interactions use Tilt js. The timeline section was built using JS/SVGs and animated via GSAP.
4. Optimised animations, layer management, repaints, and re-layouts using Chrome dev tools.

How to run on local?

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Forked Versions from Community

Vue JS implemetation by sjtuli: filio-vue Same template with a slightly different flavor by shubh73: devfolio

A note on re-sharing

I have been refining the project using 7+ years of my learnings. While I appreciate the beauty of open source, due credits to the project will be appreciated if you plan to re-share the template. Copyright headers with author name should be included under the forked versions as well. Happy coding :)