Minor changes

Shreyaskr1409 · Aug 4, 2024 · 80c3a78 · 80c3a78
1 parent 3cc9687
commit 80c3a78
Show file tree

Hide file tree

Showing 11 changed files with 136 additions and 9 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/Portfolio.iml b/.idea/Portfolio.iml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/assets/images/e8974459aab96bc0ae41dad52bc017e1.jpg b/assets/images/e8974459aab96bc0ae41dad52bc017e1.jpg
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style2.css">
     <link rel="stylesheet" href="assets/fonts/Catchy Mager/stylesheet.css">
     <link rel="stylesheet" href="assets/fonts/EuroRoman/stylesheet.css">
     <link rel="stylesheet" href="assets/fonts/Nexa Rust/stylesheet.css">
@@ -100,13 +101,13 @@ <h1 id="text_2">
                 <div id="container_img" style="display: flex; align-items: center; justify-content:space-evenly; width: 100%; margin-top: 20px; margin-bottom: 10px; flex-grow: 1;">
                     <div class="my_accounts_container_1">
                         <h3 class="tag_1">ANDROID DEVELOPER</h3>
-                        <div class="accounts_1"><h5 style="margin: 0px;">MY GITHUB</h5></div>
+                        <div class="accounts_1"><h5 style="margin: 0px;" onclick="window.open('https://github.com/Shreyaskr1409', '_blank')">MY GITHUB</h5></div>
                     </div>
                     <div id="img_1" data-tilt data-tilt-glare data-tilt-max-glare="0.2">
                     </div>
                     <div class="my_accounts_container_1">
                         <h3 class="tag_1">WEB DEVELOPER</h3>
-                        <div class="accounts_1"><h5 style="margin: 0px;">MY LINKEDIN</h5></div>
+                        <div class="accounts_1"><h5 style="margin: 0px;" onclick="window.open('https://www.linkedin.com/in/shreyas-kumar-164482298/', '_blank')">MY LINKEDIN</h5></div>
                     </div>
                 </div>
 
@@ -129,13 +130,13 @@ <h4 id="para_1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consec
 
         <div class="my_projects_container">
             <div class="card_p">
-                <img id="img_p" src="assets/images/karsten-wurth-UbGYPMbMYP8-unsplash.jpg" alt="Project Image">
+                <img id="img_p" src="assets/images/e8974459aab96bc0ae41dad52bc017e1.jpg" alt="Project Image">
                 <div id="text_p">
                     <div id="title_p">
-                        <h1 id="title_p1">Library App</h1>
+                        <h1 id="title_p1">Simpliblog</h1>
                     </div>
                     <div id="body_p">
-                        <p id="body_p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vehicula ornare nibh. Sed finibus eget ex id laoreet. Aliquam egestas laoreet facilisis. Suspendisse pellentesque, urna sed volutpat ornare, sem dui placerat velit, nec facilisis eros neque quis neque. Nam id mauris vel lacus faucibus suscipit quis vel erat. Proin sed tellus quis mauris imperdiet maximus pulvinar sit amet tortor. Curabitur rhoncus sapien ac lacus ullamcorper cursus. In eu ullamcorper ante, non tempus mauris. Cras aliquam lorem quis odio mollis viverra. Donec eget vulputate nisl, mattis ultricies mauris. Quisque eros lectus, maximus ac malesuada et, hendrerit in lectus. Sed mollis nibh ipsum, non imperdiet erat suscipit a. Donec facilisis laoreet lorem. In volutpat non ante in venenatis. Phasellus in neque mauris.</p>
+                        <p id="body_p1">Encouraging peers to learn from each other via blogs centered around an institute environment.</br></br>This reposotory is a personal project of mine but I also want this to work out in the grand scheme of things as I really think blog-based learning is lacking in university students and learners in India. Blogs bring out the reality of working in an industry.</p>
                     </div>
                     <div id="button_p">Repository</div>
                 </div>
@@ -148,7 +149,17 @@ <h1 id="Click_to_explore">Click to explore:</h1>
             <div class="card-slider">
                 <div class="cards">
                     <div class="card">
-                        <div class="circle" onclick="window.open('https://www.google.com', '_blank');"></div>
+                        <div class="circle" onclick="window.open('https://github.com/Shreyaskr1409/SimpliBlog', '_blank');"></div>
+                        <img src="assets/images/e8974459aab96bc0ae41dad52bc017e1.jpg" class="default" id="Simpliblog">
+                        <div class="hover">
+                            <div class="project_name">
+                                <h2>Simpliblog</h2>
+                                <p>Personal Project</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="card">
+                        <div class="circle" onclick="window.open('https://github.com/Shreyaskr1409/My_Library', '_blank');"></div>
                         <img src="assets/images/karsten-wurth-UbGYPMbMYP8-unsplash.jpg" class="default" id="Library_App">
                         <div class="hover">
                             <div class="project_name">
@@ -158,7 +169,7 @@ <h2>Library App</h2>
                         </div>
                     </div>
                     <div class="card">
-                        <div class="circle" onclick="window.open('https://www.google.com', '_blank');"></div>
+                        <div class="circle" onclick="window.open('https://github.com/shauryasawai/Health-app', '_blank');"></div>
                         <img src="assets/images/pexels-zahide-tas-367420941-19920240.jpg" class="default" id="Health_App">
                         <div class="hover">
                             <div class="project_name">
@@ -175,6 +186,21 @@ <h2>Health App</h2>
     </div>
 
 
