GithubHelp home page GithubHelp logo

mayankagarwal09 / dev-portfolio Goto Github PK

View Code? Open in Web Editor NEW
215.0 4.0 104.0 4.64 MB

A fully customizable developer portfolio website made in react with dark mode support

Home Page: https://dev-portfolio-mayankagarwal09.vercel.app

License: MIT License

JavaScript 84.68% HTML 5.36% CSS 9.96%
reactjs portfolio react developer-portfolio portfolio-website dev-portfolio react-portfolio-template portfolio-template vercel react-bootstrap

dev-portfolio's Introduction

Dev Portfolio GitHub visitors

A minimal portfolio template for Developers!

Dev Portfolio

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 --legacy-peer-deps

# Force audit fix
$ npm audit fix --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"
        }
    ]
}
key Description
logo image you want to show as brand image on NavBar. It can be also be a simple logo with just your intitials
logo.source path to the logo image
logo.height height of logo
logo.width width of logo
sections array of sections that you want to show on Navbar as links
sections.title title of the section
sections.href link to that section. Same as path mentioned in routes.json
sections.type Opens 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"
        }
    ]
}
key Description
sections array of sections that you want to create route for
sections.component name of the Component. No need to change it unless you want to customize the entire Component.
sections.path route for the particular section. this is the path where the particular section will be accessible
sections.headerTitle title 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"]
}
key Description
name your name
roles string 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:[email protected]"
        }
    ]
}
key Description
social array of social links
social.network network name as provided in react-social-icons
social.href link 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"
    
}
key Description
about write about yourself, your works and goals here. markdown supported
imageSource path 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"
                }
            ]
    }
]}
key Description
intro small introduction line related to your skills. markdown supported
skills array containing skills under different categories
skills.title title for category under which you want to list particular skills
skills.items array containing skills for this category
skills.items.icon path to skill logo
skills.items.title title 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%"
        }
    ]
}
key Description
education array containing education history of a person
education.title date range during which this education was pursued or passing date
education.cardTitle degree or course name
education.cardSubtitle school or institute name
education.cardDetailedText extra info such as marks or cgpa
education.icon icon shown on the timeline. optional field
education.icon.src path 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"
        }
    ]
}
key Description
experiences array containing work experiences of a person
experiences.title role or designation title
experiences.subtitle company or organization name. optional field
experiences.workType type of work experience. example - internship, freelance, full-time. optional field
experiences.workDescription string array to highlight specific points related to that work experiece. markdown supported
experiences.dateText date 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"
            ]
        }
    ]
}
key Description
projects array containing projects information
projects.image add project poster here. optional field.
projects.title title of the project
projects.bodyText description of project. markdown supported
projects.links clickable links related to the project. optional field
projects.links.text title of link to display
projects.links.href actual link to be redirected to on click of the button
projects.tags string 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',
};

Step 3 - EXTRA

Go to public/index.html. Change title and logo if you want to customize it.


Deployment 📦

Once you finish your setup. You need to put your website online!

I highly recommend to use Vercel because it is super easy.

Notable Portfolios made using this template

Authors

Support

If you find a bug, feel free to open an issue in this repository.

License 📄

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

dev-portfolio's People

Contributors

dwong4013 avatar mayankagarwal09 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

dev-portfolio's Issues

Npm Start issue

npm start

[email protected] start
react-scripts start

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

"eslint": "^6.6.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

C:\Users\vinee\Desktop\VINU\dev-portfolio\node_modules\eslint (version: 8.57.0)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  1. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
    This may help because npm has known issues with package hoisting which may get resolved in future versions.

  2. Check if C:\Users\vinee\Desktop\VINU\dev-portfolio\node_modules\eslint is outside your project directory.
    For example, you might have accidentally installed something in your home folder.

  3. Try running npm ls eslint in your project folder.
    This will tell you which other package (apart from the expected react-scripts) installed eslint.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

Error: error:0308010C:digital envelope routines::unsupported

Hi guys!

When I tried to deploy my portfolio in vercel (I also tried Netlify and gh-pages but same error) it showed this error in the build:
image

Locally it builds with success yarn run build.

I found a workaround though, it is to add --openssl-legacy-provider in react-scrips like this react-scripts --openssl-legacy-provider build. But it is not a good solution and does not address the root cause.

Does someone know what is causing and how to solve it?

Must use destructuring theme assignment react/destructuring-assignment

Hi ,

I followed the steps you shared in the repo. When I run npm start getting this error both on terminal and webpage.
Failed to compile.

src\components\Education.jsx
Line 57:28: Must use destructuring theme assignment react/destructuring-assignment
Line 58:30: Must use destructuring theme assignment react/destructuring-assignment
Line 59:32: Must use destructuring theme assignment react/destructuring-assignment
Line 60:34: Must use destructuring theme assignment react/destructuring-assignment
Line 61:31: Must use destructuring theme assignment react/destructuring-assignment

src\components\Experience.jsx
Line 56:28: Must use destructuring theme assignment react/destructuring-assignment
Line 63:53: Must use destructuring theme assignment react/destructuring-assignment
Line 65:52: Must use destructuring theme assignment react/destructuring-assignment
Line 71:70: Must use destructuring theme assignment react/destructuring-assignment

