Need help with developerFolio?
Click the β€œchat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

saadpasta
1.9K Stars 736 Forks GNU General Public License v3.0 360 Commits 10 Opened issues

Description

πŸš€ Software Developer Portfolio Template that helps you showcase your work and skills as a software developer.

Services available

!
?

Need anything else?

Contributors list

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. Feel free to use it as-is or customize it as much as you want.

But if you want to contribute and make this much better for other developer have a look at Issues.

If you created something awesome and want to contribute then feel free to open an pull request.

Table of Contents

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.

[email protected] or higher
[email protected] or higher
[email protected] 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/saadpasta/developerFolio.git

Go into the repository

$ cd developerFolio

Install dependencies

$ npm install

#Start's development 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, 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         
  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"

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.

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: "[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 = { ... }

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.

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://.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

πŸ€” πŸ’»

Dasun Navoda

πŸ“–

Brian Teeman

πŸ“–

Rajkumar S

πŸ’»

Slim Coder

πŸ’» πŸ“–

Mohamed Sayyaf

πŸ“–

Ashutosh Hathidara

πŸ’»

Rizwan Jamal ⚑️

πŸ“–

Muhammad Hasham

πŸ’»

UJJAWAL JOSHI

πŸ’»

Palak Sethi

πŸ’»

Vinicius Barbosa

πŸ’»

Bharat Kammakatla

🎨

Garima Singh

πŸ’»

Henry Heng

πŸ’» 🎨

Pulkit Banta

πŸ’» πŸ›

Akshay Kumar

πŸ’» πŸ›

Amna Ejaz

πŸ’» πŸ€”

Paras Nagpal

πŸ’»

Sparsh Garg

πŸ’»

Aashutosh Rathi

πŸ’»

Abhishek Kashyap

πŸ›

Lucas V C Nicolau

πŸ“–

Bradley C. Herrin

πŸ“– πŸ€”

Zekinah Lecaros

πŸ’»

unbeat

πŸ“–

Arshad Ahmed

πŸ“–

Xiaohui Liu

πŸ“– πŸ’» 🎨

Seungyeon-Lee

πŸ’»

Najam Shehzad

πŸ’»

Randy Jesus Real Srsen

πŸ’»

Tamojit Das

πŸ“–

Waren Gonzaga

πŸ’»

Benjamin Bourgeois

πŸ’»

Keshav Jain

πŸ’»

Hanzla

πŸ’»

Yogesh Rathod

πŸ“–

Kunal Mundada

πŸ“–

Anubhav Gupta

πŸ’»

Vatsal Dave

πŸ’»

Elvis Ciuffetelli

πŸ’»

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.