fix typos, upgrade the website

Bamboooz · Feb 4, 2024 · 6d1f815 · 6d1f815
1 parent 6bab69c
commit 6d1f815
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 62 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
 # my website :D
 >The font used in this website is [AlphaCentauri](https://joannavu.gumroad.com/l/iHUgj)<br/>
->Star animation taken from [here](https://codesandbox.io/p/sandbox/css-shooting-stars-animation)
+>Star animation taken from [here](https://codesandbox.io/p/sandbox/css-shooting-stars-animation-w96ut)
diff --git a/src/App.css b/src/App.css
@@ -5,33 +5,24 @@ body {
     -moz-osx-font-smoothing: grayscale;
 }
 
+html, body, .App {
+    width: 100vw!important;
+    height: 100vh!important;
+}
+
 .App {
-    width: 100vw;
-    height: 100vh;
     background: #141414;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     user-select: none;
-    position: relative;
-}
-
-section {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: black;
-    background-position-x: center;
-    background-size: cover;
 }
 
 span {
     position: absolute;
-    top: 50%;
-    left: 50%;
+    top: 0;
+    left: 0;
     width: 4px;
     height: 4px;
     background: #fff;
@@ -66,85 +57,84 @@ span::before {
 }
 
 span:nth-child(1) {
-    top: 0;
+    top: -25px;
     right: 0;
     left: initial;
-    animation-delay: 0;
+    animation-delay: 4s;
     animation-duration: 1s;
 }
 
 span:nth-child(2) {
-    top: 0;
+    top: -25px;
     right: 80px;
     left: initial;
-    animation-delay: 0.2s;
+    animation-delay: 4.2s;
     animation-duration: 3s;
 }
 
 span:nth-child(3) {
-    top: 80px;
+    top: -25px;
     right: 0px;
     left: initial;
-    animation-delay: 0.4s;
+    animation-delay: 4.4s;
     animation-duration: 2s;
 }
 
 span:nth-child(4) {
-    top: 0;
+    top: -25px;
     right: 180px;
     left: initial;
-    animation-delay: 0.6s;
+    animation-delay: 4.6s;
     animation-duration: 1.5s;
 }
 
 span:nth-child(5) {
-    top: 0;
+    top: -25px;
     right: 400px;
     left: initial;
-    animation-delay: 0.8s;
+    animation-delay: 4.8s;
     animation-duration: 2.5s;
 }
 
 span:nth-child(6) {
-    top: 0;
+    top: -25px;
     right: 600px;
     left: initial;
-    animation-delay: 1s;
+    animation-delay: 5s;
     animation-duration: 3s;
 }
 
 span:nth-child(7) {
     top: 300px;
-    right: 0px;
+    right: -25px;
     left: initial;
-    animation-delay: 1s;
+    animation-delay: 5s;
     animation-duration: 1.75s;
 }
 
 span:nth-child(8) {
-    top: 0px;
+    top: -25px;
     right: 700px;
     left: initial;
-    animation-delay: 1.4s;
+    animation-delay: 5.4s;
     animation-duration: 1.25s;
 }
 
 span:nth-child(9) {
-    top: 0px;
+    top: -25px;
     right: 1000px;
     left: initial;
-    animation-delay: 0.75s;
+    animation-delay: 4.75s;
     animation-duration: 2.25s;
 }
 
 span:nth-child(10) {
-    top: 0px;
+    top: -25px;
     right: 1000px;
     left: initial;
-    animation-delay: 2.75s;
+    animation-delay: 6.75s;
     animation-duration: 2.25s;
 }
-
 
 @font-face {
     font-family: 'AlphaCentauri';
@@ -159,6 +149,7 @@ span:nth-child(10) {
     font-display: swap;
 }
 
+
 .text-container {
     margin: auto!important;
 }
@@ -176,6 +167,7 @@ span:nth-child(10) {
     animation: fadeInAnimation ease 3s;
     animation-iteration-count: 1;
     animation-fill-mode: forwards;
+    z-index: 99;
 }
 
 .me-container {
@@ -201,6 +193,7 @@ span:nth-child(10) {
     align-items: center;
     border: 0;
     margin-left: 6px;
+    z-index: 99;
 }
 
 .github-button:hover {
@@ -218,10 +211,11 @@ span:nth-child(10) {
     line-height: 1.3;
     white-space: nowrap;
     position: relative;
-    font-size: 32px;
-    margin-left: 6px;
+    font-size: 30px;
+    margin-left: 4px;
     margin-right: 6px;
     color: #fff;
+    z-index: 99;
 }
 
 @keyframes fadeInAnimation {

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,6 @@
 import "./App.css";
 import { PiGithubLogo } from "react-icons/pi";
+import { CiCoffeeBean } from "react-icons/ci";
 
 const App = () => {
     const openGithubPage = () => {
@@ -8,28 +9,30 @@ const App = () => {
 
     return (
         <div className="App">
-            <section>
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-
-                <div className="text-container">
-                   <p className="username">BAMBOOOZ</p>
-                   <div className="me-container">
-                       <p className="who-am-i">backend developer</p>
-                       <button onClick={openGithubPage} className="github-button">
-                           <PiGithubLogo size={32} />
-                       </button>
-                   </div>
-                </div>
-            </section>
+            {/* stars */}
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+
+            <div className="text-container">
+               <p className="username">BAMBOOOZ</p>
+               <div className="me-container">
+                   <p className="who-am-i">backend developer</p>
+                   <button onClick={openGithubPage} className="github-button">
+                       <PiGithubLogo size={32} />
+                   </button>
+                   <button onClick={openGithubPage} className="github-button">
+                       <CiCoffeeBean size={32} />
+                   </button>
+               </div>
+            </div>
         </div>
     );
 }