My very own personal website~!
This project also serves as a training ground for my front-end skills as well as to express myself through my design.
As my skills improve, I hope to add more cool features to my site, so stay tuned!
1.) Further improve aesthetics and responsive design! Add more interactive / dynamic elements!
2.) Make it even prettier!
3.) Add pagination to project section (also consider the necessity and the benefit for UX) or a hover animation
4.) Add a website loading animation upon first entry
5.) Properly utilise Next.js static props function
6.) Improve horizontal scroll speed of certificate gallery
A TypeScript Next.js example
By executing create-next-app
with npm or Yarn to bootstrap the example:
npx create-next-app@latest
Deploy the example using Vercel:
npm install
npm run dev
Next.js: https://nextjs.org/docs/getting-started
React.js: https://reactjs.org/docs/getting-started.html
TailwindCSS: https://tailwindcss.com/docs/installation
For button sound effects:
Great short tutorial with easy-to-use hooks!
Use-sound / Howler.js: https://www.joshwcomeau.com/react/announcing-use-sound-react-hook/
Devicon: https://devicon.dev/
Fontawesome: https://fontawesome.com/v6.0
React intersection observer: https://www.npmjs.com/package/react-intersection-observer
React-pdf: https://github.com/wojtekmaj/react-pdf#readme
Animations:
Vanta.js: https://www.vantajs.com/
Epic Spinners: https://epic-spinners.epicmax.co/
Codepen