Fix icon spacing on mobile.

- [ ] Wireframe new site design

• Choose framework/ styling
  • React
  • Tailwind
• Pages
  • Landing (About blurb with styling)
    - [ ] Blog
  • Projects
• Fix database situation
• Add analytics
• Maybe change font
• Add animations
  • Wave
  • Flip cards
  • Bouncing scroll to top arrow
  • Confetti on submit
• Refactor: is everything as componentized as possible?

Transition to GraphQL API for projects and visitors.

Update /diagrams to "Tap to expand" for mobile.

Move VWC to 3 spot

Standardize the size of the numbers.

Have confetti rain from top of viewport instead of blasting from table.

Decrease header sizes for mobile

Task

Implement cache policy for images.

Resources

web.dev
MDN
Stack Overflow

Note

Not sure if GitHub Pages servers support .htaccess files.

1. Get current image sizes
2. Recreate images with said sizes
3. Serve images on site with correct size

• Convert all images to SVG
• • 420
• • index
• Add the hover action to each SVG
• SVGs rendering blurry on Chrome desktop (420)
• Carousel won't scroll on landscape mobile (420)
• Try logos for SVGs
  • Logos not rendering on mobile

Problem

On iPad and iPad Pro (landscape) the UI is too condensed (see screenshots). Should be more space in between elements. As a compass, the Resume button should be closer to the bottom of the screen, as it appears on desktop and other mobile devices.

Screenshots

iPad

iPad Pro

Add sponsor widget to all live project pages.

Create a custom 404 page

Issue Description

Google Lighthouse Accessibility score is 98.

Solution

Remove links from embedded PDF file and score will max out.

Change PNGs to next gen formats

• Logo
• Resume
• 404
• Projects