Software Developer Portfolio Template built with react.js and material Ui with dark and light mode that helps you showcase your work and skills as a software developer.

Overview

Developer Portfolio

Want to create a professional portfolio but cannot figure out how to? Use Developer Portfolio and create your own personalised portfolio today! our easily customisable, user friendly website is designed to cater to developers and freelancers a like.


Demo πŸŽ₯

View live demo here.


Table of Contents πŸ“œ


Sections πŸ”–

  • HOME
  • ABOUT
  • RESUME
    • EDUCATION
    • SKILLS
    • EXPERIENCE
    • PROJECTS
  • BLOG
  • CONTACTS

Installation ⬇️

You will need to download Git and Node to run this project

Also check this out if you are new to react.

Make sure you have the latest version of both Git and Node on your computer.

node --version
git --version

Getting Started 🎯

Fork and Clone the repo

To Fork the repo click on the fork button at the top right of the page. Once the repo is forked open your terminal and perform the following commands

git clone hhttps://github.com//developer-portfolio.git
cd developer-portfolio

Install packages from the root directory

npm install

or

yarn install

Start the development server

npm start

or

yarn start

Folder Structure πŸ“‚

β”œβ”€β”€ LICENSE
β”œβ”€β”€ README.md
β”œβ”€β”€ package-lock.json
β”œβ”€β”€ package.json
β”œβ”€β”€ public
β”‚   β”œβ”€β”€ _redirects
β”‚   β”œβ”€β”€ favicon.ico
β”‚   β”œβ”€β”€ favicon.png
β”‚   β”œβ”€β”€ favicon512.png
β”‚   β”œβ”€β”€ index.html
β”‚   β”œβ”€β”€ manifest.json
β”‚   └── robots.txt
β”œβ”€β”€ src
β”‚   β”œβ”€β”€ App.css
β”‚   β”œβ”€β”€ App.js
β”‚   β”œβ”€β”€ assets
β”‚   β”‚   β”œβ”€β”€ fonts
β”‚   β”‚   β”‚   └── Bestermind
β”‚   β”‚   β”‚       └── BestermindRegular.ttf
β”‚   β”‚   β”œβ”€β”€ lottie
β”‚   β”‚   β”‚   └── coding.json
β”‚   β”‚   β”‚   └── development.json
β”‚   β”‚   β”‚   └── education.json
β”‚   β”‚   └── svg
β”‚   β”‚       β”œβ”€β”€ about
β”‚   β”‚       β”œβ”€β”€ contacts
β”‚   β”‚       β”œβ”€β”€ education
β”‚   β”‚       β”œβ”€β”€ experience
β”‚   β”‚       β”œβ”€β”€ projects
β”‚   β”‚       β”œβ”€β”€ skills
β”‚   β”‚       └── Social
β”‚   β”œβ”€β”€ components
β”‚   β”‚   β”œβ”€β”€ About
β”‚   β”‚   β”‚   β”œβ”€β”€ About.css
β”‚   β”‚   β”‚   └── About.js
β”‚   β”‚   β”œβ”€β”€ BackToTop
β”‚   β”‚   β”‚   β”œβ”€β”€ BackToTop.css
β”‚   β”‚   β”‚   └── BackToTop.js
β”‚   β”‚   β”œβ”€β”€ Blog
β”‚   β”‚   β”‚   β”œβ”€β”€ Blog.css
β”‚   β”‚   β”‚   β”œβ”€β”€ Blog.js
β”‚   β”‚   β”‚   └── SingleBlog
β”‚   β”‚   β”‚       β”œβ”€β”€ SingleBlog.css
β”‚   β”‚   β”‚       └── SingleBlog.js
β”‚   β”‚   β”œβ”€β”€ Contacts
β”‚   β”‚   β”‚   β”œβ”€β”€ Contacts.css
β”‚   β”‚   β”‚   └── Contacts.js
β”‚   β”‚   β”œβ”€β”€ Education
β”‚   β”‚   β”‚   β”œβ”€β”€ Education.css
β”‚   β”‚   β”‚   β”œβ”€β”€ Education.js
β”‚   β”‚   β”‚   └── EducationCard.js
β”‚   β”‚   β”œβ”€β”€ Experience
β”‚   β”‚   β”‚   β”œβ”€β”€ Experience.css
β”‚   β”‚   β”‚   β”œβ”€β”€ Experience.js
β”‚   β”‚   β”‚   └── ExperienceCard.js
β”‚   β”‚   β”œβ”€β”€ Landing
β”‚   β”‚   β”‚   β”œβ”€β”€ Landing.css
β”‚   β”‚   β”‚   └── Landing.js
β”‚   β”‚   β”œβ”€β”€ Navbar
β”‚   β”‚   β”‚   β”œβ”€β”€ Navbar.css
β”‚   β”‚   β”‚   └── Navbar.js
β”‚   β”‚   β”œβ”€β”€ Projects
β”‚   β”‚   β”‚   β”œβ”€β”€ Projects.css
β”‚   β”‚   β”‚   β”œβ”€β”€ Projects.js
β”‚   β”‚   β”‚   └── SingleProject
β”‚   β”‚   β”‚       β”œβ”€β”€ SingleProject.css
β”‚   β”‚   β”‚       └── SingleProject.js
β”‚   β”‚   β”œβ”€β”€ Skills
β”‚   β”‚   β”‚   β”œβ”€β”€ Skills.css
β”‚   β”‚   β”‚   └── Skills.js
β”‚   β”‚   β”œβ”€β”€ Animation
β”‚   β”‚   └── index.js
β”‚   β”œβ”€β”€ contexts
β”‚   β”‚   └── ThemeContext.js
β”‚   β”œβ”€β”€ data
β”‚   β”‚   β”œβ”€β”€ aboutData.js
β”‚   β”‚   β”œβ”€β”€ blogData.js
β”‚   β”‚   β”œβ”€β”€ contactsData.js
β”‚   β”‚   β”œβ”€β”€ educationData.js
β”‚   β”‚   β”œβ”€β”€ experienceData.js
β”‚   β”‚   β”œβ”€β”€ headerData.js
β”‚   β”‚   β”œβ”€β”€ projectsData.js
β”‚   β”‚   β”œβ”€β”€ skillsData.js
β”‚   β”‚   β”œβ”€β”€ socialsData.js
β”‚   β”‚   └── themeData.js
β”‚   β”œβ”€β”€ index.css
β”‚   β”œβ”€β”€ index.js
β”‚   β”œβ”€β”€ pages
β”‚   β”‚   β”œβ”€β”€ Blog
β”‚   β”‚   β”‚   β”œβ”€β”€ BlogPage.css
β”‚   β”‚   β”‚   └── Index.js
β”‚   β”‚   β”œβ”€β”€ Home
β”‚   β”‚   β”‚   └── Index.js
β”‚   β”‚   β”œβ”€β”€ Project
β”‚   β”‚   β”‚   β”œβ”€β”€ ProjectPage.css
β”‚   β”‚   β”‚   └── Index.js
β”‚   β”‚   └── index.js
β”‚   β”œβ”€β”€ reportWebVitals.js
β”‚   β”œβ”€β”€ theme
β”‚   β”‚   β”œβ”€β”€ images.js
β”‚   β”‚   └── theme.js
β”‚   └── utils
β”‚       β”œβ”€β”€ ScrollToTop.js
β”‚       └── skillsImage.js
└── package.json

