Portfolio Roadmap

This document outlines the roadmap for developing and enhancing the portfolio website.

Content & Structure

Portfolio Content

• Add employment timeline ...
• Add iconography ...
• Add link for 3d prints ... / projects / hobbies with carousel and description card
• Add link to blog ...
• Add a link for processes / definitions / plant uml diagrams
• What works of art have I created ..
• Split Skills in dropdown to "tech skills" and "people skills"
• Update my resume ...
• Add charts / additional content / 5 stars, etc ...
• Add a section of websites/tools I developed with their own bubbles
• Add tools...
• Add repos ..
• Add a section on aws ...
  • S3, ... cdk, ... code pipeline ... cloudwatch ...
• Add carousel of projects ...
• Link my plugins ... apps ... to my portfolio!
• Add a mindset section to my site!

Content Strategy

• Should I include other things in my portfolio ... like links to 3d prints, my roadmaps ... etc or should it be resume focused ...?
• Should I move the motivation.html out of this?
  • Or should i make components for this ...

Technical Enhancements

React & Testing

• I need to enhance my portfolio ...
  • I need to react-ize the front end ... and add unit tests to UI! ... >2021-10-30
• Look for reusable react components...

Infrastructure & Deployment

• Make it such that static site built and deployed to cloud front automatically ...
• Add CDK for code pipeline ... cdn / cloud front config ...

Navigation & Routing

• Add a menu bar?
• Client side routing ..
  • https://reactrouter.com/en/main/start/overview

Components & Features

• Add a better navbar ...
• Add markdown support
  • https://github.com/remarkjs/react-markdown?tab=readme-ov-file#when-should-i-use-this
• Add ChatGPT to portfolio ...
  • https://blog.hubspot.com/website/chatgpt-integration
  • Educate it on my works...

Mobile Support

Mobile Responsiveness

• Fix it on mobile
• Make my portfolio phone friendly!
  • Consider making a mobile view ... #tinker
    • https://www.w3schools.com/css/css_rwd_viewport.asp
• Make a separate mobile style sheet?!
  • https://stackoverflow.com/questions/13375307/how-do-i-load-one-style-sheet-for-mobile-devices-and-one-for-desktops
• Make the app responsive ...
  • https://react-bootstrap.netlify.app/docs/components/navbar#responsive-behaviors
  • https://www.npmjs.com/package/react-responsive

Design & Branding

Visual Design

• It's overwhelming.. add logos of tech ...
• Consolidate all the different icons I want to get on the noun project ...
  • A PDF Download button ...
• Like the counter here; https://travis-ci.org/
• Get icon person to make icons of bytes of purpose .com
• Make favicon
  • https://favicon.io/favicon-generator/

Icons & Assets

• Add icons
  • https://devicon.dev/
  • https://openscad.org/assets/img/logo.png
  • https://fpoumian.github.io/react-devicon/#install
  • https://github.com/devicons/react-devicons

User Experience

Accessibility & Clarity

• Mariam saw it and said I have no idea what this means ... but it looks nice ...
  • Add a landing page with an option to jump into technical experience?
  • Add my LinkedIn Desc to my site!

Reflections & Improvements

• My site ... is low level ... too much detail on specific tech ...
• Can I have a High level picture of my tech skills ...
• Someone should look at my resume and be like ... AWS experience, check
  • AI/ML, check
  • Scalable systems, check
  • Event driven architectures, check
  • Almost like architectural patterns with stars...
• Can I use the skills bubbles to map out tech I want to tinker with / areas I want to grow? ...

Integration & Analytics

External Integrations

• Fix my site ... not loading right ...
  • LinkedIn Badge screwing with it .. ?

Metrics & Performance

• Using google analytics for reporting web vitals ...
  • https://create-react-app.dev/docs/measuring-performance/
  • https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics

Maintenance & Workflow

Content Updates

• I need to keep my portfolio up to date!

Development Workflow

• Add link to edit roadmap locally
• Add legend to the site
• Build it / consolidate script to publish ...

Technical Debt

• Yarn vs npm
  • https://www.knowledgehut.com/blog/web-development/yarn-vs-npm#differences-between-yarn-and-npm
• Fixing openssl issue ...
  • https://github.com/nodejs/node/issues/43723
• Addressing Node Upgrade issues ...
  • https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported
  • https://stackoverflow.com/questions/69693907/error-err-package-path-not-exported-package-subpath-lib-tokenize-is-not-d

Strategic Planning

Roadmap Development

• I need to develop a proper roadmap for my portfolio ...
  • How will I iteratively make it better ...?