diff --git a/index.html b/index.html
index dbc6397..8ffe020 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
     <link rel="stylesheet" href="style.css">
     <script src="https://kit.fontawesome.com/844c24b1cd.js" crossorigin="anonymous"></script>
-    <title>SM Tanvir - Home</title>
+    <title>SultanRains</title>
 </head>
 <body>
     <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
@@ -43,11 +43,11 @@
             <div>
                 <h1 class="mb-3 fw-bold">Hi ! I am <span class="text-warning">SM Tanvir</span></h1>
                 <h1 class="mb-3 fw-bold">I am interested in </h1>
-                <h1 class="mb-3 text-danger">Photography</h1>
+                <h1 class="mb-3 text-danger typewrite" data-period="2000" data-type='[ "Music", "Videography", "Editing", "Learning Book", "Scouting" ]'></h1>
                 <div class="header-social-icons mt-5">
-                    <a href="#"><i class="fa-brands fa-facebook"></i></a>
-                    <a href="#"><i class="fa-brands fa-instagram"></i></a>
-                    <a href="#"><i class="fa-brands fa-youtube"></i></a>
+                    <a href="https://www.facebook.com/Tanvir2696?mibextid=ZbWKwL" target=”_blank”><i class="fa-brands fa-facebook"></i></a>
+                    <a href="https://www.instagram.com/sm_tanvir_77" target=”_blank”><i class="fa-brands fa-instagram"></i></a>
+                    <a href="https://www.tiktok.com/@sm_tanvir_77" target=”_blank”><i class="fa-brands fa-tiktok"></i></a>
                 </div>
             </div>
         </header>
@@ -62,14 +62,10 @@ <h2 class="d-inline-block pb-2 pt-3 border-bottom border-3 px-4">MY INFORMATION<
                     </div>
                     <div class="col-12 col-lg-6 text-center margin-top-50px">
                         <h2>Personal skills</h2>
-                        <ul class="mt-3 d-inline-block text-start">
-                            <li class="list-group-item my-2"><i class="fa-solid fa-check text-success me-2"></i>Programming (C,C++,PYTHON)</li>
-                            <li class="list-group-item my-2"><i class="fa-solid fa-check text-success me-2"></i>Robot Developing</li>
-                            <li class="list-group-item my-2"><i class="fa-solid fa-check text-success me-2"></i>Scientific Project Developing</li>
-                            <li class="list-group-item my-2"><i class="fa-solid fa-check text-success me-2"></i>Circuit Designing</li>
-                            <li class="list-group-item my-2"><i class="fa-solid fa-check text-success me-2"></i>Esports Gaming</li>
-                            <li class="list-group-item my-2"><i class="fa-solid fa-check text-success me-2"></i>Creative Writing</li>
-                            <li class="list-group-item my-2"><i class="fa-solid fa-check text-success me-2"></i>Content Editing</li>
+                        <ul class="mt-3 d-inline-block text-start my-auto">
+                            <li class="list-group-item my-2"><i class="fa-solid fa-check text-success me-2"></i>Video Editing</li>
+                            <li class="list-group-item my-2"><i class="fa-solid fa-check text-success me-2"></i>Present Speech</li>
+                            <li class="list-group-item my-2"><i class="fa-solid fa-check text-success me-2"></i>Scouting</li>
                         </ul>
                     </div>
                 </div>
@@ -82,140 +78,186 @@ <h2 class="d-inline-block pb-2 pt-3 border-bottom border-3 px-4">Academic Histor
             </div>
             <div class="container mt-5 pb-5">
                 <div class="row mt-3">
-                    <div class="col-12 col-lg-4 my-3">
-                        <div class="card bg-primary bg-opacity-75">
+                    <div class="col-12 col-lg-6 my-3">
+                        <div class="card text-dark">
                             <div class="card-body">
-                              <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
+                                <p class="card-text text-center">
+                                    <i class="fa-solid fa-school text-primary fs-2 mb-3 me-3"></i>My School
+                                    <br><span class="fw-bold">Ideal Residential School and College</span>
+                                </p>
                             </div>
                         </div>
                     </div>
-                    <div class="col-12 col-lg-4 my-3">
-                        <div class="card bg-danger bg-opacity-75">
-                            <div class="card-body">
-                              <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
+                    <div class="col-12 col-lg-6 my-3">
+                        <div class="card">
+                            <div class="card-body text-dark">
+                                <p class="card-text text-center">
+                                    <i class="fa-solid fa-building-columns text-primary fs-2 mb-3 me-3"></i>My College
+                                    <br><span class="fw-bold">Narsingdi Model College</span>
+                                </p>
                             </div>
                         </div>
                     </div>
