Git Product home page Git Product logo

ashutosh1919 / masterportfolio Goto Github PK

View Code? Open in Web Editor NEW
3.2K 19.0 1.3K 36.31 MB

πŸ”₯ The Complete Customizable Software Developer Portfolio Template which lets you showcase your work and provides each and every detail about you as Software Developer.

Home Page: https://ashutoshhathidara.com

License: MIT License

HTML 0.61% CSS 4.18% JavaScript 95.10% SCSS 0.08% Dockerfile 0.03%
reactjs portfolio html5 css3 master-portfolio developer-folio developer-portfolio developer-portfolio-template template reactjs-template

masterportfolio's Introduction

Software Developer Master Portfolio πŸ”₯

A clean, beautiful, responsive, and 100% customizable portfolio
template for Software Developers!

HitCounts NodeJS NPM Made With React Join Slack Channel For Support code style: prettier
Netlify Status Build Status License Maintenance Website License Price

If you want to discuss about something, you can ask on my Discord Server.

⭐ Star us on GitHub β€” it helps!

Sections πŸ“š

βœ”οΈ Summary and About me
βœ”οΈ Skills
βœ”οΈ Open Source Projects Connected with Github
βœ”οΈ Experience
βœ”οΈ Certifications πŸ†
βœ”οΈ Blogs
βœ”οΈ Education
βœ”οΈ Contact me

To view a live example, click here

Clone and Use πŸ“‹

  • The website is completely built on react-js library of javascript and that's why we need nodejs and npm installed
  • While installing nodejs and npm, try to install versions which are equal or greater than the versions mentioned in badges above
  • In case you want to help developing it or simply saving it, you can fork the repository just by clicking the button on the top-right corner of this page
  • After the successful installation of nodejs and npm, clone the repository into your local system using below command:
     git clone https://github.com/ashutosh1919/masterPortfolio.git
    This will clone the whole repository in your system.
  • To download required dependencies to your system, navigate to the directory where the cloned repository resides and execute following command:
    npm install
  • Now the project is ready to use
  • You can check it using npm start, it will open the website locally on your browser.

Customize it to make your own portfolio ✏️

In this project, there are basically 4 things that you need to change to customize this to anyone else's portfolio: package.json, Personal Information, Github Information and Splash Logo.

package.json

Open this file, which is in the main cloned directory, choose any "name" and change "homepage " to https://<your-github-username>.github.io. Do not forget the https://, otherwise fonts will not load.

Personal Information

You will find src/portfolio.js file which contains the complete information about the user. The file looks something like below:

// Home Page
const greeting = {
    ...
}

// Social Media
const socialMediaLinks = {
    ...
}

...

You can change the personal information, experience, education, social media, certifications, blog information, contact information etc. in src/portfolio.js to directly reflect them in portfolio website.

How to change the icons on homepage under what i do section?

  1. This section pulls data from skills in portfolio.js file.
  2. Visit this website: https://icon-sets.iconify.design/
  3. Search for the skill you are looking to add.
  4. Select the icon of your choice.
  5. Copy the text beside Selected Icon and replace it with fontAwesomeClassName of that particular softwareSkill.

How to use custom images instead of Iconify Icons?

  1. Add a valid image file into the public/skills folder
  2. Insert the image name into the imageSrc attribute of the particular softwareSkill
  3. Remove the fontAwesomeClassName property or leave it empty because it takes precedence over imageSrc
  4. Add custom styling to the img using the style Property

Github Information

You will find git_data_fetcher.mjs file in the main directory of the repository. This file is used to fetch the data (Pull requests, Issues, Organizations, Pinned projects etc.) from your github.

In the project you will see a env.example file, create a new file named .env and copy contents of env.example into it. In that file, you will see the following environment variables

GITHUB_TOKEN = your_token;
GITHUB_USERNAME = your_username;

You can get a github token as described here. Give all permissions while generating token. Add your github username and the token generated in GITHUB_USERNAME and GITHUB_TOKEN variables in the .env file.

Now, you need to run following command. (Make sure you executed npm install before this)

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.

node git_data_fetcher.mjs

