change the projects page

MatejMa2ur · Oct 12, 2024 · b5efad1 · b5efad1
1 parent af7c2dc
commit b5efad1
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 84 deletions.
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
 
     <link rel="stylesheet" HREF="style/style.css" >
 </head>
-<body class="p-0 m-0">
+<body class="p-0 m-0" data-bs-theme="dark">
 <div class="screen">
     <div class="h-100 d-flex flex-column flex-sm-row align-sm-items-center">
         <div class="col-sm-6 d-flex justify-content-sm-center align-items-sm-center">

diff --git a/js/script.js b/js/script.js
@@ -9,7 +9,7 @@ const toggleTheme = () => {
 
 // Function to apply the saved theme on page load
 const applySavedTheme = () => {
-    const savedTheme = sessionStorage.getItem('theme') || 'light';
+    const savedTheme = sessionStorage.getItem('theme') || 'dark';
     document.body.setAttribute('data-bs-theme', savedTheme);
 };
 

diff --git a/projects.html b/projects.html
@@ -16,9 +16,8 @@
         }
     </style>
 </head>
-<body class="p-0 m-0">
+<body class="p-0 m-0 projects">
 <div class="screen">
-
     <div class="position-absolute top-0 end-0">
         <div class="d-flex flex-column links nordic">
             <a href="index.html"
@@ -30,98 +29,84 @@
         </div>
     </div>
 
-<!-- My projects -->
-<div class="container pt-5">
-    <div class="border border-2 border-dark text-center p-5">
-        <h1 class="nordic h1 text-center">My projects</h1>
-        <div class="d-flex flex-row gap-3 justify-content-center align-items-center my-3">
-            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
-            <div style="height: 15px; width: 15px; transform: rotateY(0deg) rotate(45deg);"
-                 class="border border-2 border-dark"></div>
-            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+    <div class="h-100 w-100">
+        <div class="h-100 d-flex flex-column flex-sm-row p-5">
+            <div class="col-sm h-100 d-flex flex-column p-5 gap-5">
+                <h2 class="fw-black roboto h1 display-1 text-body-secondary" style="font-weight: 900">Projects</h2>
+                <h2 class="col-sm-8 roboto fw-light">
+                    I was always interested in creating new things, here I share some of them with you.
+                </h2>
+            </div>
+            <div class="col-sm h-100 d-flex flex-column justify-content-end p-5 gap-5">
+                <h2 class="offset-sm-6 col-sm-6 roboto fw-light text-end">
+                    Check my LinkedIn and Github for more!
+                </h2>
+            </div>
+        </div>
+        <div class="w-100 d-flex justify-content-center position-absolute end-0 start-0" style="bottom:-77%; z-index: -1">
+            <svg style="bottom: -200px" width="1582" height="1582" viewBox="0 0 1582 1582" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M1086.82 0L1157.53 70.7107L248.195 980.05L177.484 909.339L1086.82 0Z" fill="#7D99B3"/>
+                <path d="M980.757 247.487L1051.47 318.198L388.908 980.757L318.198 910.046L980.757 247.487Z" fill="#ACCBE1"/>
+                <path d="M1125.71 243.952L1196.42 314.663L212.132 1298.96L141.421 1228.24L1125.71 243.952Z" fill="#CEE5F2"/>
+                <path d="M945.402 565.685L1228.25 848.528L945.402 1131.37L662.56 848.528L945.402 565.685Z" fill="#F4C244"/>
+            </svg>
         </div>
-
-        <p class="container roboto">
-            These are all the project I have created over the years of coding.
-        </p>
     </div>
 </div>
 
-<!-- 2023 -->
-
-<div class="d-flex flex-row gap-4 justify-content-center align-items-center my-5">
-    <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
-    <div style="height: 15px; width: 15px; transform: rotateY(0deg) rotate(45deg);"
-         class="border border-2 border-dark"></div>
-    <div class="nordic">
-        2023
-    </div>
-    <div style="height: 15px; width: 15px; transform: rotateY(0deg) rotate(45deg);"
-         class="border border-2 border-dark"></div>
-    <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
-</div>
-<!-- HTF -->
-<div class="row mx-0 w-100 d-flex flex-row mb-4">
-    <div class="col d-flex flex-column justify-content-center align-items-center">
-        <h2 class="nordic h2 text-center">Hack The Flag</h2>
-        <div class="d-flex flex-row gap-3 justify-content-center align-items-center my-4">
-            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
-            <div style="height: 15px; width: 15px; transform: rotateY(0deg) rotate(45deg);"
-                 class="border border-2 border-dark"></div>
-            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+<div class="screen">
+    <div class="h-100 d-flex flex-column flex-sm-row p-5">
+        <div class="col-sm h-100 d-flex flex-column justify-content-end p-5 gap-5">
+            <div class="d-flex flex-row">
+                <h2 class="fw-black roboto h1 display-1 text-body-secondary" style="font-weight: 900">
+                    Hack The Flag
+                </h2>
+                <a href="https://hacktheflag.net" class="text-dark d-flex align-items-center">
+                    <i class="bi bi-link-45deg ms-5 h1"></i>
+                </a>
+            </div>
+            <h2 class="col-sm-8 roboto fw-light">
+                Dive into cryptography! Test your cipher-solving skills and speed in this thrilling competition.
+            </h2>
         </div>