-                    <div class="col-12 col-lg-4 my-3">
-                        <div class="card bg-warning bg-opacity-75">
-                            <div class="card-body">
-                              <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
-                            </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="family-gallery" class="bg-black text-white pt-5">
+            <div class="container my-gallery-pic pb-5">
+                <div class="text-center">
+                    <h2 class="d-inline-block pb-2 mb-5 pt-3 border-bottom border-3 px-4">Who I am</h2>
+                </div>
+                <div class="grid text-center">
+                    <div class="row">
+                        <div class="col-lg-4 col-6 mb-4 mb-lg-0">
+                          <img
+                            src="images/0Z2A7431.jpg"
+                            class="w-100 shadow-1-strong rounded mb-4"
+                            alt="Boat on Calm Water"
+                          />
+                      
+                          <img
+                            src="images/FB_IMG_1635350235388.jpg"
+                            class="w-100 shadow-1-strong rounded mb-4"
+                            alt="Wintry Mountain Landscape"
+                          />
+                        </div>
+                      
+                        <div class="col-lg-4 col-6 mb-4 mb-lg-0">
+                          <img
+                            src="images/FB_IMG_1635350278179.jpg"
+                            class="w-100 shadow-1-strong rounded mb-4"
+                            alt="Mountains in the Clouds"
+                          />
+                      
+                          <img
+                            src="images/FB_IMG_1638504037710.jpg"
+                            class="w-100 shadow-1-strong rounded mb-4"
+                            alt="Boat on Calm Water"
+                          />
+                        </div>
+                      
+                        <div class="col-lg-4 col-6 mb-4 mb-lg-0">
+                          <img
+                            src="images/FB_IMG_1669899407797.jpg"
+                            class="w-100 shadow-1-strong rounded mb-4"
+                            alt="Waves at Sea"
+                          />
+                        </div>
+                        <div class="col-lg-4 col-6 mb-4 mb-lg-0">
+                            <img
+                              src="images/IMG_20220505_130952.jpg"
+                              class="w-100 shadow-1-strong rounded mb-4"
+                              alt="Yosemite National Park"
+                            />
                         </div>
                     </div>
                 </div>
             </div>
         </section>
 
-        <section id="family-gallery" class="bg-black text-white pt-5">
-            <div class="container pb-5">
-                <div class="row">
-                    <div class="col-12 col-lg-6 mt-5 my-gallery-pic">
-                        <h2 class="pt-3 text-center text-lg-start mb-5">MY Gallery</h2>
-                        <div class="row text-center">
-                            <div class="col">
-                                <img src="images/0Z2A7431.jpg" alt="">
-                            </div>
-                            <div class="col">
-                                <img src="images/FB_IMG_1635350235388.jpg" alt="">
-                            </div>
-                            <div class="col">
-                                <img src="images/FB_IMG_1635350278179.jpg" alt="">
-                            </div>
-                            <div class="col">
-                                <img src="images/FB_IMG_1638504037710.jpg" alt="">
+        <section id="academic-history" class="bg-dark text-white pt-5">
+            <div class="text-center">
+                <h2 class="d-inline-block pb-2 pt-3 border-bottom border-3 px-4">Personal Interest</h2>
+            </div>
+            <div class="container mt-5 pb-5">
+                <div class="row mt-3  text-primary">
+                    <div class="col mb-3 mb-lg-0">
+                        <div class="card">
+                            <div class="card-body">
+                                <p class="card-text text-center">
+                                    <i class="fa-solid fa-video fs-2 mb-3 me-3"></i>
+                                    <br><span class="fw-bold">Videography </span>
+                                </p>
                             </div>
-                            <div class="col">
-                                <img src="images/FB_IMG_1669899407797.jpg" alt="">
+                        </div>
+                    </div>
+                    <div class="col mb-3 mb-lg-0">
+                        <div class="card">
+                            <div class="card-body">
+                                <p class="card-text text-center">
+                                    <i class="fa-solid fa-music fs-2 mb-3 me-3"></i>
+                                    <br><span class="fw-bold">Music</span>
+                                </p>
                             </div>
-                            <div class="col">
-                                <img src="images/IMG_20220505_130952.jpg" alt="">
+                        </div>
+                    </div>
+                    <div class="col mb-3 mb-lg-0">
+                        <div class="card">
+                            <div class="card-body">
+                                <p class="card-text text-center">
+                                    <i class="fa-solid fa-pen-to-square fs-2 mb-3 me-3"></i>
+                                    <br><span class="fw-bold">Editing</span>
+                                </p>
                             </div>
                         </div>
                     </div>
