Completed adding Experience Section

Author: sumana-2705

contact-me.html

@@ -12,7 +12,7 @@
         <nav class="navbar">
             <a href="index.html" class="active">Home</a>
             <a href="index.html#education">Education</a>
-            <a href="#">Experience</a>
+            <a href="index.html#experience">Experience</a>
             <a href="projects.html">Projects</a>
         </nav>
         <a href="contact-me.html" class="contact">Contact Me</a>

index.html

@@ -46,7 +46,7 @@ <h1>I'm<span> A.Sumana Sree<br></span></h1>
             <h2 class="heading">Education</h2>
 
             <p>
-                My educational journey began at Jawahar Navodaya Vidyalaya, Lepakshi, where I was honored to be among the top 80 students selected from nearly 4,000 applicants through a competitive entrance exam at the age of 10. This early achievement set the foundation for my academic excellence. I went on to complete my higher secondary education at Narayana Junior College, where I further honed my skills and deepened my knowledge.    
+                My educational journey began at Jawahar Navodaya Vidyalaya, Lepakshi, where I was honored to be among the top 80 students selected from nearly 4,000 applicants through a competitive entrance exam (JNVST) at the age of 10. This early achievement set the foundation for my academic excellence. I went on to complete my higher secondary education at Narayana Junior College, where I further honed my skills and deepened my knowledge.    
             </p>            
             <p>
                 Currently, I am in the 4th year of my Integrated Dual Degree program at the prestigious IIT (BHU), Varanasi, one of India's top 10 engineering colleges. I earned my place here by successfully clearing the JEE Advanced, one of the toughest exams in India, showcasing my dedication and perseverance.
@@ -57,9 +57,48 @@ <h2 class="heading">Education</h2>
     </section>
 
     <section id ="experience" class="experience">
-        <div class="experience-content">
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam quis enim est dicta et laudantium repellat reprehenderit tempora. Quam accusantium ab tempora reiciendis modi et laboriosam ipsa voluptate inventore vero.
-        </div>
+        <div class="experience-heading"><h2>Experience</h2></div>
+        <div class="timeline">
+            <div class="role">
+              <div class="period">
+                2024 (Aug)
+              </div>
+              <div class="dot"></div>
+              <div class="experience-content">
+                <h3>Research Scholar [current]</h3>
+                <h4>IIT (BHU)</h4>
+                <p>
+                  Working on a project titled "Identifying Crime Prone Roads in Hyderabad using Telecom and Nightlight Data" under the guidance of Dr. Agnivesh Pani. This project involves analyzing data to enhance urban safety and security. 
+                </p>
+              </div>
+            </div>
+            <div class="role">
+              <div class="period">
+                2024 (Oct)
+              </div>
+              <div class="dot"></div>
+              <div class="experience-content">
+                <h3>Open-Source Contributor</h3>
+                <h4>Hacktoberfest</h4>
+                <p>
+
+Participated in Hacktoberfest, collaborating with global developers to enhance repository functionalities and tackle machine learning challenges. Successfully completed the event with 4+ meaningful pull requests, earning recognition and badges for impactful open-source contributions.
+                </p>
+              </div>
+            </div>
+            <div class="role">
+                <div class="period">2024 (June)</div>
+                <div class="dot"></div>
+                <div class="experience-content">
+                  <h3>Internship</h3>
+                  <h4>Inland Waterways Authority of India</h4>
+                  <p>
+                    Worked as an intern at IWAI (Vijayawada), contributing to the development of India’s National Waterway 4. Gained insights into shipping and tourism transformations along the Krishna and Godavari Rivers.
+                  </p>
+                </div>
+              </div>
+          </div>
+          
     </section>
 
 

projects.html

@@ -13,10 +13,10 @@
         <nav class="navbar">
             <a href="index.html" class="active">Home</a>
             <a href="index.html#education">Education</a>
-            <a href="#">Experience</a>
+            <a href="index.html#experience">Experience</a>
             <a href="projects.html">Projects</a>
         </nav>
-        <a href="index.html#contact-me" class="contact">Contact Me</a>
+        <a href="contact-me.html" class="contact">Contact Me</a>
     </header>
 
     <section class = "projects">

style.css

@@ -14,6 +14,7 @@
     top: 0;
     left: 0;
     width: 100%;
+    height: 90px;
     padding: 35px 12%;
     background: rgba(0,0,0,0.8);
     backdrop-filter:blur(10px) ;
@@ -295,19 +296,84 @@ span{
     resize: none;
 }
 
-.experience h2{
+.experience-heading h2{
+    color: orangered;
     text-align: center;
-    font-size: 32px;
-    color: black;
+    font-size: 36px;
+    padding-top: 3%;
+    padding-bottom: 4%;
 }
-.experience-content{
-    display:flex;
-    height: 100vh;
-    justify-content: center;
-    padding: 12% 8%;
+
+.timeline{
+    width: 100%;
     align-items: center;
-    background-color: whitesmoke;
+    display: flex;
+    flex-direction: column;
+    position:relative;
+    padding-left: 20%;
+    padding-bottom: 3.5%;
+}
+.role{
+    display: flex;
+    position: relative;
+    margin-bottom: 40px;
+    width: 100%;
+}
+.period{
+    font-weight: bold;
+    font-size: 20px;
+    color: #302f2f;
+    width: 150px;
+    text-align: right;
+    margin-right: 30px;
+}
+.month{
+    font-weight:bold;
+    font-size: 17px;
+    color:#302f2f;
+    line-height: 1.5;
+}
+.timeline::before {
+    content: "";
+    position: absolute;
+    left: 29.06%; 
+    top: 10px;
+    bottom: 70px;
+    width: 2px;
+    background-color: #ccc; 
+}
+.dot{
+    position: absolute;
+    left: 135px;
+    top: 4px;
+    width: 8px;
+    height: 8px;
+    background-color:#1a1a1a;
+    border-radius: 50%;
+}
+.experience-content{
+    width: 100%;
+    padding-right: 20%;
+    
 }
+.experience-content h3{
+    font-size: 20px;
+    color: orangered;
+    margin: 0;
+    margin-bottom: 5px;
+}
+.experience-content h4{
+    font-size: 17px;
+    color: #555;
+    margin: 0;
+    margin-bottom: 10px;
+}
+.experience-content p{
+    font-size: 17px;
+    color: #666;
+    line-height: 1.5;
+}
+
 .footer{
     position: relative;
     bottom: 0;