+    <!-- Resume Section -->
+    <!-- To be added -->
+
+    <!-- About me section -->
+    <div id="am_container">
+        <div id="am_inner_container">
+            <section class="mapbox" data-mapbox>
+              <figure>
+                <iframe id="map_raipur" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d118983.72840229067!2d81.61907330000001!3d21.26190555!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a28dda23be28229%3A0x163ee1204ff9e240!2sRaipur%2C%20Chhattisgarh!5e0!3m2!1sen!2sin!4v1722771727215!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+              </figure>
+            </section>
+        </div>
+    </div>
+
+
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
     <script src="index.js"></script>
     <script src="projects_content.js"></script>

diff --git a/index.js b/index.js
@@ -69,6 +69,7 @@ addEventListener("resize", () => {
 
 function startLoader() {
   let counterElement = document.querySelector("#count2");
+  let loadingElement = document.querySelector("#count1");
   let currentValue = 0;
 
   function updateCounter() {
@@ -87,6 +88,7 @@ function startLoader() {
         delay: 1,
         height: 0,
       });
+      loadingElement.innerHTML = ""
       return;
     }
     currentValue += Math.floor(Math.random() * 20) + 1;

diff --git a/projects_content.js b/projects_content.js
@@ -1,6 +1,11 @@
 const projects = document.getElementsByClassName("default")
 // create a map which has key as elementIDs and value as an object with Title and Description
 const projects_info = new Map()
+projects_info.set("Simpliblog", {
+    pro_title: "Simpliblog",
+    pro_body: "Encouraging peers to learn from each other via blogs centered around an institute environment.</br></br>This reposotory is a personal project of mine but I also want this to work out in the grand scheme of things as I really think blog-based learning is lacking in university students and learners in India. Blogs bring out the reality of working in an industry.",
+    pro_repo: ""
+})
 projects_info.set("Library_App", {
     pro_title: "Library App",
     pro_body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vehicula ornare nibh. Sed finibus eget ex id laoreet. Aliquam egestas laoreet facilisis. Suspendisse pellentesque, urna sed volutpat ornare, sem dui placerat velit, nec facilisis eros neque quis neque. Nam id mauris vel lacus faucibus suscipit quis vel erat. Proin sed tellus quis mauris imperdiet maximus pulvinar sit amet tortor. Curabitur rhoncus sapien ac lacus ullamcorper cursus. In eu ullamcorper ante, non tempus mauris. Cras aliquam lorem quis odio mollis viverra. Donec eget vulputate nisl, mattis ultricies mauris. Quisque eros lectus, maximus ac malesuada et, hendrerit in lectus. Sed mollis nibh ipsum, non imperdiet erat suscipit a. Donec facilisis laoreet lorem. In volutpat non ante in venenatis. Phasellus in neque mauris.",
@@ -27,7 +32,7 @@ for (const project of projects) {
             document.getElementById("title_p1")
                 .innerText = projects_info.get(elementID).pro_title
             document.getElementById("body_p1")
-                .innerText = projects_info.get(elementID).pro_body
+                .innerHTML = projects_info.get(elementID).pro_body
         } catch (e) {
             console.log("I couldn't set content for the card")
         }

diff --git a/style.css b/style.css
@@ -12,6 +12,17 @@ body {
         margin: 0;
         padding: 0;
     }
+
+    /* ::-webkit-scrollbar { width: 10px; height: 3px;}
+    ::-webkit-scrollbar-button {  background-color: #666; height: 10px;}
+    ::-webkit-scrollbar-track {  background-color: #646464;}
+    ::-webkit-scrollbar-track-piece { background-color: #000;}
+    ::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
+    ::-webkit-scrollbar-corner { background-color: #1d1d1d;}
+    ::-webkit-resizer { background-color: #666;} */
+
+    ::-webkit-scrollbar { width: 10px; height: 3px;}
+    ::-webkit-scrollbar-thumb { height: 50px; background-color: #3a3a3a; border-radius: 3px;}
 }
 *{
     box-sizing: border-box;
@@ -134,7 +145,7 @@ body {
     align-items: center;
     justify-content: center;
     width: 100%;
-    height: 93vh;
+    height: 100vh;
     background-image: url("assets/images/magicpattern-87PP9Zd7MNo-unsplash.jpg");
     background-size: cover;
     background-repeat: no-repeat;
@@ -552,6 +563,7 @@ body {
         background: linear-gradient(to right, #ffe4c4, #b07225);
         background-clip: text;
         color: transparent;
+        z-index: 5;
     }
 
     .my_projects_container {
@@ -561,7 +573,9 @@ body {
         align-items: center;
         justify-content: center;
         margin: 0 auto;
+        z-index: 2;
         .card_p{
+            z-index: 5;
             margin: 20px;
             display: flex;
             flex-direction: row;
@@ -605,6 +619,17 @@ body {
             }
         }
     }
+    .my_projects_container::before {
+        content: '';
+        position: absolute;
+        height: 500px;
+        width: 100%;
+        background-image: url('/assets/images/e8974459aab96bc0ae41dad52bc017e1.jpg');
+        background-size: cover;
+        background-position: center;
+        filter: blur(5px) brightness(50%);
+        z-index: 0;
+      }
 
     #Click_to_explore {
         font-size: 4vw;

diff --git a/style2.css b/style2.css
@@ -0,0 +1,32 @@
+#am_container {
+    z-index: 0;
+    width: 100%;
+    height: 150vh;
+    background-image: url("/assets/images/e8974459aab96bc0ae41dad52bc017e1.jpg");
+    background-size: cover;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    #am_inner_container{
+        z-index: 1;
+        height: 120vh;
+        width: 70vw;
+        background-color: #00000063;
+        border-radius: 20px;
+        backdrop-filter: blur(20px);
+    }
+
+    .mapbox {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 70vh;
+        width: 70vw;
+    }
+    #map_raipur {
+        height: 70vh;
+        width: 60vw;
+    }
+}