portfolio_banner

Table of Contents 📖

Introduction

  • Full stack portfolio build, with tech stretches with TypeScript, TailwindCSS, and Next.js.
  • Built out the backend using Sanity.io with deployment to Vercel.
  • Pages snap in place when scrolling.
  • Work Experiences and Projects snap in carousel fashion.
  • Additional technologies used in this build include:
    • Next.js
    • Tailwind CSS
    • Framer Motion
    • React Simple Typewriter
    • Hero Icons
    • React hook form
    • Tailwind Scrollbar
    • Sanity.io toolkit for Next.js.

Back to 🔝

Technologies and Tools

  • JavaScript
  • HTML
  • TailwindCSS
  • NPM
  • Node.js
  • React
  • TypeScript
  • RESTful API
  • React Hook Form
  • Framer
  • JSON
  • Next JS
  • GitHub
  • Canva
  • Figma
  • Vercel

Back to 🔝

Illustrations and Demo

Home Page

Screenshot 2022-12-26 at 8 26 54 PM


About Page

Screenshot 2022-12-26 at 8 27 10 PM


Work Experience Page

Screenshot 2022-12-26 at 8 27 27 PM


Skills

Screenshot 2022-12-26 at 8 27 40 PM


Projects

Screenshot 2022-12-26 at 8 28 16 PM


Contact Me

Screenshot 2022-12-26 at 8 28 36 PM


Back to 🔝

Project Reflections

Wins

  • Added full responsiveness to allow for easy viewing on mobile devices, tablets and full screens
  • Built out backend for a full stack project
  • Created 2 carousels with snap scrolling to view projects and work experience

Challenges

  • Got stuck when trying to deploy to vercel with continuous integration from Sanity.io studio. Implemented environmental variables to set base URL when local host wasn't running.

Roadmap

Future features could include:

  • Adding a page for a blog to keep track of successes and failures in my coding journey
  • Link up to a small business page to do freelance work
  • Add a toggle for user to switch between light and dark mode.

Back to 🔝

Deployed Page

Visit the published site here

Contributor

Shauna MacFarlane-Okongo

  • Linkedin Badge
  • GitHub Badge

Sources

Back to 🔝