├── .gitattributes ├── public ├── robots.txt ├── favicon.png ├── manifest.json └── index.html ├── Images └── interface.png ├── src ├── Assets │ ├── about.png │ ├── home-bg.jpg │ ├── sukrut_square.jpg │ ├── pre.svg │ ├── avatar.svg │ └── home-main.svg ├── components │ ├── Pre.js │ ├── ScrollToTop.js │ ├── Home │ │ ├── Type.js │ │ ├── Home.js │ │ └── Home2.js │ ├── About │ │ ├── Techstack.js │ │ ├── AboutCard.js │ │ └── About.js │ ├── Particle.js │ ├── Navbar.js │ └── Footer.js ├── setupTests.js ├── App.test.js ├── index.css ├── reportWebVitals.js ├── index.js ├── App.css ├── App.js └── style.css ├── .gitignore ├── README.md └── package.json /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sukrutrahane/Sukrut-Portfolio/HEAD/public/favicon.png -------------------------------------------------------------------------------- /Images/interface.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sukrutrahane/Sukrut-Portfolio/HEAD/Images/interface.png -------------------------------------------------------------------------------- /src/Assets/about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sukrutrahane/Sukrut-Portfolio/HEAD/src/Assets/about.png -------------------------------------------------------------------------------- /src/Assets/home-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sukrutrahane/Sukrut-Portfolio/HEAD/src/Assets/home-bg.jpg -------------------------------------------------------------------------------- /src/Assets/sukrut_square.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sukrutrahane/Sukrut-Portfolio/HEAD/src/Assets/sukrut_square.jpg -------------------------------------------------------------------------------- /src/components/Pre.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | function Pre(props) { 3 | return
; 4 | } 5 | 6 | export default Pre; 7 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /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/components/ScrollToTop.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | import { useLocation } from "react-router-dom"; 3 | 4 | function ScrollToTop() { 5 | const { pathname } = useLocation(); 6 | useEffect(() => { 7 | window.scrollTo(0, 0); 8 | }, [pathname]); 9 | return null; 10 | } 11 | 12 | export default ScrollToTop; 13 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap"); 2 | body { 3 | margin: 0; 4 | font-family: "Raleway", serif !important; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | background-image: linear-gradient(to left, rgb(27 20 41), rgb(20 15 35)); 8 | } 9 | -------------------------------------------------------------------------------- /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 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /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/Home/Type.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Typewriter from "typewriter-effect"; 3 | 4 | function Type() { 5 | return ( 6 | 18 | ); 19 | } 20 | 21 | export default Type; 22 | -------------------------------------------------------------------------------- /.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 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 | 26 | .eslintcache 27 | 28 | Server/node_modules 29 | Server/config.js -------------------------------------------------------------------------------- /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/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Another Purple & Black website 12 | 13 | 14 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Portfolio Website
3 | sukrutrahane 4 |

