xiaolongbytes.github.io

Link to Figma file

Website URL: https://xiaolongbytes.github.io/

Personal/portfolio website for myself.

Skills Learned

1. UI Design
2. Figma to prototype website design and content
3. Making website behave correctly on different window sizes/mobile (responsive design)
4. Meta description and Open Graph protocol to enhance link sharing.

Tools Used

• Realtime Colors to choose color palette and to check contrast for readability and color accessibility
• unDraw Illustrations for illustrations that match my color palette
• Google Fonts to find fonts such as Monoton and Railway used in my design
• Font Awesome v4.7 for icons
• Normalize.css to normalize website behavior on all browsers.

Lessons Learned

• Buttons are for in-page actions, anchors are for navigation. Anchors can be styled to look/act like buttons.
• CSS: * { box-sizing: border-box; } Always. Makes CSS and box model easier.
• Friends will laugh at you if you don't have a gitignore and commit node modules

TO-DO

• Finalize prototype design in Figma
• Set up gitignore
• Create page using HTML and CSS
  • Implement normalize.css
  • Research ul vs nav element (a11y)
    • Wrap my ul with nav
    • https://stackoverflow.com/a/69513936
  • webp vs jpeg
  • Figure out how to add icon to button
  • Figure out alignment of text in Home section (not aligned with right edge of resume button, is that ok?) It's fine
  • Make nav bar functional with links
    • Anchor tags scrolled page such that nav bar obscured content.
    • Behavior for sections at the bottom of the page was also poor (would not scroll so section was at top of screen)
    • Page is so short that nav bar had minimal benefit.
    • Removed for MVP.
  • Flex grow/shrink on navbar rather than set width
  • Add degree progress/courses?
• Custom URL/github url
• Ensure it looks good on different window sizes
  • How to keep left and right margins when window is less than max body width?
• Make mobile friendly
  • [ ] Change nav bar into hamburger menu on small screens
  • shrink text?
  • ensure images and buttons are displayed correctly
• Add collapsible "about" for projects to add blurb about my role in the project
• Add click tracking