From 52576ca22bf07eb0854a151d302abfbb7d2ad99c Mon Sep 17 00:00:00 2001
From: milaasHD <143434800+milaasHD@users.noreply.github.com>
Date: Wed, 14 Aug 2024 20:06:19 +0200
Subject: [PATCH] Box added

---
 src/app/globals.css   | 82 ++++++++++++++++++++++++++++++++++++++-----
 src/app/page.js       |  5 +--
 src/components/Box.js | 24 +++++++++++++
 tailwind.config.js    |  2 ++
 4 files changed, 103 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Box.js

diff --git a/src/app/globals.css b/src/app/globals.css
index dd2e52a..fb88324 100644
--- 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,14 +45,15 @@ 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;
 }
 
@@ -59,7 +61,7 @@ body::-webkit-scrollbar{
   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%}
-}
\ No newline at end of file
+}
+
+#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
index 2c1a321..85bd27b 100644
--- 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
new file mode 100644
index 0000000..a275239
--- /dev/null
+++ 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
index fb12176..6687cc9 100644
--- 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: [],