This will fetch all the data from your github and it will automatically replace my data with yours. Whenever you want to update the github related information on the website you need to run this command.

Splash Logo

Note here that if you click my portfolio, you can see animating the logo at the beginning. I have designed that logo in Figma and then animated it using css. Therefore, this part of portfolio is not customizable. But don't worry we have a solution to this problem. You have below two alternatives:

  • If you want to design your own logo, then you can design it using Figma or Adobe XD or Adobe Illustrator or Inkscape. If you want to animate it, you can refer to ./src/components/Loader directory which contains js and css files which animates the logo

  • If you don't want Splash screen or you don't know how to design logo, then this option is for you

    • You can open src/portfolio.js file and at the top of this file you will see settings component as below:
      // Website related settings
      const settings = {
        isSplash: true,
      };
    • Change isSplash from true to false
    • Now, if you see your website using npm start, it will directly open home rather than animating logo splash screen
    • If you design your logo in future, then edit the files in ./src/components/Loader and then revert isSplash to true in src/portfolio.js.

Other

  • You need to change the website title and other descriptions in public/index.html
  • You can define your own favicon in public/icons directory. If you don't have a favicon, you can generate favicons from Favicon Generator and Favicon IO
  • You can also edit your website preview (known as description image). Run your site locally, take a screenshot and replace with public/icons/desc.png. Note that your screenshot should be 1280x640 for better preview.

Choose Theme 🌈

  • You can take a look at src/theme.js file where all available themes are mentioned with their respective color codes
  • At the bottom of this file you will see the below code:
    • export const chosenTheme = blueTheme;
    • You need to change the name from blueTheme to whatever theme you want to set your website to
    • You can define new theme similarly as other themes and you can assign name of that new defined theme to chosenTheme
  • That's it. You just need to change the theme name and the code will take care of everything else
  • Run npm start to check if everything is ok.

Deployment πŸ“¦

  • 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 on github. That's it. It's 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.
If you are stuck somewhere and want to observe the deployment process in depth, then please watch below video.

Technologies used πŸ› οΈ

illustrations πŸ₯

License πŸ“„

This project is licensed under the MIT License - see the LICENSE.md file for details.

Contributors ✨

Ashutosh Hathidara
Ashutosh Hathidara

πŸ’» πŸ“– 🎨 🚧 πŸ€”
Daniel Marostica
Daniel Marostica

πŸ“– 🎨
Dinesh Nadimpalli
Dinesh Nadimpalli

πŸ’»
Jivthesh M R
Jivthesh M R

πŸ“–
Jatin Chauhan
Jatin Chauhan

πŸ’»
Jainam Desai
Jainam Desai

πŸ’» πŸ’¬
Miftaul Mannan
Miftaul Mannan

πŸ’»
Ashutosh Mishra
Ashutosh Mishra

πŸ’»
Tamojit
Tamojit

πŸ“– πŸ’» 🎨
Prabin Karki
Prabin Karki

πŸ’»
Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

πŸ“–
paul
paul

πŸ’»
Sandip Dhang
Sandip Dhang

πŸ’»
Jawad Moustadif
Jawad Moustadif

πŸ’»
Priyansh Khandelwal
Priyansh Khandelwal

πŸ’» 🎨
Abdessalam Bahafid
Abdessalam Bahafid

πŸ’»
Dhruv Krishna Vaid
Dhruv Krishna Vaid

πŸ’» πŸ“– πŸ€” πŸ’¬
KasRoudra
KasRoudra

πŸ’»
Albert Einstein
Albert Einstein

πŸ“–
Suraj Pratap
Suraj Pratap

πŸ“–
Sai Teja
Sai Teja

πŸ’» πŸ“– 🚧 πŸ€”
Anirudh Panda
Anirudh Panda

πŸ’»
Md Hidayat Rasool
Md Hidayat Rasool

πŸ“–
Siddhant Sadangi
Siddhant Sadangi

πŸ“–
Anoop V
Anoop V

πŸ’»
Aakash Singh
Aakash Singh

πŸ’»
AngΓ©lica Herrera Alba
AngΓ©lica Herrera Alba

