├── .eslintrc.js ├── .gitignore ├── LICENSE.md ├── README.md ├── images ├── dev-portfolio.gif └── mockup1.png ├── package.json ├── public ├── images │ ├── about │ │ └── profile.png │ ├── education │ │ └── lorem-ipsum.png │ ├── logo.png │ ├── projects │ │ ├── caaring-poster.png │ │ ├── portfolio-poster.png │ │ └── quiet-hours-poster.jpg │ └── skills │ │ ├── android-jetpack.png │ │ ├── android-studio.png │ │ ├── android_new.png │ │ ├── bamboo.png │ │ ├── c-plus-plus.svg │ │ ├── cloudflare.png │ │ ├── css.png │ │ ├── django.png │ │ ├── docker.png │ │ ├── firebase.png │ │ ├── git.png │ │ ├── google-play.png │ │ ├── html.png │ │ ├── java.png │ │ ├── js.png │ │ ├── kotlin.jpeg │ │ ├── mongo-db.png │ │ ├── mysql.png │ │ ├── newrelic.png │ │ ├── nodejs.png │ │ ├── openshift.png │ │ ├── photoshop.png │ │ ├── php.png │ │ ├── python.png │ │ ├── react-native.png │ │ ├── react.png │ │ └── typescript.png ├── index.html ├── manifest.json ├── profile │ ├── about.json │ ├── education.json │ ├── experiences.json │ ├── home.json │ ├── navbar.json │ ├── projects.json │ ├── routes.json │ ├── skills.json │ └── social.json └── robots.txt └── src ├── App.css ├── App.jsx ├── App.test.js ├── AppContext.js ├── MainApp.jsx ├── components ├── About.jsx ├── Education.jsx ├── Experience.jsx ├── FallbackSpinner.jsx ├── Header.jsx ├── Home.jsx ├── NavBar.jsx ├── Projects.jsx ├── Skills.jsx ├── Social.jsx ├── ThemeToggler.jsx └── projects │ └── ProjectCard.jsx ├── constants └── endpoints.js ├── css ├── education.css └── experience.css ├── index.css ├── index.jsx ├── logo.svg ├── reportWebVitals.js ├── setupTests.js └── theme ├── GlobalStyles.js └── themes.js /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | }, 6 | extends: [ 7 | 'plugin:react/recommended', 8 | 'airbnb', 9 | ], 10 | parserOptions: { 11 | ecmaFeatures: { 12 | jsx: true, 13 | }, 14 | ecmaVersion: 12, 15 | sourceType: 'module', 16 | }, 17 | plugins: [ 18 | 'react', 19 | ], 20 | rules: { 21 | 'prefer-template': 0, 22 | 'react/no-children-prop': [0], 23 | 'linebreak-style': 0 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | package-lock.json 8 | 9 | # testing 10 | /coverage 11 | 12 | # production 13 | /build 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Mayank Agarwal 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 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&color=blue) 2 | 3 | ## A minimal portfolio template for Developers! 4 | 5 |

6 | Dev Portfolio 7 |
8 |

9 | 10 | ## Features 11 | 12 | ⚡️ Modern UI Design + Reveal Animations\ 13 | ⚡️ Made with React\ 14 | ⚡️ Fully Responsive\ 15 | ⚡️ Easily Customizable\ 16 | ⚡️ Well organized documentation 17 | 18 | ## Demo 19 | 20 | To view the demo: **[click here](https://dev-portfolio-mayankagarwal09.vercel.app)** 21 | 22 | ## Why do you need a portfolio? ☝️ 23 | 24 | - Professional way to showcase your work 25 | - Increases your visibility and online presence 26 | - better chance of getting work opportunity 27 | 28 | --- 29 | 30 | ## Getting Started 🚀 31 | 32 | 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. 33 | 34 | ### Prerequisites 📋 35 | 36 | You'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. 37 | 38 | Also, you can use [Yarn](https://yarnpkg.com/) instead of NPM ☝️ 39 | 40 | ## Setup 🔧 41 | 42 | From your command line, first clone Dev Portfolio: 43 | 44 | ```bash 45 | # Clone the repository 46 | $ git clone https://github.com/mayankagarwal09/dev-portfolio 47 | 48 | # Move into the repository 49 | $ cd dev-portfolio 50 | 51 | # Remove the current origin repository 52 | $ git remote remove origin 53 | ``` 54 | 55 | After that, you can install the dependencies either using NPM or Yarn. 56 | 57 | Using NPM: Simply run the below commands. 58 | 59 | ```bash 60 | # Install dependencies 61 | $ npm install --legacy-peer-deps 62 | 63 | # Force audit fix 64 | $ npm audit fix --force 65 | 66 | # Start the development server 67 | $ npm start 68 | ``` 69 | 70 | Using Yarn: Be aware of that you'll need to delete the `package-lock.json` file if exists before executing the below commands. 71 | 72 | ```bash 73 | # Install dependencies 74 | $ yarn 75 | 76 | # Start the development server 77 | $ yarn start 78 | ``` 79 | 80 | Once your server has started, go to this url `http://localhost:3000/` to see the portfolio locally. 81 | The page will reload if you make edits. 82 | 83 | --- 84 | 85 | ## Customization Instructions: 86 | 87 | ### Step 1 - DATA & IMAGES 88 | 89 | All customizable files are inside the `public/` folder, organised mainly into `public/images/` and `public/profile/`. 90 | - `public/images` contains all the image assets that can be customized on website 91 | - `public/profile` contains all text and info inside json files that can be customized according to need 92 | 93 | ### (1) NavBar 94 | 95 | - Open `public/profile/navbar.json` 96 | It has 2 keys, *logo* and *sections*. 97 | 98 | ``` 99 | { 100 | "logo" : { 101 | "source": "images/logo.png", 102 | "height" : 45, 103 | "width" : 50 104 | }, 105 | "sections": [ 106 | { 107 | "title": "Home", 108 | "href": "/" 109 | }, 110 | { 111 | "title": "About", 112 | "href": "/about" 113 | }, 114 | { 115 | "title": "Skills", 116 | "href": "/skills" 117 | }, 118 | { 119 | "title": "Education", 120 | "href": "/education" 121 | }, 122 | { 123 | "title": "Experience", 124 | "href": "/experience" 125 | }, 126 | { 127 | "title": "Projects", 128 | "href": "/projects" 129 | }, 130 | { 131 | "title": "Resume", 132 | "href": "https://drive.google.com/file/d/13kaPsdMNDsM4LV9g7m5-E5PTildp-yYf/view?usp=sharing", 133 | "type": "link" 134 | } 135 | ] 136 | } 137 | ``` 138 | 139 | | key | Description | 140 | | ----------- | ----------- | 141 | | logo | image you want to show as brand image on NavBar. It can be also be a simple logo with just your intitials| 142 | | logo.source | path to the logo image | 143 | | logo.height | height of logo | 144 | | logo.width | width of logo | 145 | | sections | array of sections that you want to show on Navbar as links | 146 | | sections.title | title of the section | 147 | | sections.href | link to that section. Same as *path* mentioned in `routes.json` | 148 | | sections.type | Opens in a new tab if value is *link*. `optional` field | 149 | 150 | ### (2) Routes 151 | - open `public/profile/routes.json` 152 | 153 | ``` 154 | { 155 | "sections": [ 156 | { 157 | "component": "About", 158 | "path": "/about", 159 | "headerTitle": "About" 160 | }, 161 | { 162 | "component": "Skills", 163 | "path": "/skills", 164 | "headerTitle": "Skills" 165 | }, 166 | { 167 | "component": "Education", 168 | "path": "/education", 169 | "headerTitle": "Education" 170 | }, 171 | { 172 | "component": "Experience", 173 | "path": "/experience", 174 | "headerTitle": "Experience" 175 | }, 176 | { 177 | "component": "Projects", 178 | "path": "/projects", 179 | "headerTitle": "Projects" 180 | } 181 | ] 182 | } 183 | ``` 184 | 185 | | key | Description | 186 | | ----------- | ----------- | 187 | | sections | array of sections that you want to create route for | 188 | | sections.component | name of the Component. No need to change it unless you want to customize the entire Component. | 189 | | sections.path | route for the particular section. this is the path where the particular section will be accessible | 190 | | sections.headerTitle | title to be shown on the top of that section page | 191 | 192 | - For component customization, create a component of your own inside `src/components/` and use name of that component here. 193 | 194 | ### (3) Home Section 195 | 196 | #### Home Info 197 | - open `public/profile/home.json` 198 | 199 | ``` 200 | { 201 | "name": "Your Name", 202 | "roles": ["a Developer", "a Freelancer"] 203 | } 204 | ``` 205 | 206 | | key | Description | 207 | | ----------- | ----------- | 208 | | name | your name | 209 | | roles | string array separated by `,`. mention your roles here | 210 | 211 | #### Social Links 212 | - open `public/profile/social.json` 213 | 214 | ``` 215 | { 216 | "social": [ 217 | { 218 | "network" : "linkedin", 219 | "href": "https://linkedin.com/" 220 | }, 221 | { 222 | "network" : "github", 223 | "href": "https://github.com/" 224 | }, 225 | { 226 | "network" : "email", 227 | "href": "mailto:test@test.com" 228 | } 229 | ] 230 | } 231 | ``` 232 | 233 | | key | Description | 234 | | ----------- | ----------- | 235 | | social | array of social links | 236 | | social.network | network name as provided in [react-social-icons](https://jaketrent.github.io/react-social-icons/) | 237 | | social.href | link for particular social network | 238 | 239 | - 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 240 | 241 | ### (4) About Section 242 | 243 | - open `public/profile/about.json` 244 | 245 | ``` 246 | { 247 | "about": " This is where you can describe about **yourself**.", 248 | "imageSource": "images/about/profile.png" 249 | 250 | } 251 | ``` 252 | 253 | | key | Description | 254 | | ----------- | ----------- | 255 | | about | write about yourself, your works and goals here. `markdown` supported | 256 | | imageSource | path to your profile image. (recommended size 400 x 450) | 257 | 258 | ### (5) Skills Section 259 | 260 | - open `public/profile/skills.json` 261 | 262 | ``` 263 | { 264 | "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:", 265 | "skills": [{ 266 | 267 | "title": "Languages", 268 | "items" : [ 269 | 270 | { 271 | "icon": "images/skills/java.png", 272 | "title": "Java" 273 | }, 274 | { 275 | "icon": "images/skills/js.png", 276 | "title": "JavaScript" 277 | } 278 | ]}, 279 | { 280 | "title": "Frameworks & Technologies", 281 | "items" : [ 282 | { 283 | "icon": "images/skills/react.png", 284 | "title": "React" 285 | } 286 | ] 287 | }, 288 | { 289 | "title" : "Tools & Platforms", 290 | "items": [ 291 | { 292 | "icon": "images/skills/git.png", 293 | "title": "Git" 294 | } 295 | ] 296 | } 297 | ]} 298 | ``` 299 | 300 | | key | Description | 301 | | ----------- | ----------- | 302 | | intro | small introduction line related to your skills. `markdown` supported | 303 | | skills | array containing skills under different categories | 304 | | skills.title | title for category under which you want to list particular skills | 305 | | skills.items | array containing skills for this category | 306 | | skills.items.icon | path to skill logo | 307 | | skills.items.title | title of skill | 308 | 309 | - many pre existing skill logos are available inside `public/images/skills`. 310 | 311 | ### (6) Education Section 312 | 313 | - open `public/profile/education.json` 314 | 315 | ``` 316 | { 317 | "education":[ 318 | { 319 | "title": "Jun 20XX - Jun 20YY", 320 | "cardTitle": "B.Tech, Computer Science", 321 | "cardSubtitle":"XYZ University, City", 322 | "cardDetailedText": "CGPA - 9.5", 323 | "icon" : { 324 | "src": "images/education/lorem-ipsum.png" 325 | } 326 | }, 327 | { 328 | "title": "Apr 20XX", 329 | "cardTitle": "High School", 330 | "cardSubtitle":"ABC School, City", 331 | "cardDetailedText": "Marks - 95%" 332 | } 333 | ] 334 | } 335 | ``` 336 | 337 | | key | Description | 338 | | ----------- | ----------- | 339 | | education | array containing education history of a person | 340 | | education.title | date range during which this education was pursued or passing date | 341 | | education.cardTitle | degree or course name | 342 | | education.cardSubtitle | school or institute name | 343 | | education.cardDetailedText | extra info such as marks or cgpa | 344 | | education.icon | icon shown on the timeline. `optional` field| 345 | | education.icon.src | path to icon | 346 | 347 | ### (7) Experience Section 348 | 349 | - open `public/profile/experiences.json` 350 | 351 | ``` 352 | { 353 | "experiences": [ 354 | { 355 | "title": "Software Engineer", 356 | "subtitle": "XYZ Ltd", 357 | "workType": "Full-time", 358 | "workDescription": [ 359 | "Integrated **2** new product.", 360 | "Worked on adding **def** to **bcd**. Improved speed by 50%." 361 | ], 362 | "dateText": "06/20XX – Present" 363 | }, 364 | { 365 | "title": "Software Engineer", 366 | "subtitle": "XYZ Ltd", 367 | "workType": "Internship", 368 | "workDescription": [ 369 | "Worked on abc." 370 | ], 371 | "dateText": "01/20XX – 05/20XX" 372 | }, 373 | { 374 | "title": "App Developer", 375 | "subtitle": "ABC Pvt Ltd", 376 | "workType": "Freelance", 377 | "workDescription": [ 378 | "Developed the official apps for the startup for both Android and iOS using hybrid framework.", 379 | "Done bcd work." 380 | ], 381 | "dateText": "09/20XX – 01/20YY" 382 | } 383 | ] 384 | } 385 | ``` 386 | 387 | | key | Description | 388 | | ----------- | ----------- | 389 | | experiences | array containing work experiences of a person | 390 | | experiences.title | role or designation title | 391 | | experiences.subtitle | company or organization name. `optional` field | 392 | | experiences.workType | type of work experience. example - internship, freelance, full-time. `optional` field | 393 | | experiences.workDescription | string array to highlight specific points related to that work experiece. `markdown` supported | 394 | | experiences.dateText | date range text during which particular work experience was pursued. | 395 | 396 | ### (8) Projects Section 397 | 398 | - open `public/profile/projects.json` 399 | 400 | ``` 401 | { 402 | "projects" : [ 403 | { 404 | "image" : "images/projects/portfolio-poster.png", 405 | "title": "Dev Portfolio", 406 | "bodyText": "- Developer Portfolio Website made in React\n - Fully customisable and dynamic, easily change data and images.\n - Dark Mode Support", 407 | "links": [ 408 | { 409 | "text": "GitHub", 410 | "href": "https://github.com/mayankagarwal09/dev-portfolio" 411 | }, 412 | { 413 | "text": "Live", 414 | "href": "https://mayankagarwal.me" 415 | } 416 | ], 417 | "tags" : [ 418 | "React", 419 | "Portfolio", 420 | "JavaScript" 421 | ] 422 | }, 423 | { 424 | "title": "MVVM Sample App", 425 | "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.", 426 | "links": [ 427 | { 428 | "text": "GitHub", 429 | "href": "https://github.com/mayankagarwal09/mvvm-sample-app" 430 | } 431 | ], 432 | "tags" : [ 433 | "Kotlin", 434 | "Android", 435 | "MVVM", 436 | "Room", 437 | "Coroutines", 438 | "Flow", 439 | "Hilt-Dagger", 440 | "NetworkBoundResource" 441 | ] 442 | }, 443 | { 444 | "title": "Task Tracker", 445 | "bodyText": "- A simple Task Tracker web app made with **Angular 12**.\n - Uses **mock JSON server** to get, add, delete or update tasks.", 446 | "links": [ 447 | { 448 | "text": "GitHub", 449 | "href": "https://github.com/mayankagarwal09/task-tracker-app" 450 | } 451 | ], 452 | "tags" : [ 453 | "TypeScript", 454 | "Angular 12", 455 | "JavaScript" 456 | ] 457 | } 458 | ] 459 | } 460 | ``` 461 | 462 | 463 | | key | Description | 464 | | ----------- | ----------- | 465 | | projects | array containing projects information | 466 | | projects.image | add project poster here. `optional` field. | 467 | | projects.title | title of the project | 468 | | projects.bodyText | description of project. `markdown` supported | 469 | | projects.links | clickable links related to the project. `optional` field | 470 | | projects.links.text | title of link to display | 471 | | projects.links.href | actual link to be redirected to on click of the button | 472 | | projects.tags | string array containing tags related to projects. `optional` field | 473 | 474 | ### (9) Resume Section 475 | 476 | - It is a clickable link which opens the link provided (generally drive link of resume file) in the navbar.json under Resume. 477 | 478 | 479 | ### Step 2 - STYLES 480 | 481 | Change the color theme of the website - 482 | 483 | Go to `/src/theme/themes.js` and change the values of the required components both under lightTheme and darkTheme with your prefered HEX color. 484 | 485 | 486 | ```theme 487 | //Default Values 488 | export const lightTheme = { 489 | background: '#fff', 490 | color: '#121212', 491 | accentColor: '#3D84C6', 492 | chronoTheme: { 493 | cardBgColor: 'white', 494 | cardForeColor: 'black', 495 | titleColor: 'white', 496 | }, 497 | timelineLineColor: '#ccc', 498 | cardBackground: '#fff', 499 | cardFooterBackground: '#f7f7f7', 500 | cardBorderColor: '#00000020', 501 | navbarTheme: { 502 | linkColor: '#dedede', 503 | linkHoverColor: '#fefefe', 504 | linkActiveColor: '#fefefe', 505 | }, 506 | bsPrimaryVariant: 'light', 507 | bsSecondaryVariant: 'dark', 508 | socialIconBgColor: '#121212', 509 | }; 510 | 511 | export const darkTheme = { 512 | background: '#121212', 513 | color: '#eee', 514 | accentColor: '#3D84C6', 515 | chronoTheme: { 516 | cardBgColor: '#1B1B1B', 517 | cardForeColor: '#eee', 518 | titleColor: 'black', 519 | }, 520 | timelineLineColor: '#444', 521 | cardBackground: '#060606', 522 | cardFooterBackground: '#181818', 523 | cardBorderColor: '#ffffff20', 524 | navbarTheme: { 525 | linkColor: '#dedede', 526 | linkHoverColor: '#fefefe', 527 | linkActiveColor: '#fefefe', 528 | }, 529 | bsPrimaryVariant: 'dark', 530 | bsSecondaryVariant: 'light', 531 | socialIconBgColor: '#fefefe', 532 | }; 533 | 534 | ``` 535 | 536 | ### Step 3 - EXTRA 537 | 538 | Go to `public/index.html`. Change *title* and *logo* if you want to customize it. 539 | 540 | --- 541 | 542 | ## Deployment 📦 543 | 544 | Once you finish your setup. You need to put your website online! 545 | 546 | I highly recommend to use [Vercel](https://vercel.app) because it is super easy. 547 | 548 | ## Notable Portfolios made using this template 549 | 550 | - [Mayank Agarwal](https://mayankagarwal09.com) 551 | 552 | ## Authors 553 | 554 | - **Mayank Agarwal** - [https://github.com/mayankagarwal09](https://github.com/mayankagarwal09) 555 | 556 | ## Support 557 | 558 | If you find a bug, feel free to [open an issue](https://github.com/mayankagarwal09/dev-portfolio/issues) in this repository. 559 | 560 | ## License 📄 561 | 562 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details 563 | 564 | -------------------------------------------------------------------------------- /images/dev-portfolio.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/images/dev-portfolio.gif -------------------------------------------------------------------------------- /images/mockup1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/images/mockup1.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "bootstrap": "^5.1.1", 10 | "prop-types": "^15.7.2", 11 | "react": "^17.0.2", 12 | "react-bootstrap": "^2.0.0-rc.0", 13 | "react-chrono": "^1.12.1", 14 | "react-dark-mode-toggle": "^0.2.0", 15 | "react-dom": "^17.0.2", 16 | "react-markdown": "^7.0.1", 17 | "react-reveal": "^1.2.2", 18 | "react-router": "^5.2.1", 19 | "react-router-dom": "^5.3.0", 20 | "react-scripts": "^5.0.1", 21 | "react-social-icons": "^5.6.1", 22 | "styled-components": "^5.3.1", 23 | "typewriter-effect": "^2.18.2", 24 | "use-dark-mode": "^2.3.1", 25 | "vertical-timeline-component-for-react": "^1.0.7", 26 | "web-vitals": "^1.0.1", 27 | "webpack": "^5.64.4" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "scripts": { 42 | "start": "react-scripts start", 43 | "build": "react-scripts build", 44 | "test": "react-scripts test", 45 | "eject": "react-scripts eject" 46 | }, 47 | "devDependencies": { 48 | "eslint": "^7.32.0", 49 | "eslint-config-airbnb": "^18.2.1", 50 | "eslint-plugin-import": "^2.24.2", 51 | "eslint-plugin-jsx-a11y": "^6.4.1", 52 | "eslint-plugin-react": "^7.26.1", 53 | "eslint-plugin-react-hooks": "^4.2.0", 54 | "react-error-overlay": "6.0.9" 55 | }, 56 | "resolutions": { 57 | "react-error-overlay": "6.0.9" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /public/images/about/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/about/profile.png -------------------------------------------------------------------------------- /public/images/education/lorem-ipsum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/education/lorem-ipsum.png -------------------------------------------------------------------------------- /public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/logo.png -------------------------------------------------------------------------------- /public/images/projects/caaring-poster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/projects/caaring-poster.png -------------------------------------------------------------------------------- /public/images/projects/portfolio-poster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/projects/portfolio-poster.png -------------------------------------------------------------------------------- /public/images/projects/quiet-hours-poster.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/projects/quiet-hours-poster.jpg -------------------------------------------------------------------------------- /public/images/skills/android-jetpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/android-jetpack.png -------------------------------------------------------------------------------- /public/images/skills/android-studio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/android-studio.png -------------------------------------------------------------------------------- /public/images/skills/android_new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/android_new.png -------------------------------------------------------------------------------- /public/images/skills/bamboo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/bamboo.png -------------------------------------------------------------------------------- /public/images/skills/c-plus-plus.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/images/skills/cloudflare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/cloudflare.png -------------------------------------------------------------------------------- /public/images/skills/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/css.png -------------------------------------------------------------------------------- /public/images/skills/django.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/django.png -------------------------------------------------------------------------------- /public/images/skills/docker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/docker.png -------------------------------------------------------------------------------- /public/images/skills/firebase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/firebase.png -------------------------------------------------------------------------------- /public/images/skills/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/git.png -------------------------------------------------------------------------------- /public/images/skills/google-play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/google-play.png -------------------------------------------------------------------------------- /public/images/skills/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/html.png -------------------------------------------------------------------------------- /public/images/skills/java.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/java.png -------------------------------------------------------------------------------- /public/images/skills/js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/js.png -------------------------------------------------------------------------------- /public/images/skills/kotlin.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/kotlin.jpeg -------------------------------------------------------------------------------- /public/images/skills/mongo-db.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/mongo-db.png -------------------------------------------------------------------------------- /public/images/skills/mysql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/mysql.png -------------------------------------------------------------------------------- /public/images/skills/newrelic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/newrelic.png -------------------------------------------------------------------------------- /public/images/skills/nodejs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/nodejs.png -------------------------------------------------------------------------------- /public/images/skills/openshift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/openshift.png -------------------------------------------------------------------------------- /public/images/skills/photoshop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/photoshop.png -------------------------------------------------------------------------------- /public/images/skills/php.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/php.png -------------------------------------------------------------------------------- /public/images/skills/python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/python.png -------------------------------------------------------------------------------- /public/images/skills/react-native.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/react-native.png -------------------------------------------------------------------------------- /public/images/skills/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/react.png -------------------------------------------------------------------------------- /public/images/skills/typescript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mayankagarwal09/dev-portfolio/0fd5d53e7549e7006a7c02bef5a607d93e2811e4/public/images/skills/typescript.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Portfolio Website 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Mayank Agarwal", 3 | "name": "Mayank Agarwal - Portfolio", 4 | "icons": [ 5 | { 6 | "src": "images/logo.png", 7 | "type": "image/png", 8 | "sizes": "425x225" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /public/profile/about.json: -------------------------------------------------------------------------------- 1 | { 2 | "about": " This is where you can describe about **yourself**. The more you describe about yourself, the better it is!\n\n\nExtra Information about you, like hobbies and your goals.\nExample Paragraph: I am passionate about my work. Because I love what I do, I have a steady source of motivation that drives me to do my best. In my last job, this passion led me to challenge myself daily and learn new skills that helped me to do better work. For example, I taught myself how to use Photoshop to improve the quality of our photos and graphics. I soon became the go-to person for any design needs.", 3 | "imageSource": "images/about/profile.png" 4 | 5 | } -------------------------------------------------------------------------------- /public/profile/education.json: -------------------------------------------------------------------------------- 1 | { 2 | "education":[ 3 | { 4 | "title": "Jun 20XX - Jun 20YY", 5 | "cardTitle": "B.Tech, Computer Science", 6 | "cardSubtitle":"XYZ University, City", 7 | "cardDetailedText": "CGPA - 9.5", 8 | "icon" : { 9 | "src": "images/education/lorem-ipsum.png" 10 | } 11 | }, 12 | { 13 | "title": "Apr 20XX", 14 | "cardTitle": "High School", 15 | "cardSubtitle":"ABC School, City", 16 | "cardDetailedText": "Marks - 95%" 17 | } 18 | ] 19 | } -------------------------------------------------------------------------------- /public/profile/experiences.json: -------------------------------------------------------------------------------- 1 | { 2 | "experiences": [ 3 | { 4 | "title": "Software Engineer", 5 | "subtitle": "XYZ Ltd", 6 | "workType": "Full-time", 7 | "workDescription": [ 8 | "Integrated **2** new product.", 9 | "Worked on adding **def** to **bcd**. Improved speed by 50%." 10 | ], 11 | "dateText": "06/20XX – Present" 12 | }, 13 | { 14 | "title": "Software Engineer", 15 | "subtitle": "XYZ Ltd", 16 | "workType": "Internship", 17 | "workDescription": [ 18 | "Worked on abc." 19 | ], 20 | "dateText": "01/20XX – 05/20XX" 21 | }, 22 | { 23 | "title": "App Developer", 24 | "subtitle": "ABC Pvt Ltd", 25 | "workType": "Freelance", 26 | "workDescription": [ 27 | "Developed the official apps for the startup for both Android and iOS using hybrid framework.", 28 | "Done bcd work." 29 | ], 30 | "dateText": "09/20XX – 01/20YY" 31 | } 32 | ] 33 | } -------------------------------------------------------------------------------- /public/profile/home.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Your Name", 3 | "roles": ["a Developer", "a Freelancer"] 4 | } -------------------------------------------------------------------------------- /public/profile/navbar.json: -------------------------------------------------------------------------------- 1 | { 2 | "logo" : { 3 | "source": "images/logo.png", 4 | "height" : 45, 5 | "width" : 50 6 | }, 7 | "sections": [ 8 | { 9 | "title": "Home", 10 | "href": "/" 11 | }, 12 | { 13 | "title": "About", 14 | "href": "/about" 15 | }, 16 | { 17 | "title": "Skills", 18 | "href": "/skills" 19 | }, 20 | { 21 | "title": "Education", 22 | "href": "/education" 23 | }, 24 | { 25 | "title": "Experience", 26 | "href": "/experience" 27 | }, 28 | { 29 | "title": "Projects", 30 | "href": "/projects" 31 | }, 32 | { 33 | "title": "Resume", 34 | "href": "https://drive.google.com/file/d/13kaPsdMNDsM4LV9g7m5-E5PTildp-yYf/view?usp=sharing", 35 | "type": "link" 36 | } 37 | ] 38 | 39 | } -------------------------------------------------------------------------------- /public/profile/projects.json: -------------------------------------------------------------------------------- 1 | { 2 | "projects" : [ 3 | { 4 | "image" : "images/projects/portfolio-poster.png", 5 | "title": "Dev Portfolio", 6 | "bodyText": "- Developer Portfolio Website made in React\n - Fully customisable and dynamic, easily change data and images.\n - Dark Mode Support", 7 | "links": [ 8 | { 9 | "text": "GitHub", 10 | "href": "https://github.com/mayankagarwal09/dev-portfolio" 11 | }, 12 | { 13 | "text": "Live", 14 | "href": "https://mayankagarwal.me" 15 | } 16 | ], 17 | "tags" : [ 18 | "React", 19 | "Portfolio", 20 | "JavaScript" 21 | ] 22 | }, 23 | { 24 | "image" : "images/projects/caaring-poster.png", 25 | "title": "Caaring - Cab Share App", 26 | "bodyText": "- A Cab Sharing web app made using **Django** for **VIT** Students. People can create a new cab or request to join an existing cab.\n - Added User authentication and password reset using **SendGrid**.\n - Deployed on **heroku** using **gunicorn**.", 27 | "links": [ 28 | { 29 | "text": "GitHub", 30 | "href": "https://github.com/mayankagarwal09/Caaring" 31 | }, 32 | { 33 | "text": "Live", 34 | "href": "http://caaring.herokuapp.com" 35 | } 36 | ], 37 | "tags" : [ 38 | "Python", 39 | "Django", 40 | "BootStrap", 41 | "SendGrid", 42 | "Heroku", 43 | "Gunicorn", 44 | "VIT" 45 | ] 46 | }, 47 | { 48 | "image" : "images/projects/quiet-hours-poster.jpg", 49 | "title": "Quiet Hours App", 50 | "bodyText": "- An Android App that **automatically silences** your phone during class hours, designed for **VITians**.\n - Option to select class **slots** and **custom time**.\n - Option to put on Vibrate instead of Silent.", 51 | "links": [ 52 | { 53 | "text": "GitHub", 54 | "href": "https://github.com/mayankagarwal09/QuietHours-Android" 55 | } 56 | ], 57 | "tags" : [ 58 | "Java", 59 | "Android", 60 | "Alarm Manager", 61 | "VIT" 62 | ] 63 | }, 64 | { 65 | "title": "Secure Chat App", 66 | "bodyText": "- An Android App that allows users to send texts in real time.\n - End to End encryption using **RSA** Algorithm.\n - Uses **Firebase** database to store texts.\n - Secured with **Fingerprint** lock.", 67 | "links": [ 68 | { 69 | "text": "GitHub", 70 | "href": "https://github.com/mayankagarwal09/SecureChatApp" 71 | } 72 | ], 73 | "tags" : [ 74 | "Java", 75 | "Android", 76 | "Firebase", 77 | "RSA" 78 | ] 79 | }, 80 | { 81 | "title": "MVVM Sample App", 82 | "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.", 83 | "links": [ 84 | { 85 | "text": "GitHub", 86 | "href": "https://github.com/mayankagarwal09/mvvm-sample-app" 87 | } 88 | ], 89 | "tags" : [ 90 | "Kotlin", 91 | "Android", 92 | "MVVM", 93 | "Room", 94 | "Coroutines", 95 | "Flow", 96 | "Hilt-Dagger", 97 | "NetworkBoundResource" 98 | ] 99 | }, 100 | { 101 | "title": "Feed List App", 102 | "bodyText": "- An Android App that loads list of feeds from a **paginated** API and shows in a RecyclerView.\n - Uses the **MVVM** architecture.\n - Uses **Paging 3** library along with other Architecture Components.", 103 | "links": [ 104 | { 105 | "text": "GitHub", 106 | "href": "https://github.com/mayankagarwal09/Paginated-App-Feeds-List" 107 | } 108 | ], 109 | "tags" : [ 110 | "Kotlin", 111 | "Android", 112 | "MVVM", 113 | "Paging 3", 114 | "Coroutines", 115 | "Flow" 116 | ] 117 | }, 118 | { 119 | "title": "Task Tracker", 120 | "bodyText": "- A simple Task Tracker web app made with **Angular 12**.\n - Uses **mock JSON server** to get, add, delete or update tasks.", 121 | "links": [ 122 | { 123 | "text": "GitHub", 124 | "href": "https://github.com/mayankagarwal09/task-tracker-app" 125 | } 126 | ], 127 | "tags" : [ 128 | "TypeScript", 129 | "Angular 12", 130 | "JavaScript" 131 | ] 132 | }, 133 | { 134 | "title": "Image Encryption/Decryption", 135 | "bodyText": "- A Web App for Image Encryption and Decryption made in **Django**.\n - Uses **SDES** algorithm for encryption/decryption.", 136 | "links": [ 137 | { 138 | "text": "GitHub", 139 | "href": "https://github.com/mayankagarwal09/img-encrypt-sdes" 140 | } 141 | ], 142 | "tags" : [ 143 | "Python", 144 | "Django", 145 | "SDES", 146 | "Cryptography" 147 | ] 148 | } 149 | ] 150 | } -------------------------------------------------------------------------------- /public/profile/routes.json: -------------------------------------------------------------------------------- 1 | { 2 | "sections": [ 3 | { 4 | "component": "About", 5 | "path": "/about", 6 | "headerTitle": "About" 7 | }, 8 | { 9 | "component": "Skills", 10 | "path": "/skills", 11 | "headerTitle": "Skills" 12 | }, 13 | { 14 | "component": "Education", 15 | "path": "/education", 16 | "headerTitle": "Education" 17 | }, 18 | { 19 | "component": "Experience", 20 | "path": "/experience", 21 | "headerTitle": "Experience" 22 | }, 23 | { 24 | "component": "Projects", 25 | "path": "/projects", 26 | "headerTitle": "Projects" 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /public/profile/skills.json: -------------------------------------------------------------------------------- 1 | { 2 | "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:", 3 | "skills": [{ 4 | 5 | "title": "Languages & Databases", 6 | "items" : [ 7 | 8 | { 9 | "icon": "images/skills/java.png", 10 | "title": "Java" 11 | }, 12 | { 13 | "icon": "images/skills/php.png", 14 | "title": "PHP" 15 | }, 16 | { 17 | "icon": "images/skills/js.png", 18 | "title": "JavaScript" 19 | }, 20 | { 21 | "icon": "images/skills/python.png", 22 | "title": "Python" 23 | }, 24 | { 25 | "icon": "images/skills/mysql.png", 26 | "title": "MySQL" 27 | } 28 | ]}, 29 | { 30 | "title": "Frameworks & Technologies", 31 | "items" : [ 32 | { 33 | "icon": "images/skills/android_new.png", 34 | "title": "Android" 35 | }, 36 | { 37 | "icon": "images/skills/react.png", 38 | "title": "React" 39 | }, 40 | { 41 | "icon": "images/skills/nodejs.png", 42 | "title": "Nodejs" 43 | } 44 | ] 45 | }, 46 | { 47 | "title" : "Tools & Platforms", 48 | "items": [ 49 | { 50 | "icon": "images/skills/android-studio.png", 51 | "title": "Android Studio" 52 | }, 53 | { 54 | "icon": "images/skills/git.png", 55 | "title": "Git" 56 | }, 57 | { 58 | "icon": "images/skills/docker.png", 59 | "title": "Docker" 60 | } 61 | ] 62 | } 63 | ]} -------------------------------------------------------------------------------- /public/profile/social.json: -------------------------------------------------------------------------------- 1 | { 2 | "social": [ 3 | { 4 | "network" : "linkedin", 5 | "href": "https://linkedin.com/" 6 | }, 7 | { 8 | "network" : "github", 9 | "href": "https://github.com/mayankagarwal09" 10 | }, 11 | { 12 | "network" : "email", 13 | "href": "mailto:test@test.com" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | 2 | .App { 3 | text-align: center; 4 | align-items: center; 5 | justify-content: center; 6 | display: flex; 7 | height: 100vh; 8 | flex-direction: row; 9 | } 10 | 11 | .navbar-custom { 12 | font-size:large; 13 | } 14 | 15 | .navbar__link { 16 | margin-left: 0.75em; 17 | margin-right: 0.75em; 18 | font-size: 1em; 19 | cursor: pointer; 20 | text-decoration: none; 21 | letter-spacing: .1em; 22 | text-indent: .3em; 23 | border-bottom: 3px solid transparent; 24 | } 25 | 26 | .navbar__link::after { 27 | transition: all ease-in-out .2s; 28 | background: none repeat scroll 0 0; 29 | content: ""; 30 | display: block; 31 | margin-top: 2px; 32 | height: 3px; 33 | width: 0; 34 | } 35 | 36 | .navbar__link:hover::after { 37 | visibility: visible; 38 | width: 40%; 39 | } 40 | 41 | .navbar__link--active::after { 42 | transition: all ease-in-out .2s; 43 | width: 100%; 44 | } 45 | 46 | .navbar__link--active:hover::after { 47 | width: 100%; 48 | } 49 | 50 | .MainApp { 51 | margin-top: 8vh; 52 | height: 90vh; 53 | } 54 | 55 | .main { 56 | display: flex; 57 | flex-direction: column; 58 | height: 100%; 59 | } 60 | 61 | .section-content-container { 62 | display: flex; 63 | flex-direction: column; 64 | flex-grow: 1; 65 | justify-content: center; 66 | align-items: center; 67 | } 68 | 69 | .Typewriter { 70 | display: inline-block; 71 | } 72 | 73 | .Typewriter__wrapper { 74 | font-size: xx-large; 75 | font-weight: bold; 76 | } 77 | 78 | .Typewriter__cursor { 79 | font-size: xx-large; 80 | font-weight: bold; 81 | } 82 | 83 | section.timeline-card-content { 84 | justify-content: center; 85 | } 86 | 87 | section.timeline-card-content p.card-title { 88 | font-size: 1.5em; 89 | margin-top: 25px; 90 | } 91 | 92 | section.timeline-card-content p.card-sub-title { 93 | font-size: 1.25em; 94 | margin-top: 10px; 95 | } 96 | 97 | section.timeline-card-content div.card-description > p { 98 | font-size: 1.1em; 99 | margin-top: 10px; 100 | font-weight: 500; 101 | } 102 | 103 | .social { 104 | position: relative; 105 | margin-top: 60px; 106 | } 107 | 108 | 109 | @media only screen and (min-width: 768px) and (max-width: 992px) { 110 | 111 | .navbar__link { 112 | margin-left: 0.4em; 113 | margin-right: 0.4em; 114 | font-size: 0.9em; 115 | cursor: pointer; 116 | letter-spacing: .1em; 117 | text-indent: .2em; 118 | } 119 | } 120 | 121 | @media (max-width: 768px) { 122 | 123 | .navbar__link::after { 124 | background: none; 125 | content: ""; 126 | display: none; 127 | margin-top: 0; 128 | height: 0; 129 | width: 0; 130 | } 131 | 132 | .navbar__link--active::after { 133 | width: 0; 134 | } 135 | 136 | .navbar__link--active:hover::after { 137 | width: 0; 138 | } 139 | 140 | .navbar__link:hover::after { 141 | width: 0; 142 | } 143 | } 144 | 145 | .header { 146 | font-size: 3em; 147 | font-weight: bold; 148 | margin-bottom: 25px; 149 | } 150 | 151 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import 'bootstrap/dist/css/bootstrap.min.css'; 4 | import { BrowserRouter } from 'react-router-dom'; 5 | import { ThemeProvider } from 'styled-components'; 6 | import useDarkMode from 'use-dark-mode'; 7 | import AppContext from './AppContext'; 8 | import MainApp from './MainApp'; 9 | import GlobalStyles from './theme/GlobalStyles'; 10 | import { lightTheme, darkTheme } from './theme/themes'; 11 | 12 | function App() { 13 | window.matchMedia = null; 14 | const darkMode = useDarkMode(true); 15 | 16 | return ( 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 |
25 | 26 | 27 | ); 28 | } 29 | 30 | export default App; 31 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/AppContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const AppContext = React.createContext(); 4 | 5 | export default AppContext; 6 | -------------------------------------------------------------------------------- /src/MainApp.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, Suspense } from 'react'; 2 | import { Switch, Route } from 'react-router-dom'; 3 | import FallbackSpinner from './components/FallbackSpinner'; 4 | import NavBarWithRouter from './components/NavBar'; 5 | import Home from './components/Home'; 6 | import endpoints from './constants/endpoints'; 7 | 8 | function MainApp() { 9 | const [data, setData] = useState(null); 10 | 11 | useEffect(() => { 12 | fetch(endpoints.routes, { 13 | method: 'GET', 14 | }) 15 | .then((res) => res.json()) 16 | .then((res) => setData(res)) 17 | .catch((err) => err); 18 | }, []); 19 | 20 | return ( 21 |
22 | 23 |
24 | 25 | }> 26 | 27 | {data 28 | && data.sections.map((route) => { 29 | const SectionComponent = React.lazy(() => import('./components/' + route.component)); 30 | return ( 31 | ( 35 | 36 | )} 37 | /> 38 | ); 39 | })} 40 | 41 | 42 |
43 |
44 | ); 45 | } 46 | 47 | export default MainApp; 48 | -------------------------------------------------------------------------------- /src/components/About.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import ReactMarkdown from 'react-markdown'; 3 | import { Container, Col, Row } from 'react-bootstrap'; 4 | import PropTypes from 'prop-types'; 5 | import Fade from 'react-reveal'; 6 | import Header from './Header'; 7 | import endpoints from '../constants/endpoints'; 8 | import FallbackSpinner from './FallbackSpinner'; 9 | 10 | const styles = { 11 | introTextContainer: { 12 | margin: 10, 13 | flexDirection: 'column', 14 | whiteSpace: 'pre-wrap', 15 | textAlign: 'left', 16 | fontSize: '1.2em', 17 | fontWeight: 500, 18 | }, 19 | introImageContainer: { 20 | margin: 10, 21 | justifyContent: 'center', 22 | alignItems: 'center', 23 | display: 'flex', 24 | }, 25 | }; 26 | 27 | function About(props) { 28 | const { header } = props; 29 | const [data, setData] = useState(null); 30 | 31 | const parseIntro = (text) => ( 32 | 35 | ); 36 | 37 | useEffect(() => { 38 | fetch(endpoints.about, { 39 | method: 'GET', 40 | }) 41 | .then((res) => res.json()) 42 | .then((res) => setData(res)) 43 | .catch((err) => err); 44 | }, []); 45 | 46 | return ( 47 | <> 48 |
49 |
50 | 51 | {data 52 | ? ( 53 | 54 | 55 | 56 | {parseIntro(data.about)} 57 | 58 | 59 | profile 60 | 61 | 62 | 63 | ) 64 | : } 65 | 66 |
67 | 68 | ); 69 | } 70 | 71 | About.propTypes = { 72 | header: PropTypes.string.isRequired, 73 | }; 74 | 75 | export default About; 76 | -------------------------------------------------------------------------------- /src/components/Education.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState, useContext } from 'react'; 2 | import { Chrono } from 'react-chrono'; 3 | import { Container } from 'react-bootstrap'; 4 | import PropTypes from 'prop-types'; 5 | import Fade from 'react-reveal'; 6 | import { ThemeContext } from 'styled-components'; 7 | import endpoints from '../constants/endpoints'; 8 | import Header from './Header'; 9 | import FallbackSpinner from './FallbackSpinner'; 10 | import '../css/education.css'; 11 | 12 | function Education(props) { 13 | const theme = useContext(ThemeContext); 14 | const { header } = props; 15 | const [data, setData] = useState(null); 16 | const [width, setWidth] = useState('50vw'); 17 | const [mode, setMode] = useState('VERTICAL_ALTERNATING'); 18 | 19 | useEffect(() => { 20 | fetch(endpoints.education, { 21 | method: 'GET', 22 | }) 23 | .then((res) => res.json()) 24 | .then((res) => setData(res)) 25 | .catch((err) => err); 26 | 27 | if (window?.innerWidth < 576) { 28 | setMode('VERTICAL'); 29 | } 30 | 31 | if (window?.innerWidth < 576) { 32 | setWidth('90vw'); 33 | } else if (window?.innerWidth >= 576 && window?.innerWidth < 768) { 34 | setWidth('90vw'); 35 | } else if (window?.innerWidth >= 768 && window?.innerWidth < 1024) { 36 | setWidth('75vw'); 37 | } else { 38 | setWidth('50vw'); 39 | } 40 | }, []); 41 | 42 | return ( 43 | <> 44 |
45 | {data ? ( 46 | 47 |
48 | 49 | 64 |
65 | {data.education.map((education) => (education.icon ? ( 66 | {education.icon.alt} 71 | ) : null))} 72 |
73 | 74 | 75 |
76 | 77 | ) : } 78 | 79 | ); 80 | } 81 | 82 | Education.propTypes = { 83 | header: PropTypes.string.isRequired, 84 | }; 85 | 86 | export default Education; 87 | -------------------------------------------------------------------------------- /src/components/Experience.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState, useContext } from 'react'; 2 | import { Timeline, TimelineItem } from 'vertical-timeline-component-for-react'; 3 | import { Container } from 'react-bootstrap'; 4 | import ReactMarkdown from 'react-markdown'; 5 | import PropTypes from 'prop-types'; 6 | import { ThemeContext } from 'styled-components'; 7 | import Fade from 'react-reveal'; 8 | import Header from './Header'; 9 | import endpoints from '../constants/endpoints'; 10 | import FallbackSpinner from './FallbackSpinner'; 11 | import '../css/experience.css'; 12 | 13 | const styles = { 14 | ulStyle: { 15 | listStylePosition: 'outside', 16 | paddingLeft: 20, 17 | }, 18 | subtitleContainerStyle: { 19 | marginTop: 10, 20 | marginBottom: 10, 21 | }, 22 | subtitleStyle: { 23 | display: 'inline-block', 24 | }, 25 | inlineChild: { 26 | display: 'inline-block', 27 | }, 28 | itemStyle: { 29 | marginBottom: 10, 30 | }, 31 | }; 32 | 33 | function Experience(props) { 34 | const theme = useContext(ThemeContext); 35 | const { header } = props; 36 | const [data, setData] = useState(null); 37 | 38 | useEffect(() => { 39 | fetch(endpoints.experiences, { 40 | method: 'GET', 41 | }) 42 | .then((res) => res.json()) 43 | .then((res) => setData(res.experiences)) 44 | .catch((err) => err); 45 | }, []); 46 | 47 | return ( 48 | <> 49 |
50 | 51 | {data 52 | ? ( 53 |
54 | 55 | 58 | {data.map((item) => ( 59 | 60 | 67 |

68 | {item.title} 69 |

70 |
71 |

72 | {item.subtitle} 73 |

74 | {item.workType && ( 75 |
76 |  · 77 | {' '} 78 | {item.workType} 79 |
80 | )} 81 |
82 |
    83 | {item.workDescription.map((point) => ( 84 |
    85 |
  • 86 | 92 |
    • 93 |
    94 |
    95 | ))} 96 |
97 | 98 | 99 | ))} 100 | 101 | 102 |
103 | ) : } 104 | 105 | ); 106 | } 107 | 108 | Experience.propTypes = { 109 | header: PropTypes.string.isRequired, 110 | }; 111 | 112 | export default Experience; 113 | -------------------------------------------------------------------------------- /src/components/FallbackSpinner.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Spinner } from 'react-bootstrap'; 3 | 4 | const styles = { 5 | spinnerContainerStyle: { 6 | display: 'flex', 7 | justifyContent: 'center', 8 | alignItems: 'center', 9 | height: '100%', 10 | }, 11 | }; 12 | 13 | function FallbackSpinner() { 14 | return ( 15 |
16 | 17 |
18 | ); 19 | } 20 | 21 | export default FallbackSpinner; 22 | -------------------------------------------------------------------------------- /src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import '../App.css'; 4 | 5 | function Header(props) { 6 | const { title } = props; 7 | return
{title}
; 8 | } 9 | 10 | Header.propTypes = { 11 | title: PropTypes.string.isRequired, 12 | }; 13 | 14 | export default Header; 15 | -------------------------------------------------------------------------------- /src/components/Home.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import Typewriter from 'typewriter-effect'; 3 | import Fade from 'react-reveal'; 4 | import endpoints from '../constants/endpoints'; 5 | import Social from './Social'; 6 | import FallbackSpinner from './FallbackSpinner'; 7 | 8 | const styles = { 9 | nameStyle: { 10 | fontSize: '5em', 11 | }, 12 | inlineChild: { 13 | display: 'inline-block', 14 | }, 15 | mainContainer: { 16 | height: '100%', 17 | display: 'flex', 18 | flexDirection: 'column', 19 | justifyContent: 'center', 20 | alignItems: 'center', 21 | }, 22 | }; 23 | 24 | function Home() { 25 | const [data, setData] = useState(null); 26 | 27 | useEffect(() => { 28 | fetch(endpoints.home, { 29 | method: 'GET', 30 | }) 31 | .then((res) => res.json()) 32 | .then((res) => setData(res)) 33 | .catch((err) => err); 34 | }, []); 35 | 36 | return data ? ( 37 | 38 |
39 |

{data?.name}

40 |
41 |

I'm 

42 | 49 |
50 | 51 |
52 | 53 | ) : ; 54 | } 55 | 56 | export default Home; 57 | -------------------------------------------------------------------------------- /src/components/NavBar.jsx: -------------------------------------------------------------------------------- 1 | import { Navbar, Nav, Container } from 'react-bootstrap'; 2 | import React, { useEffect, useState, useContext } from 'react'; 3 | import { withRouter } from 'react-router'; 4 | import { NavLink } from 'react-router-dom'; 5 | import styled, { ThemeContext } from 'styled-components'; 6 | import endpoints from '../constants/endpoints'; 7 | import ThemeToggler from './ThemeToggler'; 8 | 9 | const styles = { 10 | logoStyle: { 11 | width: 50, 12 | height: 40, 13 | }, 14 | }; 15 | 16 | const ExternalNavLink = styled.a` 17 | color: ${(props) => props.theme.navbarTheme.linkColor}; 18 | &:hover { 19 | color: ${(props) => props.theme.navbarTheme.linkHoverColor}; 20 | } 21 | &::after { 22 | background-color: ${(props) => props.theme.accentColor}; 23 | } 24 | `; 25 | 26 | const InternalNavLink = styled(NavLink)` 27 | color: ${(props) => props.theme.navbarTheme.linkColor}; 28 | &:hover { 29 | color: ${(props) => props.theme.navbarTheme.linkHoverColor}; 30 | } 31 | &::after { 32 | background-color: ${(props) => props.theme.accentColor}; 33 | } 34 | &.navbar__link--active { 35 | color: ${(props) => props.theme.navbarTheme.linkActiveColor}; 36 | } 37 | `; 38 | 39 | const NavBar = () => { 40 | const theme = useContext(ThemeContext); 41 | const [data, setData] = useState(null); 42 | const [expanded, setExpanded] = useState(false); 43 | 44 | useEffect(() => { 45 | fetch(endpoints.navbar, { 46 | method: 'GET', 47 | }) 48 | .then((res) => res.json()) 49 | .then((res) => setData(res)) 50 | .catch((err) => err); 51 | }, []); 52 | 53 | return ( 54 | 62 | 63 | {data?.logo && ( 64 | 65 | main logo 75 | 76 | )} 77 | setExpanded(!expanded)} 80 | /> 81 | 82 |