Skip to content

relyzer/relyzer-portfolio

Repository files navigation

Kevin's portfolio website

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!

To do:

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

Website initially started from:

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:

Deploy with Vercel

Make sure to install all dependencies and TypeScript!

npm install

To run the development server

npm run dev

Documentations used

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/

Other references

Codepen