Please check out the live site!

Description

This mobile first project was a big step for me. Not because the project itself was a breakthrough; it's a portfolio site. It was a breakthrough because I spent multiple weeks prior learning new technologies to implement in the process of building this website:

• I learned NextJS which this site is built with
• I learned how to dockerize my application
• I learned how to deploy a containerized application to AWS Elastic Beanstalk
• I also learned how to animate page scrolls with react-springs parallax, as well as other effects I had not used before

Features

As a portfolio site, there is not a lot of functionality, the following features have been implemented in this application as of March 26th, 2022:

• Custom button navigation of entire site
• Contact form which emails me directly through the use of HeroTofu

Tech Stack

• Front End: React, NextJS
• Component Libraries: Grommet, React Spring (Parallax and Animation)
• CSS Preprocessor: Sass
• APIs: HeroTofu for messaging.

Screenshots

Main view / start of navigation.

Beginning of Web Projects Section.

Example of the Project component views.

Example of the Project Modal component.

Beginning of the Skills section.

Example of the Technology component.

Contact Me page, where a user can send me an email directly using the HeroTofu API.

SETUP and RUN with DOCKER

docker compose up

Then navigate to localhost:80

WITHOUT DOCKER FOR DEVELOPMENT

SETUP

Install dependencies with

npm i

RUN

From the root directory

npm run dev