πŸ’»
David Minkovski
David Minkovski

πŸ€” πŸ’»
Carmine Di Gruttola
Carmine Di Gruttola

πŸ€” πŸ“£
Vyom Rana
Vyom Rana

πŸ’»
Parth Chawande
Parth Chawande

πŸ’»
Armaan
Armaan

πŸ“–
Varun Dhand
Varun Dhand

πŸ’»
VJS Pranavasri
VJS Pranavasri

πŸ’»

References πŸ‘πŸ»

masterportfolio's People

Contributors

0armaan025 avatar a-mishra avatar aash1999 avatar abdslam01 avatar aherrera3 avatar alberteinsteintg avatar allcontributors[bot] avatar anirudhpanda avatar ashutosh1919 avatar cdigruttola avatar dependabot[bot] avatar dhruvkrishnavaid avatar dineshnadimpalli avatar dminkovski avatar iamjatinchauhan avatar jivthesh avatar kasroudra avatar parthrc avatar prabinkarki643 avatar praveenscience avatar priyanshk20 avatar saiteja13427 avatar sandipdhang avatar siddhantsadangi avatar surajpratap10 avatar tamojit-123 avatar tasin5541 avatar th3c0d3br34ker avatar vanoop729 avatar vjspranav avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

masterportfolio's Issues

Add a gender option

Add an option for Male/Female where the illustrations would come up accordingly.

Saw Tanya Goel's Porfolio and realized that there is no such option.

Typo || Experience->Volunteerships->GithubDeveloperProgram

"I am actively contributing to many opensource projects. I have contributed to projects of organisations like Tensorflow, Uber, Facebook, Google, Scikit-learn, Kiwix, Sympy, Python, NVLabs, Fossasia, Netrack, Keras etc. These contributions include bug fixes, feature requests and formulating peoper documentation for project."

Update requires following fix:

  • peoper->proper

Horizontal Scrollbar

When the animations happen the horizontal scroll bar appears and then disappears.
Could try hiding it.
Also, love this portfolio template 😍

Setting Up Workflow for the project

(1) We need to setup a workflow which will trigger whenever any profile information is added or updated (profile image, pull requests, issues, repositories). This workflow should update the information file and should generate the production build.
(2) Another workflow should be setup to push the generated build to ashutosh1919.github.io repository.

Unable to fetch data from GitHub

I've followed all the steps in order to fetch the data from github-

  1. Installed node.js and npm.
  2. Ran npm install after cloning the repo.
  3. Issued a Personal Access Token with all the access to it.
  4. Replaced the PAT and Github username in git_data_fetcher.js and ran the command- node git_data_fetcher.js.

But still it isn't fetching any of my repositories. Although there is no error popping up. Please let me know the solution to resolve the issue asap. Thanks.

How to generate different sizes of icons fast?

I see in public/, there are many icons and pictures of different sizes, but how can I generate these quickly? Is there any tools doing this? Like, I give it a picture and it will generate downsized icons for me

A few questions

Hi Ashutosh, thanks for the tutorial! It was the only one friendly enough for beginners.

I've been trying to make it work, but so far had no success.

Should I clone your repository or my fork? Should I make a copy of the folder contents and git init inside a "virgin" one?

What does git_data_fetcher.js do? It does not update package.json, as I had to do it manually.

What is the "generated code" you refer to, that I should push to the /danielmarostica.github.io repo? Only the node_modules/? The data_fetcher, for example, has tokens, so it can't be pushed.

At the final step, github does not allow me to change from master to gh-pages. It seems that it only does if I change the repository name to anything, then link the page to the branch, and then rename again to /danielmarostica.github.io.

I tried many times, as it is my first attempt at nodejs. The farthest I could get was a blank page with the title of the portfolio.

Thanks!

How can I added more pages?

I am completely new to React, but when I tried to modify your code, I kinda understand the architecture. But, what places I need to add more code in order to add a new page? say, I'd like to have a page "Interest" that details my hobbies etc.

Github token vulnerability in github_data_fetcher.js

