├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── screenshots │ ├── blogs-screen.png │ ├── dev-screen.png │ ├── home-screen.png │ ├── projects-screen.png │ └── achievements-screen.png ├── manifest.json └── index.html ├── src ├── assets │ ├── fonts │ │ ├── Pixel.otf │ │ └── Streamster.ttf │ └── images │ │ └── profile.jpg ├── components │ ├── General │ │ └── Button.js │ ├── Splash │ │ ├── Intro.js │ │ └── ParticleBackground.js │ └── Portfolio │ │ ├── About │ │ ├── About.js │ │ ├── Education.js │ │ ├── Skills.js │ │ └── Info.js │ │ ├── Blogs │ │ ├── Blog.js │ │ └── Blogs.js │ │ ├── Projects │ │ ├── Project.js │ │ └── Projects.js │ │ ├── Achievements │ │ └── Achievements.js │ │ ├── Portfolio.js │ │ └── Nav.js ├── reportWebVitals.js ├── index.js ├── App.js └── index.css ├── .gitignore ├── package.json └── README.md /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamyajat/retro-portfolio-website/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamyajat/retro-portfolio-website/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamyajat/retro-portfolio-website/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/assets/fonts/Pixel.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamyajat/retro-portfolio-website/HEAD/src/assets/fonts/Pixel.otf -------------------------------------------------------------------------------- /src/assets/images/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamyajat/retro-portfolio-website/HEAD/src/assets/images/profile.jpg -------------------------------------------------------------------------------- /src/assets/fonts/Streamster.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamyajat/retro-portfolio-website/HEAD/src/assets/fonts/Streamster.ttf -------------------------------------------------------------------------------- /public/screenshots/blogs-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamyajat/retro-portfolio-website/HEAD/public/screenshots/blogs-screen.png -------------------------------------------------------------------------------- /public/screenshots/dev-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamyajat/retro-portfolio-website/HEAD/public/screenshots/dev-screen.png -------------------------------------------------------------------------------- /public/screenshots/home-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamyajat/retro-portfolio-website/HEAD/public/screenshots/home-screen.png -------------------------------------------------------------------------------- /public/screenshots/projects-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamyajat/retro-portfolio-website/HEAD/public/screenshots/projects-screen.png -------------------------------------------------------------------------------- /public/screenshots/achievements-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamyajat/retro-portfolio-website/HEAD/public/screenshots/achievements-screen.png -------------------------------------------------------------------------------- /src/components/General/Button.js: -------------------------------------------------------------------------------- 1 | const Button = ({ text, onClick, design }) => { 2 | return ( 3 | <> 4 |
5 |

{text}

6 |
7 | 8 | ); 9 | }; 10 | 11 | Button.defaultProps = { 12 | design: "btn", 13 | }; 14 | 15 | export default Button; 16 | -------------------------------------------------------------------------------- /.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 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/components/Splash/Intro.js: -------------------------------------------------------------------------------- 1 | import Button from "../General/Button"; 2 | 3 | const Intro = ({ name, designation, onExplore }) => { 4 | 5 | return ( 6 |
7 |

{name}

8 |

{designation}

9 |
11 | ); 12 | }; 13 | 14 | export default Intro; 15 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/components/Portfolio/About/About.js: -------------------------------------------------------------------------------- 1 | import Education from "./Education" 2 | import Info from "./Info" 3 | import Skills from "./Skills" 4 | import ReactTooltip from "react-tooltip"; 5 | 6 | const About = ({openMenu}) => { 7 | return ( 8 |
9 | 10 | 11 | 12 | 13 |
14 | ); 15 | }; 16 | 17 | export default About; 18 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /src/components/Portfolio/Blogs/Blog.js: -------------------------------------------------------------------------------- 1 | import Button from "../../General/Button"; 2 | 3 | const Blog = ({ blog }) => { 4 | const openBlog = () => { 5 | window.open(blog.link, "_blank"); 6 | }; 7 | 8 | return ( 9 |
10 |

{blog.title}

11 |

{blog.description}

12 | 13 |
19 | ); 20 | }; 21 | 22 | export default Blog; 23 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/components/Portfolio/Projects/Project.js: -------------------------------------------------------------------------------- 1 | import Button from "../../General/Button"; 2 | 3 | const Project = ({ project }) => { 4 | const openProject = () => { 5 | window.open(project.link, "_blank"); 6 | }; 7 | 8 | return ( 9 |
10 |

{project.title}

11 |

{project.description}

12 | 13 |
19 | ); 20 | }; 21 | 22 | Project.defaultProps = {}; 23 | 24 | export default Project; 25 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Yajat Malhotra 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import Intro from "./components/Splash/Intro"; 2 | import ParticleBackground from "./components/Splash/ParticleBackground"; 3 | import Portfolio from "./components/Portfolio/Portfolio"; 4 | import { useState } from "react"; 5 | 6 | const App = () => { 7 | const [portfolio, setPortfolio] = useState(false); 8 | const openPortfolio = () => { 9 | setPortfolio(!portfolio); 10 | }; 11 | 12 | return ( 13 | <> 14 | 15 | 20 | {portfolio ? : ""} 21 | 22 | ); 23 | }; 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /src/components/Portfolio/About/Education.js: -------------------------------------------------------------------------------- 1 | const Education = () => { 2 | return ( 3 |
4 |

Education

5 |
6 |
7 |

VELLORE INSTITUTE OF TECHNOLOGY

8 |

Vellore, India

9 |
10 |

11 | Computer Science & Engineering 12 |

13 |

Batch of 2024

14 | {/*

CGPA:

*/} 15 |
16 |
17 |

Greenwood High International School

18 |

Bangalore, India

19 |
20 |

Batch of 2020

21 |

12th ISC

22 |

10th ICSE

23 |
24 |
25 |
26 | ); 27 | }; 28 | 29 | export default Education; 30 | -------------------------------------------------------------------------------- /src/components/Portfolio/Achievements/Achievements.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | const Achievements = ({openMenu}) => { 3 | const [achievements] = useState([ 4 | "Best Freshers Award at DevSoc (2021).", 5 | "Overall 2nd Winner at DevSpace (2021).", 6 | "Winner at HackOff 3.0 in AI/Data Science (2020).", 7 | "2nd Winner at VIT Hack in Mobility & Automation track with MOVEL AI as the case partner (2020).", 8 | "Awarded runner up in the Asian level of International Space Settlement Design Competition (2018).", 9 | "Won a lot of inter-school Tug of War matches (2018-19).", 10 | ]); 11 | return ( 12 |
13 |
14 |

Achievements

15 |
16 |
    17 | {achievements.map((achievement) => ( 18 |
  • {achievement}
    • 19 | ))} 20 |
21 |
22 |
23 | ); 24 | }; 25 | 26 | export default Achievements; 27 | -------------------------------------------------------------------------------- /src/components/Portfolio/Portfolio.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import About from "./About/About"; 3 | import Achievements from "./Achievements/Achievements"; 4 | import Blogs from "./Blogs/Blogs"; 5 | import Nav from "./Nav"; 6 | import Projects from "./Projects/Projects"; 7 | 8 | const Portfolio = ({ onClose }) => { 9 | const [page, setPage] = useState("about"); 10 | const [openMenu, setOpenMenu] = useState(false); 11 | 12 | const showMenu = () => { 13 | setOpenMenu(!openMenu); 14 | }; 15 | 16 | const changePage = (p) => { 17 | setPage(p); 18 | }; 19 | return ( 20 | <> 21 |
22 |
28 | 29 | ); 30 | }; 31 | 32 | export default Portfolio; 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "retro-portfolio", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.1.10", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-icons": "^4.2.0", 12 | "react-particles-js": "^3.5.3", 13 | "react-scripts": "4.0.3", 14 | "react-tooltip": "^4.2.21", 15 | "tsparticles": "^1.35.0", 16 | "web-vitals": "^1.0.1" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/components/Splash/ParticleBackground.js: -------------------------------------------------------------------------------- 1 | import Particles from "react-particles-js"; 2 | 3 | const ParticleBackground = () => { 4 | return ( 5 | <> 6 | 55 | 56 | ); 57 | }; 58 | 59 | export default ParticleBackground; 60 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Retro Portfolio 2 | 3 | ![Home Screen](./public/screenshots/home-screen.png) 4 | 5 | ### Screenshots 6 | ![Summary Screen](./public/screenshots/dev-screen.png) 7 | ![Projects Screen](./public/screenshots/projects-screen.png) 8 | ![Projects Screen](./public/screenshots/blogs-screen.png) 9 | ![Projects Screen](./public/screenshots/achievements-screen.png) 10 | 11 | [Demo link](https://retro-portfolio.pages.dev/) 12 | 13 | ### Before Running 14 | Have the following installed on your computer: 15 | 16 | - [Git](https://git-scm.com/downloads) 17 | - [Node.js](https://nodejs.org/) 18 | - [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) 19 | 20 | ### Cloning the project 21 | Using your terminal, run the following command in the directory where you want the project: 22 | 23 | - SSH: `git@github.com:iamyajat/retro-portfolio-website.git` 24 | - HTTP: `https://github.com/iamyajat/retro-portfolio-website.git` 25 | 26 | ### Running the Project 27 | First, install the depedencies in the project! In a terminal, make sure you are in the directory of the project and run (depending on your package manager): 28 | 29 | | npm | yarn | 30 | | ----------- | ----------- | 31 | | `npm install` | `yarn` | 32 | 33 | Next, simply run the project with the following command in your terminal (depending on your package manager): 34 | 35 | | npm | yarn | 36 | | ----------- | ----------- | 37 | | `npm start` | `yarn start` | 38 | 39 | This will run the project at [http://localhost:3000](http://localhost:3000). To close the project at any time, press `CTRL+C` in your terminal. -------------------------------------------------------------------------------- /src/components/Portfolio/Nav.js: -------------------------------------------------------------------------------- 1 | import { FaTimes } from "react-icons/fa"; 2 | import Button from "../General/Button"; 3 | const Nav = ({ openMenu, onClose, onChange, page, showMenu }) => { 4 | return ( 5 | <> 6 | 36 | 37 | ); 38 | }; 39 | 40 | export default Nav; 41 | -------------------------------------------------------------------------------- /src/components/Portfolio/Blogs/Blogs.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { FaMediumM } from "react-icons/fa"; 3 | import Blog from "./Blog"; 4 | 5 | const Blogs = ({openMenu}) => { 6 | const [blogs] = useState([ 7 | { 8 | id: 1, 9 | title: "INTUITION BEHIND GANS", 10 | description: 11 | "GANs or Generative Adversarial Networks are a type of machine learning framework. It has two neural networks which compete against each other in a game. One is a generator, and the other is a discriminator.", 12 | link: "https://iamyajat.medium.com/intuition-for-gans-generative-adversarial-networks-beginner-friendly-4f38af40b9e1", 13 | show: true, 14 | }, 15 | { 16 | id: 5, 17 | title: "ABCD: EFGHIJKLMG HIJKLMNOPQ RSTUVWXYZ", 18 | description: "", 19 | link: "", 20 | show: false, 21 | }, 22 | { 23 | id: 6, 24 | title: "ABCD: EFGHIJKLMG HIJKLMNOPQ RSTUVWXYZ", 25 | description: "", 26 | link: "", 27 | show: false, 28 | }, 29 | ]); 30 | 31 | return ( 32 | <> 33 |
34 |
35 | {blogs.map((blog) => ( 36 | 37 | ))} 38 |
39 |
40 |
41 | 47 | 48 | 49 |
50 | 51 | ); 52 | }; 53 | export default Blogs; 54 | -------------------------------------------------------------------------------- /src/components/Portfolio/About/Skills.js: -------------------------------------------------------------------------------- 1 | import { 2 | SiPython, 3 | SiTensorflow, 4 | SiAndroid, 5 | SiAndroidstudio, 6 | SiKotlin, 7 | SiJava, 8 | SiHtml5, 9 | SiCss3, 10 | SiJavascript, 11 | SiReact, 12 | SiCplusplus, 13 | SiC, 14 | } from "react-icons/si"; 15 | import { useState } from "react"; 16 | 17 | const Skills = () => { 18 | const [certifications] = useState([ 19 | "Neural Networks and Deep Learning - deeplearning.ai", 20 | "Improving Deep Neural Networks: Hyperparameter tuning, Regularization and Optimization - deeplearning.ai", 21 | "Structuring Machine Learning Projects - deeplearning.ai", 22 | "Convolutional Neural Networks - deeplearning.ai", 23 | "Introduction to AI - University of Helsinki", 24 | "Microsoft AI Classroom Series - Microsoft", 25 | "MATLAB Onramp - MathWorks", 26 | "Getting Started: Create and Manage Cloud Resources - Qwiklabs", 27 | ]); 28 | 29 | const [skills] = useState([ 30 | , 31 | , 32 | , 33 | , 34 | , 35 | , 36 | , 37 | , 38 | , 39 | , 40 | , 41 | , 42 | ]); 43 | 44 | return ( 45 |
46 |

Skills

47 |
    48 | {skills.map((skill) => ( 49 |
  • {skill}
    • 50 | ))} 51 |
52 |
53 |

Certifications

54 |
    55 | {certifications.map((certification) => ( 56 |
  • ▪ {certification}
    • 57 | ))} 58 |
59 |
60 | ); 61 | }; 62 | 63 | export default Skills; 64 | -------------------------------------------------------------------------------- /src/components/Portfolio/About/Info.js: -------------------------------------------------------------------------------- 1 | import profile_pic from "../../../assets/images/profile.jpg"; 2 | import { 3 | FaLinkedinIn, 4 | FaGithub, 5 | FaKaggle, 6 | FaTwitter, 7 | FaMediumM, 8 | } from "react-icons/fa"; 9 | const Info = () => { 10 | return ( 11 |
12 |
13 | Yajat Malhotra 14 |
15 |
16 |

Yajat Malhotra

17 |
18 |

19 | Hey there! I am freshman at Vellore Institute of 20 | Technology. My career aspiration is to provide digital solutions for 21 | real-life human and business problems utilizing my knowledge in AI and 22 | Machine Learning, and Android Development. Other than tech, I enjoy 23 | photography and film-making. 24 |

25 |
26 | 68 |
69 |
70 | ); 71 | }; 72 | 73 | export default Info; 74 | -------------------------------------------------------------------------------- /src/components/Portfolio/Projects/Projects.js: -------------------------------------------------------------------------------- 1 | import Project from "./Project"; 2 | import { useState } from "react"; 3 | import { FaGithub } from "react-icons/fa"; 4 | 5 | const Projects = ({openMenu}) => { 6 | const [projects] = useState([ 7 | { 8 | id: 1, 9 | title: "SMART BOOKMARK, API AND ML MODEL", 10 | description: 11 | "An API which can classify website URLs into 10 different categories. The API was made using FastAPI and the model was made in Tensorflow using DistilBert Transformer from Hugging Face.", 12 | link: "https://github.com/iamyajat/Smart-Bookmark-API", 13 | show: true, 14 | }, 15 | { 16 | id: 2, 17 | title: "WOMENTECHIES'21 ANDROID APP", 18 | description: 19 | "An Android app for the event WomenTechies'21 which can send realtime notifications, show in-app announcements, Instagram highlights and timeline of the event, and other info.", 20 | link: "https://play.google.com/store/apps/details?id=com.dscvit.wt21", 21 | show: true, 22 | }, 23 | { 24 | id: 3, 25 | title: "YAZAFIT: BMI & WATER TRACKER", 26 | description: 27 | "Developed an Android app to solve the problem of dehydration and weight abnormalities in people by keeping track of their water intake and BMI.", 28 | link: "https://yazafit.iamyajat.co/", 29 | show: true, 30 | }, 31 | { 32 | id: 4, 33 | title: "SPACEWEIGHT: YOUR WEIGHT ON OTHER WORLDS", 34 | description: 35 | "Developed an Android app to find your weight on other planets, for example, Venus, Jupiter, etc.", 36 | link: "https://spaceweight.iamyajat.co/", 37 | show: true, 38 | }, 39 | { 40 | id: 5, 41 | title: "ABCD: EFGHIJKLMG HIJKLMNOPQ RSTUVWXYZ", 42 | description: "", 43 | link: "", 44 | show: false, 45 | }, 46 | { 47 | id: 6, 48 | title: "ABCD: EFGHIJKLMG HIJKLMNOPQ RSTUVWXYZ", 49 | description: "", 50 | link: "", 51 | show: false, 52 | }, 53 | ]); 54 | 55 | return ( 56 | <> 57 |
58 |
59 | {projects.map((project) => ( 60 | 61 | ))} 62 |
63 |
64 |
65 | 71 | 72 | 73 |
74 | 75 | ); 76 | }; 77 | 78 | export default Projects; 79 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Pixel"; 3 | src: local("Pixel"), url(./assets/fonts/Pixel.otf) format("opentype"); 4 | /* other formats include: 'woff2', 'truetype, 'opentype', 'embedded-opentype', and 'svg' */ 5 | } 6 | 7 | @font-face { 8 | font-family: "Streamster"; 9 | src: local("Streamster"), 10 | url(./assets/fonts/Streamster.ttf) format("truetype"); 11 | } 12 | 13 | :root { 14 | --pink: #f37298; 15 | --hot-pink: #ff00aa; 16 | --deep-blue: #0d294e; 17 | --blue: #4375b8; 18 | --grey: #495057; 19 | } 20 | 21 | * { 22 | margin: 0; 23 | padding: 0; 24 | border: 0; 25 | outline: 0; 26 | font-size: 100%; 27 | vertical-align: baseline; 28 | background: transparent; 29 | font-family: "Pixel"; 30 | } 31 | 32 | ::-webkit-scrollbar { 33 | width: 10px; 34 | } 35 | ::-webkit-scrollbar-track { 36 | background: white; 37 | } 38 | ::-webkit-scrollbar-thumb { 39 | background: var(--grey); 40 | border-radius: 0px; 41 | } 42 | ::-webkit-scrollbar-thumb:hover { 43 | background: var(--deep-blue); 44 | } 45 | 46 | ::-moz-selection { 47 | /* Code for Firefox */ 48 | color: white; 49 | background: var(--pink); 50 | } 51 | 52 | ::selection { 53 | color: white; 54 | background: var(--pink); 55 | } 56 | 57 | html { 58 | height: 100%; 59 | } 60 | 61 | body { 62 | background: linear-gradient(135deg, var(--deep-blue), var(--blue)); 63 | background-repeat: no-repeat; 64 | background-size: 150% 150%; 65 | animation: gradient 15s ease infinite; 66 | } 67 | 68 | h1 { 69 | font-size: 18px; 70 | } 71 | 72 | p { 73 | font-family: monospace; 74 | font-size: 16px; 75 | } 76 | 77 | @keyframes gradient { 78 | 0% { 79 | background-position: 0% 50%; 80 | } 81 | 50% { 82 | background-position: 100% 50%; 83 | } 84 | 100% { 85 | background-position: 0% 50%; 86 | } 87 | } 88 | 89 | .name-title { 90 | margin: 0 0 0 -12px; 91 | position: absolute; 92 | top: 30%; 93 | left: 50%; 94 | -ms-transform: translate(-50%, -30%); 95 | transform: translate(-50%, -30%); 96 | color: var(--pink); 97 | width: 80%; 98 | font-family: "Streamster"; 99 | font-size: 10rem; 100 | text-align: center; 101 | -webkit-user-select: none; 102 | -moz-user-select: none; 103 | -ms-user-select: none; 104 | user-select: none; 105 | } 106 | 107 | .name-designation { 108 | margin: 0; 109 | position: absolute; 110 | top: 65%; 111 | left: 50%; 112 | -ms-transform: translate(-50%, -60%); 113 | transform: translate(-50%, -60%); 114 | color: white; 115 | width: 80%; 116 | font-size: 2.5rem; 117 | text-align: center; 118 | opacity: 0.85; 119 | -webkit-user-select: none; 120 | -moz-user-select: none; 121 | -ms-user-select: none; 122 | user-select: none; 123 | } 124 | 125 | .intro-page { 126 | width: 100%; 127 | height: 100%; 128 | align-items: center; 129 | } 130 | 131 | .particles { 132 | position: absolute !important; 133 | width: 100%; 134 | height: 100%; 135 | } 136 | 137 | .menu-button { 138 | display: none; 139 | } 140 | 141 | .btn { 142 | margin: 0; 143 | position: absolute; 144 | bottom: 10%; 145 | left: 50%; 146 | -ms-transform: translate(-50%, -60%); 147 | transform: translate(-50%, -60%); 148 | background: transparent; 149 | color: white; 150 | padding: 15px 32px; 151 | cursor: pointer; 152 | opacity: 0.3; 153 | border: 2px solid white; 154 | transition: 0.3s; 155 | -webkit-user-select: none; 156 | -moz-user-select: none; 157 | -ms-user-select: none; 158 | user-select: none; 159 | } 160 | 161 | .btn h3 { 162 | font-size: 16px; 163 | font-weight: normal; 164 | } 165 | 166 | .btn:hover { 167 | background-color: var(--pink); 168 | opacity: 0.9; 169 | } 170 | 171 | .portfolio-card { 172 | position: absolute; 173 | top: 50%; 174 | left: 50%; 175 | -ms-transform: translate(-50%, -50%); 176 | transform: translate(-50%, -50%); 177 | width: 90vw; 178 | height: 90vh; 179 | background-color: #f37299c5; 180 | backdrop-filter: blur(10px); 181 | box-shadow: 3px 3px 60px rgba(0, 0, 0, 0.24); 182 | border: 2px solid white; 183 | transition: 1s; 184 | } 185 | 186 | .nav-bar { 187 | height: 40px; 188 | background-color: white; 189 | list-style: none; 190 | display: flex; 191 | justify-content: space-between; 192 | padding: 10px; 193 | position: static; 194 | top: 0; 195 | } 196 | 197 | .nav-links { 198 | list-style: none; 199 | display: flex; 200 | width: fit-content; 201 | } 202 | 203 | .nav-links li { 204 | margin: 0 10px; 205 | padding: 10px; 206 | } 207 | 208 | .nav-links li span { 209 | text-decoration: none; 210 | flex: 1; 211 | text-align: center; 212 | font-weight: 600; 213 | color: black; 214 | transition: all 0.2s ease; 215 | padding-bottom: 27px; 216 | cursor: pointer; 217 | -webkit-user-select: none; 218 | -moz-user-select: none; 219 | -ms-user-select: none; 220 | user-select: none; 221 | } 222 | 223 | .nav-links li :hover { 224 | color: var(--pink); 225 | } 226 | 227 | .nav-links li span h1 { 228 | font-size: 20px; 229 | } 230 | 231 | .nav-active span h1 { 232 | font-size: 20px; 233 | color: var(--pink); 234 | /* font-weight: normal; 235 | text-shadow: -1px 0 var(--pink), 0 1px var(--deep-blue), 1px 0 var(--deep-blue), 0 -1px var(--deep-blue); */ 236 | } 237 | 238 | .close-btn { 239 | padding: 10px; 240 | height: 25px; 241 | width: 25px; 242 | cursor: pointer; 243 | } 244 | 245 | .close-btn:hover { 246 | color: var(--pink); 247 | } 248 | 249 | .close-btn path :hover { 250 | stroke: black; 251 | stroke-width: 30px; 252 | } 253 | 254 | .portfolio-section { 255 | position: absolute; 256 | top: calc(50% + 30px); 257 | left: 50%; 258 | -ms-transform: translate(-50%, -50%); 259 | transform: translate(-50%, -50%); 260 | width: 90vw; 261 | height: calc(90vh - 60px); 262 | overflow-y: auto; 263 | } 264 | 265 | .info-card { 266 | margin: 10px auto; 267 | padding: 50px; 268 | width: 78vw; 269 | background-color: white; 270 | display: flex; 271 | justify-content: space-between; 272 | } 273 | 274 | .profile-pic { 275 | border-radius: 50%; 276 | width: 200px; 277 | height: 200px; 278 | object-fit: cover; 279 | -webkit-user-select: none; 280 | -moz-user-select: none; 281 | -ms-user-select: none; 282 | user-select: none; 283 | } 284 | 285 | .about-me { 286 | text-align: right; 287 | vertical-align: top; 288 | padding-left: 50px; 289 | line-height: 1.6; 290 | } 291 | 292 | .social-icons .social-icon { 293 | text-decoration: none; 294 | display: inline-flex; 295 | align-items: center; 296 | justify-content: center; 297 | height: 3.5rem; 298 | width: 3.5rem; 299 | background-color: var(--grey); 300 | color: white; 301 | border-radius: 100%; 302 | font-size: 1.5rem; 303 | margin: 1rem 1.5rem 0 0; 304 | } 305 | 306 | .social-icons .social-icon:last-child { 307 | margin-right: 0; 308 | } 309 | 310 | .social-icons .social-icon:hover { 311 | background-color: var(--pink); 312 | } 313 | 314 | .education-card { 315 | margin: 10px auto; 316 | padding: 50px; 317 | width: 78vw; 318 | background-color: white; 319 | } 320 | 321 | .education-info { 322 | margin: auto; 323 | display: flex; 324 | justify-content: space-between; 325 | } 326 | 327 | .school-info { 328 | width: 50%; 329 | padding: 20px; 330 | margin: 20px 10px 0 0; 331 | border: 1px solid var(--grey); 332 | line-height: 1.6; 333 | } 334 | 335 | .skills-card { 336 | margin: 10px auto; 337 | padding: 50px; 338 | width: 78vw; 339 | background-color: white; 340 | } 341 | 342 | .list-inline { 343 | padding-left: 0; 344 | list-style: none; 345 | } 346 | 347 | .list-inline-item { 348 | display: inline-block; 349 | } 350 | 351 | .list-inline-item:not(:last-child) { 352 | margin-right: 1rem; 353 | } 354 | 355 | .dev-icons { 356 | margin: 20px 0 0 0; 357 | font-size: 3rem; 358 | } 359 | 360 | .ic-but { 361 | color: var(--grey); 362 | opacity: 0.9; 363 | } 364 | 365 | .ic-but:hover { 366 | color: var(--pink); 367 | opacity: 0.9; 368 | } 369 | 370 | .tooltip.__react_component_tooltip.place-bottom::after { 371 | border-bottom: 0 solid var(--pink) !important; 372 | } 373 | 374 | .cert-heading { 375 | margin: 10px 0 10px 0; 376 | } 377 | 378 | .cert-list li { 379 | font-family: monospace; 380 | line-height: 1.6; 381 | font-size: 14px; 382 | list-style-type: none; 383 | } 384 | 385 | .card-view { 386 | margin: 10px; 387 | display: flex; 388 | flex-wrap: wrap; 389 | justify-content: center; 390 | } 391 | 392 | .project-card { 393 | margin: 0px 5px 10px 5px; 394 | min-width: 300px; 395 | max-width: 27%; 396 | padding: 30px; 397 | background-color: white; 398 | } 399 | 400 | .project-card h1 { 401 | font-size: 17px; 402 | margin: 0 0 15px 0; 403 | font-weight: normal; 404 | } 405 | 406 | .project-card p { 407 | margin: 0 0 20px 0; 408 | line-height: 1.6; 409 | } 410 | 411 | .project-btn { 412 | width: fit-content; 413 | margin: auto; 414 | background: transparent; 415 | color: var(--pink); 416 | padding: 10px 20px; 417 | font-size: 16px; 418 | cursor: pointer; 419 | border: 2px solid var(--pink); 420 | transition: 0.3s; 421 | -webkit-user-select: none; 422 | -moz-user-select: none; 423 | -ms-user-select: none; 424 | user-select: none; 425 | } 426 | 427 | .project-btn h3 { 428 | font-weight: normal; 429 | } 430 | 431 | .project-btn:hover { 432 | background-color: var(--pink); 433 | opacity: 0.9; 434 | color: white !important; 435 | } 436 | 437 | .hide-btn { 438 | display: none; 439 | height: 0px; 440 | } 441 | 442 | .hide-card { 443 | visibility: hidden; 444 | height: 0px; 445 | } 446 | 447 | .hide-card p { 448 | height: 0; 449 | } 450 | 451 | .hide-card h1 { 452 | height: 0px; 453 | } 454 | 455 | .github-card { 456 | position: absolute; 457 | bottom: 15px; 458 | right: 20px; 459 | background-color: transparent; 460 | } 461 | 462 | .github-icons .github-icon { 463 | text-decoration: none; 464 | display: inline-flex; 465 | align-items: center; 466 | justify-content: center; 467 | height: 3.5rem; 468 | width: 3.5rem; 469 | background-color: var(--grey); 470 | color: white; 471 | border-radius: 50%; 472 | font-size: 1.5rem; 473 | margin-left: 1.5rem; 474 | margin-top: 1rem; 475 | } 476 | 477 | .github-icons .github-icon:last-child { 478 | margin-right: 0; 479 | } 480 | 481 | .github-icons .github-icon:hover { 482 | background-color: var(--deep-blue); 483 | } 484 | 485 | @media screen and (max-device-width: 480px) and (orientation: portrait) { 486 | .portfolio-card { 487 | top: 55%; 488 | } 489 | } 490 | 491 | @media only screen and (max-width: 1100px) { 492 | .name-title { 493 | top: 35%; 494 | font-size: 8rem; 495 | } 496 | .name-designation { 497 | font-size: 2rem; 498 | } 499 | .btn { 500 | padding: 12px 24px; 501 | font-size: 14px; 502 | } 503 | } 504 | 505 | @media only screen and (max-width: 826px) { 506 | .name-title { 507 | top: 40%; 508 | font-size: 6rem; 509 | } 510 | .name-designation { 511 | top: 65%; 512 | font-size: 1.5rem; 513 | } 514 | .btn { 515 | padding: 10px 20px; 516 | font-size: 12px; 517 | } 518 | 519 | .about-me { 520 | margin-top: 20px; 521 | padding-left: 0; 522 | text-align: center; 523 | } 524 | 525 | .achievements-heading, .education-heading, .skills-heading { 526 | padding: 20px 0 0 10px; 527 | } 528 | 529 | .cert-heading { 530 | margin: 0 0 20px 10px; 531 | } 532 | 533 | .cert-list { 534 | padding: 0 0 20px 0; 535 | } 536 | 537 | .cert-list li { 538 | padding: 0 10px; 539 | } 540 | 541 | .dev-icons { 542 | display: block; 543 | margin-top: 0; 544 | padding: 20px 10px 0 10px; 545 | } 546 | 547 | .education-card, .info-card, .skills-card { 548 | padding: 0; 549 | width: 91%; 550 | } 551 | 552 | .education-info { 553 | display: block; 554 | padding: 20px 10px; 555 | } 556 | 557 | .info-card { 558 | display: block; 559 | width: 91%; 560 | } 561 | 562 | .list-inline-item { 563 | margin-left: 1rem; 564 | } 565 | 566 | .menu-button { 567 | cursor: pointer; 568 | display: block; 569 | font-size: 20px; 570 | font-weight: 600; 571 | height: 30px; 572 | margin: 0 10px; 573 | padding: 10px; 574 | } 575 | 576 | .menu-open-true { 577 | height: 230px; 578 | } 579 | 580 | .nav-links { 581 | display: block; 582 | } 583 | 584 | .nav-links li span { 585 | text-align: left; 586 | } 587 | 588 | .opened-menu-true { 589 | top: calc(50% + 130px); 590 | height: calc(68vh - 60px); 591 | } 592 | 593 | .profile-description { 594 | padding: 0 25px; 595 | } 596 | 597 | .profile-img { 598 | display: flex; 599 | } 600 | 601 | .profile-pic { 602 | margin: 20px auto auto auto; 603 | } 604 | 605 | .school-info { 606 | margin: 0 5px; 607 | width: 40%; 608 | } 609 | 610 | .school-info { 611 | margin: auto auto 20px auto; 612 | width: 80%; 613 | } 614 | 615 | .show-option-false { 616 | display: none; 617 | } 618 | 619 | .social-icons .social-icon, .social-icons .social-icon:last-child { 620 | margin: 0 1rem 1rem 1rem; 621 | } 622 | } 623 | 624 | @media only screen and (max-width: 619px) { 625 | .btn { 626 | padding: 10px 20px; 627 | font-size: 12px; 628 | } 629 | 630 | .name-title { 631 | top: 30%; 632 | font-size: 6rem; 633 | } 634 | 635 | .name-designation { 636 | top: 70%; 637 | font-size: 1.5rem; 638 | } 639 | 640 | .social-icons .social-icon, .social-icons .social-icon:last-child { 641 | margin: 0 0.7rem 1rem 0.7rem; 642 | } 643 | } 644 | 645 | @media only screen and (max-width: 500px) { 646 | .name-title { 647 | top: 30%; 648 | font-size: 5rem; 649 | } 650 | 651 | .name-designation { 652 | top: 65%; 653 | font-size: 1.2rem; 654 | } 655 | 656 | .btn { 657 | padding: 8px 12px; 658 | font-size: 12px; 659 | } 660 | 661 | .about-me { 662 | margin-top: 10px; 663 | } 664 | 665 | .education-card { 666 | width: 90%; 667 | } 668 | 669 | .info-card { 670 | width: 90%; 671 | } 672 | 673 | .opened-menu-false { 674 | top: calc(50% + 31px); 675 | height: calc(99vh - 60px); 676 | } 677 | 678 | .opened-menu-true { 679 | top: calc(50% + 120px); 680 | height: calc(75vh - 60px); 681 | } 682 | 683 | .portfolio-card { 684 | height: 99vh; 685 | width: 98vw; 686 | } 687 | 688 | .portfolio-section { 689 | width: 98vw; 690 | } 691 | 692 | .profile-pic { 693 | height: 170px; 694 | width: 170px; 695 | } 696 | 697 | .profile-description { 698 | padding: 0 5px; 699 | } 700 | 701 | .project-card { 702 | min-width: unset; 703 | max-width: unset; 704 | } 705 | 706 | .social-icons .social-icon, .social-icons .social-icon:last-child { 707 | height: 3.15rem; 708 | margin: 0 0.4em 1rem 0.4rem; 709 | width: 3.15rem; 710 | } 711 | 712 | .skills-card { 713 | width: 90%; 714 | } 715 | } 716 | 717 | @media only screen and (max-width: 330px) { 718 | .name-title { 719 | top: 35%; 720 | font-size: 4rem; 721 | } 722 | 723 | .name-designation { 724 | top: 65%; 725 | font-size: 1rem; 726 | } 727 | 728 | .btn { 729 | padding: 8px 12px; 730 | font-size: 12px; 731 | } 732 | } --------------------------------------------------------------------------------