initial

src/app/styles/global.scss

@@ -0,0 +1,9 @@
+@import "normalize.css";
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+
+	border: 0;
+}

src/pages/HomePage/index.ts

@@ -0,0 +1,5 @@
+import HomePage from "@pages/HomePage/ui/HomePage";
+
+export {
+	HomePage
+}

src/pages/HomePage/ui/HomePage.module.scss

@@ -0,0 +1,55 @@
+.homepage {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	justify-content: center;
+	gap: 1rem;
+
+	height: 100vh;
+
+	color: #C7D0CC;
+
+	background: #000;
+
+	font-family: Roboto, sans-serif;
+	font-size: 2vw;
+	font-weight: bold;
+}
+
+.path {
+	font-style: italic;
+}
+
+.font {
+	font-size: 5vw;
+}
+
+.hint {
+	padding: .5rem;
+
+	pointer-events: none;
+
+	border: rgb(199 208 204 / 5%) 1px solid;
+	border-radius: 15px;
+
+	font-size: 1vw;
+}
+
+.link {
+	transition: 0.3s;
+	animation: shine 4s linear infinite;
+
+	color: #000;
+	background: linear-gradient(to right, #020024 10%, #5b0979 40%, #5b0979 60%, #020024 80%);
+	background-clip: text;
+	background-size: 200% auto;
+
+	font-size: 5vw;
+	-webkit-text-fill-color: transparent;
+
+	@keyframes shine {
+		to {
+			background-position: 200% center;
+		}
+	}
+}

src/pages/HomePage/ui/HomePage.tsx

@@ -0,0 +1,26 @@
+import Link from "next/link"
+
+import cls from "./HomePage.module.scss"
+
+const HomePage = () => {
+	return (
+		<div className={cls.homepage}>
+			<p className={cls.font}>
+				Hello from{" "}
+				<Link
+					href="https://github.com/yunglocokid"
+					target="_blank"
+					className={cls.link}
+				>
+					yunglocokid
+				</Link>
+			</p>
+			<pre className={cls.hint}>
+				You can edit <span className={cls.path}>{"src/pages/HomePage"}</span> to
+				start!
+			</pre>
+		</div>
+	)
+}
+
+export default HomePage