Compare commits
17 commits
dc59a432b0
...
d9bd559ac9
| Author | SHA1 | Date | |
|---|---|---|---|
d9bd559ac9
|
|||
|
54a113acbe
|
|||
|
8b70a2178d
|
|||
|
bb86cc3116
|
|||
|
b723592408
|
|||
|
66cdc96a79
|
|||
|
26b547f3c4
|
|||
|
4de224d6e5
|
|||
|
c0fa3a863f
|
|||
|
bfbbe040fa
|
|||
|
810fb8d46c
|
|||
|
370e3afcee
|
|||
|
3c2e03cf90
|
|||
|
c49ae36038
|
|||
|
96dc4c04cf
|
|||
|
d0455a7112
|
|||
|
461c1ebac3
|
17 changed files with 464 additions and 2 deletions
29
README.md
29
README.md
|
|
@ -1,3 +1,28 @@
|
|||
# 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.
|
||||
Additionally, the IBM BIOS font, created by [VileR](https://int10h.org/), is licenced under the **CC BY-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`.
|
||||
|
|
|
|||
9
docker-compose.yml
Normal file
9
docker-compose.yml
Normal file
|
|
@ -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"
|
||||
55
html/about/index.html
Normal file
55
html/about/index.html
Normal file
|
|
@ -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. When looking at Bo, you'll quickly notice that her gender is pretty vague, her sexuality definitely not straight and her personality all over the place. This has a couple of reasons; they label their gender as "genderless" and they go by she/they pronouns, they're pansexual and their personality is, in general, sweet yet a bit menacing. 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/journey.png" class="img circle">
|
||||
</div>
|
||||
<div class="item">
|
||||
<h1>The fops' journey</h1>
|
||||
<p>Back in the old days, Bo already learned a lot about 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 software development. Besides the obvious, they're also in the furry fandom and have some OCs of their own! You've probably already met some of the floofs—Stella and Frozy—who are pictured on the homepage.</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>
|
||||
BIN
html/assets/fonts/ibm_vga8.woff2
Normal file
BIN
html/assets/fonts/ibm_vga8.woff2
Normal file
Binary file not shown.
BIN
html/assets/fonts/jbmono.woff2
Normal file
BIN
html/assets/fonts/jbmono.woff2
Normal file
Binary file not shown.
BIN
html/assets/img/about.png
Normal file
BIN
html/assets/img/about.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
html/assets/img/journey.png
Normal file
BIN
html/assets/img/journey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
html/assets/img/logo.png
Normal file
BIN
html/assets/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
html/assets/img/lookthere.png
Normal file
BIN
html/assets/img/lookthere.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
BIN
html/assets/img/phone.png
Normal file
BIN
html/assets/img/phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
html/assets/img/welcome.png
Normal file
BIN
html/assets/img/welcome.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
BIN
html/assets/img/yapping.png
Normal file
BIN
html/assets/img/yapping.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
76
html/assets/mobile.css
Normal file
76
html/assets/mobile.css
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
/*
|
||||
* Freed.place
|
||||
* Version 3.0
|
||||
* Copyright (c) 2025 FreedTapestry21
|
||||
*/
|
||||
|
||||
/* Responsive layout for mobile */
|
||||
@media (max-width: 800px) {
|
||||
/* 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 {
|
||||
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 {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;}
|
||||
}
|
||||
138
html/assets/style.css
Normal file
138
html/assets/style.css
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
/*
|
||||
* 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: 18px;}
|
||||
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: 20px;}
|
||||
|
||||
.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:12px;}
|
||||
|
||||
.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 {
|
||||
font-family: VGA;
|
||||
padding: 10px;
|
||||
width: 50%;
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.content {margin: auto; min-height: 400px;}
|
||||
|
||||
.invert {flex-direction: row-reverse;}
|
||||
|
||||
.links {white-space: nowrap; overflow: scroll;}
|
||||
62
html/contact/index.html
Normal file
62
html/contact/index.html
Normal file
|
|
@ -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!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box content invert">
|
||||
<div class="item center">
|
||||
<img src="/assets/img/phone.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://discord.com/users/570485025611579392" target="_blank">Discord: @freedtapestry21</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://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>
|
||||
55
html/index.html
Normal file
55
html/index.html
Normal file
|
|
@ -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>(─‿‿─) /</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! The internet nowadays is such a chaos, you know with every website fighting for your attention. Instead, enjoy this simple, half-blank webpage with some illustrations here and there! This place is here for you to get to know more about me and to find other places on the internet where you can interact with me!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box content invert">
|
||||
<div class="item center">
|
||||
<img src="/assets/img/lookthere.png" class="img circle">
|
||||
</div>
|
||||
<div class="item">
|
||||
<h1>Pixelated . ݁₊ ⊹</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 at the moment 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>
|
||||
42
html/info/index.html
Normal file
42
html/info/index.html
Normal file
|
|
@ -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.0<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><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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue