A Minimalist Portfolio Template for Developers Built with React

30 August 2023
0
47

Dev Portfolio

A minimal portfolio template for Developers!

Features

⚡️ Modern UI Design + Reveal Animations ⚡️ Made with React ⚡️ Fully Responsive ⚡️ Easily Customizable ⚡️ Well organized documentation

Demo

To view the demo: click here

Why do you need a portfolio? ☝️

Professional way to showcase your work
Increases your visibility and online presence
better chance of getting work opportunity

Getting Started 🚀

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites 📋

You’ll need Git and Node.js (which comes with NPM) installed on your computer.

Also, you can use Yarn instead of NPM ☝️

Setup 🔧

From your command line, first clone Dev Portfolio:

# Clone the repository
$ git clone https://github.com/mayankagarwal09/dev-portfolio

# Move into the repository
$ cd dev-portfolio

# Remove the current origin repository
$ git remote remove origin

After that, you can install the dependencies either using NPM or Yarn.

Using NPM: Simply run the below commands.

# Install dependencies
$ npm install --force

# Start the development server
$ npm start

Using Yarn: Be aware of that you’ll need to delete the package-lock.json file if exists before executing the below commands.

# Install dependencies
$ yarn

# Start the development server
$ yarn start

Once your server has started, go to this url http://localhost:3000/ to see the portfolio locally. The page will reload if you make edits.

Customization Instructions:

Step 1 – DATA & IMAGES

All customizable files are inside the public/ folder, organised mainly into public/images/ and public/profile/.

public/images contains all the image assets that can be customized on website
public/profile contains all text and info inside json files that can be customized according to need

(1) NavBar

Open public/profile/navbar.json It has 2 keys, logo and sections.

{
    "logo" : {
        "source": "images/logo.png",
        "height" : 45,
        "width" : 50
    },
    "sections": [
        {
            "title": "Home",
            "href": "/"
        },
        {
            "title": "About",
            "href": "/about"
        },
        {
            "title": "Skills",
            "href": "/skills"
        },
        {
            "title": "Education",
            "href": "/education"
        },
        {
            "title": "Experience",
            "href": "/experience"
        },
        {
            "title": "Projects",
            "href": "/projects"
        },
        {
            "title": "Resume",
            "href": "https://drive.google.com/file/d/13kaPsdMNDsM4LV9g7m5-E5PTildp-yYf/view?usp=sharing",
            "type": "link"
        }
    ]
}

keyDescriptionlogoimage you want to show as brand image on NavBar. It can be also be a simple logo with just your intitialslogo.sourcepath to the logo imagelogo.heightheight of logologo.widthwidth of logosectionsarray of sections that you want to show on Navbar as linkssections.titletitle of the sectionsections.hreflink to that section. Same as path mentioned in routes.jsonsections.typeOpens in a new tab if value is link. optional field

(2) Routes

open public/profile/routes.json

{
    "sections": [
        {
            "component": "About",
            "path": "/about",
            "headerTitle": "About"
        },
        {
            "component": "Skills",
            "path": "/skills",
            "headerTitle": "Skills"
        },
        {
            "component": "Education",
            "path": "/education",
            "headerTitle": "Education"
        },
        {
            "component": "Experience",
            "path": "/experience",
            "headerTitle": "Experience"
        },
        {
            "component": "Projects",
            "path": "/projects",
            "headerTitle": "Projects"
        }
    ]
}

keyDescriptionsectionsarray of sections that you want to create route forsections.componentname of the Component. No need to change it unless you want to customize the entire Component.sections.pathroute for the particular section. this is the path where the particular section will be accessiblesections.headerTitletitle to be shown on the top of that section page

For component customization, create a component of your own inside src/components/ and use name of that component here.

(3) Home Section

Home Info

open public/profile/home.json

{
    "name": "Your Name",
    "roles": ["a Developer", "a Freelancer"]
}

keyDescriptionnameyour namerolesstring array separated by ,. mention your roles here

Social Links