src\components\Projects.jsx
Line 54:28: Must use destructuring theme assignment react/destructuring-assignment

src\components\Social.jsx
Line 35:20: Must use destructuring theme assignment react/destructuring-assignment

src\components\projects\ProjectCard.jsx
Line 47:28: Must use destructuring theme assignment react/destructuring-assignment
Line 48:24: Must use destructuring theme assignment react/destructuring-assignment
Line 50:15: Must use destructuring theme assignment react/destructuring-assignment
Line 65:37: Must use destructuring theme assignment react/destructuring-assignment
Line 73:50: Must use destructuring theme assignment react/destructuring-assignment
Line 78:21: Must use destructuring theme assignment react/destructuring-assignment
Line 48:24: Must use destructuring theme assignment react/destructuring-assignment
Line 50:15: Must use destructuring theme assignment react/destructuring-assignment
Line 65:37: Must use destructuring theme assignment react/destructuring-assignment
Line 73:50: Must use destructuring theme assignment react/destructuring-assignment
Line 78:21: Must use destructuring theme assignment react/destructuring-assignment
Failed to compile.

src\components\Education.jsx
Line 57:28: Must use destructuring theme assignment react/destructuring-assignment
Line 58:30: Must use destructuring theme assignment react/destructuring-assignment
Line 59:32: Must use destructuring theme assignment react/destructuring-assignment
Line 60:34: Must use destructuring theme assignment react/destructuring-assignment
Line 61:31: Must use destructuring theme assignment react/destructuring-assignment

src\components\Experience.jsx
Line 56:28: Must use destructuring theme assignment react/destructuring-assignment
Line 63:53: Must use destructuring theme assignment react/destructuring-assignment
Line 65:52: Must use destructuring theme assignment react/destructuring-assignment
Line 71:70: Must use destructuring theme assignment react/destructuring-assignment

src\components\Projects.jsx
Line 54:28: Must use destructuring theme assignment react/destructuring-assignment

src\components\Social.jsx
Line 35:20: Must use destructuring theme assignment react/destructuring-assignment

src\components\projects\ProjectCard.jsx
Line 47:28: Must use destructuring theme assignment react/destructuring-assignment
Line 48:24: Must use destructuring theme assignment react/destructuring-assignment
Line 50:15: Must use destructuring theme assignment react/destructuring-assignment
Line 65:37: Must use destructuring theme assignment react/destructuring-assignment
Line 73:50: Must use destructuring theme assignment react/destructuring-assignment
Line 78:21: Must use destructuring theme assignment react/destructuring-assignment
Line 79:23: Must use destructuring theme assignment react/destructuring-assignment

Search for the keywords to learn more about each error.

Please help

Still not Clickable

Still not Clickable, I deployed the app locally and even noticing that you have added the new dependency in the package.json file it does not solve the problem.

Addign leetcode

I am unable to add a LeetCode icon. Can you help me add it?

in social.json
{
"network" : "leetcode",
"href": "link"
}

npm start error

when i typed npm start it returned this.

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:69:19)
at Object.createHash (node:crypto:138:10)
at module.exports (/Users/pratyush/dev-portfolio/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/pratyush/dev-portfolio/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/Users/pratyush/dev-portfolio/node_modules/webpack/lib/NormalModule.js:471:10)
at /Users/pratyush/dev-portfolio/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/pratyush/dev-portfolio/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/pratyush/dev-portfolio/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/pratyush/dev-portfolio/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/Users/pratyush/dev-portfolio/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/Users/pratyush/dev-portfolio/node_modules/react-scripts/scripts/start.js:19
throw err;
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:69:19)
at Object.createHash (node:crypto:138:10)
at module.exports (/Users/pratyush/dev-portfolio/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/pratyush/dev-portfolio/node_modules/webpack/lib/NormalModule.js:417:16)
at /Users/pratyush/dev-portfolio/node_modules/webpack/lib/NormalModule.js:452:10
at /Users/pratyush/dev-portfolio/node_modules/webpack/lib/NormalModule.js:323:13
at /Users/pratyush/dev-portfolio/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Users/pratyush/dev-portfolio/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Users/pratyush/dev-portfolio/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /Users/pratyush/dev-portfolio/node_modules/babel-loader/lib/index.js:59:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v20.5.0

Nothing on the page is clickable

I have recently cloned down this template and have got it running locally, however none of the buttons are producing any functionality.

Can't npm start

There are a lot of deprecations. When I run npm start I simply get this site can't be reached. If I update the packages I end up with multiple dependency errors.

Error: Failed to load resource: net::ERR_FILE_NOT_FOUND

When I open the html file with localhost:3000, I worked well,.
But if I open the index.html file which is in the build file, I have errors.
One is "Access to internal resource at 'file:///C:/manifest.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, secure, https." and the others is "Failed to load resource: net::ERR_FILE_NOT_FOUND". -> have four errors....!

How can I fix the errors? Where is the error spot?

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.