Francofgp's Portfolio

What is this Repo about?

Here you can find my portfolio made with React and Javascript

                   

• Francofgp's Portfolio
  • What is this Repo about?
  • Docker Commands
  • How To Use
  • Linking Portfolio to GitHub
  • Showcase
  • Deployment
    • Deploying to GitHub Pages
    • Deploying to Netlify
  • Acknowledgements
  • License

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

You'll need Git and Node.js (which comes with npm) installed on your computer or use Docker.

node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher

This repo was tested with node v14.

Attention: It is not working with NodeJS v16.13.1

Docker Commands

1) BUILD IMAGE : docker build -t developerfolio:latest .
2) RUN IMAGE: docker run -t -p 3000:3000 developerfolio:latest

How To Use

From your command line, clone and run developerFolio:

# Clone this repository
git clone https://github.com/saadpasta/developerFolio.git

# Go into the repository
cd developerFolio

# Setup default environment variables

# For Linux
cp env.example .env
# For Windows
copy env.example .env

# Install dependencies
npm install

# Start a local dev server
npm start

Linking Portfolio to GitHub

Generate a GitHub personal access token following these instructions (make sure you don't select any scope just generate a simple token). If you are using GitHub Actions to deploy your portfolio you can skip this section.

1. Create a file called .env in the root directory of your project (if not done already in section: How To Use)

Note: Configuring environment variables before deploying your portfolio is highly recommended as some components depend on API data.

- DeveloperFolio
  - node_modules
  - public
  - src
  - .env         <-- create it here
  - env.example  <-- this is the base file
  - .gitignore
  - package-lock.json
  - package.json

2. Inside the .env file, add key REACT_APP_GITHUB_TOKEN and assign your GitHub token like this, also add your username as GITHUB_USERNAME

// .env
REACT_APP_GITHUB_TOKEN = "YOUR GITHUB TOKEN HERE"
GITHUB_USERNAME = "YOUR GITHUB USERNAME"

Set showGithubProfile to true or false to show Contact Profile using GitHub, defaults to false.

Warning: Treat your tokens like passwords and keep them secret. When working with the API, use tokens as environment variables instead of hardcoding them into your programs.

Note: Open Source Projects section only show pinned items of your GitHub. If you are seeing something as shown below, follow these instructions.

If the above solution still doesn't work, visit the wiki page.

Showcase

---

Full screenshot

Deployment

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://developerfolio.js.org/ in homepage variable. For example, if you want your site to be https://<your-username>.github.io/developerFolio, add the same to the homepage section of package.json.

• In short you can also add /devloperFolio 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.

Acknowledgements

---

• React A JavaScript library for building user interfaces.
• typewriterjs a delightful JavaScript Testing Framework with a focus on simplicity.
• react-easy-emoji Super minimal emoji rendering utility for react.
• saadpasta for your help in this ♥.
• color-thief Grab the color palette from an image using just Javascript. Works in the browser and in Node.

License

Closures is provided under the GPL v3.