more responsiveness, added a big background, deleted some margins

BabaC0des · Oct 18, 2024 · 64ea1f3 · 64ea1f3
1 parent 8a48222
commit 64ea1f3
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 43 deletions.
diff --git a/src/app/css/hobbys.css b/src/app/css/hobbys.css
@@ -111,12 +111,6 @@
         place-items: center;
 
     }
-    .hobby:nth-child(odd){
-        margin-left: 50px;
-    }
-    .hobby:nth-child(even){
-        margin-right: 100px;
-    }
     #hobbys{
         height: 200vh;
     }

diff --git a/src/app/css/projects.css b/src/app/css/projects.css
@@ -52,7 +52,6 @@
     #projects{
         background: linear-gradient(white, #7ac3de, #7ac3de, #7ac3de, white );
         height: 250vh;
-        margin-top: 350px;
     }
 
     .cloud{

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -114,7 +114,7 @@ body::-webkit-scrollbar{
     transform: translateX(100%);
 
   }
-  
+
 }
 
 
@@ -186,20 +186,20 @@ body {
 
 /*Box for Box.js*/
 
-  .circle.fade-out {
-    opacity: 1;
-    scale: 110%;
-  }
+.circle.fade-out {
+  opacity: 1;
+  scale: 110%;
+}
 
 
-  .circle:nth-child(1) { --translate-x: -300%; --translate-y: -200%; }
-  .circle:nth-child(2) { --translate-x: -150%; --translate-y: -200%; }
-  .circle:nth-child(3) { --translate-x: 0%; --translate-y: -200%; }
-  .circle:nth-child(4) { --translate-x: 150%; --translate-y: -200%; }
-  .circle:nth-child(5) { --translate-x: -300%; --translate-y: -350%; }
-  .circle:nth-child(6) { --translate-x: -150%; --translate-y: -350%; }
-  .circle:nth-child(7) { --translate-x: 0%; --translate-y: -350%; }
-  .circle:nth-child(8) { --translate-x: 150%; --translate-y: -350%; }
+.circle:nth-child(1) { --translate-x: -300%; --translate-y: -200%; }
+.circle:nth-child(2) { --translate-x: -150%; --translate-y: -200%; }
+.circle:nth-child(3) { --translate-x: 0%; --translate-y: -200%; }
+.circle:nth-child(4) { --translate-x: 150%; --translate-y: -200%; }
+.circle:nth-child(5) { --translate-x: -300%; --translate-y: -350%; }
+.circle:nth-child(6) { --translate-x: -150%; --translate-y: -350%; }
+.circle:nth-child(7) { --translate-x: 0%; --translate-y: -350%; }
+.circle:nth-child(8) { --translate-x: 150%; --translate-y: -350%; }
 
 
 
@@ -218,23 +218,23 @@ body {
     box-shadow: -7px 6px 5px #487485;
   }
 }
-  .stack-cool{
-    text-align: center;
-  }
+.stack-cool{
+  text-align: center;
+}
 
 
 
 
- .stack-cool {
-   font-size: 4rem;
-   font-weight: 900;
-   color: black;
-   letter-spacing: 0.2em;
-   position: relative;
-   display: inline-block;
-   transform: perspective(500px) rotateX(15deg);
-   overflow: visible;
- }
+.stack-cool {
+  font-size: 4rem;
+  font-weight: 900;
+  color: black;
+  letter-spacing: 0.2em;
+  position: relative;
+  display: inline-block;
+  transform: perspective(500px) rotateX(15deg);
+  overflow: visible;
+}
 
 
 
@@ -427,6 +427,58 @@ body {
   .nav-link{
     font-size: 13px;
   }
+  .stack-cool {
+    font-size: 3rem;
+  }
+  .circle {
+    width: 8vw;
+    height: 8vw;
+  }
+}
+@media (max-width: 600px) {
+
+  html,body
+  {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+  }
+  #sun {
+    width: 20vh;
+    right: -15vh;
+    top: 10vh;
+  }
+  .nav-link {
+    font-size: 12px;
+  }
+  .stack-cool {
+    font-size: 2rem;
+  }
+  .card {
+    width: 80vw;
+    padding: 5vw;
+  }
+  .card > img {
+    height: 40vw;
+  }
+  #Name {
+    font-size: 12vw;
+  }
+  #blob {
+    height: 30vw;
+  }
+  .background_grad {
+    padding-top: 60vw;
+  }
+  .circle {
+    width: 10vw;
+    height: 10vw;
+  }
+  #image-top {
+    height: 200vw;
+  }
 }
 @media (max-width: 1100px) {
 
@@ -450,4 +502,3 @@ body {
 #sun:hover{
   transform: scale(150%);
 }
-
diff --git a/src/app/page.js b/src/app/page.js
@@ -74,7 +74,7 @@ const HomePage = () => {
     return (
         <>
             <body>
-            <div id="image-top" className="flex flex-col justify-center mb-32 ">
+            <div id="image-top" className="flex flex-col justify-center ">
                 <Nav/>
                 <Image
                     src="/sun.png"
@@ -86,7 +86,7 @@ const HomePage = () => {
                 <Name/>
                 <Clouds/>
             </div>
-            <div id="stack" className="mt-36 hidden_raw">
+            <div id="stack" className="hidden_raw">
                 <div className='cloud'>
                     <h1 className="text-black absolute stack-cool">STACK</h1>
                 </div>

diff --git a/src/components/Hobbys.js b/src/components/Hobbys.js
@@ -9,9 +9,6 @@ export default function Hobbys(){
         { name: "Technical"},
         { name: "Skisport"},
     ];
-
-
-
     return (
         <>
         <div className="hobby-container w-full grid grid-cols-4 auto-rows-auto gap-y-3 gap-x-4 p-20 ">

diff --git a/src/components/Name.js b/src/components/Name.js
@@ -20,8 +20,22 @@ export default function Name() {
     }, []);
 
     return (
-        <h1 ref={textRef} id={"Name"} className="text-center text-[6vh] text-white mb-40 hidden_raw">
-            Saalim Baba
-        </h1>
+        <div className="relative text-center">
+            <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+                <span
+                    className="text-[20vh] text-black uppercase opacity-10 select-none"
+                    style={{ fontFamily: 'Arial Black, sans-serif' }}
+                >
+                    SAALIM BABA
+                </span>
+            </div>
+            <h1
+                ref={textRef}
+                id="Name"
+                className="relative text-[6vh] text-white hidden_raw"
+            >
+                Portfolio Page <br />
+            </h1>
+        </div>
     );
 }
diff --git a/src/components/Nav.js b/src/components/Nav.js
@@ -4,7 +4,7 @@ import Image from "next/image";
 export default function Nav() {
     return (
         <div className="font-serif text-center align-center">
-            <nav className="w-[400px] bg-gray-200 rounded-md bg-opacity-50 fixed top-5 left-1/2 transform -translate-x-1/2 z-[1000]">
+            <nav className="w-[400px] bg-gray-200 rounded-md bg-opacity-50 fixed top-5 left-1/2 transform -translate-x-1/2 z-[11100]">
                 <div className="container py-4">
                     <div className="flex justify-center space-x-10">
                         <a href="#stack" className="nav-link transition duration-300">