Nicole Martin Portfolio 2021-22:

Light Mode:

Dark Mode:

Documenting building my developer portfolio using:

• React

• JS / CSS

• And more to add as I go along:

  • Tailwind CSS
  • React-Router-Dom
  • React-Hook-Form
  • EmailJS
  • Zustand Middleware
  • Giphy API

Goals:

• Showcase the developer skills I have learned over the last year, and continue to learn as I go along.
• Keep portfolio simple and dynamic.
• Add light / dark mode.
• Complete v1 VIP of portfolio by Nov 7th.
• Work on portfolio at least 4 days a week to meet deadline.

2/11/2022

• Refactored Giphy component into separate files, to use the Separation of Concerns(SoC) concept with custom hooks, services, and components.

2/10/2022

• I want to add gifs to my homepage to have more fun and use the Giphy API. Created a profile on Giphy developers and obtained my API Key. Wrote a Giphy component to render gifs.

• Gifs rendering.

2/7/2022

• Created a Refactor Branch and started to refactor the TailwindCSS to be more readable. I know the point of TailwindCSS is to use inline styling and not separate CSS files, but it looks cluttered and messy so I created a variable 'styles' to extract TailwindCSS to the bottom of each file.

• Refactored TailwindCSS in Home and Dropdown.

• Updated React-Router to latest version (6.2.1) and correct syntax.

12/20/2021

• Updated Meta Data

11/3/2021

• Added meta tags
• More fun with TailwindCSS

11/2/2021

• Removed unwanted files
• Fixed styling on light/dark mode
• Fixed Resume, now open in new window

10/30/21

• Cleaned up files
• Added bounce animation
• Light/Dark Mode!!
• More styling and update info

10/29/21

• A lot of styling
• Finished v1 MVP of site
• Deployed on Netlify

10/28/21

• Finished Contact Form functionality, it works!!
• Working on About Me Component
• About Me styled
• Contact Form styled
• Made Hamburger menu and responsive design overall

10/27/21

• Can not get images to render from data file. Will come back to portfolio page.
• Working on Contact Form.
• Contact form rendered with React-Hook-Form and EmailJS
• Some styling added

10/26/21

• Started basic layout of navbar and footer.
• Studied more about Tailwind Css.
• Added Projects Data and pulled it into the Projects component with props.

10/22/21:

• Adding Tailwind CSS to my app. Started learning Tailwind with a tutorial from Traversy Media Tailwind CSS Crash Course.
• Added Tailwind config and setup files to project.
• Added React-Router-Dom and set up paths.

Start DATE: 10/21/21:

• Started with create-react-app.
• Cleaned up skeleton and added folders/files to start building out each component.
• Registered domain name.
• Started planning color/design work.