Folio
Interactive Portfolio with Next, GSAP, Tailwind, and React
FOLIO
To cater to my goal of having my own portfolio website since 2016 🚀
How did I create this?
- UI/UX is brainstormed using inspiration from winning portfolios from awwwards. High-fidelity mockup aggregating the ideas using Figma.
- 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.
- Section scrolling and reveal animations uses GSAP. Card interactions use Tilt js. The timeline section was built using JS/SVGs and animated via GSAP.
- 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 :)
