A clean, beautiful and responsive portfolio template for Developers!
Just change src/portfolio.js to get your personal portfolio. Feel free to use this as is or customize this as much as you want.
But if you want to contribute and make this much better then for other developer have a look at Issues.
If you created something awesome, amazing and then want to contribute then feel free to open an pull request.
Table of Contents
- Sections
- Getting Started
- How to Use
- Linking portfolio to Github
- Change and Customize
- Deployment
- Technologies Used
- Illustrations
- For the Future
- Contributors
Sections
To view the Working live example, click here.
Getting Started
Thia instructions will get you copy of the whole full complete project with the code up and running on your local machine for development and testing purposes.
You'll need Github and Node.js (which comes with the 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/rahulhidau/developerFolio
# Go into the repository
$ cd developerFolio
# Install dependencies
$ npm install
#Start's development server
$ npm startLinking 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 Git hub Actions function to deploy your portfolio app you can skip this section.
- Create a file called .env in the root directory of your project, check the base file
Note: Instead of creating a .env file, you can just run this command "cp env.example .env" inside the root directory
- DeveloperFolio
- node_modules
- public
- src
- .env <-- create it here
- env.example <-- this is the base file
- .gitignore
- package-lock.json
- package.json- Inside the .env file, add key
REACT_APP_GITHUB_TOKENand assign your github token like this, also add your username asGITHUB_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 most secured passwords and keep them secret. When working with the API then use tokens as environment variables instead of the hardcoding them into your the programs.
Note: Open Source Projects section only show the pinned items of your Github. If you are seeing something as shown below then follow these instructions.
If the above solution still doesn't work then visit the wiki page.
Change and customize every section according to your need.
Personalize page content in /src/portfolio.js & modify it as per your need.
/* Change this file to get your Personal Porfolio */
const greeting = {
/* Your Summary And Greeting Section */
title: "Hi all I'm Saad",
subTitle: emoji("A passionate Full Stack Software Developer 🚀"),
resumeLink: "https://drive.google.com/file/d/1ofFdKF_mqscH8WvXkSObnVvC9kK7Ldlu/view?usp=sharing"
};
const socialMediaLinks = {
/* Your Social Media Link */
github: "https://github.com/saadpasta",
linkedin: "https://www.linkedin.com/in/saadpasta/",
gmail: "saadpasta70@gmail.com",
gitlab: "https://gitlab.com/saadpasta",
facebook: "https://www.facebook.com/saad.pasta7"
};
const skillsSection = { .... }
const techStack = { .... }
const workExperience = { .... }
const openSource = { .... }
const bigProjects = { .... }
const achievementSection = { .... }
const blogSection = { .... }
const contactInfo = { .... }
const twitterDetails = { ... }Using Emojis
For adding emoji the Portfolio.j, use the emoji() function and pass the text you need as the argument. This would help you in keeping emojis compatible across different browsers and platforms.
Adding Twitter Time line to your Page
Insert your Twitter username in portfolio.js to show your recent activity on the your page.
const twitterDetails = {
userName : "Your Twitter Username"
};Note: Don't use @ symbol when adding username.
Deployment
When you are done with the setup then you should host your website online. We highly recommend you to read through the Deploying on Github Pages docs for React.
Configuring GitHub Actions (Recommended)
First you must enable, Github Actions for the repository you use.
a Profile and the Repository infofrom the Git hub is only created on time of deploy and the site need to be redeployed if those info needs to be updated. So, the configurable CRON Job is setup which deploys the 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 and see this guide on how to do that.
- 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 will guides you to deploy your portfolio on Github pages.
Navigate to
package.json fileand then enter your domain name instead of this urlhttps://developerfolio.js.org/inhomepagevariable. For example, if you want your site to behttps://<your-username>.github.io/developerFolio, add the same to the homepage section ofpackage.json.In short you can add
/devloperFoliotopackage.jsonas both are exactly same. Upon doing so you have tellcreate-react-appto add the path assets accordingly.Optionally, configure the domain. You can also config the your custom domain what ever you want with GitHub Pages by adding a
CNAMEfile to apublic/folder.Follow through the guide to setup the GitHub pages from the official CRA docs here.
Deploying to Netlify
You could also host directly with Netlify by linking the your own repository.
For more information, read hosting on Netlify.
Technologies Used
Illustrations
Connect with LinkedIn to get Summary, Skills, Education and Experience
Move to Gatsby
Add More Sections