Second version of my portfolio website!
Well, I really didn't like the first iteration of my website, I think it's super weird and clunky and non-responsive, so here's a second version of it 😎
In terms of design, I tried for the 60's 70's retro vibe. I recently saw a packaging of a harmonica that's in retro and thought
Wowowow wouldn't that be cool as my websites' theme
I'm not using proper git practices like feat branches, PRs etc because of time, I can only ask for forgiveness at this point. So I gave my best to design it, with wireframes and figma as prototyping and all. And the end result I think its.... interesting, so definitely check it out!
PS: You can click on the TV's buttons
- Clean html/css code? (let me know if it isn't)
- Integrates an API that I made to query my portfolio data
- Responsiveness
- Accessbility
- For CSS, I tried using less classNames and used mainly selectors instead, turns out this isn't very sustainable as CSS will be messed up when you make changes to your HTML etc.
- I learned some interesting loading screen technique.
- Have a Loading div sibling to #root that you can toggle whenever you need to display loading screen
- use window.onload + document.fonts.ready callback
- Designing a template can be tricky
- SSR would be overkill for this website could fix the slow loading time caused by the assets
- It's recommended that I use webp for images but everytime I convert to webp the file size gets larger, it's weird