-        <p class="container roboto">
-            Hack the Flag is a competition for anyone who likes to solve ciphers. The competition aims to promote the
-            world of cryptography and encourage people to learn more about it.
-            The competition will test your skills in solving ciphers and how quickly you can do it.
-        </p>
-        <div class="d-flex flex-row gap-3 justify-content-center align-items-center my-4">
-            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
-            <div style="height: 15px; width: 15px; transform: rotateY(0deg) rotate(45deg);"
-                 class="border border-2 border-dark"></div>
-            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+        <div class="col-sm h-100 d-flex flex-column justify-content-end pe-5">
+            <img src="./img/proj/htf/HTF.png" class="p-0 img-fluid"/>
         </div>
-        <a href="https://hacktheflag.net" class="text-dark">
-            <i class="bi bi-link-45deg h3"></i>
-        </a>
-
-    </div>
-    <div class="border border-2 border-dark p-3 col-sm-auto" style="max-width: 60%">
-        <img src="./img/proj/htf/HTF.png" class="p-0 img-fluid"/>
     </div>
 </div>
 
-<!-- Y-A-S -->
-<div class="row mx-0 w-100 d-flex flex-row mb-4">
-    <div class="border border-2 border-dark p-3 col-sm-auto" style="max-width: 60%">
-        <img src="./img/proj/y-a-s/y-a-s.png" class="p-0 img-fluid"/>
-    </div>
-    <div class="col d-flex flex-column justify-content-center align-items-center">
-        <h2 class="nordic h2 text-center">Y-A-S</h2>
-        <div class="d-flex flex-row gap-3 justify-content-center align-items-center my-4">
-            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
-            <div style="height: 15px; width: 15px; transform: rotateY(0deg) rotate(45deg);"
-                 class="border border-2 border-dark"></div>
-            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+<div class="screen">
+    <div class="h-100 d-flex flex-column flex-sm-row p-5">
+        <div class="position-absolute end-0" style="top: -5%;z-index: -1">
+            <svg width="637" height="747" viewBox="0 0 637 747" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M318.198 145.199L247.487 215.909L637 605.422V464.001L318.198 145.199Z" fill="#7D99B3"/>
+                <path d="M314.663 0.240723L243.952 70.9514L637 463.999V322.578L314.663 0.240723Z" fill="#ACCBE1"/>
+                <path d="M70.7107 39.1322L0 109.843L637 746.843V605.421L70.7107 39.1322Z" fill="#F4C244"/>
+                <path d="M637 181.157L636.396 180.553L565.686 251.264L637 322.578V181.157Z" fill="#CEE5F2"/>
+            </svg>
+
         </div>
-        <p class="container roboto">
-            Y-A-S is a group of people who are interested in creating a solution for real life problems.
-            I started this alone during high school, but soon I found more people to join and started creating a community out of it.
-        </p>
-        <div class="d-flex flex-row gap-3 justify-content-center align-items-center my-4">
-            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
-            <div style="height: 15px; width: 15px; transform: rotateY(0deg) rotate(45deg);"
-                 class="border border-2 border-dark"></div>
-            <hr style="width: 100px; color: #222428; opacity: 1" class="border-2 rounded"/>
+
+        <div class="col-sm h-100 d-flex flex-column justify-content-end ps-5 gap-5">
+            <img src="./img/proj/y-a-s/y-a-s.png" class="p-0 img-fluid"/>
         </div>
-        <a href="https://y-a-s.net" class="text-dark">
-            <i class="bi bi-link-45deg h3"></i>
-        </a>
+        <div class="col-sm h-100 d-flex flex-column justify-content-end p-5 gap-5 align-items-end">
+            <div class="d-flex flex-row pe-5">
+                <a href="https://y-a-s.net" class="text-dark d-flex align-items-center">
+                    <i class="bi bi-link-45deg me-5 h1"></i>
+                </a>
+                <h2 class="fw-black roboto h1 display-1 text-body-secondary" style="font-weight: 900">
 
+                    Y-A-S
+                </h2>
+            </div>
+            <h2 class="col-sm-8 roboto fw-light text-end pe-5">
+                Innovate Real-Life Solutions. Join our dynamic community tackling everyday challenges.
+            </h2>
+        </div>
     </div>
 </div>
 
-</div>
 
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"

diff --git a/style/style.css b/style/style.css
@@ -45,8 +45,16 @@ body[data-bs-theme="dark"] {
     --bs-secondary-color: var(--yellow);
     --bs-dark-rgb: var(--yellow-rgb);
 }
+body{
+    transition: background-color 0.4s ease-out;
+}
 
+.projects {
+    scroll-snap-type: y mandatory;
+    overflow-y: scroll;
+}
 .screen{
+    scroll-snap-align: start;
     position: relative;
     height: 100vh;
     width: 100%;
@@ -66,13 +74,12 @@ body[data-bs-theme="dark"] {
     background-color: var(--bs-secondary-color);
 }
 
+
+
 /* Index.html */
 .circle-color, .person-color {
     transition: fill 0.4s ease-out;
 }
-body{
-    transition: background-color 0.4s ease-out;
-}
 svg#theme-switcher {
     cursor: pointer;
 }