5 |
6 | Demo 7 |
8 | 9 |
10 | 11 | 12 | ## Built With 13 | 14 | This project was built using these technologies. 15 | 16 | - React.js 17 | - Node.js 18 | - Express.js 19 | - CSS3 20 | - VsCode 21 | 22 | 23 | ## Features 24 | 25 | **📖 Multi-Page Layout** 26 | 27 | **🎨 Styled with React-Bootstrap and Css with easy to customize colors** 28 | 29 | **📱 Fully Responsive** 30 | 31 | ## Getting Started 32 | 33 | Clone down this repository. You will need `node.js` and `git` installed globally on your machine. 34 | 35 | ## 🛠 Installation and Setup Instructions 36 | 37 | 1. Installation: `npm install` 38 | 39 | 2. In the project directory, you can run: `npm start` 40 | 41 | Runs the app in the development mode.\ 42 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 43 | The page will reload if you make edits. 44 | 45 | -------------------------------------------------------------------------------- /src/components/About/Techstack.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Col, Row } from "react-bootstrap"; 3 | import { CgCPlusPlus } from "react-icons/cg"; 4 | import { 5 | DiJavascript1, 6 | DiReact, 7 | DiNodejs, 8 | DiPython, 9 | DiGit, 10 | DiJava, 11 | } from "react-icons/di"; 12 | 13 | function Techstack() { 14 | return ( 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | ); 43 | } 44 | 45 | export default Techstack; 46 | -------------------------------------------------------------------------------- /src/components/Particle.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Particles from "react-tsparticles"; 3 | 4 | function Particle() { 5 | return ( 6 | 52 | ); 53 | } 54 | 55 | export default Particle; 56 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import Preloader from "../src/components/Pre"; 3 | import Navbar from "./components/Navbar"; 4 | import Home from "./components/Home/Home"; 5 | import About from "./components/About/About"; 6 | import Footer from "./components/Footer"; 7 | import { 8 | BrowserRouter as Router, 9 | Route, 10 | Routes, 11 | Navigate 12 | } from "react-router-dom"; 13 | import ScrollToTop from "./components/ScrollToTop"; 14 | import "./style.css"; 15 | import "./App.css"; 16 | import "bootstrap/dist/css/bootstrap.min.css"; 17 | 18 | function App() { 19 | const [load, upadateLoad] = useState(true); 20 | 21 | useEffect(() => { 22 | const timer = setTimeout(() => { 23 | upadateLoad(false); 24 | }, 1200); 25 | 26 | return () => clearTimeout(timer); 27 | }, []); 28 | 29 | return ( 30 | 31 | 32 |
33 | 34 | 35 | 36 | } /> 37 | } /> 38 | } /> 39 | 40 |
41 |
42 | 43 | ); 44 | } 45 | 46 | export default App; 47 | -------------------------------------------------------------------------------- /src/components/About/AboutCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Card from "react-bootstrap/Card"; 3 | import { ImPointRight } from "react-icons/im"; 4 | 5 | function AboutCard() { 6 | return ( 7 | 8 | 9 |
10 |

11 | Hi Everyone, I am Sukrut Rahane 12 | from Nashik, India. 13 |
I am a Third Year student pursuing B.E. 14 | in Artificial intelligence & Data Science from Pune University. 15 |
16 | Additionally, I am enthusiastic about Machine Learning. 17 |
18 |
19 | Some of my hobbies are 20 |

21 |
    22 |
  • 23 | Playing Games 24 |
    • 25 |
  • 26 | Partying 27 |
    • 28 |
  • 29 | EDM 30 |
    • 31 |
32 | 33 |
34 | 35 | 36 | ); 37 | } 38 | 39 | export default AboutCard; 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@react-pdf/renderer": "^2.2.0", 7 | "@testing-library/jest-dom": "^5.16.2", 8 | "@testing-library/react": "^12.1.4", 9 | "@testing-library/user-event": "^13.5.0", 10 | "axios": "^0.26.1", 11 | "bootstrap": "^5.1.3", 12 | "react": "^17.0.2", 13 | "react-bootstrap": "^2.2.1", 14 | "react-dom": "^17.0.2", 15 | "react-github-calendar": "^3.2.2", 16 | "react-icons": "^4.8.0", 17 | "react-parallax-tilt": "^1.7.42", 18 | "react-pdf": "^5.7.1", 19 | "react-router-dom": "^6.2.2", 20 | "react-scripts": "5.0.0", 21 | "react-tsparticles": "^1.42.2", 22 | "typewriter-effect": "^2.18.2", 23 | "web-vitals": "^2.1.4" 24 | }, 25 | "scripts": { 26 | "start": "react-scripts start", 27 | "build": "react-scripts build", 28 | "test": "react-scripts test", 29 | "eject": "react-scripts eject" 30 | }, 31 | "eslintConfig": { 32 | "extends": [ 33 | "react-app", 34 | "react-app/jest" 35 | ] 36 | }, 37 | "browserslist": { 38 | "production": [ 39 | ">0.2%", 40 | "not dead", 41 | "not op_mini all" 42 | ], 43 | "development": [ 44 | "last 1 chrome version", 45 | "last 1 firefox version", 46 | "last 1 safari version" 47 | ] 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/components/Home/Home.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import homeLogo from "../../Assets/home-main.svg"; 4 | import Particle from "../Particle"; 5 | import Home2 from "./Home2"; 6 | import Type from "./Type"; 7 | 8 | function Home() { 9 | return ( 10 |
11 | 12 | 13 | 14 | 15 | 16 |

17 | Hi There!{" "} 18 | 19 | 👋🏻 20 | 21 |

22 | 23 |

24 | I'M 25 | SUKRUT RAHANE 26 |

