Skip to content

Latest commit

 

History

History
243 lines (172 loc) · 9.79 KB

README.md

File metadata and controls

243 lines (172 loc) · 9.79 KB

Table of Contents

Portfolio Sections

✔️ Summary and About me
✔️ Skills
✔️ Education
✔️ Work Experience
✔️ Open Source Projects Connected with GitHub
✔️ Big Projects
✔️ Achievements And Certifications 🏆
✔️ Blogs
✔️ Talks
✔️ Podcast
✔️ Contact me
✔️ Twitter Timeline
✔️ GitHub Profile

To view a live example, click here.

Getting Started

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

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/AnPhuoc2410/My_Portfolio.git

# Go into the repository
cd My_Portfolio

# 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 classic 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
  1. 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"
USE_GITHUB_DATA = "true"

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.

ERROR

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

Linking blogs section to Medium

Optionally, you can link the blogs section to your medium user account:

  • Inside the .env file, add key MEDIUM_USERNAME and assign your Medium username
// .env
MEDIUM_USERNAME = "YOUR MEDIUM USERNAME"
  • For Github Action, change the environment variable MEDIUM_USERNAME in .github/workflows/deploy.yml

Set displayMediumBlogs to true or false in portofolio.js to display fetched Medium blogs, defaults to true.

Change and customize every section according to your need.

Personalize page content in /src/portfolio.js & modify it as per your need. You will also need to modify index.html to change the title and metadata to provide accurate SEO for your personal portfolio.

/* Change this file to get your Personal Porfolio */

const greeting = {
  username: "An Phuoc",
  title: "Hi there, I'm Phuoc!",
  subTitle: emoji(
    "A passionate Back-End Software Developer👀 with experience in building robust and scalable website and desktop applications using Java, C#, Spring Boot, .NET Framework, and other cutting-edge libraries and frameworks."
  ),
  resumeLink:
    "https://www.topcv.vn/xem-cv/AlBTAgEKUlJXB1UFUgcNUAVXUlddVQcBAFELVg1b58", // Set to empty to hide the button
  displayGreeting: true // Set false to hide this section, defaults to true
};

const socialMediaLinks = {
  github: "https://github.com/AnPhuoc2410",
  gmail: "anphuocdao2410@gmail.com",
  facebook: "https://www.facebook.com/anphuocdao2410",
  instagram: "https://www.instagram.com/anphuocdao2410",
  twitter: "https://twitter.com/AnPhuoc2410",
  // To customize icons and social links, tweak src/components/SocialMedia
  display: true // Set true to display this section, defaults to false
};


const skillsSection = { .... }

const techStack = { .... }

const workExperience = { .... }

const openSource = { .... }

const bigProjects = { .... }

const achievementSection = { .... }

const blogSection = { .... }

const contactInfo = { .... }

const twitterDetails = { ... }

Resume upload

To upload your own resume, simply upload a pdf to src/containers/greeting/resume and rename the pdf to resume.pdf.

Using Emojis

For adding emoji 😃 into the texts in Portfolio.js, use the emoji() function and pass the text you need as an argument. This would help in keeping emojis compatible across different browsers and platforms.

Customize Lottie Animations

You can choose a Lottie and download it in json format from sites like this. In src/assets/lottie, replace the Lottie json file you want to alter with the same file name. If you want to change the Lottie options, go to src/components/displayLottie/DisplayLottie.js and change the defaultOptions object, you can refer lottie-react docs for more info on the defaultOptions object.

Adding Twitter Time line to your Page

Insert your Twitter username in portfolio.js to show your recent activity on your page.

const twitterDetails = {
  userName : "Your Twitter Username"
};

Note: Don't use @ symbol when adding username.

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 (Recommended)

First you should enable, GitHub Actions for the repository you use.

The Profile and the Repository information from GitHub is only created at the time of deploy and the site needs to be redeployed if those information needs to be updated. So, a configurable CRON Job is setup which deploys your site every week, so that once you update your profile on GitHub it is shown on your portfolio. You can also trigger it manually using workflow_dispatch event, see this guide on how to do that.

Deploying to GitHub Pages

  • Once you are done with your setup and have successfully completed all steps above, you need to put your website online!
  • I highly recommend using Github Pages to achieve this the EASIEST WAY.
  • To deploy your website, you have two options. First you need to create a github repository with the name <your-github-username>.github.io. Please don't give it any other name.
  • Now, you need to generate a production build and deploy the website.

Option 1:

  • Run npm run build to generate the production build folder.
  • Enter the build folder, git init and push the generated code to the master branch of your new repository. That's it. Done. You may need to git init and force push at every new build.

Option 2 (will not work with user pages):

  • Run npm run deploy to build and create a branch called gh-pages. It will push the build files to that branch.
  • The last step in deploying is to enable Github Pages in settings of the repository and select gh-pages branch.

Now, your website is successfully deployed and you can visit it at <your-github-username>.github.io.

Technologies Used

Illustrations