-                    <div class="col-12 col-lg-6 mt-5 family-gallery-pic">
-                        <h2 class="pt-3 text-center text-lg-start mb-5">Family Gallery</h2>
-                        <div id="carouselExampleCaptions" class="carousel slide mx-auto" data-bs-ride="carousel">
-                            <div class="carousel-indicators">
-                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
-                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
-                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
-                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
-                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4" aria-label="Slide 5"></button>
-                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="5" aria-label="Slide 6"></button>
-                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="6" aria-label="Slide 7"></button>
-                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="7" aria-label="Slide 8"></button>
-                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="8" aria-label="Slide 9"></button>
-                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="9" aria-label="Slide 10"></button>
-                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="10" aria-label="Slide 11"></button>
-                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="11" aria-label="Slide 12"></button>
-                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="12" aria-label="Slide 13"></button>
-                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="13" aria-label="Slide 14"></button>
-                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="14" aria-label="Slide 15"></button>
+                    <div class="col mb-3 mb-lg-0">
+                        <div class="card">
+                            <div class="card-body">
+                                <p class="card-text text-center">
+                                    <i class="fa-solid fa-book fs-2 mb-3 me-3"></i>
+                                    <br><span class="fw-bold">Learning Book</span>
+                                </p>
                             </div>
-                            <div class="carousel-inner">
-                                <div class="carousel-item active">
-                                    <img src="images/FB_IMG_1669900308661.jpg" class="d-block w-100" alt="">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="images/20210917_212404.jpg" class="d-block w-100" alt="">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="images/DSC_0400.jpg" class="d-block w-100" alt="">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="images/1669899932094.jpg" class="d-block w-100" alt="">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="images/1669900125940.jpg" class="d-block w-100" alt="">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="images/FB_IMG_1646413981791.jpg" class="d-block w-100" alt="">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="images/Screenshot_20221201-192256_Facebook.jpg" class="d-block w-100" alt="">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="images/Screenshot_20221201-192706_Facebook.jpg" class="d-block w-100" alt="">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="images/SquarePic_20210920_19541010.jpg" class="d-block w-100" alt="">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="images/FB_IMG_8514830349909827669.jpg" class="d-block w-100" alt="">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="images/FB_IMG_1669899358371.jpg" class="d-block w-100" alt="">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="images/FB_IMG_1669900036028.jpg" class="d-block w-100" alt="">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="images/1669900094565.jpg" class="d-block w-100" alt="">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="images/1669899890122.jpg" class="d-block w-100" alt="">
-                                </div>
-                                <div class="carousel-item">
-                                    <img src="images/_MG_1465 (1).jpg" class="d-block w-100" alt="">
-                                </div>
+                        </div>
+                    </div>
+                    <div class="col mb-3 mb-lg-0">
+                        <div class="card">
+                            <div class="card-body">
+                                <p class="card-text text-center">
+                                    <i class="fa-solid fa-person-military-rifle fs-2 mb-3 me-3"></i>
+                                    <br><span class="fw-bold">Scouting</span>
+                                </p>
                             </div>
-                            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
-                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                                <span class="visually-hidden">Previous</span>
-                            </button>
-                            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
-                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                                <span class="visually-hidden">Next</span>
-                            </button>
                         </div>
                     </div>
                 </div>
             </div>
         </section>
 
-        <section class="bg-dark">
-            fsd
+        <section class="bg-black py-5">
+            <div class="container">
+                <div class="text-center">
+                    <h2 class="d-inline-block pb-2 pt-3 border-bottom border-3 px-4 text-white">Experiences</h2>
+                </div>
+                <div id="carouselExampleCaptions" class="carousel slide who-gallery" data-bs-ride="carousel">
+                    <div class="carousel-indicators">
+                        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+                        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
+                        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
+                    </div>
+
+                    <div class="carousel-inner">
+                        <div class="carousel-item active">
+                            <img src="images/FB_IMG_1669899358371.jpg" class="d-block w-100" alt="">
+                            <div class="carousel-caption bg-opacity-50 bg-primary">
+                                <h5>IRSCB কতৃক আয়োজিত science project</h5>
+                            </div>
+                        </div>
+                        <div class="carousel-item">
+                            <img src="images/FB_IMG_1669899407797.jpg" class="d-block w-100" alt="">
+                            <div class="carousel-caption bg-opacity-50 bg-primary">
+                                <h5>ইসলামিক কুইজ জাতনে চাই এফডিসি</h5>
+                            </div>
+                        </div>
+                        <div class="carousel-item">
+                            <img src="images/SquarePic_20220802_18074454.jpg" class="d-block w-100" alt="">
+                            <div class="carousel-caption bg-opacity-50 bg-primary">
+                                <h5>Birthday 2022</h5>
+                            </div>
+                        </div>
+                    </div>
+                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
+                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                        <span class="visually-hidden">Previous</span>
+                    </button>
+                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
+                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                        <span class="visually-hidden">Next</span>
+                    </button>
+                </div>
+            </div>
         </section>
     </main>
 