27 | 28 |
29 | 30 |
31 | 32 | 33 | 34 | home pic 40 | 41 | 42 | 43 | 44 | 45 |
46 | ); 47 | } 48 | 49 | export default Home; 50 | -------------------------------------------------------------------------------- /src/components/About/About.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import Particle from "../Particle"; 4 | import Techstack from "./Techstack"; 5 | import Aboutcard from "./AboutCard"; 6 | import laptopImg from "../../Assets/sukrut_square.jpg"; 7 | import Tilt from "react-parallax-tilt"; 8 | 9 | function About() { 10 | return ( 11 | 12 | 13 | 14 | 15 | 23 |

24 | Know Who I'M 25 |

26 | 27 | 28 | 41 | 42 | about 43 | 44 | 45 | 46 |

47 | Professional Skillset 48 |

49 | 50 | 51 | 52 | 53 | 54 | ); 55 | } 56 | 57 | export default About; 58 | -------------------------------------------------------------------------------- /src/Assets/pre.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 17 | 18 | 19 | 25 | 31 | 32 | 33 | 38 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Navbar from "react-bootstrap/Navbar"; 3 | import Nav from "react-bootstrap/Nav"; 4 | import Container from "react-bootstrap/Container"; 5 | import { Link } from "react-router-dom"; 6 | import { 7 | AiOutlineHome, 8 | AiOutlineUser, 9 | } from "react-icons/ai"; 10 | 11 | function NavBar() { 12 | const [expand, updateExpanded] = useState(false); 13 | const [navColour, updateNavbar] = useState(false); 14 | 15 | function scrollHandler() { 16 | if (window.scrollY >= 20) { 17 | updateNavbar(true); 18 | } else { 19 | updateNavbar(false); 20 | } 21 | } 22 | 23 | window.addEventListener("scroll", scrollHandler); 24 | 25 | return ( 26 | 32 | 33 | 34 | 35 | 36 | { 39 | updateExpanded(expand ? false : "expanded"); 40 | }} 41 | > 42 | 43 | 44 | 45 | 46 | 47 | 65 | 66 | 67 | 68 | ); 69 | } 70 | 71 | export default NavBar; 72 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import { 4 | AiFillGithub, 5 | AiOutlineTwitter, 6 | AiFillInstagram, 7 | } from "react-icons/ai"; 8 | import { FaLinkedinIn } from "react-icons/fa"; 9 | 10 | function Footer() { 11 | let date = new Date(); 12 | let year = date.getFullYear(); 13 | return ( 14 | 15 | 16 | 17 | 18 | 19 | 20 |

Copyright © {year} Sukrut Rahane

21 | 22 | 23 | 65 | 66 | 67 | 68 | ); 69 | } 70 | 71 | export default Footer; 72 | -------------------------------------------------------------------------------- /src/components/Home/Home2.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import myImg from "../../Assets/avatar.svg"; 4 | import Tilt from "react-parallax-tilt"; 5 | import { 6 | AiFillGithub, 7 | AiOutlineTwitter, 8 | AiFillInstagram, 9 | } from "react-icons/ai"; 10 | import { FaLinkedinIn } from "react-icons/fa"; 11 | 12 | function Home2() { 13 | return ( 14 | 15 | 16 | 17 | 18 |

19 | LET ME INTRODUCE MYSELF 20 |

21 |

22 | I am fluent in classics like 23 | 24 | C++ and Python. 25 | 26 |
27 |
28 | I debug more than I code. 29 |
30 |
31 | My pronouns are Jack of All Trades / Master of none 32 |

33 | 34 | 35 | 36 | avatar 37 | 38 | 39 | 40 | 41 | 42 |

FIND ME ON

43 |

44 | Feel free to connect with me 45 |

46 | 88 | 89 | 90 | 91 | 92 | ); 93 | } 94 | export default Home2; 95 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | --section-background-color: linear-gradient( 3 | to bottom left, 4 | rgba(17, 16, 16, 0.582), 5 | rgba(12, 8, 24, 0.904) 6 | ); 7 | 8 | --image-gradient: linear-gradient( 9 | to bottom left, 10 | rgba(17, 16, 16, 0.678), 11 | rgba(12, 10, 22, 0.863) 12 | ); 13 | 14 | --imp-text-color: #c770f0; 15 | } 16 | 17 | .purple { 18 | color: var(--imp-text-color) !important; 19 | } 20 | 21 | button:focus { 22 | box-shadow: none !important; 23 | } 24 | 25 | /* --------- */ 26 | /* Preloader */ 27 | /* --------- */ 28 | #preloader { 29 | position: fixed; 30 | top: 0; 31 | left: 0; 32 | width: 100%; 33 | height: 100%; 34 | z-index: 999999; 35 | background-color: #0c0513; 36 | background-image: url(./Assets/pre.svg); 37 | background-repeat: no-repeat; 38 | background-position: center; 39 | } 40 | 41 | #preloader-none { 42 | opacity: 0; 43 | } 44 | 45 | #no-scroll { 46 | overflow: hidden; 47 | height: 100vh; 48 | } 49 | 50 | /* --------- */ 51 | /*Scrollbar */ 52 | /* --------- */ 53 | 54 | ::-webkit-scrollbar { 55 | width: 7px; 56 | } 57 | 58 | /* Track */ 59 | ::-webkit-scrollbar-track { 60 | background: #2d1950; 61 | } 62 | 63 | /* Handle */ 64 | ::-webkit-scrollbar-thumb { 65 | background: rgba(178, 121, 216, 0.959); 66 | border-radius: 12px; 67 | } 68 | 69 | /* Handle on hover */ 70 | ::-webkit-scrollbar-thumb:hover { 71 | background: rgba(222, 130, 235, 0.911); 72 | border-radius: 12px; 73 | } 74 | 75 | /* --------- */ 76 | /* Navbar Section */ 77 | /* --------- */ 78 | .sticky { 79 | background-color: #1b1a2ea9 !important; 80 | transition: all 0.3s ease-out 0s !important; 81 | box-shadow: 0px 10px 10px 0px rgba(9, 5, 29, 0.171) !important; 82 | backdrop-filter: blur(15px) !important; 83 | } 84 | 85 | .navbar { 86 | position: fixed !important; 87 | transition: all 0.3s ease-out 0s !important; 88 | padding: 0.3rem 2rem !important; 89 | font-size: 1.2rem !important; 90 | } 91 | 92 | .navbar-toggler { 93 | position: relative !important; 94 | background-color: transparent !important; 95 | border-color: transparent !important; 96 | } 97 | 98 | .navbar-toggler span { 99 | display: block !important; 100 | background-color: #be50f4 !important; 101 | height: 4px !important; 102 | width: 27px !important; 103 | margin-top: 5px !important; 104 | margin-bottom: 5px !important; 105 | transform: rotate(0deg) !important; 106 | left: 0 !important; 107 | opacity: 1 !important; 108 | } 109 | 110 | .navbar-toggler:focus, 111 | .navbar-toggler:active { 112 | outline: 0 !important; 113 | } 114 | 115 | .navbar-toggler span:nth-child(1), 116 | .navbar-toggler span:nth-child(3) { 117 | transition: transform 0.35s ease-in-out !important; 118 | transition: transform 0.35s ease-in-out !important; 119 | } 120 | 121 | .navbar-toggler:not(.collapsed) span:nth-child(1) { 122 | position: absolute !important; 123 | left: 12px !important; 124 | top: 10px !important; 125 | transform: rotate(135deg) !important; 126 | opacity: 0.9 !important; 127 | } 128 | 129 | .navbar-toggler:not(.collapsed) span:nth-child(2) { 130 | height: 12px !important; 131 | visibility: hidden !important; 132 | background-color: transparent !important; 133 | } 134 | 135 | .navbar-toggler:not(.collapsed) span:nth-child(3) { 136 | position: absolute !important; 137 | left: 12px !important; 138 | top: 10px !important; 139 | transform: rotate(-135deg) !important; 140 | opacity: 0.9 !important; 141 | } 142 | 143 | @media (max-width: 767px) { 144 | .navbar { 145 | padding: 1rem 2rem !important; 146 | font-size: 1.4rem !important; 147 | background-color: #181a27 !important; 148 | } 149 | .navbar-nav .nav-item a::after { 150 | display: none !important; 151 | } 152 | } 153 | .navbar-brand { 154 | color: rgb(250, 250, 250) !important; 155 | } 156 | 157 | 158 | 159 | .navbar-nav .nav-link { 160 | color: white !important; 161 | padding-right: 1rem !important; 162 | padding-left: 1rem !important; 163 | } 164 | 165 | .nav-link { 166 | padding: 0.8rem 1rem !important; 167 | } 168 | 169 | @media (max-width: 767px) { 170 | .nav-link { 171 | padding: 0.7rem 1rem !important; 172 | } 173 | } 174 | 175 | .navbar-nav .nav-item { 176 | position: relative; 177 | margin-left: 20px; 178 | } 179 | 180 | .navbar-nav .nav-item a { 181 | font-weight: 400; 182 | transition: all 0.3s ease-out 0s; 183 | position: relative; 184 | z-index: 1; 185 | } 186 | 187 | .navbar-nav .nav-item a::after { 188 | content: ""; 189 | position: relative; 190 | display: block; 191 | height: 5px; 192 | width: 0; 193 | border-radius: 16px; 194 | background: #c95bf5; 195 | bottom: 1px; 196 | left: 0; 197 | z-index: -1; 198 | transition: all 0.3s ease-out 0s; 199 | } 200 | 201 | .navbar-nav .nav-item a:hover::after { 202 | width: 100%; 203 | } 204 | 205 | /* --------- */ 206 | /* Home section */ 207 | /* --------- */ 208 | .wave { 209 | animation-name: wave-animation; /* Refers to the name of your @keyframes element below */ 210 | animation-duration: 2.1s; /* Change to speed up or slow down */ 211 | animation-iteration-count: infinite; /* Never stop waving :) */ 212 | transform-origin: 70% 70%; /* Pivot around the bottom-left palm */ 213 | display: inline-block; 214 | } 215 | 216 | @keyframes wave-animation { 217 | 0% { 218 | transform: rotate(0deg); 219 | } 220 | 10% { 221 | transform: rotate(14deg); 222 | } /* The following five values can be played with to make the waving more or less extreme */ 223 | 20% { 224 | transform: rotate(-8deg); 225 | } 226 | 30% { 227 | transform: rotate(14deg); 228 | } 229 | 40% { 230 | transform: rotate(-4deg); 231 | } 232 | 50% { 233 | transform: rotate(10deg); 234 | } 235 | 60% { 236 | transform: rotate(0deg); 237 | } /* Reset for the last half to pause */ 238 | 100% { 239 | transform: rotate(0deg); 240 | } 241 | } 242 | #tsparticles { 243 | position: fixed !important; 244 | background-repeat: no-repeat !important; 245 | background-size: cover !important; 246 | width: 100%; 247 | height: 100%; 248 | } 249 | 250 | .home-header { 251 | padding-top: 80px !important; 252 | } 253 | 254 | .home-section { 255 | position: relative; 256 | z-index: -1; 257 | background-image: var(--image-gradient), url(./Assets/home-bg.jpg); 258 | background-position: top center; 259 | background-repeat: no-repeat; 260 | padding-bottom: 30px !important; 261 | padding-top: 30px !important; 262 | } 263 | 264 | .home-content { 265 | padding: 9rem 0 2rem !important; 266 | color: whitesmoke; 267 | text-align: left; 268 | } 269 | 270 | .heading { 271 | font-size: 2.4em !important; 272 | padding-left: 50px !important; 273 | } 274 | 275 | .heading-name { 276 | font-size: 2.5em !important; 277 | padding-left: 45px !important; 278 | } 279 | 280 | .main-name { 281 | color: #cd5ff8; 282 | } 283 | 284 | .Typewriter__wrapper { 285 | font-size: 2.2em !important; 286 | color: #be6adf !important; 287 | font-weight: 600 !important; 288 | } 289 | .Typewriter__cursor { 290 | font-size: 2.4em !important; 291 | color: #b562d6 !important; 292 | } 293 | 294 | @media (max-width: 767px) { 295 | .Typewriter__wrapper { 296 | font-size: 1.4em !important; 297 | font-weight: 500 !important; 298 | position: absolute !important; 299 | } 300 | .Typewriter__cursor { 301 | display: none !important; 302 | } 303 | } 304 | 305 | .myAvtar { 306 | justify-content: center !important; 307 | padding-top: 9em !important; 308 | } 309 | 310 | @media (max-width: 767px) { 311 | .myAvtar { 312 | padding-top: 2em !important; 313 | padding-bottom: 2em !important; 314 | } 315 | } 316 | 317 | .home-about-section { 318 | position: relative; 319 | padding-bottom: 70px !important; 320 | padding-top: 70px !important; 321 | } 322 | 323 | .home-about-description { 324 | color: white !important; 325 | padding-top: 100px !important; 326 | padding-bottom: 20px !important; 327 | text-align: center; 328 | } 329 | 330 | .home-about-body { 331 | padding-top: 50px; 332 | font-size: 1.2em !important; 333 | text-align: left; 334 | } 335 | 336 | .home-about-social { 337 | text-align: center !important; 338 | padding-top: 25px; 339 | color: white !important; 340 | } 341 | 342 | .home-about-social-links { 343 | justify-content: center !important; 344 | padding-top: 15px !important; 345 | display: inline-block !important; 346 | position: relative !important; 347 | padding-inline-start: 0 !important; 348 | } 349 | 350 | .home-social-icons { 351 | position: relative !important; 352 | display: inline-block !important; 353 | width: 40px !important; 354 | height: 40px !important; 355 | text-align: center !important; 356 | font-size: 1.2em !important; 357 | line-height: 2em !important; 358 | background: rgba(255, 255, 255, 0.972) !important; 359 | border-radius: 50% !important; 360 | transition: 0.5s !important; 361 | } 362 | 363 | .home-social-icons::before { 364 | content: ""; 365 | position: absolute; 366 | top: 0; 367 | left: 0; 368 | width: 100%; 369 | height: 100%; 370 | border-radius: 50%; 371 | background: #68187a; 372 | transition: 0.5s; 373 | transform: scale(0.9); 374 | z-index: -1; 375 | } 376 | 377 | .home-social-icons:hover::before { 378 | transform: scale(1.1); 379 | box-shadow: 0 0 15px #801f95; 380 | } 381 | 382 | .home-social-icons:hover { 383 | color: #87209e; 384 | box-shadow: 0 0 5px #87209e; 385 | text-shadow: 0 0 2px #87209e; 386 | } 387 | 388 | .social-icons { 389 | display: inline-block !important; 390 | padding-right: 15px; 391 | padding-left: 15px; 392 | } 393 | 394 | .icon-colour { 395 | color: #700c86 !important; 396 | } 397 | 398 | /* --------- */ 399 | /* Footer */ 400 | /* --------- */ 401 | .footer { 402 | background-color: rgb(10, 4, 22); 403 | bottom: 0 !important; 404 | padding-top: 10px !important; 405 | padding-bottom: 8px !important ; 406 | } 407 | .footer-copywright { 408 | text-align: center !important; 409 | } 410 | 411 | .footer-body { 412 | z-index: 1; 413 | text-align: center !important; 414 | } 415 | 416 | @media (max-width: 767px) { 417 | .footer-copywright { 418 | text-align: center !important; 419 | } 420 | 421 | .footer-body { 422 | text-align: center !important; 423 | } 424 | } 425 | 426 | .footer h3 { 427 | font-size: 1em; 428 | color: white !important; 429 | margin-top: 0.5em !important; 430 | margin-bottom: 0.5em !important; 431 | } 432 | .footer-icons { 433 | margin-top: 0.5em !important; 434 | margin-bottom: 0.5em !important; 435 | padding: 0 !important; 436 | } 437 | 438 | .blockquote-footer { 439 | color: #a588c0 !important; 440 | } 441 | 442 | 443 | /* --------- */ 444 | /* About */ 445 | /* --------- */ 446 | 447 | .about-section { 448 | position: relative !important; 449 | padding-top: 150px !important; 450 | padding-bottom: 30px !important; 451 | background-image: var(--section-background-color) !important; 452 | color: white !important; 453 | } 454 | 455 | .tech-icons { 456 | font-size: 4.5em !important; 457 | margin: 15px !important; 458 | padding: 10px !important; 459 | opacity: 0.93 !important; 460 | border: 1.7px solid rgba(200, 137, 230, 0.637) !important; 461 | vertical-align: middle !important; 462 | text-align: center !important; 463 | border-radius: 5px !important; 464 | display: table !important; 465 | box-shadow: 4px 5px 4px 3px rgba(89, 4, 168, 0.137) !important; 466 | overflow: hidden !important; 467 | transition: all 0.4s ease 0s !important; 468 | } 469 | 470 | @media (max-width: 767px) { 471 | .tech-icons { 472 | margin: 10px !important; 473 | } 474 | } 475 | 476 | .tech-icons:hover { 477 | transform: scale(1.05) !important; 478 | overflow: hidden !important; 479 | border: 2.2px solid rgba(197, 115, 230, 0.883) !important; 480 | } 481 | .tech-icon-images { 482 | padding: 20px !important; 483 | line-height: 1.6 !important; 484 | } 485 | 486 | .quote-card-view { 487 | border: none !important; 488 | color: white !important; 489 | background-color: transparent !important; 490 | } 491 | 492 | .about-activity { 493 | list-style: none !important; 494 | text-align: left !important; 495 | padding-left: 1px !important; 496 | } 497 | 498 | @media (max-width: 767px) { 499 | .about-img { 500 | padding-top: 0 !important; 501 | } 502 | } 503 | 504 | 505 | 506 | -------------------------------------------------------------------------------- /src/Assets/avatar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | mf-avatar 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /src/Assets/home-main.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | --------------------------------------------------------------------------------