initialize project structure with basic components and configuration

src/components/App.css

@@ -0,0 +1,94 @@
+@font-face {
+    font-family: "Circular Std";
+    src: url("../../public/circularstd/Black.woff2") format("woff2");
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Circular Std";
+    src: url("../../public/circularstd/BlackItalic.woff2") format("woff2");
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Circular Std";
+    src: url("../../public/circularstd/Bold.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Circular Std";
+    src: url("../../public/circularstd/BoldItalic.woff2") format("woff2");
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Circular Std";
+    src: url("../../public/circularstd/Book.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Circular Std";
+    src: url("../../public/circularstd/BookItalic.woff2");
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Circular Std";
+    src: url("../../public/circularstd/Medium.woff2");
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Circular Std";
+    src: url("../../public/circularstd/MediumItalic.woff2");
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    width: 100vw;
+    font-family: "Circular Std", sans-serif;
+    background-color: #111;
+    overflow: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: #333 #222;
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #222;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #333;
+    border-radius: 10px;
+}
+
+.container {
+    scroll-snap-type: y mandatory;
+    overflow: scroll;
+    height: 100vh;
+}

src/components/App.tsx

@@ -0,0 +1,51 @@
+import Hero from "./Hero";
+import IconAnchor from "./IconAnchor";
+
+import { Music, } from "lucide-preact";
+import { SiGithub, SiForgejo, SiInstagram } from "react-icons/si";
+
+import "./App.css";
+
+export default () => {
+	return (
+		<div class="container">
+			<Hero title="This is not a CDN." waves="header" />
+			<hr />
+			<Hero
+				title="This, is Audiophile, Basshead and Techie."
+				paragraph="One who develops for both frontends and backends."
+			/>
+			<hr />
+			<Hero
+				title="S€th."
+				links={[
+					<IconAnchor
+						icon={<SiForgejo size={"2rem"} />}
+						link="https://git.creations.works/seth"
+						title="Forgejo"
+						key="forgejoLink"
+					/>,
+					<IconAnchor
+						icon={<SiGithub size={"2rem"} />}
+						link="https://github.com/wont-stream"
+						title="GitHub"
+						key="githubLink"
+					/>,
+					<IconAnchor
+						icon={<Music size={"2rem"} />}
+						link="https://artist.link/echoed_away"
+						title="Echoed Away Music"
+						key="artistLink"
+					/>,
+					<IconAnchor
+						icon={<SiInstagram size={"2rem"} />}
+						link="https://instagram.com/s_euro_th"
+						title="Instagram"
+						key="instagramLink"
+					/>,
+				]}
+				waves="footer"
+			/>
+		</div>
+	);
+};

src/components/Hero/Hero.css

@@ -0,0 +1,53 @@
+.hero {
+  scroll-snap-align: start;
+  position: relative;
+  background: #111111;
+  color: white;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.content {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.hero h2 {
+  position: relative;
+  z-index: 1;
+  font-size: 4rem;
+  margin: 0 0px;
+  line-height: 1;
+}
+
+.hero p {
+  position: relative;
+  z-index: 1;
+  font-size: 2rem;
+  color: #DEDEDE
+}
+
+.waves-header {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 150px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-image: url("./header.svg")
+}
+
+.waves-footer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 200px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-image: url("./footer.svg")
+}

src/components/Hero/footer.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="854" height="100"><style><![CDATA[path{transform-origin:50% 50%}]]></style><g transform="matrix(1 0 0 1 0 0)"><path fill="#333" opacity=".4" transform="rotate(180)"><animate attributeName="d" dur="20s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="0s" values="M0 0L 0 20Q 213.5 60 427 30T 854 55L 854 0 Z;M0 0L 0 45Q 213.5 60 427 40T 854 30L 854 0 Z;M0 0L 0 65Q 213.5 35 427 65T 854 30L 854 0 Z;M0 0L 0 20Q 213.5 60 427 30T 854 55L 854 0 Z"/></path><path fill="#333" opacity=".4" transform="rotate(180)"><animate attributeName="d" dur="20s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-10s" values="M0 0L 0 35Q 213.5 80 427 50T 854 60L 854 0 Z;M0 0L 0 50Q 213.5 20 427 20T 854 40L 854 0 Z;M0 0L 0 45Q 213.5 25 427 50T 854 65L 854 0 Z;M0 0L 0 35Q 213.5 80 427 50T 854 60L 854 0 Z"/></path></g></svg>

src/components/Hero/header.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="854" height="100"><g transform="matrix(1 0 0 1 0 0)"><path fill="#333" opacity=".4"><animate attributeName="d" dur="20s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="0s" values="M0 0L 0 20Q 213.5 60 427 30T 854 55L 854 0 Z;M0 0L 0 45Q 213.5 60 427 40T 854 30L 854 0 Z;M0 0L 0 65Q 213.5 35 427 65T 854 30L 854 0 Z;M0 0L 0 20Q 213.5 60 427 30T 854 55L 854 0 Z"/></path><path fill="#333" opacity=".4"><animate attributeName="d" dur="20s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-10s" values="M0 0L 0 35Q 213.5 80 427 50T 854 60L 854 0 Z;M0 0L 0 50Q 213.5 20 427 20T 854 40L 854 0 Z;M0 0L 0 45Q 213.5 25 427 50T 854 65L 854 0 Z;M0 0L 0 35Q 213.5 80 427 50T 854 60L 854 0 Z"/></path></g></svg>

src/components/Hero/index.tsx

@@ -0,0 +1,22 @@
+import type { VNode } from "preact";
+import "./Hero.css";
+
+export default (props: {
+	title: string;
+	paragraph?: string;
+	links?: VNode[];
+	waves?: "header" | "footer";
+}) => {
+	return (
+		<>
+			<section class="hero">
+				<div class="content">
+					<h2>{props.title}</h2>
+					{props.paragraph && <p>{props.paragraph}</p>}
+					{props.links && <p>{...props.links}</p>}
+				</div>
+				{props.waves && <div class={`waves-${props.waves}`} />}
+			</section>
+		</>
+	);
+};

src/components/IconAnchor/IconAnchor.css

@@ -0,0 +1,3 @@
+.IconAnchor {
+    margin: 5px;
+}

src/components/IconAnchor/index.tsx

@@ -0,0 +1,9 @@
+import type { VNode } from "preact";
+
+import "./IconAnchor.css";
+
+export default (props: {icon: VNode; link: string; title: string;}) => {
+    return (
+        <a class="IconAnchor" href={props.link} title={props.title} rel="noreferrer noopener">{props.icon}</a>
+    );
+}

src/index.css

@@ -0,0 +1 @@
+@import "modern-normalize";

src/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>CDN, how?</title>
+    <meta name="description" content="This, is not a CDN.">
+    <meta name="color-scheme" content="dark">
+    <link rel="icon" href="lucide-static/icons/ethernet-port.svg">
+    <link rel="icon" href="../public/profile.jpg">
+    <link rel="stylesheet" href="./index.css" />
+    <script src="./index.tsx" async type="module" defer></script>
+</head>
+
+<body></body>
+
+</html>

src/index.tsx

@@ -0,0 +1,5 @@
+import { render } from "preact";
+
+import App from "./components/App";
+
+render(App(), document.body);