open public/profile/social.json

{
    "social": [
        {
            "network" : "linkedin",
            "href": "https://linkedin.com/"
        },
        {
            "network" : "github",
            "href": "https://github.com/"
        },
        {
            "network" : "email",
            "href": "mailto:test@test.com"
        }
    ]
}

keyDescriptionsocialarray of social linkssocial.networknetwork name as provided in react-social-iconssocial.hreflink for particular social network

we are using react-social-icons here. you can visit it to see all available social icons to use

(4) About Section

open public/profile/about.json

{
    "about": " This is where you can describe about **yourself**.",
    "imageSource": "images/about/profile.png"
    
}

keyDescriptionaboutwrite about yourself, your works and goals here. markdown supportedimageSourcepath to your profile image. (recommended size 400 x 450)

(5) Skills Section

open public/profile/skills.json

{
    "intro": "I love to learn new things and experiment with new technologies.\nThese are some of the major languages, technologies, tools and platforms I have worked with:",
    "skills": [{
     
            "title": "Languages",
            "items" : [
     
                {
                    "icon": "images/skills/java.png",
                    "title": "Java"
                },
                {
                    "icon": "images/skills/js.png",
                    "title": "JavaScript"
                }
        ]},
        {
            "title": "Frameworks & Technologies",
            "items" : [
                {
                    "icon": "images/skills/react.png",
                    "title": "React"
                }
            ]
        },
        {
            "title" : "Tools & Platforms",
            "items": [
                {
                    "icon": "images/skills/git.png",
                    "title": "Git"
                }
            ]
    }
]}

keyDescriptionintrosmall introduction line related to your skills. markdown supportedskillsarray containing skills under different categoriesskills.titletitle for category under which you want to list particular skillsskills.itemsarray containing skills for this categoryskills.items.iconpath to skill logoskills.items.titletitle of skill

many pre existing skill logos are available inside public/images/skills.

(6) Education Section

open public/profile/education.json

{
    "education":[
        {
            "title": "Jun 20XX - Jun 20YY",
            "cardTitle": "B.Tech, Computer Science",
            "cardSubtitle":"XYZ University, City",
            "cardDetailedText": "CGPA - 9.5",
            "icon" : {
                "src": "images/education/lorem-ipsum.png"
            }
        },
        {
            "title": "Apr 20XX",
            "cardTitle": "High School",
            "cardSubtitle":"ABC School, City",
            "cardDetailedText": "Marks - 95%"
        }
    ]
}

keyDescriptioneducationarray containing education history of a personeducation.titledate range during which this education was pursued or passing dateeducation.cardTitledegree or course nameeducation.cardSubtitleschool or institute nameeducation.cardDetailedTextextra info such as marks or cgpaeducation.iconicon shown on the timeline. optional fieldeducation.icon.srcpath to icon

(7) Experience Section

open public/profile/experiences.json

{
    "experiences": [
        {
            "title": "Software Engineer",
            "subtitle": "XYZ Ltd",
            "workType": "Full-time",
            "workDescription": [
                "Integrated **2** new product.",
                "Worked on adding **def** to **bcd**. Improved speed by 50%."
            ],
            "dateText": "06/20XX – Present"
        },
        {
            "title": "Software Engineer",
            "subtitle": "XYZ Ltd",
            "workType": "Internship",
            "workDescription": [
                "Worked on abc."
            ],
            "dateText": "01/20XX – 05/20XX"
        },
        {
            "title": "App Developer",
            "subtitle": "ABC Pvt Ltd",
            "workType": "Freelance",
            "workDescription": [
                "Developed the official apps for the startup for both Android and iOS using hybrid framework.",
                "Done bcd work."
            ],
            "dateText": "09/20XX – 01/20YY"
        }
    ]
}

keyDescriptionexperiencesarray containing work experiences of a personexperiences.titlerole or designation titleexperiences.subtitlecompany or organization name. optional fieldexperiences.workTypetype of work experience. example – internship, freelance, full-time. optional fieldexperiences.workDescriptionstring array to highlight specific points related to that work experiece. markdown supportedexperiences.dateTextdate range text during which particular work experience was pursued.