Usage πŸ•ΉοΈ

Customize your details for each component in src/data folder.

Eg:

export const headerData = {
  name: "-- YOUR NAME --",
  title: "-- YOUR TITLE --",
  desciption: "-- DESCRIPTION --",
  image: "-- IMAGE --",
  resumePdf: "",
};

// You can also import image and PDF from assets as shown below

import resume from "../assets/pdf/resume.pdf";
import profileImg from "../assets/png/profileImg";

export const headerData = {
  name: "-- YOUR NAME --",
  title: "-- YOUR TITLE --",
  desciption: "-- DESCRIPTION --",
  image: profileImg,
  resumePdf: resume,
};

Data for each component is divided into respective files.

Choose your favourite font from src/App.css

About You - src/data/aboutData.js

Education details - src/data/educationData.js

Enter your Projects - src/data/projectsData.js

Add your Skills - src/data/skillsData.js

Experience - src/data/experienceData.js

Your Blogs and Articles - src/data/blogData.js

Contact Details - src/data/contactsData.js

Social Media Profiles - src/data/contactsData.js

// EXAMPLE
export const educationData = [
  {
    id: 1,
    institution: "-- INSTITUTION NAME --",
    course: "-- COURSE NAME --",
    startYear: "2017",
    endYear: "2019",
  },
  //
];

