All Projects β†’ ashutosh1919 β†’ Masterportfolio

ashutosh1919 / Masterportfolio

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Masterportfolio

Varadbhogayata.github.io
My Portfolio - Personal Website
Stars: ✭ 95 (-89.59%)
Mutual labels:  portfolio, portfolio-website, template, html5, css3
Portfolio one Page Template
Free responsive one page portfolio template
Stars: ✭ 106 (-88.39%)
Mutual labels:  portfolio-website, template, html5, css3
Portfolio Template
An Open-Sourced Template for developers to show-off there skills. Made with ReactJS
Stars: ✭ 52 (-94.3%)
Mutual labels:  portfolio, portfolio-website, template
Responsive Portfolio
This is a Responsive Portfolio Website made with Love and Javascript; FEEL FREE TO COPY; NO COPYRIGHT ISSUE, in case of error ping me. Do follow me on github and star the repo
Stars: ✭ 104 (-88.61%)
Mutual labels:  portfolio, html5, css3
Home
The personal website/portfolio of Hashir Shoaib. Built using React and Bootstrap.
Stars: ✭ 246 (-73.06%)
Mutual labels:  portfolio, portfolio-website, template
React Frontend Dev Portfolio
Easy to adapt and deploy React portfolio inspired with solutions found at GitHub.
Stars: ✭ 55 (-93.98%)
Mutual labels:  portfolio, template, html5
Hugo Uilite
Stars: ✭ 79 (-91.35%)
Mutual labels:  portfolio, portfolio-website, html5
Portfolio Template
A beautiful minimal and accessible portfolio template for Developers. Give it a star 🌟 if you find it useful.
Stars: ✭ 175 (-80.83%)
Mutual labels:  portfolio, portfolio-website, template
Magz
Free Resonsive HTML5 & CSS3 Magazine Template
Stars: ✭ 64 (-92.99%)
Mutual labels:  template, html5, css3
portfolio
My Personal Portfolio
Stars: ✭ 14 (-98.47%)
Mutual labels:  portfolio, css3, portfolio-website
portfolio-html
🌍 Open source portfolio template built with plain Html, CSS and JavaScript for developers to create their portfolio website
Stars: ✭ 52 (-94.3%)
Mutual labels:  portfolio, css3, portfolio-website
Dopefolio
Dopefolio πŸ”₯ - Portfolio Template for Developers πŸš€
Stars: ✭ 2,047 (+124.21%)
Mutual labels:  portfolio, css3, portfolio-website
Modern Html Starter Template
Modern HTML Starter Template
Stars: ✭ 752 (-17.63%)
Mutual labels:  template, html5, css3
Codrops Dropcast
a responsive HTML/CSS/Javascript template, comes with Sketch files and a fully working site with SCSS. It works very well for podcasts landing pages or blogs, and can be easily customized.
Stars: ✭ 91 (-90.03%)
Mutual labels:  template, html5, css3
Devportfolio
A lightweight, customizable single-page personal portfolio website template built with JavaScript and Sass
Stars: ✭ 3,582 (+292.33%)
Mutual labels:  portfolio, portfolio-website, template
Developerfolio
πŸš€ Software Developer Portfolio Template that helps you showcase your work and skills as a software developer.
Stars: ✭ 2,814 (+208.21%)
Mutual labels:  portfolio, portfolio-website, template
Portfolio-Website
Portfolio Website build using HTML5, CSS3, JavaScript and jQuery
Stars: ✭ 109 (-88.06%)
Mutual labels:  portfolio, css3, portfolio-website
anniew.xyz
My Personal Website / Portfolio
Stars: ✭ 41 (-95.51%)
Mutual labels:  portfolio, css3, portfolio-website
Flexible Jekyll
Flexible-Jekyll is a simple and clean theme for Jekyll
Stars: ✭ 531 (-41.84%)
Mutual labels:  portfolio, portfolio-website, html5
Vue Music Player
🎡Vue.js写一δΈͺιŸ³δΉζ’­ζ”Ύε™¨+πŸ“–One(δΈ€δΈͺ).A music player + One by Vue.js
Stars: ✭ 729 (-20.15%)
Mutual labels:  html5, css3

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, then 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.

Github Information

You will find git_data_fetcher.js 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. If you open the file, you will see below component at the top of the file. You need to change only that component.

const openSource = {
  githubConvertedToken: "Your Github Token Here.",
  githubUserName: "Your Github Username Here.",
};

You can get a github token as described here. Give all permissions while generating token. Also add your githubUserName in the correct field inside git_data_fetcher.js. Now, you need to run following command.

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.js

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.

Choose Theme 🌈

  • You can take a look at src/theme.js file where all available themes are mentioned with 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. That's it. 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.

Contributing πŸ’‘

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

  • Move to Gatsby
  • Add Podcast Section and Video Section
  • Add tests to automate review.
  • Setup Travis workflow.

Contributors ✨


Ashutosh Hathidara

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

Daniel Marostica

πŸ“– 🎨

Dinesh Nadimpalli

πŸ’»

Jivthesh M R

πŸ“–

Jatin Chauhan

πŸ’»

Jainam Desai

πŸ’» πŸ’¬

Miftaul Mannan

πŸ’»

Ashutosh Mishra

πŸ’»

Tamojit

πŸ“–

Prabin Karki

πŸ’»

Praveen Kumar Purushothaman

πŸ“–

paul

πŸ’»

Sandip Dhang

πŸ’»

References πŸ‘πŸ»

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].