(8) Projects Section

open public/profile/projects.json

{
    "projects" : [
        {
            "image" : "images/projects/portfolio-poster.png",
            "title": "Dev Portfolio",
            "bodyText": "- Developer Portfolio Website made in React\n -  Fully customisable and dynamic, easily change data and images.\n - Dark Mode Support",
            "links": [
                {
                    "text": "GitHub",
                    "href": "https://github.com/mayankagarwal09/dev-portfolio"
                },
                {
                    "text": "Live",
                    "href": "https://mayankagarwal.me"
                }
            ],
            "tags" : [
                "React",
                "Portfolio",
                "JavaScript"
            ]
        },
        {
            "title": "MVVM Sample App",
            "bodyText": "- An Android App that loads data from mock API and show in both **LinearLayout** and **GridLayout RecyclerView**.\n - Offline support using **Room** DB and **NetworkBoundResource**.\n - Uses the **MVVM** architecture.",
            "links": [
                {
                    "text": "GitHub",
                    "href": "https://github.com/mayankagarwal09/mvvm-sample-app"
                }
            ],
            "tags" : [
                "Kotlin",
                "Android",
                "MVVM",
                "Room",
                "Coroutines",
                "Flow",
                "Hilt-Dagger",
                "NetworkBoundResource"
            ]
        },
        {
            "title": "Task Tracker",
            "bodyText": "- A simple Task Tracker web app made with **Angular 12**.\n - Uses **mock JSON server** to get, add, delete or update tasks.",
            "links": [
                {
                    "text": "GitHub",
                    "href": "https://github.com/mayankagarwal09/task-tracker-app"
                }
            ],
            "tags" : [
                "TypeScript",
                "Angular 12",
                "JavaScript"
            ]
        }
    ]
}

keyDescriptionprojectsarray containing projects informationprojects.imageadd project poster here. optional field.projects.titletitle of the projectprojects.bodyTextdescription of project. markdown supportedprojects.linksclickable links related to the project. optional fieldprojects.links.texttitle of link to displayprojects.links.hrefactual link to be redirected to on click of the buttonprojects.tagsstring array containing tags related to projects. optional field

(9) Resume Section

It is a clickable link which opens the link provided (generally drive link of resume file) in the navbar.json under Resume.

Step 2 – STYLES

Change the color theme of the website –

Go to /src/theme/themes.js and change the values of the required components both under lightTheme and darkTheme with your prefered HEX color.

//Default Values
export const lightTheme = {
  background: '#fff',
  color: '#121212',
  accentColor: '#3D84C6',
  chronoTheme: {
    cardBgColor: 'white',
    cardForeColor: 'black',
    titleColor: 'white',
  },
  timelineLineColor: '#ccc',
  cardBackground: '#fff',
  cardFooterBackground: '#f7f7f7',
  cardBorderColor: '#00000020',
  navbarTheme: {
    linkColor: '#dedede',
    linkHoverColor: '#fefefe',
    linkActiveColor: '#fefefe',
  },
  bsPrimaryVariant: 'light',
  bsSecondaryVariant: 'dark',
  socialIconBgColor: '#121212',
};

export const darkTheme = {
  background: '#121212',
  color: '#eee',
  accentColor: '#3D84C6',
  chronoTheme: {
    cardBgColor: '#1B1B1B',
    cardForeColor: '#eee',
    titleColor: 'black',
  },
  timelineLineColor: '#444',
  cardBackground: '#060606',
  cardFooterBackground: '#181818',
  cardBorderColor: '#ffffff20',
  navbarTheme: {
    linkColor: '#dedede',
    linkHoverColor: '#fefefe',
    linkActiveColor: '#fefefe',
  },
  bsPrimaryVariant: 'dark',
  bsSecondaryVariant: 'light',
  socialIconBgColor: '#fefefe',
};