jimmeex / my_website

My Portfolio Website

My Portfolio Website

Made open-source for fellow programmers to pry into to learn. May be helpful for beginners looking into frontend web-development. I am regularly making updates as I learn more tools and best practices. Have fun :).

Tech-stack

This website is currently hosted as a static website.

• React.js - Frontend 'framework' for this website! The project was initialised using create-react-app.
• TypeScript - Builds types into JavaScript.
• Sass - Superset of CSS (adds extra useful features).

Notable Packages

• react-spring - Physics-based animations.

Dev Tools

• Docker - Sets up the dev environment effortlessly (and a lot more!).
• Eslint - Enforce 'good' JavaScript practices & consistent code style.
• Prettier - Similar to Eslint.

Prod Tools

I used AWS to host this website. Some of its tools involve:

• S3 - Storage
• CloudFront - Caching & Efficient content delivery
• AWS Route53 - DNS Routing
• CodePipeline - CD tool
• CodeBuild - CD tool used in conjunction with CodePipeline

Running the Code

1. Via a Public Docker Image

If you want to run the website locally in a non-development environment, you can simply run:

docker run -p 3000:3000 -i jimmeex/my_website

2. Via the Dockerfile

If you want to play around with the website and make changes in the code, you can:

1. Download the code locally

   git clone [email protected]:JimmeeX/my_website.git

2. Navigate to the directory

   cd my_website

3. Run the development environment (requires Docker & docker-compose)

   docker-compose up --build

3. Via npm

If you want to play around with the website and make changes in the code, you can:

1. Download the code locally

   git clone [email protected]:JimmeeX/my_website.git

2. Navigate to the directory

   cd my_website

3. Install packages and dependencies locally

   yarn

4. Run a live server under a development environment

   yarn start

After following the steps in any of the 3 methods above, the website should be live and accessible at http://localhost:3000/

my_website's Issues

fix UX - "Visit Website" button is non-responsive for a timeperiod after flip animation completes

fix non-centered text & overly large text on some mobile devices

test samsung internet browser

Refactor

Task List

• Update JavaScript Packages
• ESLint to Enforce Coding Style

add a proper contact me CTA

Ideas
Modal

• Head (input)
• Body (textarea)

Journey Logo Pics Optimisation

• Properly Sized
• New gen image formats
• Link to Company Website