Instructions and format for each section can be found inside the data files.


Hosting 🌐

Netlify

Site Docs Demo
Netlify 3 ways to deploy React apps to Netlify Youtube

Firebase

Site Docs Demo
Firebase Deploy a React App with Firebase Youtube

Heroku

Site Docs Demo
Heroku Deploying React App on Heroku from GitHub Youtube

Github Pages

Site Docs Demo
GitHub Pages Deploying React App on GitHub Pages from GitHub Youtube

SEO πŸ•·οΈ

Search engine optimization (SEO) is the process of improving the quality and quantity of website traffic to a website or a web page from search engines.

Add the below code snippet to public/index.html with your site info. This step is not mandatory


">
<meta name="description" content="--- SITE DESCRIPTION ---" />
<meta property="og:image" content="--- YOUR IMAGE ---" />
<meta property="og:site_name" content="--- YOUR NAME ---" />
<meta property="og:title" content="--- YOUR NAME ---" />
<meta property="og:url" content="--- YOUR SITE URL ---" />
<meta property="og:type" content="website" />
<meta property="og:description" content="--- SITE DESCRIPTION ---" />
<meta property="og:locale" content="---  ---" />
<meta property="og:image" content="--- YOUR IMAGE ---" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<meta itemprop="name" content="--- YOUR NAME ---" />
<meta itemprop="url" content="--- YOUR SITE URL ---" />
<meta itemprop="description" content="--- SITE DESCRIPTION ---" />
<meta itemprop="thumbnailUrl" content="" />
<link rel="image_src" href="--- YOUR IMAGE ---" />
<meta itemprop="image" content="--- YOUR IMAGE ---" />

<meta name="twitter:site" content="@--- YOUR TWITTER USERNAME ---" />
<meta name="twitter:creator" content="@--- YOUR TWITTER USERNAME ---" />
<meta name="twitter:url" content="--- YOUR SITE URL ---" />
<meta name="twitter:title" content="--- YOUR NAME ---" />
<meta name="twitter:description" content="--- SITE DESCRIPTION ---" />
<meta name="twitter:image" content="--- YOUR IMAGE ---" />
<meta name="twitter:card" content="summary" />

Packages Used πŸ“¦

Client Side Packages
@material-ui/core
@material-ui/icons
@emailjs/browser
react-lottie
react-fast-marquee
react-helmet
react-icons
react-reveal
react-router-dom
react-router-hash-link
react-slick
slick-carousel
validator

Fonts and Images 🎭

Icons

Fonts


You might also like...
A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.
A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.

Phoenix React applications boilerplate A simple boilerplate that helps you make your react application with Server Side Rendering support. Getting sta

General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.
General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

Light Bootstrap Dashboard React is an admin dashboard template designed to be beautiful and simple.
Light Bootstrap Dashboard React is an admin dashboard template designed to be beautiful and simple.

Light Bootstrap Dashboard React Light Bootstrap Dashboard React is an admin dashboard template designed to be beautiful and simple. It is built on top

