diff --git a/src/app/css/hobbys.css b/src/app/css/hobbys.css index 8aa9278..f0cdeb3 100644 --- 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 index a96b286..13fc092 100644 --- 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 index b3ffb65..fa3ee83 100644 --- 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 index 81352a9..e035c24 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -74,7 +74,7 @@ const HomePage = () => { return ( <> -
+
-
+

STACK

diff --git a/src/components/Hobbys.js b/src/components/Hobbys.js index 5d2b90d..9d7acce 100644 --- a/src/components/Hobbys.js +++ b/src/components/Hobbys.js @@ -9,9 +9,6 @@ export default function Hobbys(){ { name: "Technical"}, { name: "Skisport"}, ]; - - - return ( <>
diff --git a/src/components/Name.js b/src/components/Name.js index 0137eab..d30c517 100644 --- a/src/components/Name.js +++ b/src/components/Name.js @@ -20,8 +20,22 @@ export default function Name() { }, []); return ( -

- Saalim Baba -

+
+
+ + SAALIM BABA + +
+

+ Portfolio Page
+

+
); } diff --git a/src/components/Nav.js b/src/components/Nav.js index 050a029..0f5fabb 100644 --- a/src/components/Nav.js +++ b/src/components/Nav.js @@ -4,7 +4,7 @@ import Image from "next/image"; export default function Nav() { return (
-