MichaelJHTaggart / MichaelJHTaggart-portfolio

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Deck

michaeljhtaggart_portfolio_2022-05-03_08 28pm

Language:

  • Typescript

Framework/Library:

  • React
  • Redux Toolkit

Style/Design: - Ant Design Had to remove as the css was messing with the tailwind css. I will have to build my own animations.

  • Tailwind CSS

Server:

  • Firebase Auth
  • Firebase Firestore
  • Firebase Storage

Hosting:

  • Firebase Hosting

Tech/APIs:

  • Stripe API
  • Socket.io

Why?

I have built a few portfolio's, but I wanted one that really showed my skills as a web developer. I wanted a portfolio that didn't only serve as a place for recruiters to stop by and be wowed by my skills, but I thought this should also be a place where people can actually see what I do, and can pay for my services.

Wireframing, Component & Feature planning all designed on Figma

Homepage Design on Figma

Project page Design on Figma

Shopping page Design on Figma

Checkout my Component & Feature Planning on Figma

Future Features!!!

Menu ideas:

  • Every hover changes the background picture !Currently only for large screens

onMouseEnter = change picture to this thingy onMouseLeave = change picture back to original

also a way to make the pictures not as overwhelming would be to make them faded, and to animate them to fly in rather than abruptly change

Also, each li could have a video that plays of like a pokemon that interacts with the word. **Charzard stands up and shoots fire at the home li which catches fire and falls to the bottom of the div in ashes.

Home ideas:

  • When hovering over the word WEB DEVELOPER it expands
  • When you click on the Word it flips the div over and shows a 'Spin' component.
  • The component works like the apple date select where you and click and drag to 'spin' through the different tech that I am familiar with.

Kind of looks like this.

  • When hovering over my image the Github && LinkedIn icons appear, and expand. They are clickable.

Time spent && Daily Logs

May 3, 2022:

  • Initial Setup: 30 min

May 4, 2022:

  • MP-10 completed: 2 h 40 min

May 5, 2022:

  • MP-25 in-progress: 1 h 10 min (Ant Design && Tailwind not style friendly)

May 6, 2022:

  • MP-25 in-progress: 2 h (Committed to building project in Tailwind, no Ant-Design, no SASS)
  • MP-25 completed: 2 h (Playing with animation!)

May 9, 2022:

  • MP-6 in-progress: 2 h (Stacking css elements)

May 10, 2022:

  • MP-25 bug-completed: 2 h
  • MP-6 in-progress: 3 h (finished mobile view)

About


Languages

Language:TypeScript 80.8%Language:JavaScript 13.5%Language:HTML 5.2%Language:CSS 0.5%