React template app with clean architecture approach (light version for small projects)

React app with clean architecture approach (light version for small projects) app App directory contains the State Management (in models folder) and C

A template for all of you to create and deploy an Awesome Portfolio for free without writing code
A template for all of you to create and deploy an Awesome Portfolio for free without writing code

A template for all of you to create and deploy an Awesome Portfolio for free without writing code

React 18 Streaming SSR Showcase with 5 examples

streaming-ssr-showcase This repository contains 5 examples that show the usage of Streaming SSR API that got added in React 18. Feel free to ask any q

Hello Its an Open git-hub repo of React-Curd which helps you to understand the whole curd flow and functionalities

Hello Its an Open git-hub repo of React-Curd which helps you to understand the whole curd flow and functionalities. You guys can also contribute in this project if you want to

 Cleanfolio - a clean and simple portfolio template for developers, built using React
Cleanfolio - a clean and simple portfolio template for developers, built using React

Cleanfolio - a clean and simple portfolio template for developers, built using React

πŸ‘¨β€πŸŽ¨ An open-source portfolio template built with React and Tailwind.
πŸ‘¨β€πŸŽ¨ An open-source portfolio template built with React and Tailwind.

πŸ‘¨β€πŸŽ¨ An open-source portfolio template built with React and Tailwind.

Owner
ABU SAID
I am a professional programmer in my daily life with a self-learning attitude. I love to learn new technologies and am Passionate about Problem Solving.
ABU SAID
Personal Website UI Template using React-TypeScript. I hope, it will be helpful for your personal website that showcases your work as a software developer.

Personal Website Template Personal Website UI Template using React-TypeScript Class components Personal website can be about anything you want, includ

Sayan Bhattacharyya 9 Sep 16, 2022
This is a react portfolio template build using react, typescript and tailwind css. It help developers and designers to showcase their work

React Portfolio Using Tailwind UI This project include a portfolio template which is built using React and Tailwind CSS. It help developer and designe

Umer Yasin 0 Oct 30, 2021
Dashboard made complete with skeleton structure and dark mode switcher

Dashboard made complete with skeleton structure and dark mode switcher. Using localstorage and api.. On Progress Development

Ferdian Ahmad R 2 Apr 26, 2022
Admin One β€” Free React Tailwind 3.x Admin Dashboard with dark mode

Admin One β€” Free React Tailwind 3.x Admin Dashboard with dark mode Tailwind 3.x React with Next.js and TypeScript Tailwind 3.x React with Next.js and

JustBoil.me 30 Nov 27, 2022
Developer Portfolio built with the help of a react template

Developer Portfolio Want to create a professional portfolio but cannot figure out how to? Use Developer Portfolio and create your own personalised por

Sreerag Rajan 33 Dec 2, 2022
A simple Portfolio template for developer/designers built with React.

description A simple Portfolio template for developer/designers built with React. live preview Features Fully Responsive Multi-Page Layout Contact For

Senior-DevStar 8 Sep 23, 2022
⬛ πŸŸͺ A simple portfolio dark build with reactjs

?? (construyendo )Agrege nuevo componente donde muestra un proyecto Para el futuro incluir api de Github Paginacion para ver otros proyectos ⬛ Figma @

Luis Cutiopala 11 Nov 29, 2022
Developer Portfolio is a web template made for developers to present themselves based on NextJS.

Developer Portfolio Developer Portfolio is a web template made for developers to present themselves based on NextJS. Table of Contents Demo Tech Stack

Skander Blaiti 5 Nov 5, 2022
Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React.

Simple Light is a free landing page template built on top of TailwindCSS and fully coded in React. Simple light is designed to provide all the basic components a developer need to create a landing page for SaaS products, online services, and more.

Cruip 1.6k Dec 3, 2022
Portfolio - A Simple Portfolio page Built with next.js

Portfolio Início Essas instruçáes fornecerão uma cópia do projeto instalado e fu

null 36 Sep 17, 2022