Update exp/edu

Author: nightcoder26

package-lock.json

@@ -26,6 +26,7 @@
     "react-icons": "^5.2.1",
     "react-parallax-tilt": "^1.7.241",
     "react-router-dom": "^6.26.2",
+    "react-simple-typewriter": "^5.0.1",
     "react-tooltip": "^5.28.0"
   },
   "devDependencies": {

package.json

@@ -88,9 +88,9 @@ nav ul {
   display: flex;
   justify-content: space-between;
   width: 100%;
-  padding: 0.4rem 1rem;
+  padding: 0.6rem 1rem;
   font-weight: 600;
-  font-size: large;
+  font-size: larger;
 }
 
 .home-link {
@@ -115,13 +115,15 @@ nav ul {
   color: white;
 }
 
+
+
 .home-link:hover p:last-child {
   color: #75baf6;
 }
 
 .hello-text{
   font-family: 'Mark Pro Heavy';
-  font-size: 2rem;
+  font-size: 4rem;
   /* color: #75baf6; */
 }
 
@@ -171,6 +173,10 @@ nav ul {
   width: fit-content;
 }
 
+.right-nav-li {
+  font-weight: 400;
+}
+
 .right-nav-li::after {
   content: "";
   position: absolute;
@@ -222,7 +228,7 @@ nav ul {
   transform: scale(1.3) rotate(360deg);
 }
 .about h1 {
-  font-size: 3rem;
+  font-size: 4rem;
 }
 .pronouns {
   font-size: 1.2rem;
@@ -285,13 +291,27 @@ nav ul {
 .social-links a:active {
   color: #76715f;
 }
+.exp-edu{
+  display: flex;
+  justify-content: space-evenly;
+  /* margin-left: 2rem; */
+
+  
+
+
 
+
+}
+/* 
+.education{
+  margin-left: 5rem;
+} */
 .project-head {
   display: flex;
   justify-content: center;
   margin-left: 7rem;
-  font-size: 2.5rem;
-  font-weight: 500;
+  font-size: 3rem;
+  font-weight: 600;
   position: relative;
   cursor: pointer;
   width: fit-content;
@@ -356,17 +376,55 @@ nav ul {
 .skills {
   margin: 3rem 0;
 }
+.head-titles
+{
+  
+  font-size: 2.5rem;
+  font-weight: 500;
+  margin-left: 5rem;
+
+  position: relative;
+  cursor: pointer;
+  width: fit-content;
+}
+
+.exp-titles
+{
+  
+  font-size: 2rem;
+  font-weight: 500;
+  /* margin-left: 5rem; */
+
+  position: relative;
+  cursor: pointer;
+  width: fit-content;
+}
+
 
 .skills-head {
-  font-size: 2.5rem;
+  /* font-size: 2rem; */
   font-weight: 500;
-  margin-left: 7rem;
+  margin-left: 5rem;
 
   position: relative;
   cursor: pointer;
   width: fit-content;
 }
-.skills-head::after {
+.head-titles::after {
+  content: "";
+  position: absolute;
+  height: 3px;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  background: #75baf6;
+  transition: width 0.2s;
+}
+.head-titles:hover::after {
+  width: 100%;
+}
+
+.exp-titles::after {
   content: "";
   position: absolute;
   height: 3px;
@@ -376,7 +434,7 @@ nav ul {
   background: #75baf6;
   transition: width 0.2s;
 }
-.skills-head:hover::after {
+.exp-titles:hover::after {
   width: 100%;
 }
 

src/App.css

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { FaHeart } from "react-icons/fa";
-import PinterestLayout from "./PinterestLayout.jsx";
+// import PinterestLayout from "./PinterestLayout.jsx";
 import { Link } from "react-router-dom";
 import "./App.css";
 import AnimatedCursor from "react-animated-cursor";
@@ -9,13 +9,19 @@ import card1 from "./images/card1.png";
 import { FaHashnode } from "react-icons/fa6";
 import { FaDiscord } from "react-icons/fa";
 import { MdOutlineFileDownload } from "react-icons/md";
+import { Typewriter } from 'react-simple-typewriter';
 import card2 from "./images/card2.png";
 import card3 from "./images/card3.png";
+import RVA from "./images/RVA.png";
 import Card from "./Card";
 import card4 from "./images/card4.png";
+import ExperienceCard from "./ExperienceCard.jsx";
 import { SiGmail } from "react-icons/si";
 import GitHubCalendar from "react-github-calendar";
+import vit from "./images/VIT-WHITE.png";
+import chaitanya from "./images/chaitanya.png";
 import ImageRotate from "./ImageRotate.jsx";
+import MilestoneLogo from "./images/Milestone.svg"
 
 const App = () => {
   const [showNav, setShowNav] = useState(true);
@@ -65,7 +71,7 @@ const App = () => {
 
   return (
     <>
-      <AnimatedCursor
+      {/* <AnimatedCursor
         innerSize={8}
         outerSize={35}
         innerScale={1}
@@ -78,7 +84,7 @@ const App = () => {
         outerStyle={{
           border: "3px solid var(--cursor-color-2)",
         }}
-      />
+      /> */}
       <div className="main-container">
         <nav className={`nav ${showNav ? "visible" : "hidden"}`}>
           <ul>
@@ -89,22 +95,25 @@ const App = () => {
                     <p className="link-orange">
                       <FaHeart />
                     </p>
-                    <p>Bhavitha</p>
+                    <p>bhavitha.</p>
                   </a>
                 </li>
               </div>
               <div className="right-nav">
                 <li className="right-nav-li">
-                  <a href="#Projects">Projects</a>
+                  <a href="#Projects">projects</a>
                 </li>
                 <li className="right-nav-li">
-                  <a href="#skills">Skills</a>
+                  <a href="#skills">skills</a>
                 </li>
-                <li className="cv">
+                <li className="right-nav-li">
+                  <a href="#experience">experience</a>
+                </li>
+                {/* <li className="cv">
                   <a href="">
-                    <MdOutlineFileDownload />
+                    
                   </a>
-                </li>
+                </li> */}
               </div>
             </div>
           </ul>
@@ -116,13 +125,24 @@ const App = () => {
                 <div className="flex justify-center items-end space-x-2">
                   <h1 className="hello-text">
                     Hello, I'm{" "}
-                    <strong className="link-orange title-bha">Bhavitha </strong> 👋
+                    <strong className="link-orange title-bha">
+                      <Typewriter
+                        words={['Bhavitha', 'భవిత', 'भविता',]}
+                        loop={true}
+                        cursor
+                        cursorStyle="|"
+                        typeSpeed={100}
+                        deleteSpeed={100}
+                        delaySpeed={500}
+                      />
+                    </strong>{" "}
+                    👋
                   </h1>
                 </div>
-                <p className="text-lg justify-center items-end text-gray-400 mt-4 space-x-2 py-8">
-                  I'm a Pre-final year Computer Science student <br /> from
-                  India who likes building random stuff. I am <br />
-                  always improving & curious to learn different things.
+                <p className="text-xxl-lg justify-center items-end text-gray-400 mt-4 space-x-2 py-8">
+                  I'm a Computer Science and I like building things, learning<br />
+                  new tech stacks, and hanging around online communities. <br />
+                  Welcome to my little 🤏 corner on the internet.
                 </p>
                 <div className="social-links">
                   <a href="https://github.com/nightcoder26">
@@ -146,6 +166,7 @@ const App = () => {
                 <ImageRotate />
               </div>
             </div>
+
             <div className="projects" id="Projects">
               <h2 className="project-head head-titles">Projects</h2>
               <div className="project-cards">
@@ -160,7 +181,8 @@ const App = () => {
                     "MongoDB",
                     "Express",
                   ]}
-                  link1={""}
+                  link1={"https://github.com/nightcoder26/Fin-Z"}
+                  link2={""}
                 />
                 <Card
                   image={card3}
@@ -172,6 +194,8 @@ const App = () => {
                     "Firebase",
                     "Node.js",
                   ]}
+                  link1={"https://github.com/nightcoder26/MEDICINE_DISPENSER"}
+                  link2={"https://medicine-dispenser.vercel.app/"}
                 />
                 <Card
                   image={card2}
@@ -184,6 +208,8 @@ const App = () => {
                     "Express",
                     "MongoDB",
                   ]}
+                  link1={"https://github.com/nightcoder26/Drive2Destiny"}
+                  link2={"https://nightcoder26.github.io/Drive2Destiny/"}
                 />
                 <Card
                   image={card4}
@@ -196,6 +222,8 @@ const App = () => {
                     "Express",
                     "MongoDB",
                   ]}
+                  link1={"https://github.com/nightcoder26/better_care"}
+                  link2={"https://better-care-tau.vercel.app/"}
                 />
               </div>
               <div className="button-container">
@@ -244,6 +272,57 @@ const App = () => {
                 </div>
               </div>
             </div>
+            <div className="exp-edu" id="experience">
+              <div className="education">
+                <h2 className=" exp-titles">Experience</h2>
+                <div>
+                  <div >
+                    <ExperienceCard
+                      company={"RVA"}
+                      role={"Web Developer"}
+                      startDate={"AUG, 2024"}
+                      endDate={"OCT, 2024"}
+                      // description={"Worked as a Web Developer for a freelance client. Collaborated with a client to enhance a React-based CRM & internal tools by resolving UI bugs and improving usability Refactored a single-component front-end into 20+ modular, reusable React components to improve maintainability Implemented validation logic across 5 user flows to ensure complete user inputs across multiple user interfaces"}
+                      description={"Refactored single component front-end and enhance a React-based CRM & internal tools by resolving UI bugs and improving validation logic"}
+                      logo={RVA}
+                    />
+                    <ExperienceCard
+                      company="Milestone Club - VIT-AP"
+                      role="Club Manager"
+                      startDate="FEB, 2023"
+                      endDate="SEP, 2024"
+                      description="As Manager, I led multiple teams to develop projects, conducted weekly code reviews, interviews for recruitment and teaching sessions"
+                      logo={MilestoneLogo}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div>
+                <h2 className="exp-titles ">Education</h2>
+                <div>
+                  <div >
+                    <ExperienceCard
+                      company={"Vellore Institute of Technology - AP"}
+                      role={"B.Tech, Computer Science Engineering with Business Systems"}
+                      startDate={"OCT, 2022"}
+                      endDate={"PRESENT"}
+                      // description={"Worked as a Web Developer for a freelance client. Collaborated with a client to enhance a React-based CRM & internal tools by resolving UI bugs and improving usability Refactored a single-component front-end into 20+ modular, reusable React components to improve maintainability Implemented validation logic across 5 user flows to ensure complete user inputs across multiple user interfaces"}
+                      description={`CGPA: 9.04/10\n Coursework: DSA, DBMS, OS, CN, Financial Management, Operations Research, Business Strategy`}
+                      logo={vit}
+                    />
+                    <ExperienceCard
+                      company="Sri Chaitanya Junior College"
+                      role="Intermediate, MPC"
+                      startDate="MAY, 2020"
+                      endDate="MARCH, 2022"
+                      description={`Grade: 975/1000\nSubjects: Mathematics, Physics, Chemistry`}
+                      logo={chaitanya}
+                    />
+                  </div>
+                </div>
+              </div>
+
+            </div>
             <div className="timeline"></div>
             <div className="github-graph">
               <h1 className="mb-8 pt-8 text-center head-titles">Recent Activity</h1>