Current way of fetching github data using github_data_fetcher.js exposes the token. This can be fixed using .env file (Adding the actual token here and then calling it in github_data_fetcher.js) and adding it to .gitignore.

I have already done this. Can I contribute to this repo?

Change the font in header section

I would like to change the font with which my name appears in the top right corner in the header section. I searched in the project but couldn't find it. Please can anybody help me here. Saw that @th3c0d3br34ker has changed the font and would like to do that.

How to set Experience card as expanded by default?

Hi! I like this repo very much and thank you all.
One question I have is how I can set the cards in Experience expanded as a default. I am completely new to React, but I have searched a bit. It seems cards are wrapped inPanels that are wrapped in an Accordion. For instance, in your live example, what can I do such that the work experiences are expanded by default?

So, it seems I should change some properties of the Panels, right? But I cannot find a field like expanded = ture etc when I googled the API of Panel.

Can you please tell me how to do that? Thank you!

Adding Theme containing gradient to every type of color

Currently, we have themes which have single colors associated to each component which looks pretty old fashioned.
Also, the main bluetheme which website has currently is not that much appealing. We should add themes which have gradient colors to it.

If anyone is raising PR, please use webgradients if you want to take idea of gradients. also choose colors considering the proper contrasts in mind.

Add Publication Component

hi dear ashutosh,
tnx for great Project
cant you add Publication Component that I can Add my paper into it,
its really help me if you have time to do it because im not knowing react

Getting error when deploying website to github pages

Error

Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
    at onErrorNT (internal/child_process.js:467:16)
    at processTicksAndRejections (internal/process/task_queues.js:82:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn git',
  path: 'git',
  spawnargs: [ 'config', 'user.name' ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] deploy: `gh-pages -b master -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\91810\AppData\Roaming\npm-cache\_logs\2021-07-12T15_44_17_188Z-debug.log
The terminal process "C:\WINDOWS\System32\cmd.exe /d /c npm run deploy" terminated with exit code: 1.

Terminal will be reused by tasks, press any key to close it.

remote is set correctly in git .

Check my repo here

https://github.com/Vaibhav2002/Vaibhav2002.github.io

Contributions and PR sections

Hi,

First off I'd like to put out there that I'm an absolute noob at web technologies/development, which should help with how we communicate.

So, I haven't tried building yet ( and I think you should probably add a readme section on how to build the site ), but I am curious about the Contributions and PR sections of the Open Source page. Is there any way to retrieve only the dependencies from this and get the same trackers ?

Are those trackers updated often ? Is there a way to just embed them in the HTML part of a site ?

Those questions may come up ridiculous but again, I'm from Embedded/Robotics and have never touched this before haha.

Thanks anyways !

( and props for this, developerPorfolio looked cool but masterPortfolio has ridiculously cool additions ! )

Dividing "Contact Page" into segments smiliar to Experience Page

The contact page is pretty rigid and we cannot remove parts of the contact page.
Example:
Blogging: For someone like me, I am not much into blogging and hence don't want to add that section. But the current version doesn't allow me to remove a section from the contacts page.

Btw great website and design.

PS: Sorry I am not a web developer so cannot take up the issue. Please feel free to work on this issue.

Remove a component

I am pretty much new to open-source, so I don't want to include the section opensource. How can I remove it??

Correct position of University logo which is upside down

Correct position of University logo which is upside down in Education section of Header

Existing Element

<img src="/masterPortfolio/static/media/iiitk_logo.c350d799.png" alt="IIITDM Kurnool" style="max-width: 100%; max-height: 100%; transform: scale(-0.5);">

Element replacing for Correct position of Degrees Received Icon

<img src="/masterPortfolio/static/media/iiitk_logo.c350d799.png" alt="IIITDM Kurnool" style="max-width: 100%; max-height: 100%; transform: scale(0.5);">

You'll notice that CSS style transform changed to to scale(0.5) which displays university logo (iiitk_logo.c350d799.png) in correct position instead of upside down.

PNGs/SVGs instead of iconify

Some icons do not exist at iconify.design (scikit-learn, for example).

It would be great if it was possible to insert other images instead, in these sections:

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.