implemented basic project timeline and sidebar

htdocs/assets/_footer.php

@@ -8,10 +8,10 @@
         </div>
         <div class="w-[50%] lg:w-[25%] flex flex-col justify-start items-start mb-10 lg:mb-0">
             <h6 class="font-bold mb-8">Site Pages</h6>
-            <a class="text-sm text-accent_three my-1 hover:text-accent_secondary transition transform duration-100" href="">Home Page</a>
+            <a class="text-sm text-accent_three my-1 hover:text-accent_secondary transition transform duration-100" href="index.php">Home Page</a>
-            <a class="text-sm text-accent_three my-1 hover:text-accent_secondary transition transform duration-100" href="">My Projects</a>
+            <a class="text-sm text-accent_three my-1 hover:text-accent_secondary transition transform duration-100" href="projects.php">My Projects</a>
-            <a class="text-sm text-accent_three my-1 hover:text-accent_secondary transition transform duration-100" href="">My Blog</a>
+            <a class="text-sm text-accent_three my-1 hover:text-accent_secondary transition transform duration-100" href="blog.php">My Blog</a>
-            <a class="text-sm text-accent_three my-1 hover:text-accent_secondary transition transform duration-100" href="">Contact Me</a>
+            <a class="text-sm text-accent_three my-1 hover:text-accent_secondary transition transform duration-100" href="contact.php">Contact Me</a>
         </div>
         <div class="w-[50%] lg:w-[25%] flex flex-col justify-start items-start mb-10 lg:mb-0">
             <h6 class="font-bold mb-8">Featured</h6>
@@ -36,6 +36,6 @@
     <hr class="opacity-20 mt-16 mb-5">
     <div class="copyrightsection w-full flex justify-between items-center mt-7 mb-12">
         <a class="font-cormorant text-4xl font-bold hidden lg:block" href="https://neosubhamoy.xyz">Subhamoy Biswas</a>
-        <p class="">&#169; <script>document.write(new Date().getFullYear())</script> - All Rights Reserved<br>Designed with &hearts; by <a class="font-bold" href="https://neosubhamoy.xyz">Subhamoy</a></p>
+        <p class="">&#169; <script>document.write(new Date().getFullYear())</script> - All Rights Reserved<br>Developed with &#10084; in <a class="font-bold" href="">India</a></p>
     </div>
 </footer>

htdocs/assets/extra-style.css

@@ -60,4 +60,21 @@ background: #38BDF8;
     z-index: 2;
     opacity: 0;
     transition: opacity 500ms;
-}
+}
+
+/* .z-20 rect {
+    transition: fill 0.3s ease-in-out;
+}
+
+.z-20 rect:hover {
+    fill: red;
+}
+
+.z-20 path:hover + .z-20 rect {
+    fill: red;
+}
+
+.z-20 g:hover + .z-20 rect {
+    fill: red;
+} */
+

htdocs/assets/style.css

