{"id":13570350,"url":"https://github.com/mayankagarwal09/dev-portfolio","last_synced_at":"2025-04-04T06:32:30.285Z","repository":{"id":38187288,"uuid":"443705105","full_name":"mayankagarwal09/dev-portfolio","owner":"mayankagarwal09","description":"A fully customizable developer portfolio website made in react with dark mode support","archived":false,"fork":false,"pushed_at":"2024-01-31T20:03:27.000Z","size":4748,"stargazers_count":271,"open_issues_count":7,"forks_count":132,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-05T02:36:29.735Z","etag":null,"topics":["dev-portfolio","developer-portfolio","developer-portfolio-react","developer-portfolio-template","personal-portfolio-website","portfolio","portfolio-template","portfolio-website","react","react-bootstrap","react-portfolio-template","react-reveal","reactjs","vercel"],"latest_commit_sha":null,"homepage":"https://dev-portfolio-mayankagarwal09.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mayankagarwal09.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-02T07:13:40.000Z","updated_at":"2024-11-03T21:34:08.000Z","dependencies_parsed_at":"2024-01-31T20:50:41.359Z","dependency_job_id":null,"html_url":"https://github.com/mayankagarwal09/dev-portfolio","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mayankagarwal09%2Fdev-portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mayankagarwal09%2Fdev-portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mayankagarwal09%2Fdev-portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mayankagarwal09%2Fdev-portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mayankagarwal09","download_url":"https://codeload.github.com/mayankagarwal09/dev-portfolio/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247134992,"owners_count":20889412,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dev-portfolio","developer-portfolio","developer-portfolio-react","developer-portfolio-template","personal-portfolio-website","portfolio","portfolio-template","portfolio-website","react","react-bootstrap","react-portfolio-template","react-reveal","reactjs","vercel"],"created_at":"2024-08-01T14:00:51.354Z","updated_at":"2025-04-04T06:32:25.276Z","avatar_url":"https://github.com/mayankagarwal09.png","language":"JavaScript","funding_links":[],"categories":["Todo List Project","HarmonyOS"],"sub_categories":["Windows Manager"],"readme":"# Dev Portfolio  [![GitHub](https://img.shields.io/github/license/mayankagarwal09/dev-portfolio?color=blue)](https://github.com/mayankagarwal09/dev-portfolio/blob/master/LICENSE.md) ![visitors](https://visitor-badge.glitch.me/badge?page_id=mayankagarwal09.dev-portfolio\u0026color=blue)\n\n## A minimal portfolio template for Developers!\n\n\u003ch2 align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/mayankagarwal09/dev-portfolio/blob/master/images/dev-portfolio.gif\" alt=\"Dev Portfolio\" /\u003e\n  \u003cbr\u003e\n\u003c/h2\u003e\n\n## Features\n\n⚡️ Modern UI Design + Reveal Animations\\\n⚡️ Made with React\\\n⚡️ Fully Responsive\\\n⚡️ Easily Customizable\\\n⚡️ Well organized documentation\n\n## Demo\n\nTo view the demo: **[click here](https://dev-portfolio-mayankagarwal09.vercel.app)**\n\n## Why do you need a portfolio? ☝️\n\n- Professional way to showcase your work\n- Increases your visibility and online presence\n- better chance of getting work opportunity\n\n---\n\n## Getting Started 🚀\n\nThese 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.\n\n### Prerequisites 📋\n\nYou'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [NPM](http://npmjs.com)) installed on your computer.\n\nAlso, you can use [Yarn](https://yarnpkg.com/) instead of NPM ☝️\n\n## Setup 🔧\n\nFrom your command line, first clone Dev Portfolio:\n\n```bash\n# Clone the repository\n$ git clone https://github.com/mayankagarwal09/dev-portfolio\n\n# Move into the repository\n$ cd dev-portfolio\n\n# Remove the current origin repository\n$ git remote remove origin\n```\n\nAfter that, you can install the dependencies either using NPM or Yarn.\n\nUsing NPM: Simply run the below commands.\n\n```bash\n# Install dependencies\n$ npm install --legacy-peer-deps\n\n# Force audit fix\n$ npm audit fix --force\n\n# Start the development server\n$ npm start\n```\n\nUsing Yarn: Be aware of that you'll need to delete the `package-lock.json` file if exists before executing the below commands.\n\n```bash\n# Install dependencies\n$ yarn\n\n# Start the development server\n$ yarn start\n```\n\nOnce your server has started, go to this url `http://localhost:3000/` to see the portfolio locally.\nThe page will reload if you make edits.\n\n---\n\n## Customization Instructions:\n\n### Step 1 - DATA \u0026 IMAGES\n\nAll customizable files are inside the `public/` folder, organised mainly into `public/images/` and `public/profile/`.\n- `public/images` contains all the image assets that can be customized on website\n- `public/profile` contains all text and info inside json files that can be customized according to need\n\n### (1) NavBar\n\n- Open `public/profile/navbar.json` \nIt has 2 keys, *logo* and *sections*.\n\n```\n{\n    \"logo\" : {\n        \"source\": \"images/logo.png\",\n        \"height\" : 45,\n        \"width\" : 50\n    },\n    \"sections\": [\n        {\n            \"title\": \"Home\",\n            \"href\": \"/\"\n        },\n        {\n            \"title\": \"About\",\n            \"href\": \"/about\"\n        },\n        {\n            \"title\": \"Skills\",\n            \"href\": \"/skills\"\n        },\n        {\n            \"title\": \"Education\",\n            \"href\": \"/education\"\n        },\n        {\n            \"title\": \"Experience\",\n            \"href\": \"/experience\"\n        },\n        {\n            \"title\": \"Projects\",\n            \"href\": \"/projects\"\n        },\n        {\n            \"title\": \"Resume\",\n            \"href\": \"https://drive.google.com/file/d/13kaPsdMNDsM4LV9g7m5-E5PTildp-yYf/view?usp=sharing\",\n            \"type\": \"link\"\n        }\n    ]\n}\n```\n\n| key | Description |\n| ----------- | ----------- |\n| logo | image you want to show as brand image on NavBar. It can be also be a simple logo with just your intitials|\n| logo.source | path to the logo image |\n| logo.height | height of logo |\n| logo.width | width of logo |\n| sections | array of sections that you want to show on Navbar as links | \n| sections.title | title of the section | \n| sections.href | link to that section. Same as *path* mentioned in `routes.json` | \n| sections.type | Opens in a new tab if value is *link*. `optional` field | \n\n### (2) Routes\n- open `public/profile/routes.json`\n\n```\n{\n    \"sections\": [\n        {\n            \"component\": \"About\",\n            \"path\": \"/about\",\n            \"headerTitle\": \"About\"\n        },\n        {\n            \"component\": \"Skills\",\n            \"path\": \"/skills\",\n            \"headerTitle\": \"Skills\"\n        },\n        {\n            \"component\": \"Education\",\n            \"path\": \"/education\",\n            \"headerTitle\": \"Education\"\n        },\n        {\n            \"component\": \"Experience\",\n            \"path\": \"/experience\",\n            \"headerTitle\": \"Experience\"\n        },\n        {\n            \"component\": \"Projects\",\n            \"path\": \"/projects\",\n            \"headerTitle\": \"Projects\"\n        }\n    ]\n}\n```\n\n| key | Description |\n| ----------- | ----------- |\n| sections | array of sections that you want to create route for | \n| sections.component | name of the Component. No need to change it unless you want to customize the entire Component. | \n| sections.path | route for the particular section. this is the path where the particular section will be accessible | \n| sections.headerTitle | title to be shown on the top of that section page | \n\n- For component customization, create a component of your own inside `src/components/` and use name of that component here.\n\n### (3) Home Section\n\n#### Home Info\n- open `public/profile/home.json`\n\n```\n{\n    \"name\": \"Your Name\",\n    \"roles\": [\"a Developer\", \"a Freelancer\"]\n}\n```\n\n| key | Description |\n| ----------- | ----------- |\n| name | your name | \n| roles | string array separated by `,`. mention your roles here | \n\n#### Social Links\n- open `public/profile/social.json`\n\n```\n{\n    \"social\": [\n        {\n            \"network\" : \"linkedin\",\n            \"href\": \"https://linkedin.com/\"\n        },\n        {\n            \"network\" : \"github\",\n            \"href\": \"https://github.com/\"\n        },\n        {\n            \"network\" : \"email\",\n            \"href\": \"mailto:test@test.com\"\n        }\n    ]\n}\n```\n\n| key | Description |\n| ----------- | ----------- |\n| social | array of social links | \n| social.network | network name as provided in [react-social-icons](https://jaketrent.github.io/react-social-icons/) |\n| social.href | link for particular social network |\n\n- we are using [react-social-icons](https://jaketrent.github.io/react-social-icons/) here. you can visit it to see all available social icons to use\n\n### (4) About Section\n\n- open `public/profile/about.json`\n\n```\n{\n    \"about\": \" This is where you can describe about **yourself**.\",\n    \"imageSource\": \"images/about/profile.png\"\n    \n}\n```\n\n| key | Description |\n| ----------- | ----------- |\n| about | write about yourself, your works and goals here. `markdown` supported | \n| imageSource | path to your profile image. (recommended size 400 x 450) |\n\n### (5) Skills Section\n\n- open `public/profile/skills.json`\n\n```\n{\n    \"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:\",\n    \"skills\": [{\n     \n            \"title\": \"Languages\",\n            \"items\" : [\n     \n                {\n                    \"icon\": \"images/skills/java.png\",\n                    \"title\": \"Java\"\n                },\n                {\n                    \"icon\": \"images/skills/js.png\",\n                    \"title\": \"JavaScript\"\n                }\n        ]},\n        {\n            \"title\": \"Frameworks \u0026 Technologies\",\n            \"items\" : [\n                {\n                    \"icon\": \"images/skills/react.png\",\n                    \"title\": \"React\"\n                }\n            ]\n        },\n        {\n            \"title\" : \"Tools \u0026 Platforms\",\n            \"items\": [\n                {\n                    \"icon\": \"images/skills/git.png\",\n                    \"title\": \"Git\"\n                }\n            ]\n    }\n]}\n```\n\n| key | Description |\n| ----------- | ----------- |\n| intro | small introduction line related to your skills. `markdown` supported | \n| skills | array containing skills under different categories |\n| skills.title | title for category under which you want to list particular skills |\n| skills.items | array containing skills for this category |\n| skills.items.icon | path to skill logo |\n| skills.items.title | title of skill |\n\n- many pre existing skill logos are available inside `public/images/skills`.\n\n### (6) Education Section\n\n- open `public/profile/education.json`\n\n```\n{\n    \"education\":[\n        {\n            \"title\": \"Jun 20XX - Jun 20YY\",\n            \"cardTitle\": \"B.Tech, Computer Science\",\n            \"cardSubtitle\":\"XYZ University, City\",\n            \"cardDetailedText\": \"CGPA - 9.5\",\n            \"icon\" : {\n                \"src\": \"images/education/lorem-ipsum.png\"\n            }\n        },\n        {\n            \"title\": \"Apr 20XX\",\n            \"cardTitle\": \"High School\",\n            \"cardSubtitle\":\"ABC School, City\",\n            \"cardDetailedText\": \"Marks - 95%\"\n        }\n    ]\n}\n```\n\n| key | Description |\n| ----------- | ----------- |\n| education | array containing education history of a person | \n| education.title | date range during which this education was pursued or passing date |\n| education.cardTitle | degree or course name |\n| education.cardSubtitle | school or institute name |\n| education.cardDetailedText | extra info such as marks or cgpa |\n| education.icon | icon shown on the timeline. `optional` field|\n| education.icon.src | path to icon |\n\n### (7) Experience Section\n\n- open `public/profile/experiences.json`\n\n```\n{\n    \"experiences\": [\n        {\n            \"title\": \"Software Engineer\",\n            \"subtitle\": \"XYZ Ltd\",\n            \"workType\": \"Full-time\",\n            \"workDescription\": [\n                \"Integrated **2** new product.\",\n                \"Worked on adding **def** to **bcd**. Improved speed by 50%.\"\n            ],\n            \"dateText\": \"06/20XX – Present\"\n        },\n        {\n            \"title\": \"Software Engineer\",\n            \"subtitle\": \"XYZ Ltd\",\n            \"workType\": \"Internship\",\n            \"workDescription\": [\n                \"Worked on abc.\"\n            ],\n            \"dateText\": \"01/20XX – 05/20XX\"\n        },\n        {\n            \"title\": \"App Developer\",\n            \"subtitle\": \"ABC Pvt Ltd\",\n            \"workType\": \"Freelance\",\n            \"workDescription\": [\n                \"Developed the official apps for the startup for both Android and iOS using hybrid framework.\",\n                \"Done bcd work.\"\n            ],\n            \"dateText\": \"09/20XX – 01/20YY\"\n        }\n    ]\n}\n```\n\n| key | Description |\n| ----------- | ----------- |\n| experiences | array containing work experiences of a person | \n| experiences.title | role or designation title |\n| experiences.subtitle | company or organization name. `optional` field |\n| experiences.workType | type of work experience. example - internship, freelance, full-time. `optional` field |\n| experiences.workDescription | string array to highlight specific points related to that work experiece. `markdown` supported |\n| experiences.dateText | date range text during which particular work experience was pursued. |\n\n### (8) Projects Section\n\n- open `public/profile/projects.json`\n\n```\n{\n    \"projects\" : [\n        {\n            \"image\" : \"images/projects/portfolio-poster.png\",\n            \"title\": \"Dev Portfolio\",\n            \"bodyText\": \"- Developer Portfolio Website made in React\\n -  Fully customisable and dynamic, easily change data and images.\\n - Dark Mode Support\",\n            \"links\": [\n                {\n                    \"text\": \"GitHub\",\n                    \"href\": \"https://github.com/mayankagarwal09/dev-portfolio\"\n                },\n                {\n                    \"text\": \"Live\",\n                    \"href\": \"https://mayankagarwal.me\"\n                }\n            ],\n            \"tags\" : [\n                \"React\",\n                \"Portfolio\",\n                \"JavaScript\"\n            ]\n        },\n        {\n            \"title\": \"MVVM Sample App\",\n            \"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.\",\n            \"links\": [\n                {\n                    \"text\": \"GitHub\",\n                    \"href\": \"https://github.com/mayankagarwal09/mvvm-sample-app\"\n                }\n            ],\n            \"tags\" : [\n                \"Kotlin\",\n                \"Android\",\n                \"MVVM\",\n                \"Room\",\n                \"Coroutines\",\n                \"Flow\",\n                \"Hilt-Dagger\",\n                \"NetworkBoundResource\"\n            ]\n        },\n        {\n            \"title\": \"Task Tracker\",\n            \"bodyText\": \"- A simple Task Tracker web app made with **Angular 12**.\\n - Uses **mock JSON server** to get, add, delete or update tasks.\",\n            \"links\": [\n                {\n                    \"text\": \"GitHub\",\n                    \"href\": \"https://github.com/mayankagarwal09/task-tracker-app\"\n                }\n            ],\n            \"tags\" : [\n                \"TypeScript\",\n                \"Angular 12\",\n                \"JavaScript\"\n            ]\n        }\n    ]\n}\n```\n\n\n| key | Description |\n| ----------- | ----------- |\n| projects | array containing projects information |\n| projects.image | add project poster here. `optional` field. |\n| projects.title | title of the project |\n| projects.bodyText | description of project. `markdown` supported |\n| projects.links | clickable links related to the project. `optional` field |\n| projects.links.text | title of link to display |\n| projects.links.href | actual link to be redirected to on click of the button |\n| projects.tags | string array containing tags related to projects. `optional` field | \n\n### (9) Resume Section\n\n- It is a clickable link which opens the link provided (generally drive link of resume file) in the navbar.json under Resume.\n\n\n### Step 2 - STYLES\n\nChange the color theme of the website -\n\nGo to `/src/theme/themes.js` and change the values of the required components both under lightTheme and darkTheme with your prefered HEX color.\n\n\n```theme\n//Default Values\nexport const lightTheme = {\n  background: '#fff',\n  color: '#121212',\n  accentColor: '#3D84C6',\n  chronoTheme: {\n    cardBgColor: 'white',\n    cardForeColor: 'black',\n    titleColor: 'white',\n  },\n  timelineLineColor: '#ccc',\n  cardBackground: '#fff',\n  cardFooterBackground: '#f7f7f7',\n  cardBorderColor: '#00000020',\n  navbarTheme: {\n    linkColor: '#dedede',\n    linkHoverColor: '#fefefe',\n    linkActiveColor: '#fefefe',\n  },\n  bsPrimaryVariant: 'light',\n  bsSecondaryVariant: 'dark',\n  socialIconBgColor: '#121212',\n};\n\nexport const darkTheme = {\n  background: '#121212',\n  color: '#eee',\n  accentColor: '#3D84C6',\n  chronoTheme: {\n    cardBgColor: '#1B1B1B',\n    cardForeColor: '#eee',\n    titleColor: 'black',\n  },\n  timelineLineColor: '#444',\n  cardBackground: '#060606',\n  cardFooterBackground: '#181818',\n  cardBorderColor: '#ffffff20',\n  navbarTheme: {\n    linkColor: '#dedede',\n    linkHoverColor: '#fefefe',\n    linkActiveColor: '#fefefe',\n  },\n  bsPrimaryVariant: 'dark',\n  bsSecondaryVariant: 'light',\n  socialIconBgColor: '#fefefe',\n};\n\n```\n\n### Step 3 - EXTRA\n\nGo to `public/index.html`. Change *title* and *logo* if you want to customize it.\n\n---\n\n## Deployment 📦\n\nOnce you finish your setup. You need to put your website online!\n\nI highly recommend to use [Vercel](https://vercel.app) because it is super easy.\n\n## Notable Portfolios made using this template\n\n- [Mayank Agarwal](https://mayankagarwal09.com)\n\n## Authors\n\n- **Mayank Agarwal** - [https://github.com/mayankagarwal09](https://github.com/mayankagarwal09)\n\n## Support\n\nIf you find a bug, feel free to [open an issue](https://github.com/mayankagarwal09/dev-portfolio/issues) in this repository.\n\n## License 📄\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmayankagarwal09%2Fdev-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmayankagarwal09%2Fdev-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmayankagarwal09%2Fdev-portfolio/lists"}