Developer Portfolio

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

Sections πŸ”–

  • HOME
    • SKILLS
    • Achievements
  • BLOG

Demo πŸŽ₯

View live demo here.

Themes 🎨

Green 🟒

Black & White ⚫

Blue πŸ”΅

Red πŸ”΄

Orange 🟠

Purple 🟣


Yellow 🟑

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 h<YOUR GITHUB USERNAME>/developer-portfolio.git
cd developer-portfolio

Install packages from the root directory

npm install


yarn install

Start the development server

npm start


yarn start

Folder Structure πŸ“‚

β”œβ”€β”€ LICENSE   
β”œβ”€β”€ 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
β”‚   β”‚   β”œβ”€β”€ pdf
β”‚   β”‚   β”‚   └── resume.pdf
β”‚   β”‚   └── svg
β”‚   β”‚       β”œβ”€β”€ about
β”‚   β”‚       β”œβ”€β”€ contacts
β”‚   β”‚       β”œβ”€β”€ education
β”‚   β”‚       β”œβ”€β”€ experience
β”‚   β”‚       β”œβ”€β”€ projects
β”‚   β”‚       β”œβ”€β”€ skills
β”‚   β”‚       β”œβ”€β”€ social
β”‚   β”‚       └── testimonials
β”‚   β”œβ”€β”€ components
β”‚   β”‚   β”œβ”€β”€ About
β”‚   β”‚   β”‚   β”œβ”€β”€ About.css
β”‚   β”‚   β”‚   └── About.js
β”‚   β”‚   β”œβ”€β”€ Achievements
β”‚   β”‚   β”‚   β”œβ”€β”€ Achievements.css
β”‚   β”‚   β”‚   └── Achievements.js
β”‚   β”‚   β”‚   └── AchievementCard.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
β”‚   β”‚   β”œβ”€β”€ Footer
β”‚   β”‚   β”‚   β”œβ”€β”€ Footer.css
β”‚   β”‚   β”‚   └── Footer.js
β”‚   β”‚   β”œβ”€β”€ Landing
β”‚   β”‚   β”‚   β”œβ”€β”€ Landing.css
β”‚   β”‚   β”‚   └── Landing.js
β”‚   β”‚   β”œβ”€β”€ Navbar
β”‚   β”‚   β”‚   β”œβ”€β”€ Navbar.css
β”‚   β”‚   β”‚   └── Navbar.js
β”‚   β”‚   β”œβ”€β”€ Projects
β”‚   β”‚   β”‚   β”œβ”€β”€ Projects.css
β”‚   β”‚   β”‚   β”œβ”€β”€ Projects.js
β”‚   β”‚   β”‚   └── SingleProject
β”‚   β”‚   β”‚       β”œβ”€β”€ SingleProject.css
β”‚   β”‚   β”‚       └── SingleProject.js
β”‚   β”‚   β”œβ”€β”€ Services
β”‚   β”‚   β”‚   β”œβ”€β”€ Services.css
β”‚   β”‚   β”‚   β”œβ”€β”€ Services.js
β”‚   β”‚   β”‚   └── SingleService
β”‚   β”‚   β”‚       β”œβ”€β”€ SingleService.css
β”‚   β”‚   β”‚       └── SingleService.js
β”‚   β”‚   β”œβ”€β”€ Skills
β”‚   β”‚   β”‚   β”œβ”€β”€ Skills.css
β”‚   β”‚   β”‚   └── Skills.js
β”‚   β”‚   β”œβ”€β”€ Testimonials
β”‚   β”‚   β”‚   β”œβ”€β”€ Testimonials.css
β”‚   β”‚   β”‚   └── Testimonials.js
β”‚   β”‚   └── index.js
β”‚   β”œβ”€β”€ contexts
β”‚   β”‚   └── ThemeContext.js
β”‚   β”œβ”€β”€ data
β”‚   β”‚   β”œβ”€β”€ aboutData.js
β”‚   β”‚   β”œβ”€β”€ achievementData.js
β”‚   β”‚   β”œβ”€β”€ blogData.js
β”‚   β”‚   β”œβ”€β”€ contactsData.js
β”‚   β”‚   β”œβ”€β”€ educationData.js
β”‚   β”‚   β”œβ”€β”€ experienceData.js
β”‚   β”‚   β”œβ”€β”€ headerData.js
β”‚   β”‚   β”œβ”€β”€ projectsData.js
β”‚   β”‚   β”œβ”€β”€ servicesData.js
β”‚   β”‚   β”œβ”€β”€ skillsData.js
β”‚   β”‚   β”œβ”€β”€ socialsData.js
β”‚   β”‚   β”œβ”€β”€ testimonialsData.js
β”‚   β”‚   └── themeData.js
β”‚   β”œβ”€β”€ index.css
β”‚   β”œβ”€β”€ index.js
β”‚   β”œβ”€β”€ pages
β”‚   β”‚   β”œβ”€β”€ Blog
β”‚   β”‚   β”‚   β”œβ”€β”€ BlogPage.css
β”‚   β”‚   β”‚   └── BlogPage.js
β”‚   β”‚   β”œβ”€β”€ Main
β”‚   β”‚   β”‚   └── Main.js
β”‚   β”‚   β”œβ”€β”€ Project
β”‚   β”‚   β”‚   β”œβ”€β”€ ProjectPage.css
β”‚   β”‚   β”‚   └── ProjectPage.js
β”‚   β”‚   └── index.js
β”‚   β”œβ”€β”€ reportWebVitals.js
β”‚   β”œβ”€β”€ theme
β”‚   β”‚   β”œβ”€β”€ images.js
β”‚   β”‚   └── theme.js
β”‚   └── utils
β”‚       β”œβ”€β”€ ScrollToTop.js
β”‚       └── skillsImage.js
└── yarn.lock

Usage πŸ•ΉοΈ

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


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.

Set website theme in src/data/themeData.js and 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

Achievements – src/data/achievementData.js

Services – src/data/servicesData.js

Testimonials – src/data/testimonialsData.js

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

Contact Details – src/data/contactsData.js

Social Media Profiles – src/data/contactsData.js

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.

Setting Up Contacts form πŸ“©

Follow these instructions to connect contacts form with Google Sheet

Hosting 🌐


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


Site Docs Demo
Firebase Deploy a React App with Firebase Youtube


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

APIs Used πŸ—ΊοΈ

Fonts and Images 🎭




Upcoming Features 🚧

  • Light/Dark theme toggle
  • More illustrations to choose from
  • Achievements and Awards section
  • More fonts to choose from

Raise an issue for…

  • Found a bug
  • New theme
  • Can’t find required skill in Skills section
  • Add new social media profile
  • Add new service
  • Add another section

Contributors πŸ‘¨β€πŸ’»πŸ‘©β€πŸ’»


View Github