Portfolio Web Site

Build my Portfolio Website using React.

Live Demo

Available at the following hosting platforms:

1. React application hosted at Netlify (custom domain can be added freely). Another Live Demo for GitLab.
2. React application hosted at Vercel (custom domain can be added freely if not used in hashnode.dev). Another Live Demo for GitLab.
3. React application hosted at AWS Amplify Hosting (custom domain can be added). Pay as you go pricing scheme applies.
4. Docker image hosted at Google Cloud Run. Cloud Build is configured for continuous deployment.
5. Static files hosted at GitHub Pages freely.

Continuous Integration is configured at the first five hosting platforms above such that automatic deployment will be triggered when any file is committed into the main branch of the GitHub repository.

Platform	CI on main	CI on PR	GitHub	GitLab	Bitbucket	Configuration	Email Notification
Netlify	Yes	Yes	Yes	Yes	Yes	Easy	Yes
Vercel	Yes	Yes	Yes	Yes	Yes	Easy	No
AWS Amplify	Yes	No	Yes	TBC	TBC	Medium	No
Google Cloud Run (Docker)	Yes	Yes	Yes	TBC	TBC	Medium	No
GitHub Pages	No	No	Yes	No	No	N/A	No

Development

1. Install the libraries.

   npm install react react-dom
   
   npm install -g create-react-app
   
   npm install bootstrap
   
   npm install react-bootstrap
   
   npm install jquery
   
   npm install sass
   
   npm install -g serve

2. Create a React application.

   npx create-react-app portfolio-website-react

3. Modify source code /src/App.js.

4. Build the application.

   npm run build

5. Start the application locally.

   serve -s build

6. Verify by opening the following URL in browser.

   http://localhost:3000

Security Scan

Before deployment, it's better to have security scan on the docker image and apply fix if any vulnerabilities found.

1. Docker Image

1. Build the docker image.

   export VERSION_NUMBER=1.0.0
   docker build -f Dockerfile -t portfolio-website:$VERSION_NUMBER .

2. Scan the docker image.

   docker scan portfolio-website:$VERSION_NUMBER

3. Scan the docker image.

   docker tag portfolio-website:$VERSION_NUMBER $DOCKER_HUB_ID/portfolio-website:$VERSION_NUMBER-release

4. Scan the docker image.

   docker push $DOCKER_HUB_ID/portfolio-website:$VERSION_NUMBER-release

Deployment

A React application can be deployed to server via the following deployment types:

1. React application
2. Docker image
3. Static pages

1. React application

1. Install and start the application.

npm install
npm start

2. Browser at http://localhost:3000 should be opened for testing.

2. Docker image

1. Build the docker image.

   docker build -f Dockerfile -t portfolio-website .

2. Run docker image.

   docker run --name portfolio-website -it -p 5001:3000 -d portfolio-website

3. Test by opening browser at http://localhost:5001.

3. Static pages

1. Build the application.

   npm run build

2. Copy all the static files in the build folder to the web server.

Acknowledgements

1. Bootstrap with Create React App.
2. React component for rating.
3. React component for tabbed pane.
4. React component for top navigation bar.
5. CI with Snyk using GitHub .
6. Dockerizing a Node.js web application.
7. Deploy a Docker image to Google Cloud using Cloud Run.