diff options
Diffstat (limited to 'src/pages/index.astro')
| -rw-r--r-- | src/pages/index.astro | 231 |
1 files changed, 116 insertions, 115 deletions
diff --git a/src/pages/index.astro b/src/pages/index.astro index dea00f2..68d8a2c 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,137 +1,138 @@ --- import Layout from "../layouts/Layout.astro"; -import SocialNavbar from '../components/SocialNavbar.astro'; +import SocialNavbar from "../components/SocialNavbar.astro"; import ShapesBackground from "../components/ShapesBackground.astro"; --- <Layout title="Pinapelz"> - <div class="center-wrapper"> - <main> - <h1 class="welcome-message"> - <span class="welcome-text-gradient">Welcome</span> 👋 - </h1> - <p class="introduction"> - I'm <span class="text-gradient">Yukai Shan</span>, a Software Engineering - student at UC Irvine - </p> - <p class="introduction"> - Sometimes I make cool things. Feel free to go and check them out! - </p> - <SocialNavbar/> - </main> - </div> - <ShapesBackground/> - <script> + <div class="center-wrapper"> + <main> + <h1 class="welcome-message"> + <span class="welcome-text-gradient">Welcome</span> 👋 + </h1> + <p class="introduction"> + I'm <span class="text-gradient">Pinapelz</span>, a Software + Engineering graduate passionate about open-source software and + building fun and interesting things. + </p> + <p class="introduction">Some of them even work.</p> + </main> + <SocialNavbar /> + </div> +</Layout> +<ShapesBackground /> +<script> const welcomeMessages = [ - 'print("Hello World")', - "Hello there", - "Bonjour", - "こにちは", - "你好", - "Ahoy!", + 'print("Hello World")', + "Hello there", + "Bonjour", + "こにちは", + "你好", + "Ahoy!", ]; let currentIndex = 0; const h1 = document.querySelector( - "h1.welcome-message span.welcome-text-gradient" + "h1.welcome-message span.welcome-text-gradient", ); function typeMessage(message) { - let i = 0; - h1.textContent = ""; - const interval = setInterval(() => { - if (i < message.length) { - h1.textContent += message[i]; - i++; - } else { - clearInterval(interval); - currentIndex = (currentIndex + 1) % welcomeMessages.length; - setTimeout(() => { - h1.classList.add("slide-out"); - setTimeout(() => { - typeMessage(welcomeMessages[currentIndex]); - h1.classList.remove("slide-out"); - }, 1000); - }, 3000); - } - }, 100); + let i = 0; + h1.textContent = ""; + const interval = setInterval(() => { + if (i < message.length) { + h1.textContent += message[i]; + i++; + } else { + clearInterval(interval); + currentIndex = (currentIndex + 1) % welcomeMessages.length; + setTimeout(() => { + h1.classList.add("slide-out"); + setTimeout(() => { + typeMessage(welcomeMessages[currentIndex]); + h1.classList.remove("slide-out"); + }, 1000); + }, 3000); + } + }, 100); } typeMessage(welcomeMessages[currentIndex]); - </script> -</Layout> +</script> + <style> - @import url("https://fonts.googleapis.com/css?family=Noto:400,700"); + @import url("https://fonts.googleapis.com/css?family=Noto:400,700"); - * { - margin: 0px; - padding: 0px; - } + * { + margin: 0px; + padding: 0px; + } - body { - font-family: "Noto", sans-serif; - height: 100%; - } - main { - margin: auto; - padding: 1rem; - width: 800px; - max-width: calc(100% - 2rem); - color: white; - font-size: 20px; - line-height: 1.6; - } - .astro-a { - position: absolute; - top: -32px; - left: 50%; - transform: translatex(-50%); - width: 220px; - height: auto; - z-index: -1; - } - h1 { - font-size: 3.5rem; - font-weight: 700; - line-height: 1; - text-align: center; - margin-bottom: 1em; - transition: transform 0.3s ease-in-out; - } + body { + font-family: "Noto", sans-serif; + height: 100%; + } + main { + margin: 0 auto; + padding: 1rem; + width: 800px; + max-width: calc(100% - 2rem); + color: white; + font-size: 20px; + line-height: 1.6; + } + .astro-a { + position: absolute; + top: -32px; + left: 50%; + transform: translatex(-50%); + width: 220px; + height: auto; + z-index: -1; + } + h1 { + font-size: 3.5rem; + font-weight: 700; + line-height: 1; + text-align: center; + margin-bottom: 1em; + transition: transform 0.3s ease-in-out; + } - h1:hover { - transform: scale(1.1); - } - .welcome-text-gradient { - background-image: var(--accent-gradient-purp); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-size: 400%; - background-position: 0%; - transition: background-position 0.3s ease-in-out; - } - .text-gradient { - background-image: var(--accent-gradient); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-size: 400%; - background-position: 0%; - transition: background-position 0.3s ease-in-out; - } - .slide-out { - transform: translateX(-100%); - transition: transform 0.5s ease-in-out; - } - .introduction { - font-size: 1.5rem; - text-align: center; - color: #ffffffbd; - } + h1:hover { + transform: scale(1.1); + } + .welcome-text-gradient { + background-image: var(--accent-gradient-purp); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-size: 400%; + background-position: 0%; + transition: background-position 0.3s ease-in-out; + } + .text-gradient { + background-image: var(--accent-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-size: 400%; + background-position: 0%; + transition: background-position 0.3s ease-in-out; + } + .slide-out { + transform: translateX(-100%); + transition: transform 0.5s ease-in-out; + } + .introduction { + font-size: 1.5rem; + text-align: center; + color: #ffffffbd; + } - .center-wrapper { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 90vh; - } + .center-wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 0.75rem; + min-height: 90vh; + } </style> |