@@ -649,6 +649,11 @@ video {
   margin-bottom: 0.25rem;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .my-3 {
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
@@ -659,11 +664,6 @@ video {
   margin-bottom: 1.75rem;
 }
 
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
 .my-\[0\.30rem\] {
   margin-top: 0.30rem;
   margin-bottom: 0.30rem;
@@ -725,6 +725,10 @@ video {
   margin-left: 0.75rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
 .ml-5 {
   margin-left: 1.25rem;
 }
@@ -741,6 +745,10 @@ video {
   margin-left: 2rem;
 }
 
+.ml-\[0\.30rem\] {
+  margin-left: 0.30rem;
+}
+
 .ml-\[0\.59rem\] {
   margin-left: 0.59rem;
 }
@@ -781,6 +789,10 @@ video {
   margin-top: 4rem;
 }
 
+.mt-20 {
+  margin-top: 5rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -801,6 +813,14 @@ video {
   margin-top: 2.2rem;
 }
 
+.mt-32 {
+  margin-top: 8rem;
+}
+
+.mt-44 {
+  margin-top: 11rem;
+}
+
 .flex {
   display: flex;
 }
@@ -853,6 +873,10 @@ video {
   width: 0px;
 }
 
+.w-2 {
+  width: 0.5rem;
+}
+
 .w-\[200px\] {
   width: 200px;
 }
@@ -997,6 +1021,14 @@ video {
   border-radius: 0.125rem;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
 .border-\[2px\] {
   border-width: 2px;
 }
@@ -1030,6 +1062,16 @@ video {
   border-color: rgba(255, 255, 255, 0.30);
 }
 
+.border-l-accent_primary {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(56 189 248 / var(--tw-border-opacity));
+}
+
+.border-l-bg_primary {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(15 23 42 / var(--tw-border-opacity));
+}
+
 .border-t-accent_primary {
   --tw-border-opacity: 1;
   border-top-color: rgb(56 189 248 / var(--tw-border-opacity));
@@ -1140,6 +1182,10 @@ video {
   line-height: 2.5rem;
 }
 
+.text-\[10px\] {
+  font-size: 10px;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1177,6 +1223,31 @@ video {
   font-weight: 400;
 }
 
+.text-\[\#38BDF8\] {
+  --tw-text-opacity: 1;
+  color: rgb(56 189 248 / var(--tw-text-opacity));
+}
+
+.text-\[\#3FF989\] {
+  --tw-text-opacity: 1;
+  color: rgb(63 249 137 / var(--tw-text-opacity));
+}
+
+.text-\[\#CD6CFB\] {
+  --tw-text-opacity: 1;
+  color: rgb(205 108 251 / var(--tw-text-opacity));
+}
+
+.text-\[\#DCDF3F\] {
+  --tw-text-opacity: 1;
+  color: rgb(220 223 63 / var(--tw-text-opacity));
+}
+
+.text-\[\#EC4B4B\] {
+  --tw-text-opacity: 1;
+  color: rgb(236 75 75 / var(--tw-text-opacity));
+}
+
 .text-accent_four {
   --tw-text-opacity: 1;
   color: rgb(172 203 222 / var(--tw-text-opacity));
@@ -1206,31 +1277,6 @@ video {
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
 
-.text-\[\#38BDF8\] {
-  --tw-text-opacity: 1;
-  color: rgb(56 189 248 / var(--tw-text-opacity));
-}
-
-.text-\[\#3FF989\] {
-  --tw-text-opacity: 1;
-  color: rgb(63 249 137 / var(--tw-text-opacity));
-}
-
-.text-\[\#CD6CFB\] {
-  --tw-text-opacity: 1;
-  color: rgb(205 108 251 / var(--tw-text-opacity));
-}
-
-.text-\[\#DCDF3F\] {
-  --tw-text-opacity: 1;
-  color: rgb(220 223 63 / var(--tw-text-opacity));
-}
-
-.text-\[\#EC4B4B\] {
-  --tw-text-opacity: 1;
-  color: rgb(236 75 75 / var(--tw-text-opacity));
-}
-
 .opacity-20 {
   opacity: 0.2;
 }
@@ -1239,6 +1285,10 @@ video {
   opacity: 0.5;
 }
 
+.opacity-\[0\.75\] {
+  opacity: 0.75;
+}
+
 .shadow-\[0px_0px_100px_10px\] {
   --tw-shadow: 0px 0px 100px 10px;
   --tw-shadow-colored: 0px 0px 100px 10px var(--tw-shadow-color);
@@ -1275,11 +1325,58 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-\[10px_10px_20px\] {
+  --tw-shadow: 10px 10px 20px;
+  --tw-shadow-colored: 10px 10px 20px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-\[10px_10px_5px\] {
+  --tw-shadow: 10px 10px 5px;
+  --tw-shadow-colored: 10px 10px 5px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-\[0px_10px_5px\] {
+  --tw-shadow: 0px 10px 5px;
+  --tw-shadow-colored: 0px 10px 5px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-\[0px_10px_20px\] {
+  --tw-shadow: 0px 10px 20px;
+  --tw-shadow-colored: 0px 10px 20px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-\[0px_0px_20px\] {
+  --tw-shadow: 0px 0px 20px;
+  --tw-shadow-colored: 0px 0px 20px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-\[0px_0px_15px\] {
+  --tw-shadow: 0px 0px 15px;
+  --tw-shadow-colored: 0px 0px 15px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-accent_primary_transparent {
   --tw-shadow-color: rgba(56, 189, 248, 0.30);
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.shadow-accent_primary {
+  --tw-shadow-color: #38BDF8;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .blur-2xl {
   --tw-blur: blur(40px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -1290,6 +1387,11 @@ video {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.drop-shadow-lg {
+  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -1316,6 +1418,10 @@ video {
   transition-duration: 500ms;
 }
 
+.last\:mb-3:last-child {
+  margin-bottom: 0.75rem;
+}
+
 .hover\:scale-125:hover {
   --tw-scale-x: 1.25;
   --tw-scale-y: 1.25;

htdocs/core/connection.php

@@ -0,0 +1,14 @@
+<?php
+//Connect with Database
+$hostname = "localhost";
+$username = "root";
+$password = "";
+$database = "neosubhamoy";
+
+$conn = new mysqli($hostname, $username, $password, $database);
+
+if ($conn -> connect_error) {
+     die("Database Connection Failed !" . $conn->connect_error);
+    }
+    echo "";
+?>

htdocs/projects.php

@@ -1,3 +1,27 @@
+<?php
+require './core/connection.php';
+
+$sql = "SELECT DISTINCT year FROM projects ORDER BY year DESC";
+$result = $conn -> query($sql);
+
+if ($result) {
+    // create a array of all unique years
+    $years = array();
+    while ($row = $result -> fetch_assoc()) {
+        $years[] = $row['year'];
+    }
+
+    $result -> free();
+}
+
+//function to fetch all projects of the given year
+function fetch_projects_by_year($conn, $year) {
+    $sql = "SELECT * FROM projects WHERE year = $year ORDER BY id DESC";
+    $result = $conn -> query($sql);
+    return $result;
+}
+?>
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -17,8 +41,8 @@
                 <h2 class="text-lg mt-3 mb-1 lg:mt-2 lg:mb-1 lg:whitespace-nowrap">I'm just obsessed with <span class="text-accent_primary font-bold">side projects</span> and <span class="text-accent_primary font-bold">open-source</span> stuffs</h2>
                 <h3 class="text-lg mt-1 mb-3 lg:mt-1 lg:mb-2 lg:whitespace-nowrap">You can <span class="text-accent_primary font-bold">explore</span> some of <span class="text-accent_primary font-bold">them</span> below</h3>
                 <div class="w-full flex justify-start items-center my-7 lg:my-6">
-                    <button class="px-5 py-1 font-bold bg-accent_primary text-bg_primary rounded-full hover:shadow-lg hover:shadow-accent_secondary_transparent hover:bg-accent_secondary hover:rounded-lg transition transform duration-500" onclick="location.href='contact.php'"><i class="fa-brands fa-github text-bg_primary"></i> Github</button>
+                    <button class="px-5 py-1 font-bold bg-accent_primary text-bg_primary rounded-full hover:shadow-lg hover:shadow-accent_secondary_transparent hover:bg-accent_secondary hover:rounded-lg transition transform duration-500" onclick="window.open('https://github.com/neosubhamoy', '_blank')"><i class="fa-brands fa-github text-bg_primary"></i> Github</button>
-                    <button class="group px-5 py-1 bg-bg_secondary text-accent_secondary_transparent rounded-full font-light hover:bg-bg_third hover:text-accent_secondary mx-7 transition transform duration-500"><i class="fa-solid fa-magnifying-glass text-accent_primary mr-2"></i> Search a project . . . <span class="text-bg_primary bg-accent_secondary_transparent text-xs font-normal px-1 rounded-sm mr-1 ml-3 group-hover:bg-accent_secondary transition transform duration-500">ALT</span>+<span class="text-bg_primary bg-accent_secondary_transparent text-xs font-normal px-1 rounded-sm mx-1 group-hover:bg-accent_secondary transition transform duration-500">K</span></button>
+                    <button class="group px-5 py-1 bg-bg_secondary text-accent_secondary_transparent rounded-full font-light hover:bg-bg_third hover:text-accent_secondary hover:rounded-lg mx-7 transition transform duration-500"><i class="fa-solid fa-magnifying-glass text-accent_primary mr-2"></i> Search a project . . . <span class="text-bg_primary bg-accent_secondary_transparent text-[10px] font-normal px-1 rounded-sm mr-1 ml-3 group-hover:bg-accent_secondary transition transform duration-500">ALT</span>+<span class="text-bg_primary bg-accent_secondary_transparent text-[10px] font-normal px-1 rounded-sm mx-1 group-hover:bg-accent_secondary transition transform duration-500">K</span></button>
                 </div>
             </div>
             <div class="heroimage w-full h-full flex justify-center lg:justify-end items-center">
@@ -28,35 +52,97 @@
                 <div class="absolute bg-accent_primary w-[70px] h-[70px] rounded-full shadow-[0px_0px_120px_20px] shadow-accent_primary_transparent lg:blur-2xl mr-0 mb-[2rem] lg:mb-0 lg:mr-[12.5rem] lg:mt-[3.5rem]"></div>
             </div>
         </div>
-        <div class="projectssection w-full flex justify-between items-center">
+        <div class="projectssection w-full flex justify-between items-start mt-32">
             <div class="lefttimeline">
+                <h4 class="text-2xl font-bold mb-10">Projects by <span class="text-accent_primary">Timeline</span></h4>
+                <div class="timeline">
+                <?php
 
+                foreach ($years as $selectedYear) {
+                    $projects = fetch_projects_by_year($conn, $selectedYear);
+
+                    if($projects) {
+
+                        echo <<<HTML
+                        <div class='year flex items-center'>
+                        HTML;
+
+                        //apply different styling for first iteration
+                        if($selectedYear === reset($years)) {
+                            echo <<<HTML
+                            <i class='fa-solid fa-circle fa-beat-fade text-xs text-accent_primary shadow-[0px_0px_15px] shadow-accent_primary rounded-2xl mr-3'></i>
+                            HTML;
+                        }
+                        else {
+                            echo <<<HTML
+                            <i class='fa-regular fa-circle text-xs text-accent_primary mr-3'></i>
+                            HTML;
+                        }
+
+                        echo <<<HTML
+                        <h6 class='text-xl font-bold'>$selectedYear</h6>
+                        </div>
+                        <div class='yearbox flex'>
+                        HTML;
+
+                        //apply different styling for last iteration
+                        if ($selectedYear === end($years)) {
+                            echo <<<HTML
+                            <div class='timelinebarcont w-2 border-l-bg_primary border-l-[1px] ml-[0.30rem]'></div>
+                            HTML;
+                        }
+                        else {
+                            echo <<<HTML
+                            <div class='timelinebarcont w-2 border-l-accent_primary border-l-[1px] ml-[0.30rem]'></div>
+                            HTML;
+                        }
+
+                        echo <<<HTML
+                        <div class='yearlyprojects flex flex-col'>
+                        HTML;
+
+                        //fetch all projects by year and show it
+                        while ($project = $projects -> fetch_assoc()) {
+                            echo "
+                            <a class='projectitem my-2 ml-7 last:mb-3' href='".$project['link']."' target='_blank'>".$project['name']."</a>
+                            ";
+                        }
+
+                        echo <<<HTML
+                        </div>
+                        </div>
+                        HTML;
+                    }
+                }
+
+                ?>
+                </div>
             </div>
             <div class="rightfeatured">
                 <h5 class="text-xl font-bold mb-5">My Profiles</h5>
                 <div class="w-full flex flex-col justify-center items-center mb-12">
-                    <div class="w-full flex justify-start items-center bg-bg_secondary p-2 rounded-lg my-1">
+                    <div class="w-full flex justify-start items-center bg-bg_secondary p-2 rounded-lg my-2 cursor-pointer hover:bg-bg_third transition transform duration-500">
                         <div class="wrapper w-[50px] rounded-lg overflow-hidden"><img src="./assets/images/neosubhamoy.jpg" alt="neosubhamoy"></div>
                         <div class="w-ful ml-7">
                             <h6 class="text-base font-bold my-1">Subhamoy Biswas</h6>
                             <p class="text-xs text-accent_three my-1">Personal Profile</p>
                         </div>
                     </div>
-                    <div class="w-full flex justify-start items-center bg-bg_secondary p-2 rounded-lg my-1">
+                    <div class="w-full flex justify-start items-center bg-bg_secondary p-2 rounded-lg my-2 cursor-pointer hover:bg-bg_third transition transform duration-500">
                         <div class="wrapper w-[50px] rounded-lg overflow-hidden"><img src="./assets/images/techishfellow.jpg" alt="techishfellow"></div>
                         <div class="w-ful ml-7">
-                            <h6 class="text-base font-bold my-1">The Techishfellow</h6>
+                            <h6 class="text-base font-bold my-1">The TechishFellow</h6>
                             <p class="text-xs text-accent_three my-1">Digital Product Publisher</p>
                         </div>
                     </div>
                 </div>
                 <h5 class="text-xl font-bold mb-5">Featured Projects</h5>
                 <div class="w-full flex flex-col justify-center items-center mb-12">
-                    <div class="w-full">
+                    <div class="w-[250px] rounded-lg overflow-hidden my-3">
-                        <img src="./assets/images/fantasywalls.jpg" alt="fantasywalls">
+                        <img class="opacity-[0.75]" src="./assets/images/fantasywalls.jpg" alt="fantasywalls">
                     </div>
-                    <div class="w-full">
+                    <div class="w-[250px] rounded-lg overflow-hidden my-3">
-                        <img src="./assets/images/prourl.jpg" alt="prourl">
+                        <img class="opacity-[0.75]" src="./assets/images/prourl.jpg" alt="prourl">
                     </div>
                 </div>
                 <h5 class="text-xl font-bold mb-5">Currently Working On</h5>