initialize project structure with basic components and configuration

.gitignore

@@ -0,0 +1,177 @@
+# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
+
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Caches
+
+.cache
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store
+
+dist/

LICENSE

@@ -0,0 +1,11 @@
+Copyright (c) 2025 seth. 
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -0,0 +1,15 @@
+# bunhtml
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.1.45. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.

index.ts

@@ -0,0 +1,61 @@
+import { unlink } from "node:fs/promises";
+import { watch } from "node:fs";
+import { Glob } from "bun";
+import type { BuildArtifact } from "bun";
+import { join } from "node:path";
+
+const glob = new Glob("**/*");
+
+const build = async () => {
+    const start = Date.now();
+    const built = await Bun.build({
+        entrypoints: ["./src/index.html"],
+        outdir: "./dist",
+        html: true,
+        experimentalCss: true,
+        splitting: true,
+        sourcemap: "linked"
+        //minify: true,
+    })
+    const end = Date.now();
+    await cleanOldFiles(built.outputs);
+    console.log("Did build", built.success, built.logs)
+    console.log("Build time:", end - start, "ms");
+}
+
+const cleanOldFiles = async (outputs: BuildArtifact[]) => {
+    let distFiles: string[] = []
+    for await (const file of glob.scan("./dist")) {
+        distFiles.push(file)
+    }
+
+    for await (const output of outputs) {
+        const arr = output.path.split("\\")
+        const file = arr[arr.length - 1]
+
+        distFiles = distFiles.filter(item => item !== file);
+    }
+
+    return await Promise.all(
+        Array.from(distFiles).map(file => unlink(join("dist", file)))
+    );
+}
+
+if (process.env.NOWATCH !== "1") {
+    watch(import.meta.dir, { recursive: true }, async (_, file) => {
+        if (!file?.startsWith("dist")) return await build();
+        return;
+    });
+
+    Bun.serve({
+        async fetch(request, server) {
+            const { pathname } = new URL(request.url);
+
+            const file = pathname === "/" ? "/index.html" : pathname;
+
+            return new Response(Bun.file(`dist${file}`))
+        }
+    })
+}
+
+await build();

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "bunhtml",
+  "module": "index.ts",
+  "type": "module",
+  "scripts": {
+    "build": "NOWATCH=1 bun .",
+    "start": "bun ."
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "lucide-preact": "^0.473.0",
+    "lucide-static": "^0.473.0",
+    "modern-normalize": "^3.0.1",
+    "preact": "^10.25.4",
+    "react": "npm:@preact/compat",
+    "react-dom": "npm:@preact/compat",
+    "react-icons": "^5.4.0"
+  }
+}

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);

tsconfig.json

@@ -0,0 +1,36 @@
+{
+	"compilerOptions": {
+		// Enable latest features
+		"lib": ["ESNext", "DOM"],
+		"target": "ESNext",
+		"module": "ESNext",
+		"moduleDetection": "force",
+		"jsx": "react-jsx",
+		"jsxImportSource": "preact",
+		"allowJs": true,
+
+		// Bundler mode
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": true,
+		"noEmit": true,
+
+		// Best practices
+		"strict": true,
+		"skipLibCheck": true,
+		"noFallthroughCasesInSwitch": true,
+
+		// Some stricter flags (disabled by default)
+		"noUnusedLocals": false,
+		"noUnusedParameters": false,
+		"noPropertyAccessFromIndexSignature": false,
+
+		"baseUrl": "./",
+		"paths": {
+			"react": ["./node_modules/preact/compat/"],
+			"react/jsx-runtime": ["./node_modules/preact/jsx-runtime"],
+			"react-dom": ["./node_modules/preact/compat/"],
+			"react-dom/*": ["./node_modules/preact/compat/*"]
+		}
+	}
+}