I wanted my bio site to reflect who I am as a person! I love florals, dark colors, and a retro design asthetic, so I tried to reflect that in the design of my bio site, all while keeping things clean and straightforward.
- A user can view the home page.
- A user can click on the two links at the top, which will send them directly to the projects and technologies areas on the home page.
- As an admin, I call follow my own route to log in. This allows me to view an authorized view of the projects page.
- As an admin, on the authorized view of the projects page, I can perform full CRUD functionality, which will update the projects component immediately for all users.
- Unauthed view that allows a user to see my hero image, about me, projects, scrolling technologies, and contact section.
- Each project card has a button that pops up a modal with more information about the project and links to the appropriate github page and deployed site.
- The technologies component scrolls. When a user hovers over the scroll section, the scrolling will pause.
- Only I, the admin, am able to login in. A private route appears which allows me to create, edit, and delete projects. The user is only allowed to read these projects on the home view.
- The webpage scales to mobile size well and was built with mobile-first design in mind.
- React
- SCSS
- HTML
- Vanilla Javascript
- Styled Components
- Firebase database and google auth
- Browser Router
- Deployed via Netlify
https://github.com/katherinevfry/react-personal-bio/projects/1