Initial commit with updated skills and navigation

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^5.3.4",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,50 +1,23 @@
-
-import './App.css';
-import Lottie from 'react-lottie'; // Import react-lottie
+import React from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import NavBar from './Components/NavBarComponent/NavBar';
-import Typing from './Components/Section1/Typing';
-import BriefItro from './Components/Section2/BriefIntro';
-import firstLaptopAnimation from './firstLaptop.json'; 
-import Footerr from './Components/Section3/Footerr';
+import Home from './Components/Home';
+import About from './Components/About/About';
+import Skills from './Components/Skills/Skills.js';
+import Footerr from './Components/Footer/Footerr';
+import './App.css';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <NavBar/>
-      </header>
-
-      <section class="content">
-        <div class="section11">
-        <Typing
-          text={[
-            "Software Developer.",
-            "Coding ideas into reality.",
-          ]}
-          typingSpeed={100}
-          deleteSpeed={50}
-          duration={1000}
-        />
-          <Lottie
-            options={{
-              loop: true,
-              autoplay: true,
-              animationData: firstLaptopAnimation,
-              }}
-              height={530}
-              width={530}
-            />
-
-        </div>
-      <BriefItro/>
-      <Footerr/>
-      </section>
-      {/* <section class="content2">
-       
-      </section> */}
-
-
-    </div>
+    <Router>
+      <NavBar />
+      <Switch>
+        <Route exact path="/" component={Home} />
+        <Route path="/about" component={About} />
+        <Route path="/skills" component={Skills} />
+      </Switch>
+      <Footerr />
+    </Router>
   );
 }
 

src/Components/About/About.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+
+import './Style.css';
+const AboutMe = () => {
+  return (
+    <div class="Container1">
+        <div className="container2">
+            <h1>Get to <span class="highlight">Know</span> About Me!</h1>
+            <p>Hi, my name is <span className="highlight">Sanjana</span> and I'm from Gadwal, Telangana.</p>
+            <p>Currently, I'm a second-year student at <span className="highlight">Scaler School of Technology</span>, where I'm gaining practical knowledge and skills in various computer science concepts.</p>
+            <p>I <span class="highlight">believe</span> that computer science is not just about theoretical concepts but also about practical learning. It's about understanding how algorithms work, solving <span className="highlight">real-world problems, </span>, and building innovative solutions.</p>
+            <p>As a <span className="highlight">web developer</span>, I enjoy creating websites and applications that are both functional and visually appealing.</p>
+            <p>I'm always open to new collaborations and opportunities where I can apply my skills and contribute to meaningful projects. Feel free to <span className="highlight">connect</span> with me through the links provided in the footer.</p>
+        </div>
+        <div class="container3">
+            <h2>Education</h2>
+                <div class="contentss">
+                    <div class="box">
+                        <h3>Schooling <span>(2011-2021)</span></h3>
+                        <p>I studied at Kakatiya High School, Gadwal, until my 10th grade.</p>
+                    </div>
+                    <div class="box">
+                        <br></br>
+                        <h3>Intermediate Education <span>(2021-2023)</span></h3>
+                        <p>I completed my 11th and 12th grades at Resonance, Hyderabad, studying Mathematics, Physics, and Chemistry, while also preparing for competitive exams.</p>
+                    </div>
+                    <div class="box">
+                        <h3>Under-Graduation <span>(2023-2027)</span></h3>
+                        <p>I am currently pursuing a Computer Science degree at Scaler School of Technology, focusing on improving my skills.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+  );
+}
+
+export default AboutMe;

src/Components/About/Style.css

@@ -0,0 +1,86 @@
+/* Existing Styles */
+/* <-- About --> */
+.Container1 {
+    display: flex;
+    justify-content: space-between;
+    background-color: #353941;
+    color: aliceblue;
+    min-height: 92vh;
+  }
+
+  .container2 {
+    padding-right: 20px;
+    position: relative;
+    top: 8rem;
+    left: 8rem;
+    font-size: 1.11rem;
+  }
+
+  .highlight {
+    color: #b093d6;
+  }
+
+  .container2 p {
+    line-height: 1.6;
+    max-width: 100ch;
+    overflow-wrap: break-word;
+  }
+
+  .contentss {
+    display: flex;
+    flex-direction: column;
+    padding-left: 10rem;
+    padding-top: 4rem;
+  }
+
+  .box {
+    margin: 10px;
+    background-color: #26282B;
+    display: flex;
+    flex-direction: column;
+    padding: 7px;
+    margin: 8px;
+    margin-left: 5rem;
+    width: 65%;
+    height: 30%;
+    align-items: center;
+    text-align: center;
+  }
+
+
+  /* Responsive Design */
+
+  @media (max-width: 768px) {
+    .container2 {
+      top: 5rem;
+      left: 5rem;
+    }
+
+    .contentss {
+      padding-left: 5rem;
+      padding-top: 2rem;
+    }
+
+    .box {
+      width: 80%;
+      margin-left: 0;
+    }
+  }
+
+  /* Box Transition */
+
+  .box {
+    transition: transform 0.3s ease-in-out; /* Add transition for smooth transformation */
+
+  }
+  .box h3{
+    color: #b093d6;
+  }
+  .box span{
+    color:white
+  }
+
+  .box:hover {
+    transform: scale(1.05); /* Apply a slight scale on hover */
+  }
+

src/Components/Section3/Footerr.css → src/Components/Footer/Footerr.css

@@ -4,20 +4,21 @@
     display: flex;
     justify-content: space-evenly;
     align-items: center;
-    padding: 10px; /* Padding around the footer content */
+    padding: 10px;
+    background-color: #353941; /* Footer background color */
   }
 
   .developer-info p,
   .copyright p {
-    color: white; /* Text color */
+    color: white;
   }
 
   .social-icons a {
     color: white; /* Icon color */
     text-decoration: none; /* Remove underline from links */
-    margin-right: 10px; /* Spacing between icons */
+    margin-right: 10px;
   }
 
   .social-icons a:last-child {
-    margin-right: 0; /* Remove margin from the last icon */
+    margin-right: 0; 
   }