Updated content and replaced assets

Updated content and increased version number
Added lang attribute to html tag
2025-09-04 11:14:11 +02:00 · 2025-09-04 11:14:11 +02:00 · 2025-09-04 11:14:11 +02:00 · 2025-09-04 11:14:11 +02:00 · 2025-09-04 11:14:11 +02:00 · 2025-09-04 11:14:10 +02:00
16 changed files with 470 additions and 2 deletions
--- a/README.md
+++ b/README.md
@ -1,3 +1,27 @@
-# freed.place
+<p align="center">
+  <a href="https://freed.place"><img height="256px" src="./html/assets/img/logo.png" /></a>
+</p>

-a little safe place on the wide web, welcome to freed.place!
+# Freed.place
+heya! welcome to my personal website! this site is build using pure html and css and can be easily deployed for yourself.
+
+## how to build this site?
+this site is run with Docker, a container system to make deploying applications easier.
+to install Docker on your system, please install the `docker` package from your package manager.
+after that; run `docker compose up` in the root of this repository which will start the NGINX server.
+you can then access the server at `127.0.0.1:80` or `localhost:80`.
+
+## wait... where's the old site?
+as you might have noticed, the branches in this repo begin from version 3.0.
+older versions of [freed.place](https://freed.place) are located in [another repository](https://codeberg.org/FreedTapestry21/freed.place).
+please take a look there for older versions of this site.
+please note that these older versions do not require a server to render properly. 
+
+## Credits
+This version of Freed's place includes assets created by other artists and used with proper attribution.
+Firstly, I'd like to thank [Pixelated Dorito](https://flashes-on-my-soul.straw.page/) for creating [my stella pfp](./html/assets/img/about.png)!
+Secondly, the favicon icon, created by [Volpeon](https://volpeon.ink/), is licensed under the **CC-BY-NC-SA-4.0** license.
+Lastly, the Jetbrains Mono font, created by [Jetbrains](https://www.jetbrains.com/lp/mono/), is licensed under the **SIL Open Font License 1.1**.
+
+## License
+The license which this project uses is located at `LICENSE`.
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -0,0 +1,9 @@
+services:
+  web:
+    image: nginx:latest
+    container_name: freed-place
+    restart: unless-stopped
+    volumes:
+     - ./html:/usr/share/nginx/html:ro
+    ports:
+     - "80:80"
--- a/html/about/index.html
+++ b/html/about/index.html
@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en-US">
+	<head>
+		<title>About | Freed's place</title>
+		<link rel="stylesheet" href="/assets/style.css">
+		<link rel="stylesheet" href="/assets/mobile.css">
+        <link rel="icon" type="image/x-icon" href="/assets/img/logo.png">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="format-detection" content="telephone=no">
+		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+		<meta http-equiv="Pragma" content="no-cache" />
+		<meta http-equiv="Expires" content="0" />
+	</head>
+	<body>
+		<div class="box menu">
+			<div class="name"><p>Freed's place</p></div>
+			<div class="index">
+				<p>
+					<a href="/">Home</a> | 
+					<a href="/about">About</a> | 
+					<a href="/contact">Contact</a>
+				</p>
+			</div>
+		</div>
+
+		<div class="box content">
+			<div class="item center">
+				<img src="/assets/img/about.png" class="img circle">
+			</div>
+			<div class="item">
+				<h1>The one, the only, fops!</h1>
+				<p>This is Bo, a little creature who mainly loves experimenting on computers, learning new and random facts and yapping nonsense. Sometimes she also likes to zone out while doing something important. They're genderfluid, transgender (MtF), pansexual and prefer to go by she/they pronouns. They can speak Dutch and English and their favorite animal is the fox (or as they like to call it; fops)! </p>
+			</div>
+		</div>
+
+		<div class="box content invert">
+			<div class="item center">
+				<img src="/assets/img/computer.png" class="img circle">
+			</div>
+			<div class="item">
+				<h1>The fops' journey</h1>
+				<p>Back in the day, Bo explored a lot in the world of computers and their inner workings. As she grew older, so did her desire to learn more about these systems. Over the years the fops have undertaken several technology-related projects involving Linux, networking, system management and programming. Bo is also actively part of communities and fandoms like the furry fandom, the LGBTQIA+ community and the Linux community.</p>
+			</div>
+		</div>
+
+		<div class="box footer">
+			<div class="info">
+				<p><a href="/info">Freed's place</a></p>
+			</div>
+			<div class="copyright">
+				<p>Copyright (c) 2022-2025 FreedTapestry21</p>
+			</div>
+		</div>
+	</body>
+</html>
--- a/html/assets/fonts/jbmono.woff2
+++ b/html/assets/fonts/jbmono.woff2
--- a/html/assets/img/about.png
+++ b/html/assets/img/about.png
--- a/html/assets/img/computer.png
+++ b/html/assets/img/computer.png
--- a/html/assets/img/logo.png
+++ b/html/assets/img/logo.png
--- a/html/assets/img/lookthere.png
+++ b/html/assets/img/lookthere.png
--- a/html/assets/img/there.png
+++ b/html/assets/img/there.png
--- a/html/assets/img/welcome.png
+++ b/html/assets/img/welcome.png
--- a/html/assets/img/yapping.png
+++ b/html/assets/img/yapping.png
--- a/html/assets/mobile.css
+++ b/html/assets/mobile.css
@ -0,0 +1,84 @@
+/*
+ * Freed.place
+ * Version 3.0
+ * Copyright (c) 2025 FreedTapestry21
+ */
+
+/* Responsive layout for mobile */
+@media (max-width: 822px) {
+    p {font-size: 15px;}
+    h1 {font-size: 31px;}
+    h2 {font-size: 27px;}
+    h3 {font-size: 23px;}
+    h4 {font-size: 19px;}
+
+    /* Custom */
+    .img {
+        max-height: 25vh;
+    }
+
+    /* Menu */
+    .menu {	
+        width: 90%;
+
+        margin: auto;
+    }
+
+    .menu p {user-select: none; font-size: 16px;}
+
+    .menu a {
+        color: var(--background-color);
+        text-decoration: none; 
+    }
+
+    .menu a:hover {
+        color: var(--accent-color-dark);
+        background-color: var(--background-color);
+    }
+
+    .name {
+        font-weight: bold;
+        text-align: center;
+        width: 100%;
+
+        background-color: var(--accent-color);
+        color: var(--text-color);
+    }
+    .index {
+        text-align: center; width: 100%;
+
+        background-color: var(--accent-color-dark);
+        color: var(--text-color);
+    }
+
+    /* Footer */
+    .footer {	
+        background-color: var(--accent-color);
+        color: var(--background-color);
+    
+        width: 100%;
+    
+        margin: auto;
+    }
+    
+    .footer p {font-size:12px;}
+    
+    .info {font-weight: bold; text-align: center; width: 100%;}
+    .copyright {text-align: center; width: 100%;}
+    
+    /* Boxes */
+    .box {
+        width: 100%;
+    
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+    
+    .item {
+        padding: 10px;
+        width: 80%;
+    }
+
+    .content {margin: auto;}
+}
--- a/html/assets/style.css
+++ b/html/assets/style.css
@ -0,0 +1,137 @@
+/*
+ * Freed.place
+ * Version 3.0
+ * Copyright (c) 2025 FreedTapestry21
+ */
+
+/* Jetbrains Mono font by Jetbrains */
+@font-face {
+    font-family: 'Jetbrains Mono';
+    src: local(''),
+    	url('./fonts/jbmono.woff2')
+}
+
+/* VGA font by VileR @ int10h.org! */
+@font-face {
+    font-family: 'VGA';
+    src: local(''),
+        url('./fonts/ibm_vga8.woff2')
+}
+
+:root {
+	--accent-color: #b4befe;
+	--accent-color-dark: #9198cd;
+    --background-color: #191724;
+}
+
+body {
+	background-color: var(--background-color);
+	color: var(--accent-color);
+	font-family: "Jetbrains Mono";
+}
+
+p {font-size: 16px;}
+h1 {font-size: 34px;}
+h2 {font-size: 30px;}
+h3 {font-size: 26px;}
+h4 {font-size: 22px;}
+
+a {
+	text-decoration: underline dotted;
+	color: var(--accent-color-dark);
+}
+
+a:hover {
+	color: var(--accent-color);
+}
+
+/* Custom */
+.center {
+	display: flex;
+  	justify-content: center;
+}
+
+.img {
+	max-height: 45vh;
+	max-width: 300px;
+}
+
+.circle {
+	border-radius: 50%;
+}
+
+.nocircle {
+	max-height: 30vh;
+}
+
+/* Menu */
+.menu {	
+	background-color: var(--accent-color);
+	color: var(--background-color);
+
+	width: 100%;
+
+	margin: auto;
+}
+
+.menu p {user-select: none; font-size: 22px;}
+
+.menu a {
+	color: var(--background-color);
+	text-decoration: none; 
+}
+
+.menu a:hover {
+	color: var(--accent-color);
+	background-color: var(--background-color);
+}
+
+.name {text-align: left; width: 45%;}
+.index {text-align: right; width: 45%;}
+
+/* Footer */
+.footer {	
+	background-color: var(--accent-color);
+	color: var(--background-color);
+
+	width: 100%;
+
+	margin: auto;
+}
+
+.footer p {font-size:14px;}
+
+.footer a {
+	color: var(--background-color);
+	text-decoration: none;
+}
+
+.footer a:hover {
+	color: var(--accent-color);
+	background-color: var(--background-color);
+}
+
+.info {text-align: left; width: 45%;}
+.copyright {text-align: right; width: 45%;}
+
+/* Boxes */
+.box {
+	width: min(1400px, 80%);
+
+	display: flex;
+  	flex-direction: row;
+	justify-content: center;
+}
+
+.item {
+	padding: 10px;
+	width: 50%;
+
+	margin: auto;
+}
+
+.content {margin: auto; min-height: 400px;}
+
+.invert {flex-direction: row-reverse;}
+
+.links {white-space: nowrap; overflow: scroll;}
--- a/html/contact/index.html
+++ b/html/contact/index.html
@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en-US">
+	<head>
+		<title>Contact | Freed's place</title>
+		<link rel="stylesheet" href="/assets/style.css">
+		<link rel="stylesheet" href="/assets/mobile.css">
+        <link rel="icon" type="image/x-icon" href="/assets/img/logo.png">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="format-detection" content="telephone=no">
+		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+		<meta http-equiv="Pragma" content="no-cache" />
+		<meta http-equiv="Expires" content="0" />
+	</head>
+	<body>
+		<div class="box menu">
+			<div class="name"><p>Freed's place</p></div>
+			<div class="index">
+				<p>
+					<a href="/">Home</a> | 
+					<a href="/about">About</a> | 
+					<a href="/contact">Contact</a>
+				</p>
+			</div>
+		</div>
+
+		<div class="box content">
+			<div class="item center">
+				<img src="/assets/img/yapping.png" class="img circle">
+			</div>
+			<div class="item">
+				<h1>Yapping places!!</h1>
+				<p>There are a few platforms on which I'm avaiable to chat! One notible platform to mention would be the Fediverse where I keep a timeline of all my (unhinged) thoughts. This is one of the easiest, and probably fastest, ways to contact me. With regards to Discord and Signal, please only message me there if we've interacted before. My E-Mail is always open no matter what!</p>
+			</div>
+		</div>
+
+		<div class="box content invert">
+			<div class="item center">
+				<img src="/assets/img/there.png" class="img circle">
+			</div>
+			<div class="item links">
+				<h1>Find them here!</h1>
+				<p>
+					<a href="https://social.pixelated.sh/@FreedTapestry21" target="_blank">Fediverse: @FreedTapestry21@social.pixelated.sh</a> <br>
+					<a href="https://matrix.to/#/@freedtapestry21:matrix.org" target="_blank">Matrix: @freedtapestry21:matrix.org</a> <br>
+					<a href="https://signal.me/#eu/EHvY-TKXzxxz7m-4Ra9Cqvm7vt3j4tNA1Twrp1ZmyotJ-9GZ7LlFtI8uGdrGzVqz" target="_blank">Signal: @FreedTapestry.21</a> <br>
+					<a href="https://discord.com/users/570485025611579392" target="_blank">Discord: @freedtapestry21</a> <br>
+					<a href="https://ko-fi.com/freedtapestry21" target="_blank">Ko-fi: freedtapestry21</a> <br>
+					<a href="mailto:freedtapestry21@pixelated.sh" target="_blank">E-Mail: freedtapestry21@pixelated.sh</a>
+				</p>
+			</div>
+		</div>
+
+		<div class="box footer">
+			<div class="info">
+				<p><a href="/info">Freed's place</a></p>
+			</div>
+			<div class="copyright">
+				<p>Copyright (c) 2022-2025 FreedTapestry21</p>
+			</div>
+		</div>
+	</body>
+</html>
--- a/html/index.html
+++ b/html/index.html
@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en-US">
+	<head>
+		<title>Home | Freed's place</title>
+		<link rel="stylesheet" href="/assets/style.css">
+		<link rel="stylesheet" href="/assets/mobile.css">
+        <link rel="icon" type="image/x-icon" href="/assets/img/logo.png">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="format-detection" content="telephone=no">
+		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+		<meta http-equiv="Pragma" content="no-cache" />
+		<meta http-equiv="Expires" content="0" />
+	</head>
+	<body>
+		<div class="box menu">
+			<div class="name"><p>Freed's place</p></div>
+			<div class="index">
+				<p>
+					<a href="/">Home</a> | 
+					<a href="/about">About</a> | 
+					<a href="/contact">Contact</a>
+				</p>
+			</div>
+		</div>
+
+		<div class="box content">
+			<div class="item center">
+				<img src="/assets/img/welcome.png" class="img circle">
+			</div>
+			<div class="item">
+				<h1>(&#x2500;&#x203F;&#x203F;&#x2500;) /</h1>
+				<p>Hii there! My name's Bo, but I'm also known as Freed! Welcome to my little place of the internet, have some rest while you explore around! On here you'll encounter some art of my OCs along with some info about me. You'll also find some contact options on here to get in touch with me on other places of the internet. </p>
+			</div>
+		</div>
+
+		<div class="box content invert">
+			<div class="item center">
+				<img src="/assets/img/lookthere.png" class="img">
+			</div>
+			<div class="item">
+				<h1>Pixelated . &#x741;&#x208A; &#x22B9;</h1>
+				<p>Pixelated is a project which I've been working on for quite some time now. It's a collection of different open-source services, with the purpose of providing open-source alternatives to services from big tech corporations. It's only possible for mutuals to sign up for these services since there's limited capacity. To visit Pixelated, <a href="https://pixelated.sh" target="_blank">click here</a>!</p>
+			</div>
+		</div>
+
+		<div class="box footer">
+			<div class="info">
+				<p><a href="/info">Freed's place</a></p>
+			</div>
+			<div class="copyright">
+				<p>Copyright (c) 2022-2025 FreedTapestry21</p>
+			</div>
+		</div>
+	</body>
+</html>
--- a/html/info/index.html
+++ b/html/info/index.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en-US">
+	<head>
+		<title>Info | Freed's place</title>
+		<link rel="stylesheet" href="/assets/style.css">
+		<link rel="stylesheet" href="/assets/mobile.css">
+        <link rel="icon" type="image/x-icon" href="/assets/img/logo.png">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="format-detection" content="telephone=no">
+		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+		<meta http-equiv="Pragma" content="no-cache" />
+		<meta http-equiv="Expires" content="0" />
+	</head>
+	<body>
+		<div class="box menu">
+			<div class="name"><p>Freed's place</p></div>
+			<div class="index">
+				<p>
+					<a href="/">Home</a> | 
+					<a href="/about">About</a> | 
+					<a href="/contact">Contact</a>
+				</p>
+			</div>
+		</div>
+
+		<div class="box content">
+			<div class="item">
+				<h1>Freed.place</h1>
+				<p>Version 3.1<br>Made with <3 by FreedTapestry21<br>This project is licensed under the CC-BY-4.0 license, including all assets signed by Bo.<br>All assets signed by other artists fall under their respective copyright licenses.<br><br><a href="https://git.pixelated.sh/FreedTapestry21/freed.place" target="_blank">Check out the source code here!</a></p>
+			</div>
+		</div>
+
+		<div class="box footer">
+			<div class="info">
+				<p><a href="/info">Freed's place</a></p>
+			</div>
+			<div class="copyright">
+				<p>Copyright (c) 2022-2025 FreedTapestry21</p>
+			</div>
+		</div>
+	</body>
+</html>
Author	SHA1	Message	Date
FreedTapestry21	da721d1c64	Updated content and replaced assets	2025-09-04 11:14:11 +02:00
FreedTapestry21	65a86aabc6	Updated content and increased version number	2025-09-04 11:14:11 +02:00
FreedTapestry21	1e17ace63a	Added lang attribute to html tag	2025-09-04 11:14:11 +02:00
FreedTapestry21	2ee811d031	Updated content	2025-09-04 11:14:11 +02:00
FreedTapestry21	b9d4456368	Fixed spelling mistake	2025-09-04 11:14:11 +02:00
FreedTapestry21	2ba2d3cde7	Changed links	2025-09-04 11:14:10 +02:00
FreedTapestry21	88620b7cff	Changed pictures	2025-09-04 11:14:10 +02:00
FreedTapestry21	463ab6c3b5	Changed content and added info page	2025-09-04 11:14:10 +02:00
FreedTapestry21	556a526f7b	Changed content	2025-09-04 11:14:10 +02:00
FreedTapestry21	622d33970c	Changed content and added contact entry	2025-09-04 11:14:10 +02:00
FreedTapestry21	0e3f43fcef	Changed content and added placeholder images	2025-09-04 11:14:10 +02:00
FreedTapestry21	d10812bc94	Changed README.md	2025-09-04 11:14:09 +02:00
FreedTapestry21	eaf56ebd8a	Changed README.md	2025-09-04 11:14:09 +02:00
FreedTapestry21	eb868b1849	Changed README.md and fixed spelling mistakes	2025-09-04 11:14:09 +02:00
FreedTapestry21	a4fe9138b3	Changed content on homepage and about	2025-09-04 11:14:09 +02:00
FreedTapestry21	7be9d53a8a	Updated homepage and stylesheets	2025-09-04 11:14:09 +02:00
FreedTapestry21	32ebb7b60f	Updated Readme.md	2025-09-04 11:14:08 +02:00
FreedTapestry21	69eff25b6b	Configured and redid the base website structure	2025-09-04 11:14:08 +02:00
FreedTapestry21	90e07acdf8	Update README.md Added README.md from lost v3.0-dev repository	2025-09-04 11:13:59 +02:00