Personal Website 2.0

Revamp of my personal website from 2020 (https://github.com/RileyChampion/personal-website)

Description

The last time I had created my website was in 2020 when i finally sat down and started to learn web dev. While I could've gone with a another static website with vanilla HTML, CSS and JavaScript; but, I wanted to have more practice with React and continue to learn the lifecycle; as well as, make the app browser agnostic.

Approach:

• Designed in Figma going from low-fidelity mockups to more fleshed out/high-fidelity mockups
• While I could have used Bootstrap or Tailwind for this project, I wanted to have more control for this projects so I opted to to most of these components myself and styling them
• Iterative approach to different sections of the site starting from a top-down approach

Things to do:

• Improve web accessibility to site
• Add caraosel to the #projects section for highlighted projects
• Optimize performance of loading CSS
• Add light mode mode to site

Mockups

Tech Stack

• Frameworks: ReactJS, SASS
• Packages: typewritter-effect, FontAwesome, gh-pages

Getting Started

Installing

Run npm install command to install dependencies

npm install

Executing program

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

Help

If you spot any issues or bugs, feel free to raise an issue.

Authors

Contributors names and contact info

Riley Champion Riley Champion @r_champion

Version History

• 0.2.1
  • Shrink size of the images and load based on component need
  • Removed unneeded fonts for Roboto
• 0.2.0
  • Fully fleshed out the website with about me, experience and projects sections.
  • Worked on high fidelity mocks to fanialize an idea
• 0.1.0
  • Initial Release with landing page and links

Acknowledgments

Inspiration, code snippets, etc.

• Brittany Chiang