correction

index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/Image/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- AOS Link -->
-    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+    <!-- <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> -->
 
     <title>My Portfolio</title>
   </head>

src/App.jsx

@@ -1,36 +1,34 @@
-import React from 'react'
-import './App.css'
-import Navbar from './Component/Navbar/Navbar'
-import {Hero} from './Component/Hero/Hero'
-import Contact from './Component/Contact/Contact'
-import Project from './Component/Project/Project'
-import About from './Component/About/About'
-import Skill from './Component/Skill/Skill'
-import styled from 'styled-components'
+import React from "react";
+import "./App.css";
+import { Hero } from "./Component/Hero/Hero";
+import Contact from "./Component/Contact/Contact";
+import Project from "./Component/Project/Project";
+import About from "./Component/About/About";
+import Skill from "./Component/Skill/Skill";
+import styled from "styled-components";
 function App() {
   return (
     <>
-    <Topcontainer>
-      <Hero/>
-       <About/>
-       <Skill/>
-      <Project/>  
-      <Contact/>
+      <Topcontainer>
+        <Hero />
+        <About />
+        <Skill />
+        <Project />
+        <Contact />
       </Topcontainer>
-
     </>
-  )
+  );
 }
 
-export default App
+export default App;
 
 const Topcontainer = styled.div`
-display: flex;
-flex-direction: column;
-gap: 150px;
-padding-bottom: 200px;
+  display: flex;
+  flex-direction: column;
+  gap: 150px;
+  padding-bottom: 200px;
 
-@media screen and (max-width: 900px) {
-  gap: 6rem;
-}
-`
+  @media screen and (max-width: 900px) {
+    gap: 6rem;
+  }
+`;

src/Component/About/About.jsx

@@ -65,6 +65,7 @@ function About() {
 export default About;
 
 const AboutContainer = styled.div`
+border: 3px solid wheat;
   display: flex;
   justify-content: center;
   align-items: center;

src/Component/Contact/Contact.jsx

@@ -58,7 +58,7 @@ function Contact() {
 export default Contact;
 
 const ContactContainer = styled.div`
- 
+ border: 3px solid white;
   font-weight: 100;
   height: 100%;
   display: flex;

src/Component/Hero/Hero.jsx

@@ -82,6 +82,8 @@ export function Hero() {
 // export default Hero;
 
 const HeroContainer = styled.div`
+border: 1px solid white;
+width: 100vw;
   @media screen and (max-width: 900px) {
     height: 80vh;
   }

src/Component/Navbar/Navbar.jsx

@@ -10,7 +10,7 @@ function Navbar() {
   return (
     <>
       <header>
-        <nav className=" w-11/12  m-auto flex justify-between items-center text-white  ">
+        <Nav className="  ">
           <Name className=" text-3xl font-semibold ">Aditya</Name>
           <Navitems>
             <Link
@@ -71,14 +71,22 @@ function Navbar() {
               <li className="list-none  cursor-pointer "> Contact</li>
             </Link>
           </Navitems>
-        </nav>
+        </Nav>
       </header>
     </>
   );
 }
 
 export default Navbar;
 
+const Nav = styled.nav`
+  width:100%;
+  border: 3px solid white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
 const Name = styled.h1`
 margin-right: 5rem;
   @media screen and (max-width: 600px) {

src/Component/Skill/Skill.jsx

@@ -42,6 +42,7 @@ function Skill() {
 
 export default Skill;
 const SkillContainer = styled.div`
+border: 3px solid white;
   width: 80%;
   margin: 0 auto;
   h1 {