Box added

BabaC0des · Aug 14, 2024 · 52576ca · 52576ca
1 parent 3106455
commit 52576ca
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 10 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,6 +1,7 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
+@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
 
 
 :root {
@@ -44,22 +45,23 @@ body::-webkit-scrollbar{
   overflow: hidden;
 }
 #stack{
-  position: relative;
-  padding: 75px 100px;
+  margin-top: 5vw;
 }
 
 .nav-link {
   position: relative;
   display: inline-block;
   padding-bottom: 1px;
+  font-family: "Varela Round", sans-serif;
+  font-style: normal;
   color: white;
 }
 
 .nav-link::after {
   content: '';
   position: absolute;
   width: 0;
-  height: 2px;
+  height: 1px;
   background-color: white;
   left: 50%;
   bottom: 0;
@@ -144,10 +146,10 @@ body {
   width: 100%;
   height: 100%;
   position: fixed;
-  background: linear-gradient(#2596be, #ffffff);
+  background: linear-gradient(#2aacda, #2daedc, #36bfee, #72b7d0, #ffffff);
   background-size: 600% 100%;
   animation: gradient 16s linear infinite;
-  animation-direction: alternate;
+  animation-direction: reverse;
   z-index:1000;
   display: flex;
   transition: opacity 1s ease-out;
@@ -157,10 +159,74 @@ body {
   font-size: 4vw;
   margin-bottom: 20vh;
   text-align: center;
-  font-weight: bold;
+  font-weight: 400;
+  font-style: normal;
   color: white;
+  font-family: "Varela Round", sans-serif;
+  transition: opacity 1s ease-in-out;
+  opacity: 0;
 }
 @keyframes gradient {
-  0% {background-position: 0%}
+  0% {background-position: -100%}
   100% {background-position: 100%}
-}
+}
+
+#Name{
+  font-weight: 900;
+  font-style: normal;
+  color: white;
+  font-family: "Varela Round";
+}
+
+/*Box for Box.js*/
+@media (min-width:600px){
+  .box {
+    width: 100px;
+    height: 90px;
+    position: relative;
+    margin-bottom: 10vw;
+    transform-style: preserve-3d;
+    transform: rotateX(-20deg) rotateY(120deg);
+  }
+
+  .box__face {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #d2b48c;
+    border: 1px solid #9d866a;
+    transform: translateZ(50px) rotateX(0deg);
+  }
+
+
+  .box__face--top {
+    height: 100px;
+    background: #e0cda9;
+    transform: translateY(-50px) rotateX(90deg);
+    transition: 0.3s;
+  }
+
+  .box__face--left {
+    background: #e0cda9;
+    transform: translateX(-50px) rotateY(-90deg);
+  }
+  .box__face--front {
+    background: #e0cda9;
+    transform: translateX(50px) rotateY(90deg);
+  }
+
+  .box__face--right {
+    background: #b9a98b;
+    transform: translateX(0px) translateZ(-50px) rotateY(180deg);
+  }
+  .box__face--right > img {
+    display: inline;
+  }
+
+  .box:hover .box__face--top {
+    box-shadow: 0 1vw 10vw rgba(255, 220, 0, 0.8);
+    background: #5d5444;
+    opacity: 0.7;
+    transition: 0.3s;
+  }
+}
diff --git a/src/app/page.js b/src/app/page.js
@@ -8,6 +8,7 @@ import Name from "../components/Name"
 import Loader from "../components/Loader"
 import Image from 'next/image'
 import {useEffect} from "react";
+import Box from "../components/Box"
 
 const HomePage = () => {
     useEffect(() => {
@@ -18,7 +19,6 @@ const HomePage = () => {
 
     return (
         <>
-            <Loader/>
             <div id="image-top" className={"flex flex-col justify-center"}>
                 <Nav/>
                 <Image
@@ -32,8 +32,9 @@ const HomePage = () => {
                 <Clouds/>
             </div>
             <div id="stack">
-                <p className="text-xl font-bold mb-96">Hello Everyone</p>
+                <Box/>
             </div>
+
         </>
     );
 };

diff --git a/src/components/Box.js b/src/components/Box.js
@@ -0,0 +1,24 @@
+
+export default function Box() {
+    return (
+        <>
+            <div className="flex flex-col justify-end items-center bottom-0 border border-black h-[70vh]">
+                <div className="box">
+                    <div className="box__face box__face--front"></div>
+                    <div className="box__face box__face--top"></div>
+                    <div className="box__face box__face--left">
+                        <br/>
+                        <h1 className="ml-4">My Stack</h1>
+                    </div>
+                    <div className="relative box__face box__face--right">
+                        <img src="/web-icon.png" className="hidden border border-black h-6 w-6  absolute bottom-0 right-0 m-2 [transform:rotateY(10deg)]">
+                        </img>
+                        <img src="/info-icon.png" className="hidden border border-black h-6 w-6  absolute bottom-0 right-7 m-2 [transform:rotateY(10deg)]">
+                        </img>
+                    </div>
+                    <div className="box__face box__face--back"></div>
+                </div>
+            </div>
+        </>
+    );
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
+
 module.exports = {
   content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
@@ -8,6 +9,7 @@ module.exports = {
   ],
   theme: {
     extend: {
+
     },
   },
   plugins: [],