From ab37e88a15cf074f39a0251a3882d6e7ac31fd3a Mon Sep 17 00:00:00 2001
From: MehmetBozkir <mehmetsalihbozkir@gmail.com>
Date: Thu, 28 Dec 2023 10:56:24 +0300
Subject: [PATCH] responsive web design update

---
 detail.css | 48 +++++++++++++++++++++++++++++++++++++++++++++---
 index.html |  4 ++--
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/detail.css b/detail.css
index c73db61..548b796 100644
--- a/detail.css
+++ b/detail.css
@@ -112,7 +112,6 @@ nav:after {
   position: absolute;
   bottom: 0;
   left: 0;
-  width: 20vw;
   width: 20%;
   height: 100%;
   z-index: -1;
@@ -240,12 +239,55 @@ section p {
   font-weight: bold;
 }
 
-@media screen and (max-width: 580px) {
+@media only screen and (max-width: 200px) {
   nav a {
-    font-size: 1.25rem;
+    font-size: 0.55rem;
     line-height: 2rem;
+    width: 20%;
   }
   .scroller:after {
     content: "";
   }
+  h2 {
+    font-size: xx-large;
+  }
+  nav:after {
+    background: linear-gradient(
+      90deg,
+      var(--sect1) 0 calc(20vw - 3px),
+      var(--sect2) 0 calc(40vw - 3px),
+      var(--sect3) 0 calc(60vw - 3px),
+      var(--sect4) 0 calc(80vw - 3px),
+      var(--sect5) 0 100vw
+    );
+  }
+}
+
+/*
+@media only screen and (orientation: landscape) {
+  nav a {
+    font-size: 0.85rem;
+    line-height: 2rem;
+    width: 20%;
+  }
+  .scroller:after {
+    content: "";
+  }
+  h2 {
+    font-size: xx-large;
+  }
+  nav:after {
+    background: linear-gradient(
+      90deg,
+      var(--sect1) 0 calc(20vw - 3px),
+      var(--sect2) 0 calc(40vw - 3px),
+      var(--sect3) 0 calc(60vw - 3px),
+      var(--sect4) 0 calc(80vw - 3px),
+      var(--sect5) 0 150vw
+    );
+  }
+  section {
+    height: 125vh;
+  }
 }
+*/
diff --git a/index.html b/index.html
index 3313f4f..c010df6 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,7 @@
       <img
         src="https://media.licdn.com/dms/image/D4D03AQEt1mkCdln_OA/profile-displayphoto-shrink_800_800/0/1687128382673?e=1708560000&v=beta&t=p0BdA2rn9x31BD9Le45ltHzpLEmDGLBIGAdwwsXOUEs"
         alt="My Photo"
-        width="400px"
+        width="25%"
       />
       <h2>Mehmet Salih Bozkır</h2>
       <p>
@@ -85,7 +85,7 @@ <h2>SKILLS</h2>
         width="100"
       />
       <img
-        src="https://www.aydiner.gen.tr/wp-content/uploads/2019/11/bootstrap-stack.png"
+        src="https://user-images.githubusercontent.com/74038190/212280805-9bcb336b-8c55-46a8-abf8-ff286ab55472.gif"
         width="100"
       />
       <img