Repository files navigation

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

If you'd like tocontribute and make this much better for other users, have a look atIssues.

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

• Sections
• Getting Started
• How to Use
• Linking portfolio to GitHub
• Linking blogs section to Medium
• Change and Customize
• Deployment
• Technologies Used
• Illustrations
• For the Future
• Contributors

✔️ 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.

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

You'll needGit andNode.js (which comes withnpm) installed on your computer or useDocker.

node@v10.16.0 or highernpm@6.9.0 or highergit@2.17.1 or higher

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

From your command line, clone and run developerFolio:

# Clone this repositorygit clone https://github.com/saadpasta/developerFolio.git# Go into the repositorycd developerFolio# Setup default environment variables# For Linuxcp env.example .env# For Windowscopy env.example .env# Install dependenciesnpm install# Start a local dev servernpm start

Generate a classic GitHub personal access token following theseinstructions (make sure you don't select any scope just generate a simple token). If you are usingGitHub 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 keyREACT_APP_GITHUB_TOKEN and assign your GitHub token like this, also add your username asGITHUB_USERNAME

// .envREACT_APP_GITHUB_TOKEN="YOUR GITHUB TOKEN HERE"GITHUB_USERNAME="YOUR GITHUB USERNAME"USE_GITHUB_DATA="true"

SetshowGithubProfile 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 theseinstructions.

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

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

• Inside the .env file, add keyMEDIUM_USERNAME and assign your Medium username

// .envMEDIUM_USERNAME="YOUR MEDIUM USERNAME"

• For Github Action, change the environment variableMEDIUM_USERNAME in.github/workflows/deploy.yml

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

/* Change this file to get your Personal Porfolio */constgreeting={/* 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"};constsocialMediaLinks={/* 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"};constskillsSection={ ....}consttechStack={ ....}constworkExperience={ ....}constopenSource={ ....}constbigProjects={ ....}constachievementSection={ ....}constblogSection={ ....}constcontactInfo={ ....}consttwitterDetails={ ...}

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

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

You can choose a Lottie and download it in json format from sites likethis. Insrc/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 tosrc/components/displayLottie/DisplayLottie.js and change thedefaultOptions object, you can referlottie-react docs for more info on thedefaultOptions object.

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

consttwitterDetails={userName :"Your Twitter Username"};

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

When you are done with the setup, you should host your website online.We highly recommend to read through theDeploying on GitHub Pages docs for React.

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 configurableCRON 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 usingworkflow_dispatch event, seethis guide on how to do that.

• When you are done with the configuration, we highly recommend to read through theGitHub Actions Configuring a workflow docs.

This section guides you to deploy your portfolio on GitHub pages.

• Navigate topackage.json and enter your domain name instead ofhttps://developerfolio.js.org/ inhomepage variable. 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 also add/devloperFolio topackage.json as both are exactly same. Upon doing so, you tellcreate-react-app to add the path assets accordingly.

• Optionally, configure the domain. You can configure a custom domain with GitHub Pages by adding aCNAME file to thepublic/ folder.

• Follow through the guide to setup GitHub pages from the official CRA docshere.

You could also host directly with Netlify by linking your own repository.

For more information, readhosting on Netlify.

• React
• graphql
• apollo-boost
• react-twitter-embed
• react-easy-emoji
• react-headroom
• color-thief

• UnDraw
• Lottie by Oblikweare

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

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

• Move to Gatsby

• Add More Sections

Saad Pasta

Kartik Choudhary

Naveen M K

Muhammad Hasham

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 💻	Scott Jellen 💻🎨
Karthik Mohan 🐛	mhowell11 📖	gajanandh 🐛	JooHyukKim 💻	Red Headphone 💻🐛	Sunit Roy 🐛	Atir Nayab 🐛
Shehriyar Qureshi 💻	respectech 💻	Brayden 🐛	Canciu Costin 💻	Atharv Singh 💻	Ishan Khandelwal 📖	Sergey Lyapustin 💻
Camila Pozas 💻	Sai Teja 🐛	Vinit Hemadri 💻	Njong Emy 📖	Tamal Das 📖	Dunsin 💻	Muneeb Ahmed 💻
Qais Attarwala 💻