@@ -225,14 +267,16 @@ <h2 class="pt-3 text-center text-lg-start mb-5">Family Gallery</h2>
                 <p class="d-inline-block pb-1 pt-3 border-bottom border-2 px-2">CONTACT</p>
             </div>
             <div class="my-3 row text-center">
-                <div class="col-12 col-lg-4 my-2"><i class="fa-solid fa-house me-3"></i>New York, NY 10012, US</div>
+                <div class="col-12 col-lg-4 my-2"><i class="fa-solid fa-house me-3"></i>Home town - Cumilla</div>
                 <div class="col-12 col-lg-4 my-2"><i class="fa-solid fa-envelope me-3"></i>info@example.com</div>
-                <div class="col-12 col-lg-4 my-2"><i class="fa-solid fa-phone me-3"></i>+ 01 234 567 89</div>
+                <div class="col-12 col-lg-4 my-2"><i class="fa-solid fa-house me-3"></i>Lives in - Dhaka</div>
             </div>
-            <p class="text-center">This website is created by <a href="#" class="fw-bold text-decoration-none text-warning">SH MARUF</a></p>
+            <p class="text-center">This website is created by <a href="https://shawkath646.github.io/Portfolio/" target="_blank" class="fw-bold text-decoration-none text-warning">SH MARUF</a></p>
         </div>
         <p class="py-3 text-center bg-dark footer-copy w-full">©2022 Copyright SH MARUF</p>
     </footer>
+
+    <script src="index.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..4ef4639
--- /dev/null
+++ b/index.js
@@ -0,0 +1,56 @@
+var TxtType = function(el, toRotate, period) {
+    this.toRotate = toRotate;
+    this.el = el;
+    this.loopNum = 0;
+    this.period = parseInt(period, 10) || 2000;
+    this.txt = '';
+    this.tick();
+    this.isDeleting = false;
+};
+
+TxtType.prototype.tick = function() {
+    var i = this.loopNum % this.toRotate.length;
+    var fullTxt = this.toRotate[i];
+
+    if (this.isDeleting) {
+    this.txt = fullTxt.substring(0, this.txt.length - 1);
+    } else {
+    this.txt = fullTxt.substring(0, this.txt.length + 1);
+    }
+
+    this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
+
+    var that = this;
+    var delta = 200 - Math.random() * 100;
+
+    if (this.isDeleting) { delta /= 2; }
+
+    if (!this.isDeleting && this.txt === fullTxt) {
+    delta = this.period;
+    this.isDeleting = true;
+    } else if (this.isDeleting && this.txt === '') {
+    this.isDeleting = false;
+    this.loopNum++;
+    delta = 500;
+    }
+
+    setTimeout(function() {
+    that.tick();
+    }, delta);
+};
+
+window.onload = function() {
+    var elements = document.getElementsByClassName('typewrite');
+    for (var i=0; i<elements.length; i++) {
+        var toRotate = elements[i].getAttribute('data-type');
+        var period = elements[i].getAttribute('data-period');
+        if (toRotate) {
+          new TxtType(elements[i], JSON.parse(toRotate), period);
+        }
+    }
+    // INJECT CSS
+    var css = document.createElement("style");
+    css.type = "text/css";
+    css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
+    document.body.appendChild(css);
+};
\ No newline at end of file
diff --git a/style.css b/style.css
index 3a598ae..4af5578 100644
--- a/style.css
+++ b/style.css
@@ -51,10 +51,7 @@ header {
     padding-bottom: 150px;
 }
 .my-gallery-pic img {
-    width: 300px;
-    height: 250px;
-    object-position: top;
-    object-fit: cover;
+    /* width: 300px; */
     border: 2px solid #ffbb00;
     padding: 5px;
     margin: 5px 0;
@@ -67,4 +64,13 @@ header {
 .footer-copy {
     color: rgb(204, 198, 198);
     margin-bottom: 0;
+}
+.who-gallery {
+    max-width: 600px;
+    margin: 0 auto;
+}
+.who-gallery img {
+    height: 500px;
+    object-fit: contain;
+    object-position: center;
 }
\ No newline at end of file
