melitus / portfolio-website

# ReactJS Portfolio Template

LIVE DEMO

Description

This is a ReactJS based personal resume website template for participants of The 6 Figure JavaScript ReactJS Challenge by Clever

Make it Your Own!

PREREQUISITES:

• Sign up for a Netlify account HERE
• Install Node JS in your computer HERE

PROCEDURE:

• Download the zip folder from Github and unzip it Here is the link to download zip 👉 HERE
• Open the folder in VS Code
• Edit src/portfolio.js and add your personal details and projects
• Open terminal in VS Code
• RUN npm init , this command can be used to set up a new or existing npm package
• RUN npm install , this command pulls out all the require node modules
• RUN npm run build, this command will create a build folder for you
• DRAG AND DROP the BUILD folder on Netlify, your app is live now for the world to see

Deployment

When you are done with the setup, you should host your website online. We highly recommend to read through the Deploying on Github Pages docs for React.

Configuring GitHub Actions

• Using the Personal Access Token you placed in the .env file earlier create a repository secret called OPEN_SOURCE_TOKEN where the value matches the token value from the .env file in your local workspace.
• When you are done with the configuration, we highly recommend to read through the Github Actions Configuring a workflow docs.

Deploying to Github Pages

This section guides you to deploy your portfolio on Github pages.

• Navigate to package.json and enter your domain name instead of https://xxxx.js.org/ in homepage variable. For example, if you want your site to be https://<your-username>.github.io/portfolio-website, add the same to the homepage section of package.json.

• In short you can also add /portfolio-website to package.json as both are exactly same. Upon doing so, you tell create-react-app to add the path assets accordingly.

• Optionally, configure the domain. You can configure a custom domain with GitHub Pages by adding a CNAME file to the public/ folder.

• Follow through the guide to setup GitHub pages from the official CRA docs here.

Deploying to Netlify

You could also host directly with Netlify by linking your own repository.

For more information, read hosting on Netlify.

Technologies Used

• React
• graphql
• apollo-boost
• react-twitter-embed
• react-easy-emoji
• react-headroom
• color-thief

Illustrations

• UnDraw
• Lottie by Oblikweare

Credits

Credits to Saad Pasta Original Repo