Portfolio-1

My very first simple portfolio website https://www.bonoku.shop/

Version check

---

• v1.0.0

  • Deployed on 13 Aug 2022
  • Added content, contacts, hover interactions, magnetic buttons and responsive design
  • Unresolved problems with inconsistent functionalities in mobile devices
    • Magnetic buttons require refresh page while on screen to function
  • Bug on loading the correct button interaction with the cursor
    • Probably requires re-studying the mechanism in buttonCtrl.js

• v1.1.0

  • Update on 21 Aug 2022
  • Added small project as work3 - drag scrolling in JavaScript
  • Hotfix for button interaction by making the page load on top upon refresh
  • Small change to font colors and tint

• v1.1.1

  • Update on 5 Sep 2022
  • Replaced work3 (drag scroll) with Riot Games login screen deployment
  • Drag scroll is now accessible through second button for now…
  • Hotfix by page load on top seems to have bug on mobile devices
    • Removed again → bug on refresh page is back
      • Temp fix in future by removing cursor interaction and to a clean button

Summary

---

Skills used

• HTML
• CSS
• JavaScript
• npm
• Netlify
• gabia. (Domain)

Notable functions

• Minimal, modern layout
• Responsive design
• Magnetic buttons
• Hover interactions
• Custom cursor
• Google Analytics

Process

---

Initial

• Imported package from magnetic buttons demo website
• Used template builder to get a vague idea for the layout
• Intended to make a minimal portfolio website
• Tried to apply semantic HTML tagging

Problems

• Faced difficulties when trying to digest the magnetic buttons and applying hover effect on all buttons since I learned JavaScript on the go
• Responsive design required me to wholly reconstruct and change the initial CSS units to relative units
• Received negative feedbacks about the initial UI experience

Lessons

• Familiarized with JavaScript and constructing responsive design
• Deployment process undergone with use of npm
• VS Code upgraded with many more useful extensions for future use
  • Utilized live-share to brainstorm with my friend on some scripts
• Actively taking in feedbacks for better end product

Future implementation

---

• Future work may add pop-up screen using react / framer.motion instead of redirecting to another link