Skip to content

πŸš€ Software Developer Portfolio Template that helps you showcase your work and skills as a software developer. (This is currently not being actively maintained)

License

Notifications You must be signed in to change notification settings

saadpasta/developerFolio

Repository files navigation

Software Developer Folio ⚑️ GitHub GitHub stars All Contributors

A clean, beautiful and responsive portfolio template for Developers!

Just change src/portfolio.js to get your personal portfolio. Customize portfolio theme by using your own color scheme globally in the src/_globalColor.scss file. Feel free to use it as-is or personalize it as much as you want.

If you'd like to contribute and make this much better for other users, have a look at Issues.

Created something awesome for your fork of the portfolio and want to share it? Feel free to open a pull request.

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.

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 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 = {
  /* 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: "[email protected]",
  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 = { ... }

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

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.

Deploy To Netlify

For more information, read hosting on Netlify.

Technologies Used

Illustrations

For the Future

If you can help us with these. Please don't hesitate to open a pull request.

  • Connect with LinkedIn to get Summary, Skills, Education and Experience

  • Move to Gatsby

  • Add More Sections

Project Maintainers


Saad Pasta

Kartik Choudhary

Naveen M K

Muhammad Hasham

Contributors

Thanks goes to these wonderful people (emoji key):

Fawad Ali
Fawad Ali

πŸ€” πŸ’»
Dasun Navoda
Dasun Navoda

πŸ“–
Brian Teeman
Brian Teeman

πŸ“–
Rajkumar S
Rajkumar S

πŸ’»
Slim Coder
Slim Coder

πŸ’» πŸ“–
Mohamed Sayyaf
Mohamed Sayyaf

πŸ“–
Ashutosh Hathidara
Ashutosh Hathidara

πŸ’»
Rizwan Jamal ⚑️
Rizwan Jamal ⚑️

πŸ“–
Muhammad Hasham
Muhammad Hasham

πŸ’»
UJJAWAL JOSHI
UJJAWAL JOSHI

πŸ’»
Palak Sethi
Palak Sethi

πŸ’»
Vinicius Barbosa
Vinicius Barbosa

πŸ’»
Bharat Kammakatla
Bharat Kammakatla

🎨
Garima Singh
Garima Singh

πŸ’»
Henry Heng
Henry Heng

πŸ’» 🎨
Pulkit Banta
Pulkit Banta

πŸ’» πŸ›
Akshay Kumar
Akshay Kumar

πŸ’» πŸ›
Amna Ejaz
Amna Ejaz

πŸ’» πŸ€”
Paras Nagpal
Paras Nagpal

πŸ’»
Sparsh Garg
Sparsh Garg

πŸ’»
Aashutosh Rathi
Aashutosh Rathi

πŸ’»
Abhishek Kashyap
Abhishek Kashyap

πŸ›
Lucas V C Nicolau
Lucas V C Nicolau

πŸ“–
Bradley C. Herrin
Bradley C. Herrin

πŸ“– πŸ€”
Zekinah Lecaros
Zekinah Lecaros

πŸ’»
unbeat
unbeat

πŸ“–
Arshad Ahmed
Arshad Ahmed

πŸ“–
Xiaohui Liu
Xiaohui Liu

πŸ“– πŸ’» 🎨
Seungyeon-Lee
Seungyeon-Lee

πŸ’»
Najam Shehzad
Najam Shehzad

πŸ’»
Randy Jesus Real Srsen
Randy Jesus Real Srsen

πŸ’»
Tamojit Das
Tamojit Das

πŸ“–
Waren Gonzaga
Waren Gonzaga

πŸ’»
Benjamin Bourgeois
Benjamin Bourgeois

πŸ’»
Keshav Jain
Keshav Jain

πŸ’»
Hanzla
Hanzla

πŸ’»
Yogesh Rathod
Yogesh Rathod

πŸ“–
Kunal Mundada
Kunal Mundada

πŸ“–
Anubhav Gupta
Anubhav Gupta

πŸ’»
Vatsal Dave
Vatsal Dave

πŸ’»
Elvis Ciuffetelli
Elvis Ciuffetelli

πŸ’»
Scott Jellen
Scott Jellen

πŸ’» 🎨
Karthik Mohan
Karthik Mohan

πŸ›
mhowell11
mhowell11

πŸ“–
gajanandh
gajanandh

πŸ›
JooHyukKim
JooHyukKim

πŸ’»
Red Headphone
Red Headphone

πŸ’» πŸ›
Sunit Roy
Sunit Roy

πŸ›
Atir Nayab
Atir Nayab

πŸ›
Shehriyar Qureshi
Shehriyar Qureshi

πŸ’»
respectech
respectech

πŸ’»
Brayden
Brayden

πŸ›
Canciu Costin
Canciu Costin

πŸ’»
Atharv Singh
Atharv Singh

πŸ’»
Ishan Khandelwal
Ishan Khandelwal

πŸ“–
Sergey Lyapustin
Sergey Lyapustin

πŸ’»
Camila Pozas
Camila Pozas

πŸ’»
Sai Teja
Sai Teja

πŸ›
Vinit Hemadri
Vinit Hemadri

πŸ’»
Njong Emy
Njong Emy

πŸ“–
Tamal Das
Tamal Das

πŸ“–
Dunsin
Dunsin

πŸ’»
Muneeb Ahmed
Muneeb Ahmed

πŸ’»
Qais Attarwala
Qais Attarwala

πŸ’»