├── public ├── favicon.png ├── robots.txt ├── manifest.json └── index.html ├── latestportfolio.pdf ├── src ├── Assets │ ├── Logo 1.png │ ├── Logo 2.png │ ├── about.jpg │ ├── about7.jpg │ ├── avatar2.png │ ├── avatar3.jpg │ ├── home-bg.jpg │ ├── home-main1.png │ ├── home-main2.png │ ├── Projects │ │ ├── loan.jpg │ │ ├── tedx.jpg │ │ ├── tmc.jpg │ │ ├── aivirex.jpg │ │ ├── fuzemee.jpg │ │ ├── hackerz.jpg │ │ ├── lernx.jpg │ │ ├── sales.jpg │ │ └── emotions.jpeg │ ├── Hrithika_Resume.pdf │ ├── latestportfolio.pdf │ └── pre.svg ├── components │ ├── Pre.js │ ├── ScrollToTop.js │ ├── About │ │ ├── Toolstack.js │ │ ├── Techstack.js │ │ ├── About.js │ │ ├── AboutCard.js │ │ └── MoreAbout.js │ ├── Home │ │ ├── Type.js │ │ ├── Home.js │ │ └── Home2.js │ ├── Projects │ │ ├── ProjectCards.js │ │ └── Projects.js │ ├── Resume │ │ └── ResumeNew.js │ ├── Particle.js │ ├── Footer.js │ └── Navbar.js ├── setupTests.js ├── App.test.js ├── index.css ├── reportWebVitals.js ├── index.js ├── App.css ├── App.js └── style.css ├── .gitignore └── package.json /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/public/favicon.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /latestportfolio.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/latestportfolio.pdf -------------------------------------------------------------------------------- /src/Assets/Logo 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/Logo 1.png -------------------------------------------------------------------------------- /src/Assets/Logo 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/Logo 2.png -------------------------------------------------------------------------------- /src/Assets/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/about.jpg -------------------------------------------------------------------------------- /src/Assets/about7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/about7.jpg -------------------------------------------------------------------------------- /src/Assets/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/avatar2.png -------------------------------------------------------------------------------- /src/Assets/avatar3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/avatar3.jpg -------------------------------------------------------------------------------- /src/Assets/home-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/home-bg.jpg -------------------------------------------------------------------------------- /src/Assets/home-main1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/home-main1.png -------------------------------------------------------------------------------- /src/Assets/home-main2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/home-main2.png -------------------------------------------------------------------------------- /src/Assets/Projects/loan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/Projects/loan.jpg -------------------------------------------------------------------------------- /src/Assets/Projects/tedx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/Projects/tedx.jpg -------------------------------------------------------------------------------- /src/Assets/Projects/tmc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/Projects/tmc.jpg -------------------------------------------------------------------------------- /src/Assets/Hrithika_Resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/Hrithika_Resume.pdf -------------------------------------------------------------------------------- /src/Assets/Projects/aivirex.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/Projects/aivirex.jpg -------------------------------------------------------------------------------- /src/Assets/Projects/fuzemee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/Projects/fuzemee.jpg -------------------------------------------------------------------------------- /src/Assets/Projects/hackerz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/Projects/hackerz.jpg -------------------------------------------------------------------------------- /src/Assets/Projects/lernx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/Projects/lernx.jpg -------------------------------------------------------------------------------- /src/Assets/Projects/sales.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/Projects/sales.jpg -------------------------------------------------------------------------------- /src/Assets/latestportfolio.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/latestportfolio.pdf -------------------------------------------------------------------------------- /src/Assets/Projects/emotions.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hash-debug/Portfolio-HR/master/src/Assets/Projects/emotions.jpeg -------------------------------------------------------------------------------- /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/About/Toolstack.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Col, Row } from "react-bootstrap"; 3 | import { 4 | SiVisualstudiocode, 5 | } from "react-icons/si"; 6 | 7 | function Toolstack() { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | 17 | export default Toolstack; 18 | -------------------------------------------------------------------------------- /.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/components/Home/Type.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Typewriter from "typewriter-effect"; 3 | 4 | function Type() { 5 | return ( 6 | 20 | ); 21 | } 22 | 23 | export default Type; 24 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Hrithika R 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /src/components/Projects/ProjectCards.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Card from "react-bootstrap/Card"; 3 | import Button from "react-bootstrap/Button"; 4 | 5 | function ProjectCards(props) { 6 | return ( 7 | 8 | 9 | 10 | {props.title} 11 | 12 | {props.description} 13 | 14 | 18 | {"\n"} 19 | {"\n"} 20 | 21 | {/* If the component contains Demo link and if it's not a Blog then, it will render the below component */} 22 | 23 | {!props.isBlog && props.demoLink && ( 24 | 33 | )} 34 | 35 | 36 | ); 37 | } 38 | export default ProjectCards; 39 | -------------------------------------------------------------------------------- /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/Resume/ResumeNew.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { Container, Row } from "react-bootstrap"; 3 | import Button from "react-bootstrap/Button"; 4 | import Particle from "../Particle"; 5 | import pdf from "../../Assets/latestportfolio.pdf"; 6 | import { AiOutlineDownload } from "react-icons/ai"; 7 | import { Document, Page, pdfjs } from "react-pdf"; 8 | import "react-pdf/dist/esm/Page/AnnotationLayer.css"; 9 | pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`; 10 | 11 | function ResumeNew() { 12 | const [width, setWidth] = useState(1200); 13 | 14 | useEffect(() => { 15 | setWidth(window.innerWidth); 16 | }, []); 17 | 18 | return ( 19 |
20 | 21 | 22 | 23 | 32 | 33 | 34 | 35 | 36 | 786 ? 1.7 : 0.6} /> 37 | 38 | 39 | 40 | 41 | 42 |
43 | ); 44 | } 45 | 46 | export default ResumeNew; 47 | -------------------------------------------------------------------------------- /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 Projects from "./components/Projects/Projects"; 7 | import Footer from "./components/Footer"; 8 | import Resume from "./components/Resume/ResumeNew"; 9 | import { 10 | BrowserRouter as Router, 11 | Route, 12 | Routes, 13 | Navigate 14 | } from "react-router-dom"; 15 | import ScrollToTop from "./components/ScrollToTop"; 16 | import "./style.css"; 17 | import "./App.css"; 18 | import "bootstrap/dist/css/bootstrap.min.css"; 19 | 20 | function App() { 21 | const [load, upadateLoad] = useState(true); 22 | 23 | useEffect(() => { 24 | const timer = setTimeout(() => { 25 | upadateLoad(false); 26 | }, 1200); 27 | 28 | return () => clearTimeout(timer); 29 | }, []); 30 | 31 | return ( 32 | 33 | 34 |
35 | 36 | 37 | 38 | } /> 39 | } /> 40 | } /> 41 | } /> 42 | } /> 43 | 44 |
45 |
46 | 47 | ); 48 | } 49 | 50 | export default App; 51 | -------------------------------------------------------------------------------- /src/components/About/Techstack.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Col, Row } from "react-bootstrap"; 3 | import { DiJavascript1, DiReact, DiHtml5, DiCss3 } from "react-icons/di"; 4 | import { 5 | SiFirebase, 6 | SiC, 7 | SiCplusplus, 8 | SiMysql, 9 | SiMicrosoftexcel, 10 | SiPowerbi, 11 | SiTableau, 12 | SiPython, 13 | } from "react-icons/si"; 14 | 15 | function Techstack() { 16 | return ( 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 | export default Techstack; 59 | 60 | -------------------------------------------------------------------------------- /src/components/Home/Home.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import homeLogo from "../../Assets/avatar3.jpg"; 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 | Hello! Namaste! Vanakkam!{" "} 18 | 19 | 👋 20 | 21 |

22 | 23 |

24 | I'M 25 | Hrithika R 26 |

27 | 28 |

29 | 23-year-old Business Associate and PGDM Big Data Analytics candidate at Goa 30 | Institute of Management, weaving together financial advisory, marketing, and 31 | talent experiences through the Corporate Recruitment Program 2023-24. 32 |

33 | 34 |
35 | 36 |
37 | 38 | 39 | 40 | home pic 46 | 47 | 48 | 49 | 50 | 51 |
52 | ); 53 | } 54 | 55 | export default Home; 56 | 57 | -------------------------------------------------------------------------------- /src/components/Particle.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Particles from "react-tsparticles"; 3 | 4 | function Particle() { 5 | const particlesInit = async (main) => { 6 | console.log(main); 7 | // await loadFull(main); 8 | }; 9 | 10 | const particlesLoaded = (container) => { 11 | console.log(container); 12 | }; 13 | return ( 14 | 86 | ); 87 | } 88 | 89 | export default Particle; 90 | -------------------------------------------------------------------------------- /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/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import { AiFillGithub, AiOutlineMail, AiFillInstagram, AiOutlinePhone } from "react-icons/ai"; 4 | import { FaLinkedinIn } from "react-icons/fa"; 5 | 6 | function Footer() { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | 55 | 56 | 57 | 58 | ); 59 | } 60 | 61 | export default Footer; 62 | -------------------------------------------------------------------------------- /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 MoreAboutMe from "./MoreAbout"; 7 | import laptopImg from "../../Assets/home-main2.png"; 8 | // import Toolstack from "./Toolstack"; 9 | 10 | function About() { 11 | return ( 12 | 13 | 14 | 15 | 16 | 24 |

25 | Get To Know ME 26 |

27 | 28 | 29 | 34 | about 35 | 36 | 44 |

45 | Hrithika's INSIGHTS 46 |

47 | 48 | 49 | 50 |

51 | Professional Skillset 52 |

53 | 54 | 55 | {/* 56 |

57 | Tools I use 58 |

59 | */} 60 | 61 | 62 | 63 | ); 64 | } 65 | 66 | export default About; 67 | -------------------------------------------------------------------------------- /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 | Hello everyone! I am Hrithika R from{" "} 12 | Chennai, India. 13 |
I am part of the PGDM Big Data Analytics cohort at Goa Institute of Management and the 14 | Corporate Recruitment Program 2023-24, after graduating with a B.E. in Computer Science (89.7%) 15 | from Chennai Institute of Technology. 16 |
17 |
18 | My work blends financial advisory, marketing strategy, content, and HR support. Whether I am 19 | enabling Rs 50L-1Cr mandates for Truvisory or designing campaigns for NGOs and MUN communities, I 20 | anchor every brief on empathy and data. 21 |
22 |
23 | Beyond the analytics and content desks, I enjoy: 24 |

25 |
    26 |
  • 27 | Mentoring budding coders through Young Mind Coders sessions. 28 |
    • 29 |
  • 30 | Hosting AI, data science, and career conversations for 100+ audiences. 31 |
    • 32 |
  • 33 | Curating experiences at cultural festivals and during my travels. 34 |
    • 35 |
36 | 37 |

38 | "Work to express, not to impress; let your actions speak volumes and your passion shine!" 39 |

40 |
Hrithika R
41 |
42 | 43 | 44 | ); 45 | } 46 | 47 | export default AboutCard; 48 | 49 | -------------------------------------------------------------------------------- /src/components/About/MoreAbout.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const insightCards = [ 4 | { 5 | title: "Professional Experience", 6 | subtitle: "Truvisory - Business Associate (Jun '24 - May '25)", 7 | bullets: [ 8 | "Partnered with a three-member advisory pod to enable Rs 50L-1Cr mandates for HNI clients.", 9 | "Own five marquee relationships through consultative conversations and needs assessments.", 10 | "Explained products and onboarding journeys that helped generate up to Rs 40L in peak months.", 11 | ], 12 | }, 13 | { 14 | title: "Internships & Long-term Projects", 15 | subtitle: "21 months of purpose-led communication work", 16 | bullets: [ 17 | "The Green Pillars (Nov '23 - Jul '25): Designed outreach playbooks and partner relations for the NGO.", 18 | "The MUN Company (Mar '23 - Sep '24): Led PR for 200-500 delegate summits, securing Rs 1.5L sponsorships while coaching a six-member squad.", 19 | "FuzeMee (Apr '23 - May '23): Built visual social campaigns and drove 20+ new user conversions through targeted outreach.", 20 | ], 21 | }, 22 | { 23 | title: "Academic Projects & Certifications", 24 | subtitle: "Translating analytics into action", 25 | bullets: [ 26 | "WebWeka: Interactive web tool for dataset uploads, exploratory analysis, and regression/classification workflows.", 27 | "Sales Forecasting Tool: Captures trends, seasonality, and demand shifts for proactive planning.", 28 | "Certified in Data Visualization (TATA), Markets Sales & Trading (JP Morgan Chase), and Cyber Security Essentials (CISCO) in 2024.", 29 | ], 30 | }, 31 | { 32 | title: "Leadership & Community", 33 | subtitle: "Building inclusive platforms for ideas", 34 | bullets: [ 35 | "Judge, Shasun Jain Just a Minute 2024 - Secretary, Hackerz Symposium 2023 - VP & PR Head, TEDxChennaiInstituteOfTechnology Countdown 2022.", 36 | "Mentor for Young Mind Coders 2023 and host for CDSAAI IEEE Conference, Career Campus Seminar, and Takshashila 2022 with 2000+ attendees.", 37 | ], 38 | }, 39 | { 40 | title: "Core Competencies", 41 | subtitle: "Tools & talents I lean on", 42 | bullets: [ 43 | "Technical: C, C++, Python, Web Development, SQL, Firebase, Microsoft Excel, Power BI, Tableau.", 44 | "Soft Skills: Content writing, marketing strategy, public relations, event management, and team leadership.", 45 | ], 46 | }, 47 | ]; 48 | 49 | function MoreAboutMe() { 50 | return ( 51 |
52 |

53 | I am intentional about building a career where data-backed decision making meets inclusive storytelling. 54 | Finance, marketing, human resources, and community programs intersect across my work, helping me translate 55 | complex ideas into relatable narratives. 56 |

57 | 58 |
59 | {insightCards.map((card) => ( 60 |
61 |

{card.title}

62 |

{card.subtitle}

63 |
    64 | {card.bullets.map((point, index) => ( 65 |
  • {point}
    • 66 | ))} 67 |
68 |
69 | ))} 70 |
71 |
72 | ); 73 | } 74 | 75 | export default MoreAboutMe; 76 | 77 | -------------------------------------------------------------------------------- /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 { ImBlog } from "react-icons/im"; 7 | import { 8 | // AiFillStar, 9 | AiOutlineHome, 10 | AiOutlineFundProjectionScreen, 11 | AiOutlineUser, 12 | } from "react-icons/ai"; 13 | 14 | import { CgFileDocument } from "react-icons/cg"; 15 | 16 | function NavBar() { 17 | const [expand, updateExpanded] = useState(false); 18 | const [navColour, updateNavbar] = useState(false); 19 | 20 | function scrollHandler() { 21 | if (window.scrollY >= 20) { 22 | updateNavbar(true); 23 | } else { 24 | updateNavbar(false); 25 | } 26 | } 27 | 28 | window.addEventListener("scroll", scrollHandler); 29 | 30 | return ( 31 | 37 | 38 | 39 | {/* brand */} 40 |

HR

41 | 42 | { 45 | updateExpanded(expand ? false : "expanded"); 46 | }} 47 | > 48 | 49 | 50 | 51 | 52 | 53 | 105 | 106 | 107 | 108 | ); 109 | } 110 | 111 | export default NavBar; 112 | -------------------------------------------------------------------------------- /src/components/Home/Home2.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import myImg from "../../Assets/avatar2.png"; 4 | import Tilt from "react-parallax-tilt"; 5 | import { 6 | AiFillGithub, 7 | AiOutlineMail, 8 | AiFillInstagram, 9 | AiOutlinePhone, 10 | } from "react-icons/ai"; 11 | import { FaLinkedinIn } from "react-icons/fa"; 12 | 13 | function Home2() { 14 | return ( 15 | 16 | 17 | 18 | 19 |

20 | LET ME INTRODUCE MYSELF 21 |

22 |

23 | I thrive at the intersection of data, design, and human experiences. As a Business 24 | Associate at Truvisory, I collaborate with a three-member team to guide HNI clients 25 | through Rs 50L-1Cr mandates, nurture five marquee relationships, and drive up to Rs 40L 26 | in monthly business. 27 |
28 |
29 | I am currently pursuing the PGDM Big Data Analytics program at Goa Institute of 30 | Management (Corporate Recruitment Program 2023-24) after graduating with a B.E. in 31 | Computer Science (89.7%) from Chennai Institute of Technology. 32 |
33 |
34 | Twenty-one months of internships with The Green Pillars, The MUN Company, and FuzeMee 35 | sharpened my communication, public relations, and community partnership skills while 36 | keeping impact at the center of every brief. 37 |
38 |
39 | Fluent in English, Hindi, and Tamil, I enjoy designing data stories, teaching young 40 | coders, and hosting events that celebrate collaboration and innovation. 41 |

42 | 43 | 44 | 45 | avatar 46 | 47 | 48 | 49 | 50 | 51 |

FIND ME ON

52 |

53 | Feel free to connect with me 54 |

55 | 106 | 107 | 108 | 109 | 110 | ); 111 | } 112 | export default Home2; 113 | 114 | -------------------------------------------------------------------------------- /src/components/Projects/Projects.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import ProjectCard from "./ProjectCards"; 4 | import Particle from "../Particle"; 5 | import loan from "../../Assets/Projects/loan.jpg"; 6 | import sales from "../../Assets/Projects/sales.jpg"; 7 | import emotions from "../../Assets/Projects/emotions.jpeg"; 8 | import fuzemee from "../../Assets/Projects/fuzemee.jpg"; 9 | import tmc from "../../Assets/Projects/tmc.jpg"; 10 | import lernx from "../../Assets/Projects/lernx.jpg"; 11 | import aivirex from "../../Assets/Projects/aivirex.jpg"; 12 | import tedx from "../../Assets/Projects/tedx.jpg"; 13 | import hackerz from "../../Assets/Projects/hackerz.jpg"; 14 | 15 | function Projects() { 16 | return ( 17 | 18 | 19 | 20 |

21 | Professional Experience 22 |

23 |

24 | Highlights from my Corporate Recruitment Program 2023-24 journey and full-time mandate. 25 |

26 | 27 | 28 | 35 | 36 | 37 | 38 |

39 | Immersive Internships 40 |

41 |

42 | Multi-month engagements that sharpened my communication, PR, marketing, and community partnership skills. 43 |

44 | 45 | 46 | 53 | 54 | 55 | 62 | 63 | 64 | 71 | 72 | 73 | 74 |

75 | Academic Projects & Learning 76 |

77 |

78 | Technology-led explorations that combine analytics, automation, and continuous learning. 79 |

80 | 81 | 82 | 89 | 90 | 91 | 98 | 99 | 100 | 107 | 108 | 109 | 110 |

111 | Leadership & Community 112 |

113 |

114 | Roles that helped me champion storytelling, mentoring, and large-format event experiences. 115 |

116 | 117 | 118 | 125 | 126 | 127 | 134 | 135 | 136 | 137 | 138 | ); 139 | } 140 | 141 | export default Projects; 142 | -------------------------------------------------------------------------------- /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 | .logo { 158 | height: 1.4em !important; 159 | width: 2.5em !important; 160 | } 161 | 162 | .navbar-nav .nav-link { 163 | color: white !important; 164 | padding-right: 1rem !important; 165 | padding-left: 1rem !important; 166 | } 167 | 168 | .nav-link { 169 | padding: 0.8rem 1rem !important; 170 | } 171 | 172 | @media (max-width: 767px) { 173 | .nav-link { 174 | padding: 0.7rem 1rem !important; 175 | } 176 | } 177 | 178 | .navbar-nav .nav-item { 179 | position: relative; 180 | margin-left: 20px; 181 | } 182 | 183 | .navbar-nav .nav-item a { 184 | font-weight: 400; 185 | transition: all 0.3s ease-out 0s; 186 | position: relative; 187 | z-index: 1; 188 | } 189 | 190 | .navbar-nav .nav-item a::after { 191 | content: ""; 192 | position: relative; 193 | display: block; 194 | height: 5px; 195 | width: 0; 196 | border-radius: 16px; 197 | background: #7f26a2; 198 | bottom: 1px; 199 | left: 0; 200 | z-index: -1; 201 | transition: all 0.3s ease-out 0s; 202 | } 203 | 204 | .navbar-nav .nav-item a:hover::after { 205 | width: 100%; 206 | } 207 | 208 | /* --------- */ 209 | /* Home section */ 210 | /* --------- */ 211 | .wave { 212 | animation-name: wave-animation; /* Refers to the name of your @keyframes element below */ 213 | animation-duration: 2.1s; /* Change to speed up or slow down */ 214 | animation-iteration-count: infinite; /* Never stop waving :) */ 215 | transform-origin: 70% 70%; /* Pivot around the bottom-left palm */ 216 | display: inline-block; 217 | } 218 | 219 | @keyframes wave-animation { 220 | 0% { 221 | transform: rotate(0deg); 222 | } 223 | 10% { 224 | transform: rotate(14deg); 225 | } /* The following five values can be played with to make the waving more or less extreme */ 226 | 20% { 227 | transform: rotate(-8deg); 228 | } 229 | 30% { 230 | transform: rotate(14deg); 231 | } 232 | 40% { 233 | transform: rotate(-4deg); 234 | } 235 | 50% { 236 | transform: rotate(10deg); 237 | } 238 | 60% { 239 | transform: rotate(0deg); 240 | } /* Reset for the last half to pause */ 241 | 100% { 242 | transform: rotate(0deg); 243 | } 244 | } 245 | #tsparticles { 246 | position: fixed !important; 247 | background-repeat: no-repeat !important; 248 | background-size: cover !important; 249 | width: 100%; 250 | height: 100%; 251 | } 252 | 253 | .home-header { 254 | padding-top: 80px !important; 255 | } 256 | 257 | .home-section { 258 | position: relative; 259 | z-index: -1; 260 | background-image: var(--image-gradient), url(./Assets/home-bg.jpg); 261 | background-position: top center; 262 | background-repeat: no-repeat; 263 | padding-bottom: 30px !important; 264 | padding-top: 30px !important; 265 | } 266 | 267 | .home-content { 268 | padding: 9rem 0 2rem !important; 269 | color: whitesmoke; 270 | text-align: left; 271 | } 272 | 273 | .heading { 274 | font-size: 2.4em !important; 275 | padding-left: 50px !important; 276 | } 277 | 278 | .heading-name { 279 | font-size: 2.5em !important; 280 | padding-left: 45px !important; 281 | } 282 | 283 | .main-name { 284 | color: #cd5ff8; 285 | } 286 | 287 | .Typewriter__wrapper { 288 | font-size: 2.2em !important; 289 | color: #a251c2 !important; 290 | font-weight: 600 !important; 291 | } 292 | .Typewriter__cursor { 293 | font-size: 2.4em !important; 294 | color: #b562d6 !important; 295 | } 296 | 297 | @media (max-width: 767px) { 298 | .Typewriter__wrapper { 299 | font-size: 1.4em !important; 300 | font-weight: 500 !important; 301 | position: absolute !important; 302 | } 303 | .Typewriter__cursor { 304 | display: none !important; 305 | } 306 | } 307 | 308 | .myAvtar { 309 | justify-content: center !important; 310 | padding-top: 9em !important; 311 | } 312 | 313 | @media (max-width: 767px) { 314 | .myAvtar { 315 | padding-top: 2em !important; 316 | padding-bottom: 2em !important; 317 | } 318 | } 319 | 320 | .home-about-section { 321 | position: relative; 322 | padding-bottom: 70px !important; 323 | padding-top: 70px !important; 324 | } 325 | 326 | .home-about-description { 327 | color: rgb(177, 215, 214) !important; 328 | padding-top: 100px !important; 329 | padding-bottom: 20px !important; 330 | text-align: center; 331 | } 332 | 333 | .home-about-body { 334 | padding-top: 50px; 335 | font-size: 1.2em !important; 336 | text-align: left; 337 | } 338 | 339 | .home-about-social { 340 | text-align: center !important; 341 | padding-top: 25px; 342 | color: white !important; 343 | } 344 | 345 | .home-about-social-links { 346 | justify-content: center !important; 347 | padding-top: 15px !important; 348 | display: inline-block !important; 349 | position: relative !important; 350 | padding-inline-start: 0 !important; 351 | } 352 | 353 | .home-social-icons { 354 | position: relative !important; 355 | display: inline-block !important; 356 | width: 40px !important; 357 | height: 40px !important; 358 | text-align: center !important; 359 | font-size: 1.2em !important; 360 | line-height: 2em !important; 361 | background: rgba(255, 255, 255, 0.972) !important; 362 | border-radius: 50% !important; 363 | transition: 0.5s !important; 364 | } 365 | 366 | .home-social-icons::before { 367 | content: ""; 368 | position: absolute; 369 | top: 0; 370 | left: 0; 371 | width: 100%; 372 | height: 100%; 373 | border-radius: 50%; 374 | background: #b355c9; 375 | transition: 0.5s; 376 | transform: scale(0.9); 377 | z-index: -1; 378 | } 379 | 380 | .home-social-icons:hover::before { 381 | transform: scale(1.1); 382 | box-shadow: 0 0 15px #44184e; 383 | } 384 | 385 | .home-social-icons:hover { 386 | color: #c83fe7; 387 | box-shadow: 0 0 5px #c83fe7; 388 | text-shadow: 0 0 2px #c83fe7; 389 | } 390 | 391 | .social-icons { 392 | display: inline-block !important; 393 | padding-right: 15px; 394 | padding-left: 15px; 395 | } 396 | 397 | .icon-colour { 398 | color: #700c86 !important; 399 | } 400 | 401 | /* --------- */ 402 | /* Footer */ 403 | /* --------- */ 404 | .footer { 405 | background-color: rgb(10, 4, 22); 406 | bottom: 0 !important; 407 | padding-top: 10px !important; 408 | padding-bottom: 8px !important ; 409 | } 410 | .footer-copywright { 411 | text-align: center !important; 412 | } 413 | 414 | .footer-body { 415 | z-index: 1; 416 | text-align: center !important; 417 | } 418 | 419 | @media (max-width: 767px) { 420 | .footer-copywright { 421 | text-align: center !important; 422 | } 423 | 424 | .footer-body { 425 | text-align: center !important; 426 | } 427 | } 428 | 429 | .footer h3 { 430 | font-size: 1em; 431 | color: white !important; 432 | margin-top: 0.5em !important; 433 | margin-bottom: 0.5em !important; 434 | } 435 | .footer-icons { 436 | margin-top: 0.5em !important; 437 | margin-bottom: 0.5em !important; 438 | padding: 0 !important; 439 | } 440 | 441 | .blockquote-footer { 442 | color: #a588c0 !important; 443 | } 444 | /* --------- */ 445 | /* Projects */ 446 | /* --------- */ 447 | .project-section { 448 | position: relative !important; 449 | padding-top: 150px !important; 450 | padding-bottom: 30px !important; 451 | background-image: var(--section-background-color) !important; 452 | } 453 | 454 | .project-card { 455 | padding-top: 50px !important; 456 | padding-bottom: 50px !important; 457 | padding-left: 25px !important; 458 | padding-right: 25px !important; 459 | height: auto !important; 460 | } 461 | 462 | .project-card-view { 463 | box-shadow: 0 4px 5px 3px rgba(119, 53, 136, 0.459) !important; 464 | color: white !important; 465 | background-color: transparent !important; 466 | opacity: 0.9 !important; 467 | transition: all 0.5s ease 0s !important; 468 | height: 100% !important; 469 | } 470 | .project-card-view:hover { 471 | transform: scale(1.02) !important; 472 | overflow: hidden !important; 473 | box-shadow: 0 4px 4px 5px rgba(129, 72, 144, 0.561) !important; 474 | } 475 | 476 | .blog-card { 477 | padding-top: 50px !important; 478 | padding-bottom: 50px !important; 479 | padding-left: 25px !important; 480 | padding-right: 25px !important; 481 | height: auto !important; 482 | } 483 | 484 | .blog-card-view { 485 | background-color: transparent !important; 486 | box-shadow: 0 3px 3px 2px rgba(145, 77, 161, 0.459) !important; 487 | color: white !important; 488 | transition: all 0.5s ease 0s !important; 489 | height: 100% !important; 490 | } 491 | 492 | .blog-link { 493 | color: white !important; 494 | text-decoration: none !important; 495 | } 496 | 497 | .blog-link:hover { 498 | cursor: pointer !important; 499 | } 500 | 501 | .blog-card-view:hover { 502 | transform: scale(1.02) !important; 503 | overflow: hidden !important; 504 | box-shadow: 0 3px 3px 5px rgba(155, 88, 173, 0.65) !important; 505 | } 506 | 507 | .card-img-top { 508 | padding: 20px !important; 509 | opacity: 0.8 !important; 510 | border-radius: 10px !important; 511 | } 512 | 513 | .blog-img { 514 | padding: 0px !important; 515 | opacity: 0.8 !important; 516 | border-radius: 0px !important; 517 | } 518 | 519 | .btn-primary { 520 | color: #fff !important; 521 | background-color: #623686 !important; 522 | border-color: #623686 !important; 523 | } 524 | 525 | .btn-primary:hover { 526 | color: #fff !important; 527 | background-color: #6d20c5d7 !important; 528 | border-color: #6d20c5d7 !important; 529 | } 530 | .btn:focus { 531 | outline: none !important; 532 | box-shadow: none !important; 533 | } 534 | .project-heading { 535 | color: white !important; 536 | font-size: 2.3em !important; 537 | font-weight: 500 !important; 538 | padding-top: 10px !important; 539 | } 540 | 541 | /* --------- */ 542 | /* About */ 543 | /* --------- */ 544 | 545 | .about-section { 546 | position: relative !important; 547 | padding-top: 150px !important; 548 | padding-bottom: 30px !important; 549 | background-image: var(--section-background-color) !important; 550 | color: white !important; 551 | } 552 | 553 | .tech-icons { 554 | font-size: 4.5em !important; 555 | margin: 15px !important; 556 | padding: 10px !important; 557 | opacity: 0.93 !important; 558 | border: 1.7px solid rgba(200, 137, 230, 0.637) !important; 559 | vertical-align: middle !important; 560 | text-align: center !important; 561 | border-radius: 5px !important; 562 | display: table !important; 563 | box-shadow: 4px 5px 4px 3px rgba(89, 4, 168, 0.137) !important; 564 | overflow: hidden !important; 565 | transition: all 0.4s ease 0s !important; 566 | } 567 | 568 | .insight-cards { 569 | display: grid; 570 | grid-template-columns: repeat(3, minmax(0, 1fr)); 571 | gap: 1.5rem; 572 | margin: 1.5rem auto 0; 573 | max-width: 1100px; 574 | justify-items: stretch; 575 | } 576 | 577 | @media (max-width: 992px) { 578 | .insight-cards { 579 | grid-template-columns: repeat(2, minmax(0, 1fr)); 580 | max-width: 900px; 581 | } 582 | } 583 | 584 | @media (max-width: 600px) { 585 | .insight-cards { 586 | grid-template-columns: 1fr; 587 | max-width: 500px; 588 | } 589 | } 590 | 591 | .insight-card { 592 | background: rgba(255, 255, 255, 0.08); 593 | border-radius: 16px; 594 | padding: 1.5rem; 595 | box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.7); 596 | transition: transform 0.2s ease, box-shadow 0.2s ease; 597 | height: 100%; 598 | } 599 | 600 | .insight-card:hover { 601 | transform: translateY(-6px); 602 | box-shadow: 0 15px 35px -10px rgba(111, 66, 193, 0.6); 603 | } 604 | 605 | .insight-card h3 { 606 | margin-bottom: 0.4rem; 607 | font-size: 1.25rem; 608 | } 609 | 610 | .insight-card-subtitle { 611 | color: rgba(255, 255, 255, 0.8); 612 | font-size: 0.95rem; 613 | margin-bottom: 0.75rem; 614 | } 615 | 616 | .insight-card ul { 617 | padding-left: 1.1rem; 618 | margin: 0; 619 | } 620 | 621 | .insight-card li { 622 | margin-bottom: 0.5rem; 623 | line-height: 1.4; 624 | } 625 | 626 | @media (max-width: 767px) { 627 | .tech-icons { 628 | margin: 10px !important; 629 | } 630 | } 631 | 632 | .tech-icons:hover { 633 | transform: scale(1.05) !important; 634 | overflow: hidden !important; 635 | border: 2.2px solid rgba(197, 115, 230, 0.883) !important; 636 | } 637 | .tech-icon-images { 638 | padding: 20px !important; 639 | line-height: 1.6 !important; 640 | } 641 | 642 | .quote-card-view { 643 | border: none !important; 644 | color: white !important; 645 | background-color: transparent !important; 646 | } 647 | 648 | .about-activity { 649 | list-style: none !important; 650 | text-align: left !important; 651 | padding-left: 1px !important; 652 | } 653 | 654 | @media (max-width: 767px) { 655 | .about-img { 656 | padding-top: 0 !important; 657 | } 658 | } 659 | /* --------- */ 660 | /* Resume */ 661 | /* --------- */ 662 | 663 | .resume-section { 664 | position: relative !important; 665 | padding-top: 110px !important; 666 | padding-bottom: 30px !important; 667 | background-image: var(--section-background-color) !important; 668 | color: white !important; 669 | } 670 | 671 | .resume { 672 | padding-top: 50px; 673 | padding-bottom: 50px; 674 | justify-content: center; 675 | } 676 | 677 | .resume-left { 678 | padding-right: 80px !important; 679 | } 680 | 681 | .resume-right { 682 | padding-left: 80px !important; 683 | } 684 | 685 | @media (max-width: 767px) { 686 | .resume-left { 687 | padding-right: 15px !important; 688 | padding-left: 15px !important; 689 | } 690 | 691 | .resume-right { 692 | padding-right: 15px !important; 693 | padding-left: 15px !important; 694 | } 695 | } 696 | .resume .resume-title { 697 | font-size: 2em; 698 | font-weight: 700; 699 | padding-top: 30px; 700 | padding-bottom: 30px; 701 | } 702 | 703 | .resume .resume-item { 704 | padding: 0 0 10px 25px; 705 | margin-top: -2px; 706 | border-left: 2px solid #8a49a8; 707 | position: relative; 708 | } 709 | 710 | .resume .resume-item .resume-title { 711 | line-height: 18px; 712 | font-size: 0.9em; 713 | background: #5234795d; 714 | padding: 8px 15px; 715 | display: inline-block; 716 | font-weight: 600; 717 | margin-bottom: 10px; 718 | } 719 | 720 | .resume .resume-item ul { 721 | padding-left: 20px; 722 | text-align: justify; 723 | } 724 | 725 | .resume .resume-item ul li { 726 | padding-bottom: 10px; 727 | list-style: none; 728 | } 729 | 730 | .resume .resume-item:last-child { 731 | padding-bottom: 0; 732 | } 733 | 734 | .resume .resume-item::before { 735 | content: ""; 736 | position: absolute; 737 | width: 16px; 738 | height: 16px; 739 | border-radius: 50px; 740 | left: -9px; 741 | top: 0; 742 | background: #fff; 743 | border: 2px solid #8a49a8; 744 | } 745 | 746 | .like-item { 747 | padding-top: 10px !important; 748 | font-size: 1.1em !important; 749 | font-family: sans-serif !important; 750 | } 751 | 752 | .like-btn { 753 | background-color: #934cce5e !important; 754 | border-color: #934cce5e !important; 755 | padding: 0.25rem 0.98rem !important; 756 | border-radius: 5px !important; 757 | line-height: 1.4 !important; 758 | transition: 0.3s ease !important; 759 | } 760 | 761 | .like-btn:hover { 762 | transform: translateY(-2px) !important; 763 | background-color: #a24dd386 !important; 764 | border-color: #a24dd386 !important; 765 | } 766 | 767 | .animate-like { 768 | animation-name: likeAnimation; 769 | animation-fill-mode: forwards; 770 | animation-duration: 0.85s; 771 | } 772 | @keyframes likeAnimation { 773 | 0% { 774 | transform: scale(1.5); 775 | } 776 | 100% { 777 | transform: scale(1); 778 | } 779 | } 780 | 781 | .fork-btn { 782 | font-size: 1.1em !important; 783 | padding-top: 10px !important; 784 | } 785 | 786 | .fork-btn-inner { 787 | line-height: 1.4em !important; 788 | background-color: #934cce5e !important; 789 | padding: 0.25rem 1.1rem !important; 790 | vertical-align: middle !important; 791 | text-align: center !important; 792 | } 793 | 794 | .fork-btn-inner:hover { 795 | transform: translateY(-2px) !important; 796 | background-color: #a24dd386 !important; 797 | border-color: #a24dd386 !important; 798 | } 799 | .fork-btn-inner::after { 800 | display: none !important; 801 | } 802 | --------------------------------------------------------------------------------