sara updated sara's sites
This commit is contained in:
parent
7e54cdded7
commit
f4cfe4a51b
79 changed files with 2402 additions and 174 deletions
8
services/cerca.nix
Normal file
8
services/cerca.nix
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
# Reqeusts SSL and adds the site to nginx
|
||||
services.nginx.virtualHosts."forum.hermitcollective.net" = {
|
||||
forceSSL = true;
|
||||
enableACME = true;
|
||||
root = "/var/www/forum.hermitcollective.net";
|
||||
};
|
||||
}
|
||||
|
|
@ -5,6 +5,6 @@
|
|||
./blog.hermitcollective.net
|
||||
./hertog.hermitcollective.net
|
||||
./objectionable.solutions
|
||||
./saragerretsen.nl
|
||||
./sara.objectionable.solutions
|
||||
];
|
||||
}
|
||||
|
|
|
|||
BIN
sites/objectionable.solutions/88x31.bmp
Normal file
BIN
sites/objectionable.solutions/88x31.bmp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
sites/objectionable.solutions/88x31.png
Normal file
BIN
sites/objectionable.solutions/88x31.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 532 B |
BIN
sites/objectionable.solutions/88x31_forge.bmp
Normal file
BIN
sites/objectionable.solutions/88x31_forge.bmp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
sites/objectionable.solutions/88x31_wave.bmp
Normal file
BIN
sites/objectionable.solutions/88x31_wave.bmp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
sites/objectionable.solutions/88x31_webdirectories.bmp
Normal file
BIN
sites/objectionable.solutions/88x31_webdirectories.bmp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
BIN
sites/objectionable.solutions/albumcovers/buggin-buggin-out.jpg
Normal file
BIN
sites/objectionable.solutions/albumcovers/buggin-buggin-out.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5 MiB |
BIN
sites/objectionable.solutions/background.png
Normal file
BIN
sites/objectionable.solutions/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8 KiB |
181
sites/objectionable.solutions/favicon.svg
Normal file
181
sites/objectionable.solutions/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 719 KiB |
|
|
@ -2,81 +2,142 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Solutions no one asked for</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<style>
|
||||
</style>
|
||||
<link rel="icon" href="favicon.svg" type="image/svg+xml">
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Sara's Objectionable Solutions</h1>
|
||||
</header>
|
||||
<main>
|
||||
<section id="about">
|
||||
<p>
|
||||
I'm a femby dutch game development student trying out all kinds of different computer related things (like websites :P). This particular site is just a personal page to throw ideas and thingamabobs onto.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2><a href="https://objectionable.solutions/#about">Myself</a></h2>
|
||||
<ul>
|
||||
<li>Nouns: Sara / Saar / She / They / Enby / Woman / Girl (no preference)</li>
|
||||
<li>Honorifics: Hx / Mg / None (no preference)</li>
|
||||
<li>Age: Born in 2004 (so over 18)</li>
|
||||
<li>Gender: Some kind of fem-aligned enby</li>
|
||||
<li>Languages: Dutch (native) and English (proficient)</li>
|
||||
<li>Orientation: <a target="_blank" href="https://www.tumblr.com/european-cryptics-journal">Them</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="friends">
|
||||
<h2><a href="https://objectionable.solutions/#friends">My Friends around the web</a></h2>
|
||||
<ul>
|
||||
<li><a target="_blank" href="https://hertog.hermitcollective.net">Hertog!</a> who hosts a bunch of the cloud-replacement services I now depend on and is a very good gamedev and good friend of mine :3</li>
|
||||
<li><a target="_blank" href="https://jo.wtf">Jo!</a> who is incredibly gender and fun to listen to (and infodump at). And helps run tech.lgbt where my fedi presence resides :3</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="links">
|
||||
<h2><a href="https://objectionable.solutions/#links">Links</a></h2>
|
||||
<h3>Social</h3>
|
||||
<ul>
|
||||
<li><a rel="me" target="_blank" href="https://app.wafrn.net/blog/Sara_Objectionable">Fedi</a> Where I post, comment and interact. If you want to talk for any reason, this is probably where to find me.</li>
|
||||
<li><a target="_blank" href="https://www.tumblr.com/blog/objectionable-sara">Tumblr</a> I'm mainly here for the content, may not check for weeks on end. And no posts of my own end up here.</li>
|
||||
</ul>
|
||||
<h3>Elsewhere</h3>
|
||||
<ul>
|
||||
<li><a target="_blank" href="https://blog.winter-software.com/profile/0e41208a-716e-4f10-ae65-8096a10837eb">Blog!</a> On Wave, hosted and developed by Mia Winter.</li>
|
||||
<li><a target="_blank" href="https://sg-dev.itch.io/">itch.io!</a> Since i am game developer. Most of the stuff on here rn is student projects.</li>
|
||||
<li><a target="_blank" href="https://git.saragerretsen.nl/Sara">Git</a> On my own instance cause I'm a Nerd (if you couldn't tell).</li>
|
||||
<li><a target="_blank" href="https://github.com/SG101">Github </a> If you want to be a boring corporate bootlicker (\j use whatever you need to use).</li>
|
||||
<li><a target="_blank" href="https://sara.objectionable.solutions">""Professional"" website</a> With stuff I've made/worked on, but explained boringly.</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="tools">
|
||||
<h2><a href="https://objectionable.solutions/#tools">Cool stuff I use</a></h2>
|
||||
<ul>
|
||||
<li><a target="_blank" href="https://distrowatch.com/dwres.php?resource=major">Linux desktop!</a> (right now Fedora)</li>
|
||||
<li><a target="_blank" href="https://swaywm.org/">SwayWM</a> After using i3 for a year and wanting to switch to Wayland.</li>
|
||||
<li><a target="_blank" href="https://godotengine.org/">The Godot Engine</a> For any game projects where I get to have a say in the engine.</li>
|
||||
<li><a target="_blank" href="https://neovim.io/">NeoVim</a> "Long" ago someone recommended I use vim to edit things on the command line and I did not question it enough. Now I'm addicted and unable to go back.</li>
|
||||
<li><a target="_blank" href="https://frame.work/">Framework</a> laptop Specifically an 11th-gen intel framework 13 which I absolutely love despite some issues.</li>
|
||||
<li><a target="_blank" href="https://nextcloud.com/">NextCloud</a> as Hosted by Hertog. Mainly as a file storage/sharing/transfer server.</li>
|
||||
<li><a target="_blank" href="https://tt-rss.org/">TTRSS</a> Again as hosted by Hertog. RSS is alive and well if you know where to look. Which is awesome.</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="resources">
|
||||
<h2><a href="https://objectionable.solutions/#resources">Resources I think are useful</a></h2>
|
||||
<p>
|
||||
Mainly collected here for my own future reference. But perhaps others will find these useful as well.
|
||||
</p>
|
||||
<ul>
|
||||
<li><a target="_blank" href="https://www.gamedeveloper.com/design/action-adventure-level-design-part-1">https://www.gamedeveloper.com/design/action-adventure-level-design-part-1</a></li>
|
||||
<li><a target="_blank" href="https://www.gamedeveloper.com/design">https://www.gamedeveloper.com/design</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="cat">
|
||||
<h2><a href="https://objectionable.solutions/#cat">Look At My Stupid Cat</a></h2>
|
||||
<img src="cat.jpeg" alt="An orange-and-white cat lying on her back in the sun on a windowsill.">
|
||||
<p>She is adorable :3</p>
|
||||
</section>
|
||||
|
||||
<article id="about">
|
||||
<h2><a href="#about">About Me</a></h2>
|
||||
<section>
|
||||
<img src="favicon.svg" class="image-right" style="height:8em" alt="A vector drawing of a blonde white woman wearing a purple tank top and a witch hat. On top of the hat a jackdaw is perched">
|
||||
<p style="min-height: 6.5em">
|
||||
I am a Dutch Game Development student and programmer. This particular site is just a personal page to throw ideas and thingamabobs onto. When it comes to programming I love working on graphical applications. Preferably some kind of GUI or simulation or game. <a href="the-big-list.html#tools">I prefer using libre and open source software where I can</a>.
|
||||
</p>
|
||||
</section>
|
||||
<section><ul>
|
||||
<li>Nouns: Sara / Saar / She / They / Woman / Girl (no preference)
|
||||
<li>Honorifics: Hx / Mg / Ms (no preference)
|
||||
<li>Birthdate: 2004
|
||||
<li>Gender: Some kind of woman or other
|
||||
<li>Languages: Dutch (native) and English (fluent)
|
||||
<li>Romance: <a target="_blank" href="https://app.wafrn.net/blog/Eclypia">Them</a>; Not open
|
||||
</ul></section>
|
||||
</article>
|
||||
|
||||
<article id="friends">
|
||||
<h2><a href="#friends">My Friends around the web</a></h2>
|
||||
<section>
|
||||
<h3><a href="https://hertog.hermitcollective.net">Hertog!</a></h3>
|
||||
<p>Who hosts a bunch of the cloud-replacement services I now depend on (as well as this website). He's a very good gamedev and friend of mine :3
|
||||
</section>
|
||||
<section>
|
||||
<h3><a href="https://jo.wtf">Jo!</a></h3>
|
||||
<p>Who extremely cool, fun to listen to, and yap at. They help run tech.lgbt, where my first real fedi presence was. And the hermitcollective servers, where this website is.
|
||||
</section>
|
||||
<section>
|
||||
<h3><a href="https://miawinter.de/">Mia Rose Winter!</a></h3>
|
||||
<p>Who develops and hosts the awesome Wave blog I contribute to. As well as being fun to chat with on fedi.
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article id="buttons">
|
||||
<h2><a href="#buttons">Buttons</a></h2>
|
||||
<section id="my-buttons">
|
||||
<h3><a href="#my-buttons">My Buttons</a></h3>
|
||||
<a href="the-big-list.html#buttons">
|
||||
<img src="88x31.bmp" class="button" title="Objectionable Solutions" alt="88 by 31 pixel button of A witchy scene of a shooting star over a lake. Cursive text reads 'objectionable solutions' above the star"/>
|
||||
</a>
|
||||
<a href="the-big-list.html">
|
||||
<img src="88x31_webdirectories.bmp" class="button" title="Link the World/Make a Web Directory" alt="88x31 pixel button saying 'make a web directory/link the world'"/>
|
||||
</a>
|
||||
<a href="https://git.objectionable.solutions/explore/repos">
|
||||
<img src="88x31_forge.bmp" class="button" title="My forgejo instance (git.objectionable.solutions)" alt="88x31 button that has stylised text saying 'Forge'. With the forgejo logo for the 'f', and a small illustration of a hammer hitting an empty html tag on an anvil"/>
|
||||
</a>
|
||||
<a href="https://blog.winter-software.com/profile/0e41208a-716e-4f10-ae65-8096a10837eb"><img src="88x31_wave.bmp" class="button" title="Wave Blog" alt="colourful 88x31 button of an abstract wave approaching a beach. The text 'Wave' is written over the beach part"/>
|
||||
</section>
|
||||
<section id="friends-buttons">
|
||||
<h3><a href="#friends-buttons">Friends' Buttons :3</a></h3>
|
||||
<a href="https://miawinter.de">
|
||||
<img src="https://winter-software.com/88x31.png" class="button"/>
|
||||
</a>
|
||||
<a href="https://ielenia.lgbt">
|
||||
<img src="https://ielenia.lgbt/88x31.png" class="button"/>
|
||||
</a>
|
||||
<a href="https://xaselgio.net">
|
||||
<img src="https://xaselgio.net/88x31_xaselgio_v2.gif" class="button"/>
|
||||
</a>
|
||||
<a href="https://query.44203.online">
|
||||
<img src="https://query.44203.online/88x31/query.44203.online.png" class="button"/>
|
||||
</a>
|
||||
<a href="https://labyrinth.zone/yassie_j">
|
||||
<img src="https://media.labyrinth.zone/media/658675c9c294432684f1e0ff0329d19ec8319298eb1029a8263bdbe7c882f57d.png" class="button"/>
|
||||
</a>
|
||||
</section>
|
||||
<section id="other-buttons">
|
||||
<h3><a href="#other-buttons">Other Buttons</a></h3>
|
||||
<a href="https://www.rejectconvenience.com/">
|
||||
<img src="https://www.rejectconvenience.com/images/88x31/88x31.jpg" class="button" title="Reject convenience and be kind and patient" alt="Reject Convenience" />
|
||||
</a>
|
||||
<a href="https://i-eat.rocks">
|
||||
<img src="https://i-eat.rocks/images/ui/ieatrocks.png" class="button" alt="88x31 button saying 'I-Eat.Rocks, click here'"/>
|
||||
</a>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article id="links">
|
||||
<h2><a href="#links">Links</a></h2>
|
||||
<p>Where to find me around the web
|
||||
<section>
|
||||
<h3><a href="https://blog.winter-software.com/profile/0e41208a-716e-4f10-ae65-8096a10837eb">Blog</a></h3>
|
||||
<p>On Wave, hosted and developed by Mia Rose Winter. I mostly blog about game programming and my opinions on the state of the social internet.
|
||||
</section>
|
||||
<section>
|
||||
<h3><a rel="me" href="https://app.wafrn.net/blog/Sara_Objectionable">Wafrn</a></h3>
|
||||
<p>Where I post, comment and interact. If you want to talk for any reason, this is probably where to find me.
|
||||
</section>
|
||||
<section>
|
||||
<h3><a href="https://sg-dev.itch.io/">itch.io</a></h3>
|
||||
<p>Since i am game developer. Most of the stuff on here at the moment is student projects.
|
||||
</section>
|
||||
<section>
|
||||
<h3><a href="https://git.objectionable.solutions/Sara">Forgejo</a></h3>
|
||||
<p>On my own instance cause I'm a Nerd. Gracefully hosted on Hertog's cool-ass hermitcollective servers.
|
||||
</section>
|
||||
<section>
|
||||
<h3><a href="https://github.com/SG101">Github</a></h3>
|
||||
<p>If you want to be a boring corporate bootlicker (\j use whatever you need to use).
|
||||
</section>
|
||||
<section>
|
||||
<h3><a href="https://sara.objectionable.solutions">Portfolio Website</a></h3>
|
||||
<p>With stuff I've made/worked on, mostly duplicates of what you can find on my itch.io profile.
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article id="link-directory">
|
||||
<h2><a href="the-big-list.html">My Link Directory</a></h2>
|
||||
<p>I keep a <a href="the-big-list.html">link directory</a> of all kinds of things i recommend. And I encourage you to make one as well! It's fun and helpful to others.
|
||||
<p>The idea is that in the current age of the internet, one where search engines barely work and are filled with adverts and LLM-generated bullshit. By sharing what we like and trust, we can help others find new sources they like and trust more easily.
|
||||
</article>
|
||||
|
||||
<article id="cat">
|
||||
<h2><a href="#cat">Look At My Stupid Cat</a></h2>
|
||||
<section>
|
||||
<img src="cat.jpeg" alt="An orange-and-white cat lying on her back in the sun on a windowsill.">
|
||||
<p>She is adorable :3
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
<p><a href="https://app.wafrn.net/blog/sara_objectionable/ask">You can contact me about this site, page, or anything else, by sending an 'ask' on wafrn, no login required.</a>
|
||||
<p><a href="index.html">back to top</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
1
sites/objectionable.solutions/keys/ed25519.pub
Normal file
1
sites/objectionable.solutions/keys/ed25519.pub
Normal file
|
|
@ -0,0 +1 @@
|
|||
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIM/JHeApa+D6rz1t5amujoyI/SDd2U+QR2BLkSGxUPr0 sara@soupspace-fedora
|
||||
|
|
@ -1,32 +1,129 @@
|
|||
:root {
|
||||
--color-background: #35244E;
|
||||
--color-panels: #6C4A9D;
|
||||
--color-br-border: #B5A4CE;
|
||||
--color-tl-border: #75648E;
|
||||
--color-links: #FFB273;
|
||||
--color-text: white;
|
||||
--border-width: 2px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: system-ui;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: 1042px;
|
||||
background-color: var(--color-background);
|
||||
background-image: url('background.png');
|
||||
background-size: 100%;
|
||||
color: var(--color-text);
|
||||
font-family: system-ui;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
width: 1042px;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #844dff;
|
||||
color: var(--color-links);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: color-mix(in hsl, var(--color-links), white 50%);
|
||||
border: solid var(--color-tl-border) 1px;
|
||||
}
|
||||
|
||||
section, details, article {
|
||||
border: solid black var(--border-width);
|
||||
border-color: var(--color-tl-border) var(--color-br-border)
|
||||
var(--color-br-border) var(--color-tl-border);
|
||||
background-color: color-mix(in srgb, var(--color-panels), transparent 34%);
|
||||
padding: 0.5em;
|
||||
margin: 10px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
details {
|
||||
padding: 0 0 0;
|
||||
}
|
||||
|
||||
details * {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
details[open] * {
|
||||
border-top: solid var(--color-tl-border) var(--border-width);
|
||||
}
|
||||
|
||||
details summary {
|
||||
color: var(--color-links);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
details[open] summary {
|
||||
background-color: var(--color-background);
|
||||
padding: 0.5em;
|
||||
border-top: none;
|
||||
border-bottom: solid var(--color-br-border) var(--border-width);
|
||||
}
|
||||
|
||||
code {
|
||||
display: block;
|
||||
size: 100%;
|
||||
overflow-y: clip;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-bottom: 200px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
h1::before {
|
||||
content: "# "
|
||||
content: "# ";
|
||||
}
|
||||
|
||||
h2::before {
|
||||
content: "## "
|
||||
content: "## ";
|
||||
}
|
||||
|
||||
h3::before {
|
||||
content: "### "
|
||||
content: "### ";
|
||||
}
|
||||
|
||||
h4::before {
|
||||
content: "#### "
|
||||
content: "#### ";
|
||||
}
|
||||
|
||||
p.feed-url {
|
||||
overflow-y: auto;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 300px;
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
border: solid black var(--border-width);
|
||||
border-color: var(--color-tl-border) var(--color-br-border)
|
||||
var(--color-br-border) var(--color-tl-border);
|
||||
}
|
||||
|
||||
img.image-left {
|
||||
float: left;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
width: min-content;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
img.image-right {
|
||||
float: right;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
width: min-content;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
img.button {
|
||||
border: 0;
|
||||
width: 110px;
|
||||
image-rendering: pixelated;
|
||||
image-rendering: smooth;
|
||||
}
|
||||
|
|
|
|||
305
sites/objectionable.solutions/the-big-list.html
Normal file
305
sites/objectionable.solutions/the-big-list.html
Normal file
|
|
@ -0,0 +1,305 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>The Big List</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<link rel="icon" href="favicon.svg" type="image/svg+xml">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="index.html" id="top">back to index</a>
|
||||
<h1>The Big List of Recommendations</h1>
|
||||
<p>Sites, products, tools, blogs, you name it, I have opinions on it. Here's some of the stuff I personally like.
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article id="newsletters">
|
||||
<h2>Newsletters</h2>
|
||||
<p>I follow more RSS feeds than I care to count, but here's some of the active ones that I like or that have helped me in various ways.
|
||||
<section id="no-escape">
|
||||
<h3><a target="_blank" href="https://noescapevg.com/">No Escape</a></h3>
|
||||
<p>A gaming and music reviewer and essayist who takes an appealing socio-political perspective on games. The games played are not in the slightest limited by what is currently coming out or considered "big", allowing for a fresh variety of interesting writing.
|
||||
<p class="feed-url"><i>https://noescapevg.com/feed/</i>
|
||||
</section>
|
||||
<section id="gamers-nexus">
|
||||
<h3><a target="_blank" href="https://gamersnexus.net/">Gamers' Nexus</a></h3>
|
||||
<p>Mainly a video publication on google's YouTube. But they also make all of their videos into free to access, no-advert blog posts on their website. Including their major investigative journalism pieces. As the name suggests, they focus on game-related hardware, but if you're in any kind of computer technology space, they're a great source to keep in your feed.
|
||||
<p class="feed-url"><i>http://gamersnexus.net/rss.xml</i>
|
||||
</section>
|
||||
<section id="pluralistic">
|
||||
<h3><a target="_blank" href="https://pluralistic.net">Pluralistic</a></h3>
|
||||
<p>At this point, Cory Doctorow is a well known figure in tech politics and adjacent spaces. But for those unaware, Cory Doctorow is a fiction and non-fiction writer, analyst, and commentator with a particular skill for translating complicated situations and structures down to catchy phrases and words. If you've ever hear "Enshitification" or more recently, "Reverse centaur" (or even "Chickenised reverse centaur") the pluralistic blog is where that terminology was coined and developed. The writing is accessible, and at times very funny, so to keep up with the times, this blog is a good add to any tech-focused feed.
|
||||
<p class="feed-url"><i>https://pluralistic.net/feed/</i>
|
||||
</section>
|
||||
<section id="dread-ships">
|
||||
<h3><a target="_blank" href="https://dreadships.com">Dread Ships</a></h3>
|
||||
<p>I know basically nothing about boats and ships beyond the very basic sailing camp I spent a week at as a kid. However Dread Ships manages to make nautical history both understandable and extremely funny. If you like stories of disaster like those shown on "Well There's Your Problem", it's absolutely worth reading through the backlog and adding to your feed.
|
||||
<p class="feed-url"><i>https://dreadships.com/feed/</i>
|
||||
</section>
|
||||
<section id="not-gdc">
|
||||
<h3><a target="_blank" href="https://notgdc.io/">Not GDC</a></h3>
|
||||
<p>Any game developer that doesn't have the money to go to GDC (or even those that do) should consider adding NotGDC to your feed. It's talks on game development freely shared. No high entry fees, and no limited access to the useful information.
|
||||
<p class="feed-url"><i>https://notgdc.io/feed.xml</i>
|
||||
</section>
|
||||
<section id="veronica-explains">
|
||||
<h3><a target="_blank" href="https://vkc.sh/">Veronica Explains</a></h3>
|
||||
<p>Fun <i>and</i> informative. For anyone who would like to better understand linux and the various tools that surround it. In particular she's great at demistifying all of the "low-level" linuxy stuff you may encounter but not understand.
|
||||
<p class="feed-url"><i>https://vkc.sh/feed/</i> and <i>https://tinkerbetter.tube/feeds/videos.xml?videoChannelId=2</i>
|
||||
</section>
|
||||
<section id="cj-the-x">
|
||||
<h3><a target="_blank" href="https://cjthex.com/">CJ the X</a></h3>
|
||||
<p>A blog of essays with interesting insights on media and art in the age of the internet.
|
||||
<p class="feed-url"><i>https://cjthex.com/feed/</i>
|
||||
</section>
|
||||
<section id="clockwork">
|
||||
<h3><a target="_blank" href="https://clockwork.beehiiv.com/">Clockwork</a></h3>
|
||||
<p>A scientific newsletter with the coolest developments in the life sciences. A good feed to break up the "news" category with. Or an amazing feed for those who have a strong interest in evolutionary science, medicine development, and how natural process work.
|
||||
<p class="feed-url"><i>https://rss.beehiiv.com/feeds/MLiKGv3Pzl.xml</i>
|
||||
</section>
|
||||
<section id="404-media">
|
||||
<h3><a target="_blank" href="https://www.404media.co/">404 Media</a></h3>
|
||||
<p>I think best described as an independent newspaper for the internet age. Reporting on technology, the internet, and the way they interact with the real political landscape (particularly in the US). A lot of their stuff is behind a paywall (I'm not a subscriber personally), but the free reporting is well worth keeping in your feed if my description sounds useful to you.
|
||||
<p class="feed-url"><i>https://www.404media.co/rss/</i>
|
||||
</section>
|
||||
<section id="ludicity">
|
||||
<h3><a target="_blank" href="https://ludic.mataroa.blog/">Ludicity</a></h3>
|
||||
<p>Very funny, and insightful. In particular about the state of internet companies from the perspective of a data scientist.
|
||||
<p class="feed-url"><i>https://ludic.mataroa.blog/rss/</i>
|
||||
</section>
|
||||
<section id="bellingcat">
|
||||
<h3><a target="_blank" href="https://www.bellingcat.com/">Bellingcat</a></h3>
|
||||
<p>OSINT reporting and investigative journalism, targeting powerful organisations like governments and corporations in particular. If you follow any other world news sources, you'll have seen their name pop by at least once. But they off course also have their own website.
|
||||
<p class="feed-url"><i>https://www.bellingcat.com/feed</i>
|
||||
</section>
|
||||
<section id="godot-feed">
|
||||
<h3><a target="_blank" href="https://godotengine.org/blog/">Godot Blog</a></h3>
|
||||
<p>If you use godot regularly, I definitely recommend keeping track of the newsletter. Mainly because it means you discover all kinds of cool new features godot has (for example, that you can press shift-g to snap an object to the surface under your cursor)
|
||||
<p class="feed-url"><i>https://godotengine.org/rss.xml</i> and <i>https://godotengine.org/atom.xml</i>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article id="resources">
|
||||
<h2>Resources</h2>
|
||||
<p>There are so many resources online, and sometimes they can be difficult to find. Here's the ones I have had good use of in the past. Recorded here in part because I know for a fact I'll forget them myself.
|
||||
<section id="game-programming-patterns">
|
||||
<h3><a target="_blank" href="https://gameprogrammingpatterns.com/">Game Programming Patterns</a></h3>
|
||||
<p><i>(gameprogrammingpatterns.com)</i>
|
||||
<p>For any game developer, <i>The</i> place to go once you've learned the basics of your programming language of choice. I recommend you read the index and motivation section of each chapter, then go back when you think that "maybe this might fit a pattern". Basically a must read, which is why it's good it's free to read online.
|
||||
</section>
|
||||
<section id="adventure-level-design">
|
||||
<h3><a target="_blank" href="https://www.gamedeveloper.com/design/action-adventure-level-design-part-1">Action Adventure Level Design</a></h3>
|
||||
<p><i>(gamedeveloper.com)</i>
|
||||
<p>A really good breakdown of how to organize designing action/adventure levels.
|
||||
</section>
|
||||
<section id="practical-design-to-level-design">
|
||||
<h3><a target="_blank" href="https://doi.org/10.1201/9781003275664">A Practical Guide to Level Design</a></h3>
|
||||
<p><i>(ISBN 9781003275664)</i>
|
||||
<p>An amazing book on the processes that go into making levels in teams. The particular notes on how to design from large to medium to specific detail have massively helped me refine my ability to iterate on concepts quickly.
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article id="music">
|
||||
<h2>Music I Really Like</h2>
|
||||
<p>Some of the music I like A Lot. Categorised by artist and album, because that's how I generally listen to music. The albums shown are the specific albums I own, sorted by how much I enjoy the albums (not the artists, that order is basically random).
|
||||
<section id="bad-cop-bad-cop">
|
||||
<h3>Bad Cop/Bad Cop</h3>
|
||||
<p>Probably a decent summary of what I like listening to. Hard, fast, radical punk rock.
|
||||
<p>Favourite track: Safe and Legal
|
||||
<p>
|
||||
<img src="./albumcovers/bad-cop-bad-cop-safe-and-legal.jpg" alt="Bad Cop/Bad Cop - Safe and Legal" title="Bad Cop/Bad Cop - Safe and Legal"/>
|
||||
<img src="./albumcovers/bad-cop-bad-cop-warriors.jpg" alt="Bad Cop/Bad Cop - Warriors" title="Bad Cop/Bad Cop - Warriors"/>
|
||||
</p>
|
||||
</section>
|
||||
<section id="buggin">
|
||||
<h3>Buggin</h3>
|
||||
<p>
|
||||
<p>Favourite track: Buggin Out
|
||||
<p>
|
||||
<img src="./albumcovers/buggin-buggin-out.jpg" alt="Buggin - Buggin Out" title="Buggin - Buggin Out"/>
|
||||
<img src="./albumcovers/buggin-concrete-cowboys.jpg" alt="Buggin - Concrete Cowboys" title="Buggin - Concrete Cowboys"/>
|
||||
</p>
|
||||
</section>
|
||||
<section id="sarah and the safe word">
|
||||
<h3>Sarah and the Safe Word</h3>
|
||||
<p>Original and interesting stories told through rock with a healthy infusion of violin.
|
||||
<p>Favourite track: Lit Cigarette
|
||||
<p>
|
||||
<img src="./albumcovers/sarah-and-the-safe-word-red-hot-and-holy.jpg" alt="Sarah and the Safe Word - Red Hot & Holy" title="Sarah and the Safe Word - Red Hot & Holy"/>
|
||||
<img src="./albumcovers/sarah-and-the-safe-word-the-book-of-broken-glass.jpg" alt="Sarah and the Safe Word - The Book of Broken Glass" title="Sarah and the Safe Word - The Book of Broken Glass"/>
|
||||
<img src="./albumcovers/sarah-and-the-safe-word-good-gracious-bad-people.jpg" alt="Sarah and the Safe Word - Good Gracious! Bad People." title="Sarah and the Safe Word - Good Gracious! Bad People."/>
|
||||
</p>
|
||||
</section>
|
||||
<section id="destroy-boys">
|
||||
<h3>Destroy Boys</h3>
|
||||
<p>Minimal, raw, fast; guitar, drums and vocals.
|
||||
<p>Favourite track: Beg for the torture
|
||||
<p>
|
||||
<img src="./albumcovers/destroy-boys-sorry-mom.jpg" alt="Destroy Boys - Sorry Mom" title="Destroy Boys - Sorry Mom"/>
|
||||
<img src="./albumcovers/destroy-boys-funeral-soundtrack-4.jpg" alt="Destroy Boys - Funeral Soundtrack #4" title="Destroy Boys - Funeral Soundtrack #4"/>
|
||||
</p>
|
||||
</section>
|
||||
<section id="freak-la-femme">
|
||||
<h3>Freak La Femme</h3>
|
||||
<p>Punk rock that's rough around the edges in all the right ways.
|
||||
<p>Favourite track: Freaks Unite
|
||||
<p>
|
||||
<img src="./albumcovers/freak-la-femme-freaks-unite.jpg" title="Freak La Femme - Freaks Unite" alt="Freak La Femme - Freaks Unite"/>
|
||||
<img src="./albumcovers/freak-la-femme-shut-up-and-take-my-honey.jpg" title="Freak La Femme - Shut Up (and take my honey)" alt="Freak La Femme - Shut Up (and take my honey)"/>
|
||||
<img src="./albumcovers/freak-la-femme-violent-tongue.jpg" title="Freak La Femme - Violent Tongue" alt="Freak La Femme - Violent Tongue"/>
|
||||
</p>
|
||||
</section>
|
||||
<section id="dead-sara">
|
||||
<h3>Dead Sara</h3>
|
||||
<p>Distorted hardcore switched out for slower melodies.
|
||||
<p>Favourite track: Unamerican
|
||||
<p>
|
||||
<img src="./albumcovers/dead-sara-temporary-things-taking-up-space.jpg" alt="Dead Sara - Temporary Things Taking Up Space" title="Dead Sara - Temporary Things Taking Up Space"/>
|
||||
<img src="./albumcovers/dead-sara-aint-it-tragic.jpg" alt="Dead Sara - Aint It Tragic" title="Dead Sara - Aint It Tragic"/>
|
||||
</p>
|
||||
</section>
|
||||
<section id="the-interrupters">
|
||||
<h3>The Interrupters</h3>
|
||||
<p>An extremely unique and recognisable style of punk.
|
||||
<p>Favourite track: Jailbird
|
||||
<p><img src="./albumcovers/the-interrupters-in-the-wild.jpg" title="The Interrupters - In The Wild" alt="The Interrupters - In The Wild"/>
|
||||
</section>
|
||||
<section id="pinkshift">
|
||||
<h3>Pinkshift</h3>
|
||||
<p>Harsh and angry hardcore.
|
||||
<p>Favourite track: BURN THE WITCH
|
||||
<p><img src="./albumcovers/pinkshift-love-me-forever.jpg" title="Pinkshift - Love Me Forever" alt="Pinkshift - Love Me Forever"/>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article id="tools">
|
||||
<h2>Tools</h2>
|
||||
<p>
|
||||
The tools I use (or have used and recommend) in my day-to-day life. A lot of these will be Libre and/or Open Source solutions for stuff I'd usually have to pay a major internet corporation for (in one way or another).
|
||||
</p>
|
||||
<section id="ttrss">
|
||||
<h3><a target="_blank" href="https://tt-rss.org/">Tiny Tiny RSS</a></h3>
|
||||
<p>
|
||||
Since I have all those feeds, I also need somewhere to organise them. Particularly, some way I can keep my feeds synced between the different devices I use to access the internet, and would like to read articles on. Thanks to a friend who runs TTRSS for his community, I've got a fast and stable server to store and fetch my feeds from.
|
||||
</p>
|
||||
</section>
|
||||
<section id="sway">
|
||||
<h3><a target="_blank" href="https://swaywm.org/">SwayWM</a></h3>
|
||||
<p>
|
||||
After using i3 for a year and wanting to switch to Wayland. Also how I found Drew DeVault's blog. Sway works, and offers the level of simple customisability I personally desire. Though I freely admit it's not for everyone.
|
||||
</p>
|
||||
</section>
|
||||
<section id="linux-desktop">
|
||||
<h3><a target="_blank" href="https://distrowatch.com/dwres.php?resource=major">Linux desktop</a></h2>
|
||||
<p>
|
||||
Right now Fedora. Having grown up with macbooks and ipads, and forced to use windows for school, my opinions on OS choice tend towards "whatever you can keep working". I recommend Mint or atomic fedora to anyone looking to start from the corporate OSes.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3><a target="_blank" href="https://blog.winter-software.com">Wave</a></h3>
|
||||
<p>Blogging is simultaniously really easy and weirdly hard. It's easy to make a website like this one and throw raw html files at an nginx reverse proxy. The difficult part is allowing multiple users to write on the same website (without giving them all total access to edit eachother's files). It's difficult to add index pages for tags, and writers, and it's hard to then make that all work with an automatically updated RSS feed. Which is why I don't, and instead use Mia Rose Winter's Wave.
|
||||
</section>
|
||||
<section id="nextcloud">
|
||||
<h3><a target="_blank" href="https://nextcloud.com/">Nextcloud</a></h3>
|
||||
<p>I'm not a sysadmin, I'm lucky to have a friend in my life who's willing to go through the trouble of hosting this kinda stuff for his community. But if there's any chance you can get an account on a Nextcloud server, whether through your college, or through a friend, or hosting it yourself, I <i>highly</i> recommend it. It's fast and easy to connect to other services. I've got a specific folder on my laptop that syncs in the background, which means that it's as easy as choosing the right place to put my file and it's backed up and accessible from all my other devices.
|
||||
</section>
|
||||
<section id="feedle">
|
||||
<h3><a target="_blank" href="https://feedle.world/">Feedle</a></h3>
|
||||
<p>There are a <i>Lot</i> of RSS feeds, but sometimes it can be a bit hard to find one for specific subjects you'd like to keep on top of. So feedle.world provides a search engine for RSS feeds. It doesn't have summaries, or tries to push any advertising. It simply directs you to the articles.
|
||||
</section>
|
||||
</article>
|
||||
<article id="comics">
|
||||
<h2>Webcomics</h2>
|
||||
<p>I read a lot of webcomics. I don't particularly care to support the rough duopoly of the space, so I'll just share the ones you can follow on their own website through an RSS feed.
|
||||
<section id="aurora">
|
||||
<h3><a target="_blank" href="https://comicaurora.com/">Aurora</a></h3>
|
||||
<p>Pretty art, inspired worldbuilding, fun characters. A high-fantasy story at the scale of an entire mythology and the charm of a tabletop campaign, in comic form.
|
||||
</section>
|
||||
<section id="clown-corps">
|
||||
<h3><a target="_blank" href="https://clowncorps.net">Clown Corps</a></h3>
|
||||
<p>What if clowns were cops, when they're actually supposed to be firefighters. A story about a woman at her lowest point given a second chance, and a well-intentioned public service being turned into a tool for control (and hopefully how that control is challenged and broken, the full story isn't done yet).
|
||||
</section>
|
||||
</article>
|
||||
<article id="web-directories">
|
||||
<h2><a href="#web-directories">Web Directories</a></h2>
|
||||
<p>Other weblink directories and recommendations pages.
|
||||
<section>
|
||||
<h3><a target="_blank" href="https://url.town">url.town</a></h3>
|
||||
<p>A general everything-directory of webpages for various kinds of things. Organised and categorised so it's fun to browse idly and quick to search through.
|
||||
<a href="https://url.town/"><img src="https://url.town/88x31.png" class="button" title="url.town" alt="URL Town pop. 642" /></a>
|
||||
</section>
|
||||
</article>
|
||||
<article id="buttons">
|
||||
<h2><a href="#buttons">Buttons</a></h2>
|
||||
<section>
|
||||
<p>Here's my personal webpage's button. Feel free to add it to your own personal page if you want to. Just don't imply I condone whatever it's next to.
|
||||
<p><a href="index.html"><img src="88x31.bmp" class="button" style="width:200px" title="Objectionable Solutions" alt="88 by 31 pixel button of A witchy scene of a shooting star over a lake. Cursive text reads 'objectionable solutions' above the star"/></a>
|
||||
<details>
|
||||
<summary>Markup</summary>
|
||||
<code>
|
||||
<a href="https://objectionable.solutions">
|
||||
<img src="88x31.png" title="Objectionable Solutions" alt="88 by 31 pixel button of A witchy scene of a shooting star over a lake. Cursive text reads 'objectionable solutions' above the star"/>
|
||||
</a>
|
||||
</code>
|
||||
</details>
|
||||
</section>
|
||||
<section>
|
||||
<p>I also made the "Link the world" button on top of the index page, if you feel like using that one. It's just an image link on it's own, but you can always link it to your own web directory.
|
||||
<p><img src="88x31_webdirectories.bmp" class="button" style="width:200px" alt="88x31 pixel button saying 'make a web directory/link the world'" title="Link the World/Make a Web Directory">
|
||||
<details>
|
||||
<summary>Markup</summary>
|
||||
<code>
|
||||
<img src="https://objectionable.solutions/88x31_webdirectories.bmp" class="button" alt="88x31 pixel button saying 'make a web directory/link the world'" title="Link the World/Make a Web Directory">
|
||||
</code>
|
||||
</details>
|
||||
</section>
|
||||
<section>
|
||||
<p>And a Forgejo button that, on my homepage, I link to my instance git.objectionable.solutions. It's free to use if you want to, so you can link it to your own instance if you feel like it.
|
||||
<p>
|
||||
<a href="https://forgejo.org">
|
||||
<img src="88x31_forge.bmp" class="button" style="width:200px" alt="88x31 button that has stylised text saying 'forge' and a small illustration of a hammer hitting an empty html tag on an anvil"/>
|
||||
</a>
|
||||
</p>
|
||||
<p style="font-size: 80%">
|
||||
This button adapts the forgejo logo, created by <a href="https://caesarschinas.com/" rel="nofollow">Caesar Schinas</a> and is licensed under the
|
||||
<a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="nofollow">Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license</a>.
|
||||
</p>
|
||||
<details>
|
||||
<summary>Markup</summary>
|
||||
<code>
|
||||
<a href="https://forgejo.org/">
|
||||
<img src="https://objectionable.solutions/88x31_forge.bmp" class="button" alt="88x31 button that has stylised text saying 'forge' and a small illustration of a hammer hitting an empty html tag on an anvil"/>
|
||||
</a>
|
||||
</code>
|
||||
</details>
|
||||
</section>
|
||||
<section>
|
||||
<p>And a winter-software Wave button for the <a href="https://blog.winter-software.com">blog hosted by Mia Rose Winter</a>.
|
||||
<p>
|
||||
<a href="https://blog.winter-software.com">
|
||||
<img src="88x31_wave.bmp" class="button" title="Wave Blog" style="width:200px" alt="colourful 88x31 button of an abstract wave approaching a beach. The text 'Wave' is written over the beach part"/>
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
<section style="font-size: 80%">
|
||||
<p>
|
||||
My buttons are all licensed as
|
||||
<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA (Creative Commons Attribution Share-Alike) 4.0</a>.
|
||||
Source files for the buttons and this website can be found at
|
||||
<a href="https://git.objectionable.solutions/Sara/objectionable.solutions">
|
||||
git.objectionable.solutions<wbr>/Sara/objectionable.solutions
|
||||
</a>.
|
||||
Button files were made with, and can be opened with, LibreSprite.
|
||||
</p>
|
||||
<p><a href="https://creativecommons.org/licenses/by-sa/4.0/"><img src="https://licensebuttons.net/i/l/by-sa/000000/ff/ff/ff/88x31.png" class="button" title="CC-by-SA"/></a>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
<p><a href="https://app.wafrn.net/blog/sara_objectionable/ask">You can contact me about this site, page, or anything else, by sending an 'ask' on wafrn, no login required.</a>
|
||||
<p>Or post at me on wafrn at Sara_Objectionable@app.wafrn.net or bsky @sara-objectionable.at.app.wafrn.net (though do mention the website sent you, cause I may not respond to random messages...).
|
||||
<p><a href="the-big-list.html">back to top</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
BIN
sites/sara.objectionable.solutions/assets/agoraphobia-cover.png
Normal file
BIN
sites/sara.objectionable.solutions/assets/agoraphobia-cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 443 KiB |
BIN
sites/sara.objectionable.solutions/assets/blobcat_gitea.png
Normal file
BIN
sites/sara.objectionable.solutions/assets/blobcat_gitea.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
sites/sara.objectionable.solutions/assets/boids-cover.jpg
Normal file
BIN
sites/sara.objectionable.solutions/assets/boids-cover.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
sites/sara.objectionable.solutions/assets/boids-ecs-cover.jpg
Normal file
BIN
sites/sara.objectionable.solutions/assets/boids-ecs-cover.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
sites/sara.objectionable.solutions/assets/going-cover.png
Normal file
BIN
sites/sara.objectionable.solutions/assets/going-cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
sites/sara.objectionable.solutions/assets/octicon.png
Normal file
BIN
sites/sara.objectionable.solutions/assets/octicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 256 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
BIN
sites/sara.objectionable.solutions/assets/stig-kart-cover.png
Normal file
BIN
sites/sara.objectionable.solutions/assets/stig-kart-cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
BIN
sites/sara.objectionable.solutions/assets/tower-vr-cover.jpg
Normal file
BIN
sites/sara.objectionable.solutions/assets/tower-vr-cover.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 295 KiB |
BIN
sites/sara.objectionable.solutions/assets/you-done-it-back.png
Normal file
BIN
sites/sara.objectionable.solutions/assets/you-done-it-back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 318 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
sites/sara.objectionable.solutions/assets/you-done-it-front.png
Normal file
BIN
sites/sara.objectionable.solutions/assets/you-done-it-front.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
12
sites/sara.objectionable.solutions/default.nix
Normal file
12
sites/sara.objectionable.solutions/default.nix
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
services.nginx.virtualHosts."saragerretsen.nl" = {
|
||||
forceSSL = true;
|
||||
enableACME = true;
|
||||
root = "/etc/nixos/sites/sara.objectionable.solutions";
|
||||
};
|
||||
services.nginx.virtualHosts."sara.objectionable.solutions" = {
|
||||
forceSSL = true;
|
||||
enableACME = true;
|
||||
root = "/etc/nixos/sites/sara.objectionable.solutions";
|
||||
};
|
||||
}
|
||||
BIN
sites/sara.objectionable.solutions/favicon.ico
Normal file
BIN
sites/sara.objectionable.solutions/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
sites/sara.objectionable.solutions/files/Resume.pdf
Normal file
BIN
sites/sara.objectionable.solutions/files/Resume.pdf
Normal file
Binary file not shown.
258
sites/sara.objectionable.solutions/index.html
Normal file
258
sites/sara.objectionable.solutions/index.html
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Sara's Game Development Portfolio</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Game Developer Portfolio">
|
||||
<meta name="keywords" content="Developer, Portfolio, Game Developer, Software Developer, Programmer, C++, C#, Unity, Unreal, Godot">
|
||||
<meta name="author" content="Sara Gerretsen">
|
||||
|
||||
<link rel="stylesheet" href="shared/style.css">
|
||||
<link rel="stylesheet" href="shared/projects.css">
|
||||
<link rel="me" href="https://app.wafrn.net/blog/Sara_Objectionable">
|
||||
|
||||
<style>
|
||||
#intro-sentence {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="shared/jquery.min.js"></script>
|
||||
<div id="site-header">
|
||||
<script>$(function () {$("#site-header").load("shared/header.html");});</script>
|
||||
</div>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section>
|
||||
<h1 id="intro-sentence">Hi! my name is Sara!<br>I'm a game developer who loves solving complex problems, simply.</h1>
|
||||
<h2 id="about-me">About Me</h2>
|
||||
<div class="personal-info-grid" indented>
|
||||
<div>
|
||||
<p>
|
||||
My tool of choice is Godot engine modules, but I'm adept with a variety of libraries, engines, and frameworks.
|
||||
Most of my experience is C++, both using STL and with engines like Unreal and Godot.
|
||||
I get the most enjoyment out of writing player-facing gameplay systems and designer-facing tools and interfaces.
|
||||
Which is to say, I like writing code that people get to interact with directly.
|
||||
</p>
|
||||
<p style="color: #FFF4">you can email me at sara on this domain (objectionable dot solutions or saragerretsen dot nl)</p>
|
||||
</div>
|
||||
<div class="personal-info-photo"></div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h2 id="projects">Projects</h2>
|
||||
<h3>Internship @ Galaxy Grove</h3>
|
||||
<div indented>
|
||||
<div class="project-grid">
|
||||
<a class="internal" href="projects/station-to-station.html">
|
||||
<div class="project-card" station-to-station></div>
|
||||
<div class="project-labels">
|
||||
<p class="play-on-steam">play on steam!</p>
|
||||
<p>unreal engine</p>
|
||||
<p>internship</p>
|
||||
</div>
|
||||
<h2 class="project-title">Station to Station</h2>
|
||||
<p class="project-card-role">C++ Tools Programmer</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Student @ HKU</h3>
|
||||
<div indented>
|
||||
<div class="project-grid">
|
||||
<a class="internal" href="projects/you-done-it.html">
|
||||
<div class="project-card" you-done-it></div>
|
||||
<div class="project-labels">
|
||||
<p>godot</p>
|
||||
<p>c++ module</p>
|
||||
<p>team</p>
|
||||
</div>
|
||||
<h2 class="project-title">You-Dun-It</h2>
|
||||
<p class="project-card-role">C++ Programmer</p>
|
||||
</a>
|
||||
<a class="internal" href="projects/going.html">
|
||||
<div class="project-card" going></div>
|
||||
<div class="project-labels">
|
||||
<p class="play-on-itch">play on itch.io!</p>
|
||||
<p>godot</p>
|
||||
<p>c++ module</p>
|
||||
<p>solo</p>
|
||||
</div>
|
||||
<h2 class="project-title">(Keep) Going</h2>
|
||||
<p class="project-card-role">Solo Developer</p>
|
||||
</a>
|
||||
<a class="internal" href="projects/agoraphobia.html">
|
||||
<div class="project-card" agoraphobia></div>
|
||||
<div class="project-labels">
|
||||
<p class="play-on-itch">play on itch.io!</p>
|
||||
<p>godot</p>
|
||||
<p>c++ extension</p>
|
||||
<p>solo</p>
|
||||
</div>
|
||||
<h2 class="project-title">Agoraphobia</h2>
|
||||
<p class="project-card-role">Solo Developer</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Student @ GLU</h3>
|
||||
<div indented>
|
||||
<div class="project-grid">
|
||||
<a class="internal" href="projects/spirit-of-science.html">
|
||||
<div class="project-card" spirit-of-science></div>
|
||||
<div class="project-labels">
|
||||
<p class="play-on-itch">play on itch.io!</p>
|
||||
<p>unity</p>
|
||||
<p>gamejam</p>
|
||||
<p>team</p>
|
||||
</div>
|
||||
<h2 class="project-title">Spirit Signal</h2>
|
||||
<p class="project-card-role">General C# Programmer</p>
|
||||
</a>
|
||||
<a class="internal" href="projects/stig-kart.html">
|
||||
<div class="project-card" stig-kart></div>
|
||||
<div class="project-labels">
|
||||
<p class="play-on-itch">play on itch.io!</p>
|
||||
<p>unity</p>
|
||||
<p>team</p>
|
||||
</div>
|
||||
<h2 class="project-title">Stig Kart 64</h2>
|
||||
<p class="project-card-role">C# Gameplay and Physics Programmer</p>
|
||||
</a>
|
||||
<a class="internal" href="projects/boids.html">
|
||||
<div class="project-card" boids></div>
|
||||
<div class="project-labels">
|
||||
<p>sdl2</p>
|
||||
<p>solo</p>
|
||||
</div>
|
||||
<h2 class="project-title">Boids</h2>
|
||||
<p class="project-card-role">C Programmer</p>
|
||||
</a>
|
||||
<a class="internal" href="projects/hlo-projectvtd.html">
|
||||
<div class="project-card" tower-vr></div>
|
||||
<div class="project-labels">
|
||||
<p>unreal engine</p>
|
||||
<p>team</p>
|
||||
<p>hlo</p>
|
||||
</div>
|
||||
<h2 class="project-title">Tower VR</h2>
|
||||
<p class="project-card-role">C++ Programmer</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Chief Experimentor @ Home</h3>
|
||||
<div indented>
|
||||
<div class="project-grid">
|
||||
<a class="internal" href="projects/gml-tile-movement.html">
|
||||
<div class="project-card" gml-tile-movement></div>
|
||||
<div class="project-labels">
|
||||
<p>game maker 2</p>
|
||||
<p>solo</p>
|
||||
</div>
|
||||
<h2 class="project-title">Tile Movement System</h2>
|
||||
<p class="project-card-role">GML Programmer</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h2 id="experience">Experience</h2>
|
||||
<div class="experience-grid" indented>
|
||||
<div>
|
||||
<h3>HKU (Utrecht University of the Arts)</h3>
|
||||
<p>Game Development Student</p>
|
||||
<p class="experience-grid-time">September 2023 - August 2027</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Galaxy Grove</h3>
|
||||
<p>C++ Intern</p>
|
||||
<p class="experience-grid-time">January 2023 - July 2023</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Grafisch Lyceum Utrecht</h3>
|
||||
<p>Game Programming Student</p>
|
||||
<p class="experience-grid-time">September 2021 - 2023</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Appalot</h3>
|
||||
<p>Junior API and automation developer</p>
|
||||
<p class="experience-grid-time">September 2021 - 2023</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Appalot(internship)</h3>
|
||||
<p>API and automation intern</p>
|
||||
<p class="experience-grid-time">June 2021 - August 2021</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Hobby Programmer</h3>
|
||||
<p>Chief Experimentor</p>
|
||||
<p class="experience-grid-time">2016 - forever</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="languages">Formal Languages</h2>
|
||||
<div class="experience-grid" indented>
|
||||
<div>
|
||||
<h3>C++ | Advanced</h3>
|
||||
<p>
|
||||
<b>Frameworks:</b>
|
||||
Godot (GDExtension & Engine Modules),
|
||||
Dear ImGui, Unreal Engine, 0MQ
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>C | Advanced</h3>
|
||||
<p>
|
||||
<b>Frameworks:</b>
|
||||
SDL2, Clay
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>C# | Advanced</h3>
|
||||
<p>
|
||||
<b>Frameworks:</b>
|
||||
.NET, Google Cloud Functions, Unity
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Javascript | Intermediate</h3>
|
||||
<p>
|
||||
<b>Frameworks:</b>
|
||||
Node, Express, Google Cloud Functions, Airtable Scripting
|
||||
</p>
|
||||
</div>
|
||||
<s>
|
||||
<div>
|
||||
<h3>/bin/bash | User</h3>
|
||||
<p>
|
||||
<b>Frameworks:</b>
|
||||
<code>rm -rf --no-preserve-root "/*"</code>
|
||||
</p>
|
||||
</div>
|
||||
</s>
|
||||
<s>
|
||||
<div>
|
||||
<h3>Microsoft Visual Basic For Applications(TM) | Intermediate</h3>
|
||||
<p>
|
||||
<b>Frameworks:</b>
|
||||
Excel macros
|
||||
</p>
|
||||
</div>
|
||||
</s>
|
||||
</div>
|
||||
<h2 id="natural languages">Natural Languages</h2>
|
||||
<div class="experience-grid" indented>
|
||||
<div>
|
||||
<h3>Dutch</h3>
|
||||
<p>Native Speaker</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>English</h3>
|
||||
<p>Fluent</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<body>
|
||||
|
||||
</html>
|
||||
39
sites/sara.objectionable.solutions/projects/agoraphobia.html
Normal file
39
sites/sara.objectionable.solutions/projects/agoraphobia.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script type="text/javascript" src="../shared/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="../shared/style.css">
|
||||
|
||||
<div id="site-header">
|
||||
<script>$(function(){$("#site-header").load("../shared/header.html");});</script>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Agoraphobia</h1>
|
||||
<section class="project">
|
||||
<h2>Info</h2>
|
||||
<div indented>
|
||||
<p>Project Type: Godot C++ Solo Game</p>
|
||||
<p>Project Timeframe: Dec 2024 - Jan 2025</p>
|
||||
</div>
|
||||
<iframe frameborder="0" src="https://itch.io/embed/3964851?bg_color=222222&fg_color=eeeeee&border_color=363636" width="552" height="167"><a href="https://sg-dev.itch.io/agoraphobia">Agoraphobia by Sara</a></iframe>
|
||||
<a class="git-block" href="https://git.objectionable.solutions/Sara/trenches/src/branch/main/src" target="_blank">
|
||||
<div class="git-logo"></div>
|
||||
<h2>Sara/trenches.git</h2>
|
||||
</a>
|
||||
<h2>Product Overview</h2>
|
||||
<p>
|
||||
The concept was a horror-adjecent stressful shooter experience similar to the early resident evil games. Taking some inspiration from early Castlevania games.
|
||||
</p>
|
||||
<h2>Project Overview</h2>
|
||||
<p>
|
||||
My goal with this project was to measure my skills at solo game development. Doing all the work from graphics to sound and of course gameplay design and programming. The reason was so I can measure my abilities from start to finish, making a complete product (in this case a demo vertical slice) from scratch on my own.
|
||||
</p>
|
||||
<h2>Postmortem</h2>
|
||||
<p>
|
||||
The concept kind of sucked. As a proof of concept this project ended up soundly disproving my idea. The goal was to play with the limited tank controls of the early Resident Evil games. Trying to make a game that uses those mechanics in a more combat-focused game. The mechanics did not really have the desired effect. The intentional clunk in the controls only frustrated and the slower combat only bored. I'm proud of the result for being a complete product made from scratch solo. But that product is not well designed.
|
||||
</p>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
200
sites/sara.objectionable.solutions/projects/boids.html
Normal file
200
sites/sara.objectionable.solutions/projects/boids.html
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Boids - Sara Gerretsen</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script type="text/javascript" src="../shared/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="../shared/style.css">
|
||||
<div id="site-header">
|
||||
<script>$(function(){$("#site-header").load("../shared/header.html");});</script>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="version-2">Boids (ecs)</h1>
|
||||
<section>
|
||||
|
||||
<h2 id="info-v2">Info</h2>
|
||||
<div indented>
|
||||
<p>Project type: C Simulation</p>
|
||||
<p>Timeframe: 2022</p>
|
||||
</div>
|
||||
|
||||
<h2 id="video-v2">Video</h2>
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/unTQRpplFGU?mute=1&loop=1&autoplay=1"
|
||||
class="embed" youtube
|
||||
></iframe>
|
||||
<h2 id="product-overview-v2">Product Overview</h2>
|
||||
<p indented>
|
||||
My second implementation of a <a href="https://en.wikipedia.org/wiki/Boids">boids simulation</a>. This time written in C using a combination of SDL2 for rendering and a self-made ecs library for object management.
|
||||
The program includes a ui window which allows users to modify the settings of the boids at runtime.
|
||||
</p>
|
||||
<h2 id="project overview-v2">Project Overview</h2>
|
||||
<p indented>
|
||||
This was made as a stress test of a pure C entity-component-system library I was building for myself.
|
||||
During the development of the boid simulation i managed to improve the ECS it was build around by multithreading it. As well as improving lookup times through binary search.
|
||||
Both of which are rather rudimentary improvements i wanted to make, but the stress test not only made it more obvious they were needed, but also made it much more measurable when they worked.
|
||||
</p>
|
||||
|
||||
<h2 id="architecture-v2">Modules</h2>
|
||||
<div indented>
|
||||
<p>
|
||||
The program is split into a set of distinct submodules. The <i>ecs</i>, <i>adb</i>, <i>ui</i>, <i>engine</i> and <i>sim</i> modules.
|
||||
Of these modules the adb and ecs modules are entirely standalone, the ui module depends only on <a href="https://www.libsdl.org/">SDL2</a>, the engine is dependent on all others except sim, and sim is dependent on engine.
|
||||
</p>
|
||||
<img src="../assets/boids-ecs-dependency-graph.png">
|
||||
|
||||
<h2 id="code-v2">Code</h2>
|
||||
<p style="font-style:italic; font-weight:200; color:#777F" indented>
|
||||
NOTE: Most of these modules were developed separately and as standalone libraries. As such, they have vastly differing naming conventions.
|
||||
Still, each module is internally consistent about its own naming scheme. I just tend to switch style every project.
|
||||
For clarity, the ecs and ui modules use camelCase while the adb, engine and sim modules all use snake_case.
|
||||
</p>
|
||||
|
||||
<h3>Engine</h3>
|
||||
<p>
|
||||
The engine module provides the program's entry point and update/render/event loops. It communicates with the sim by declaring three functions as extern without defining them. The sim then defines them allowing the engine to call functions from the sim.
|
||||
The functions in question are:
|
||||
<ul>
|
||||
<li><i>sim_config</i>, which allows the sim to configure important parts of the engine by adjusting a settings struct.</li>
|
||||
<li><i>sim_init</i> this is called after all other modules are initialized and allows the sim to initialize its components, systems and entities, as well as load assets.</li>
|
||||
<li><i>sim_quit</i> which gives the simulation the chance to clean up any allocated resources after the main loop ends but before the other modules are terminated.</li>
|
||||
</ul>
|
||||
</p>
|
||||
<div class="code-box code-content" id="engine-sim-interaction">
|
||||
<script>
|
||||
$(function(){$("#engine-sim-interaction").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/engine-sim-interaction.html");});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<h3>Sim</h3>
|
||||
<p>
|
||||
The sim module is the only module that actually interacts with anything boid-specific. Whereas the other modules are more so supporting of the simulation.
|
||||
The sim can be divided further into the part that interacts with the engine module, and the part that actually models and simulates the boids.
|
||||
The part that interacts with the engine is responsible for registering components and systems with the ecs, loading assets, and spawning the boids.
|
||||
</p>
|
||||
<div class="code-box code-content" id="sim-init">
|
||||
<script>
|
||||
$(function(){$("#sim-init").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/boids-sim-init.html");});
|
||||
</script>
|
||||
</div>
|
||||
<p>
|
||||
The second part of the sim module are the functions that make the boids behave the way they do. The ones that run as systems from the ecs all follow the signature of an ecs system function. They take in a list of entities, a list of the corresponding component masks, the number of items in both lists, and the delta time of the current frame. They then loop over the entities and perform specific actions for each one. In order to avoid looping over every boid in the simulation every frame, for every boid. The boids cache boids that are within the range of the behaviour with the furthest range.
|
||||
</p>
|
||||
<div class="code-box code-content" id="boid-update-near">
|
||||
<script>
|
||||
$(function(){$("#boid-update-near").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/boid-update-near.html");});
|
||||
</script>
|
||||
</div>
|
||||
<p>
|
||||
When the boids that are close enough to interact have all been cached, the actually modifying systems start running. As a demonstration is the separation system, which keeps the boids apart from eachother to avoid all of them forming a singularity. For each boid, the system loops through all nearby boids, keeping a running average of the positions of each boid nearby enough to be within range. After all nearby boids have been accounted for, the boid's velocity is adjusted to move away from the calculated average.
|
||||
</p>
|
||||
<div class="code-box code-content" id="boid-separation">
|
||||
<script>
|
||||
$(function(){$("#boid-separation").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/boids-ecs-separation.html");});
|
||||
</script>
|
||||
</div>
|
||||
<p>
|
||||
Cohesion and alignment are similar enough that i wont place them here. Cohesion is the opposite of separation, and alignment is practically the same but with velocity instead of position.
|
||||
The mouse does the same as cohesion but with the mouse, and thus without the need for an average. The wall behaviour pushes the boids back onto the screen when they exit it.
|
||||
</p>
|
||||
|
||||
<h3>ECS</h3>
|
||||
<p>
|
||||
The <a href="https://en.wikipedia.org/wiki/Entity_component_system">entity-component-system (ecs)</a> module manages the runtime object model where Entities are numbers, Components are blocks of memory attached to an entity and Systems are function pointers with a component requirement. This is the library that the boids where made to test.
|
||||
The below code consists of snippets showing initialization and uses of components systems and entities.
|
||||
</p>
|
||||
<div class="code-box code-content" id="ecs-demo">
|
||||
<script>
|
||||
$(function(){$("#ecs-demo").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/ecs-systems-usage.html");});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<h3>Asset database</h3>
|
||||
<p>
|
||||
The asset database (adb) module is the module responsible for managing asset data. So it has functions for loading data from files, getting loaded file data, and releasing data after it is no longer needed. To keep this module generic, it has runtime defined rules for managing files through file handler functions.
|
||||
</p>
|
||||
<div class="code-box code-content" style="overflow-x:hidden" id="load-asset">
|
||||
<script>
|
||||
$(function(){$("#load-asset").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/intended-adb-loading.html");});
|
||||
</script>
|
||||
</div>
|
||||
<h3>UI</h3>
|
||||
<p>
|
||||
The ui module is based on the <a href="https://en.wikipedia.org/wiki/Immediate_mode_GUI">immediate mode graphical user interface (imgui)</a> paradigm. This is a paradigm where there is no intermediate storage between the gui and the data. The gui directly modifies the data and vice versa.
|
||||
In my implementation this is done by sending the gui functions pointers to the data they represent as parameters.
|
||||
</p>
|
||||
<div class="code-box code-content" id="ui-demo">
|
||||
<script>
|
||||
$(function(){$("#ui-demo").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/ui-module-boids.html");});
|
||||
</script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h1 id="version-1" style="margin-top:4em">Boids (steering behaviours)</h1>
|
||||
<section class="project">
|
||||
|
||||
<h2>Info</h2>
|
||||
<div indented>
|
||||
<p>Project type: C++ Simulation</p>
|
||||
<p>Timeframe: 2022</p>
|
||||
</div>
|
||||
|
||||
<h2 id="video-v1">Video</h2>
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/h6zuPfniL2s?mute=1&loop=1&autoplay=1"
|
||||
class="embed" youtube
|
||||
></iframe>
|
||||
|
||||
<h2 id="product-overview-v1">Product Overview</h2>
|
||||
<p indented>
|
||||
My first version of a boids simulation. Written in C++ with sfml.
|
||||
</p>
|
||||
|
||||
<h2 id="project-overview-v1">Project Overview</h2>
|
||||
<p indented>
|
||||
I worked on this for about week inspired by the lessons on steering behaviours at school.
|
||||
</p>
|
||||
|
||||
<h2 id="code-v1">Code</h2>
|
||||
<div indented>
|
||||
|
||||
<h3>Boid</h3>
|
||||
<div indented>
|
||||
<p>
|
||||
The boids themselves are primarily a position, a velocity, a mass, and a collection of behaviour function pointers. These boids are then stored in a vector and each of the behaviours is run for each of the boids, resulting in the demonstrated movements.
|
||||
</p>
|
||||
<div id="code-boids" class="code-content code-box">
|
||||
<script>
|
||||
$(function(){$("#code-boids").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/boids-boids.html");});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Behaviours</h3>
|
||||
<div indented>
|
||||
<p>
|
||||
As previously mentioned, the boids all store a collection of behaviours, represented by function pointers. These function pointers take as input a context object representing the program state at the start of the frame, and output a desired change in velocity. The original boids paper describes cohesion, separation, and alignment, so these are the main behaviours implemented.
|
||||
</p>
|
||||
<div id="code-behaviour-cohesion" class="code-content code-box">
|
||||
<script>
|
||||
$(function(){$("#code-behaviour-cohesion").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/cohesion-boids.html");});
|
||||
</script>
|
||||
</div>
|
||||
<div id="code-behaviour-separation" class="code-content code-box">
|
||||
<script>
|
||||
$(function(){$("#code-behaviour-separation").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/separation-boids.html");});
|
||||
</script>
|
||||
</div>
|
||||
<div id="code-behaviour-alignment" class="code-content code-box">
|
||||
<script>
|
||||
$(function(){$("#code-behaviour-alignment").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/alignment-boids.html");});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>GML Tile Movement - Sara Gerretsen</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" href="../shared/style.css">
|
||||
<link rel="stylesheet" href="../shared/projects.css">
|
||||
<script type="text/javascript" src="../shared/jquery.min.js"></script>
|
||||
<div id="site-header">
|
||||
<script>$(function(){$("#site-header").load("../shared/header.html");});</script>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Tile Movement</h1>
|
||||
<section class="project">
|
||||
|
||||
<h2>Info</h2>
|
||||
<div indented>
|
||||
<p>Project Type: Gamemaker 2 Game</p>
|
||||
<p>Timeframe: 2019</p>
|
||||
</div>
|
||||
|
||||
<h2>Video</h2>
|
||||
<iframe indented
|
||||
src="https://www.youtube.com/embed/kmEV8TqBAHQ?mute=1&autoplay=1&loop=1"
|
||||
class="embed" youtube>
|
||||
</iframe>
|
||||
|
||||
<h2>Product Overview</h2>
|
||||
<p indented>
|
||||
One of my older projects. This is a prototype of a tile based movement system focused on getting smooth responsive movement with directional input.
|
||||
Move around, defeat the enemies and move on to the next room. Made around 2019 or so.
|
||||
</p>
|
||||
|
||||
<h2>Project Overview</h2>
|
||||
<p indented>
|
||||
Made on my own over a few days, main focus was on getting a smooth feeling tile based movement system in gamemaker, which was my engine of choice at the time.
|
||||
After the movement was implemented I made some sprites, levels and a simple 'pathfinding' system that picks the unoccupied tile that is closest to the target.
|
||||
</p>
|
||||
|
||||
<h2>Code</h2>
|
||||
<div indented>
|
||||
<h3>Try Move</h3>
|
||||
<div indented>
|
||||
<p>
|
||||
The main challenge was allowing characters to move around without phasing into walls or eachother. The try-move
|
||||
function is a generic solution to this problem.
|
||||
It tests if the proposed movement would overlap with a non-walkable tile on the floor map. As well as testing if
|
||||
any other character is trying to move to that position.
|
||||
</p>
|
||||
<div id="code-try-move" class="code-content code-box">
|
||||
<script>$(function(){ $("#code-try-move").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/try-move-gmldc.html");});</script>
|
||||
</div></div>
|
||||
|
||||
<h3>AI Movement</h3>
|
||||
<p>
|
||||
The AI in the game is a simple example of how the try move function could be used in context.
|
||||
</p>
|
||||
<div id="code-ai-move" class="code-content code-box">
|
||||
<script>$(function(){$("#code-ai-move").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/update-ai-gmldc.html");});</script>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
35
sites/sara.objectionable.solutions/projects/going.html
Normal file
35
sites/sara.objectionable.solutions/projects/going.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script type="text/javascript" src="../shared/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="../shared/style.css">
|
||||
|
||||
<div id="site-header">
|
||||
<script>$(function(){$("#site-header").load("../shared/header.html");});</script>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Going</h1>
|
||||
<section class="project">
|
||||
<h2>Info</h2>
|
||||
<div indented>
|
||||
<p>Project Type: Solo Godot Game (C++ Modules)</p>
|
||||
<p>Project Timeframe: Apr 2025 - Jun 2025</p>
|
||||
</div>
|
||||
<iframe frameborder="0" src="https://itch.io/embed/3650021?bg_color=222222&fg_color=eeeeee&border_color=363636" width="552" height="167"><a href="https://sg-dev.itch.io/keep-going">(Keep) Going by Sara</a></iframe>
|
||||
<a class="git-block" href="https://git.objectionable.solutions/Sara/going/src/branch/development/modules/going" target="_blank">
|
||||
<div class="git-logo"></div>
|
||||
<h2>Sara/keep-going</h2>
|
||||
</a>
|
||||
<h2>Product Overview</h2>
|
||||
<p>
|
||||
A running-platforming game about running and exploring forest. The goal was to translate the way I move while running through a forest into gameplay. With very "manual" actions and a focus on what the game calls a "split-step".
|
||||
</p>
|
||||
<h2>Project Overview</h2>
|
||||
<p>
|
||||
Originally intended to follow up on Agoraphobia, I ended up redesigning it from scratch after discovering that the parts of Agoraphobia that made it interesting were also fundamentally making it unsalvageable. With this also came a redesigning of the toolchain, from godot-cpp with GDExtension, to a godot engine module based approach. This made developing much easier, and meant that a released build only comes with two files (or even just one depending on export settings).
|
||||
</p>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Project VTD - Sara Gerretsen</title>
|
||||
|
||||
<script type="text/javascript" src="../shared/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="../shared/style.css">
|
||||
|
||||
<div id="site-header">
|
||||
<script>$(function(){$("#site-header").load("../shared/header.html");});</script>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Tower VR</h1>
|
||||
<section class="project">
|
||||
|
||||
<h2>Info</h2>
|
||||
<div indented>
|
||||
<p>Project Type: Unreal Engine VR Game</p>
|
||||
<p>Project Timeframe: 2022</p>
|
||||
</div>
|
||||
|
||||
<h2>Video</h2>
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/BtUpfEFvFr4?mute=1&loop=1&autoplay=1"
|
||||
class="embed" youtube>
|
||||
</iframe>
|
||||
<!--BtUpfEFvFr4-->
|
||||
|
||||
<h2>Product Overview</h2>
|
||||
<p indented>
|
||||
A VR tower defence game where the player can fight enemies with their sword, or build towers by drawing patterns on a magic circle.
|
||||
</p>
|
||||
<h2>Project Overview</h2>
|
||||
<p indented>
|
||||
The game was made at a 'Hybride Leeromgeving' (Eng: Hybrid Learning Environment) or HLO. Which gives students the opportunity to work in an environment closer to that of a professional game company. The game was made with a team of five programmers and one artist.
|
||||
</p>
|
||||
<h2>Code</h2>
|
||||
<div indented>
|
||||
<h3>Tower Selection</h3>
|
||||
<div indented>
|
||||
<p>
|
||||
One of the mechanics I was responsible for was the tower selection circles. The code calls them spell circles as they were initially supposed to cast spells.
|
||||
Spell circles spawn a pattern of orbs with colliders, these orbs have their own logic to send a message to a 'spell map' contained within the spell circle.
|
||||
</p>
|
||||
<i>spell circle - interface declaration</i>
|
||||
<div id="spell-circle-h" class="code-content code-box">
|
||||
<script>$(function(){$("#spell-circle-h").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/vtd-spell-circle-h.html");});</script>
|
||||
</div>
|
||||
<i>spell circle - implementation</i>
|
||||
<div id="spell-circle-c" class="code-content code-box">
|
||||
<script>$(function(){$("#spell-circle-c").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/vtd-spell-circle-c.html");});</script>
|
||||
</div>
|
||||
<p>
|
||||
These 'orbs' all know their own index within the spell circle's list of orbs. When an orb is hit, it sends its own index to the spell map component of the spell circle. This number is then converted to a string and appended to the spell map's pattern string. Because of the way the system works, only 1 digit indexes are used, though the code does not enforce this.
|
||||
Whenever a new character is added, the spell map compares the formed string to a list of 'correct' patterns.
|
||||
If the string produced after the last addition does not match a substring of the same length in a 'correct' pattern, the pattern is considered failed and the corresponding event is triggered.
|
||||
When the string produced is equal to a 'correct' pattern, the event signalling a correct pattern is triggered.
|
||||
Because a large part of the team prefered working with blueprints, a lot of the C++ architecture was designed with an eye on its blueprint interface. This lead to some odd decisions regarding the "success" event, as blueprints were unable to interact with the map of delegates to patterns that was used in the initial version of the spell map (hence the name).
|
||||
</p>
|
||||
<i>spell map - interface declaration</i>
|
||||
<div id="spell-map-h" class="code-content code-box">
|
||||
<script>$(function(){$("#spell-map-h").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/vtd-spell-map-h.html");});</script>
|
||||
</div>
|
||||
<i>spell circle - implementation</i>
|
||||
<div id="spell-map-c" class="code-content code-box">
|
||||
<script>$(function(){$("#spell-map-c").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/vtd-spell-map-c.html");});</script>
|
||||
</div>
|
||||
<i>spell orb - interface declaration</i>
|
||||
<div id="spell-orb-h" class="code-content code-box">
|
||||
<script>$(function(){$("#spell-orb-h").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/vtd-spell-orb-h.html");});</script>
|
||||
</div>
|
||||
<i>spell orb - implementation</i>
|
||||
<div id="spell-orb-c" class="code-content code-box">
|
||||
<script>$(function(){$("#spell-orb-c").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/vtd-spell-orb-c.html");});</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Ruins of Edis - Sara Gerretsen</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script type="text/javascript" src="../shared/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="../shared/style.css">
|
||||
<div id="site-header">
|
||||
<script>$(function(){$("#site-header").load("../shared/header.html");});</script>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Ruins of Edis</h1>
|
||||
<section class="project">
|
||||
|
||||
<h2>Info</h2>
|
||||
<div indented>
|
||||
<p>Project type: Unity Game</p>
|
||||
<p>Timeframe: 2022</p>
|
||||
</div>
|
||||
|
||||
<h2>Video</h2>
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/9HS_cBV1rOg?mute=1&loop=1&autoplay=1"
|
||||
class="embed" youtube>
|
||||
</iframe>
|
||||
|
||||
<h2>Product Overview</h2>
|
||||
<p indented>
|
||||
A relaxing desert driving game about following a blue light around the ruins of a long lost civilization. Stay within the light or be lost to the desert.
|
||||
</p>
|
||||
|
||||
<h2>Project Overview</h2>
|
||||
<p indented>
|
||||
For this project, I was a responsible for the car's controls and physics. I also helped with programming the terrain generation script.
|
||||
</p>
|
||||
|
||||
<h2>Code</h2>
|
||||
<div indented>
|
||||
|
||||
<h3>Controls</h3>
|
||||
<div indented>
|
||||
<p>
|
||||
The drifting system uses a "force angle" which describes the angle relative to the forward direction in which the car should apply force.
|
||||
This allows the direction while drifting to be changed to be somewhere to the side of the car for it to slide properly.
|
||||
</p>
|
||||
<div id="car-update-code" class="code-content code-box">
|
||||
<script>$(function(){$("#car-update-code").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/update-car-roe.html");});</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Terrain Generator</h3>
|
||||
<div indented>
|
||||
<p>
|
||||
To make the terrain generation extensively configurable, we used a whole collection of stacked animation curves and multipliers.
|
||||
These were then applied to the result of a perlin noise function to create a heightmap, which can then be applied to one or more terrain objects.
|
||||
</p>
|
||||
<div id="terrain-generator-code" class="code-content code-box">
|
||||
<script>$(function(){$("#terrain-generator-code").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/terrain-generator-roe.html");});</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Spirit Signal - Sara Gerretsen</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script type="text/javascript" src="../shared/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="../shared/style.css">
|
||||
<div id="site-header">
|
||||
<script>$(function(){$('#site-header').load("../shared/header.html");});</script>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Spirit Signal</h1>
|
||||
<section class="project">
|
||||
<h2 class="inline">Info</h2>
|
||||
<div indented>
|
||||
<p>Project Type: Unity Game for IEGJ</p>
|
||||
<p>Timeframe: 2022</p>
|
||||
</div>
|
||||
|
||||
<h2>Video</h2>
|
||||
<iframe
|
||||
src="https://youtube.com/embed/7Zueiw9SIrI?mute=1&autoplay=1&loop=1"
|
||||
class="embed" youtube
|
||||
></iframe>
|
||||
<iframe
|
||||
src="https://itch.io/embed/1415379"
|
||||
class="embed" itch
|
||||
frameborder="0">
|
||||
<a href="https://sg-dev.itch.io/spirit-signal-iegj2022">
|
||||
Spirit Signal by sg_dev, Saltoc, villewilly, jrosenbe, hallo_schoonheid
|
||||
</a>
|
||||
</iframe>
|
||||
|
||||
<h2>Product Overview</h2>
|
||||
<p indented>
|
||||
A top down exploration game setting you to exploring an abandoned factory looking for tools and key-cards while avoiding the unexplained dangers around the place
|
||||
</p>
|
||||
|
||||
<h2>Project Overview</h2>
|
||||
<p indented>
|
||||
This was made for the International Educational Game Jam with a team of three artists and two programmers. My role was mainly that of gameplay programmer. I wrote the interaction and movement systems, as well as a few interactions using those systems.
|
||||
</p>
|
||||
|
||||
<h2>Code</h2>
|
||||
<div indented>
|
||||
<h3>Interaction</h3>
|
||||
<div indented>
|
||||
<p>
|
||||
When the player clicks, clickable objects near the cursor should be notified that they've been activated. For this, I created an Interactible interface. This interface can then be inherited to clearly mark a component as clickable.
|
||||
</p>
|
||||
<div id="interaction-code" class="code-content code-box">
|
||||
<script>$(function(){$("#interaction-code").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/iinteractible-ss.html");});</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Clicking</h3>
|
||||
<div indented>
|
||||
<p>
|
||||
The player interaction script triggers any IInteractible components within a radius around wherever the player has clicked.
|
||||
It only does this after ensuring that the clicked object can be reached.
|
||||
</p>
|
||||
<div id="clicking-code" class="code-content code-box">
|
||||
<script>$(function(){$("#clicking-code").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/interaction-ss.html");});</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script type="text/javascript" src="../shared/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="../shared/style.css">
|
||||
|
||||
<div id="site-header">
|
||||
<script>$(function(){$("#site-header").load("../shared/header.html");});</script>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Station to Station</h1>
|
||||
<section class="project">
|
||||
<h2>Info</h2>
|
||||
<div indented>
|
||||
<p>Project Type: Unreal Engine Management Game</p>
|
||||
<p>Project Timeframe: Internship during 2022 Jan-Jul</p>
|
||||
</div>
|
||||
<p>
|
||||
A fun, relaxing but still challenging, resource management puzzle game by Galaxy Grove. That I had the chance to work on for an internship of six months.
|
||||
Being my first "job" working on a real production game, I learned a lot about developing a polished, <i>final</i>, product.
|
||||
My main contributions were to the dynamic growth of the in-game cities in response to the player's success. I also wrote some internal tooling for generating ambient occlusion maps in bulk using Blender and python.
|
||||
As well as the decorative birds' behaviour.
|
||||
</p>
|
||||
<h2>Steam</h2>
|
||||
<iframe id="steam embed" src="https://store.steampowered.com/widget/2272400/" frameborder="0" width="646" height="190"></iframe>
|
||||
|
||||
<h2>Announcement Trailer</h2>
|
||||
<iframe
|
||||
id="youtube embed"
|
||||
src="https://www.youtube.com/embed/e-FuDjteXxs?mute=1&loop=1&autoplay=1"
|
||||
class="embed" youtube>
|
||||
</iframe>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
88
sites/sara.objectionable.solutions/projects/stig-kart.html
Normal file
88
sites/sara.objectionable.solutions/projects/stig-kart.html
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Stig Kart 64 - Sara Gerretsen</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script type="text/javascript" src="../shared/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="../shared/style.css">
|
||||
<div id="site-header">
|
||||
<script>$(function(){$('#site-header').load("../shared/header.html");});</script>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Stig Kart 64</h1>
|
||||
<section class="project">
|
||||
|
||||
<h2>Info</h2>
|
||||
<div indented>
|
||||
<p>Project type: Unity Game</p>
|
||||
<p>Timeframe: 2022</p>
|
||||
</div>
|
||||
|
||||
<h2>Video</h2>
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/0gehGW9LS58?mute=1&autoplay=1"
|
||||
class="embed" youtube
|
||||
></iframe>
|
||||
<iframe
|
||||
src="https://itch.io/embed/1372223"
|
||||
width="552" height="167"
|
||||
class="embed" itch
|
||||
frameborder="0">
|
||||
<a href="https://aafke.itch.io/bottom-gear-stig">
|
||||
Bottom Gear - Stig Kart 64 by Aafke van roon, Jeroeno_Boy, sg_dev, Chirp77, Jyce
|
||||
</a>
|
||||
</iframe>
|
||||
|
||||
<h2>Product Overview</h2>
|
||||
<p indented>
|
||||
A fast paced kart racer about timing your drifts and boosts just right. Play against your friends in splitscreen or the AI in singleplayer and try to get the quickest time.
|
||||
</p>
|
||||
|
||||
<h2>Project Overview</h2>
|
||||
<p indented>
|
||||
The game was made by a team of six people over two weeks. I spent most of that working on the input and kart physics. After the time trial mode was done, I also worked on the AI.
|
||||
</p>
|
||||
|
||||
<h2>Code</h2>
|
||||
<div indented>
|
||||
|
||||
<h3>Steering</h3>
|
||||
<div indented>
|
||||
<p>
|
||||
For steering we had some very specific requirements. While drifting, the player needed to be able to control their direction, without being able to flip the direction of the drift or 'drift' straight forward.
|
||||
When drifting, the UpdateSteering function will transform the current steering input so that, if the drift was started while steering left, the possible range of steering values is within the range of -1 to -min, where min is a positive number lower than one which signifies the minimum amount of steering. When the drift is started while steering right, the range would be opposite, ranging from min to one.
|
||||
</p>
|
||||
<div id="update-steering" class="code-content code-box">
|
||||
<script>$(function(){$('#update-steering').load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/update-steering-sk64.html");});</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Basic AI</h3>
|
||||
<div indented>
|
||||
<p>
|
||||
After we had completed the basic time trial mode, we still had about a week to add more features. So while another programmer went ahead to implement splitscreen, I wanted to try and get AI working. The player input component was already separate from the kart physics part. So the basic steering AI works by steering until it is aiming at the next invisible checkpoint on the course.
|
||||
</p>
|
||||
<div id="aim-at-target" class="code-content code-box">
|
||||
<script>$(function(){$("#aim-at-target").load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/rotate-to-target-sk64.html");});</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Expanded AI</h3>
|
||||
<div indented>
|
||||
<p>
|
||||
Allowing the AI to drift required it turning into the next turn rather than just aiming at the next checkpoint.
|
||||
To do this, i first get the next three checkpoints to calculate the total angle of the next turn. This angle is then used to decide whether to drift or not.
|
||||
After figuring out whether to drift or not, the AI will modify its physics in the same way as when the players presses the drift button.
|
||||
With the drift started, the AI needs to aim at the checkpoint after the next to drift.
|
||||
</p>
|
||||
<div id="update-target" class="code-content code-box">
|
||||
<script>$(function(){$('#update-target').load("https://raw.githubusercontent.com/Sara-G-GD/portfolio-code-highlighting/main/update-target-sk64.html");});</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
117
sites/sara.objectionable.solutions/projects/you-done-it.html
Normal file
117
sites/sara.objectionable.solutions/projects/you-done-it.html
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>You Done It - Sara Gerretsen</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script type="text/javascript" src="../shared/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="../shared/style.css">
|
||||
<div id="site-header">
|
||||
<script>$(function(){$("#site-header").load("../shared/header.html");});</script>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<h1>You Done It</h1>
|
||||
<section class="project">
|
||||
<img src="../assets/you-done-it-front.png" style="width:100%"/>
|
||||
|
||||
<h2>Info</h2>
|
||||
<div indented>
|
||||
<p>Project type: Godot Networked VR/Flatscreen Game</p>
|
||||
<p>Timeframe: 2 Months, 2025</p>
|
||||
<p>Team: 2 Artists, 2 Designers, 1 Programmer </p>
|
||||
</div>
|
||||
|
||||
<h2>Product Overview</h2>
|
||||
<p indented>
|
||||
A two-player multiplayer game about manipulating information. One player needs to restrict what the other can see to get away with murder. The second player needs to figure out the full story from the objectively observable facts and the testimony of the first.
|
||||
</p>
|
||||
|
||||
<h2>Project Overview</h2>
|
||||
<p indented>
|
||||
I was the only programmer on this project, meaning I worked on both the VR and flatscreen interaction code on top of the communication and networking.
|
||||
</p>
|
||||
</section>
|
||||
<h1>Postmortem</h1>
|
||||
<p>
|
||||
The concept, a two-player asynchronous multiplayer game. Was extremely interesting to work on, it came with challenges that don't have to be considered at all on any other kind of game project.
|
||||
</p>
|
||||
<h2>Separations</h2>
|
||||
<p>
|
||||
Although not my first choice of medium, I do still have a latent interest in the technology of VR. It has opportunity for probably <i>the</i> most varied interactions of any "video game" medium. But that level of interactivity also comes with a major development workload that the team we had was not equiped to handle. So our first step after deciding a concept was to limit interactions. So the player is only able to walk around (physically, so there's no controls needed, just a large space and a long cable). And the player can't really pick anything up other than the camera, which is glued to their hand.
|
||||
</p>
|
||||
<p>
|
||||
Limiting the workload for the VR interaction freed up a lot of time. Which was needed to also be able to make a whole second game at the same time. The second game is a 2D UI-driven affair, and thus much simpler to implement. The hard part was working with shared concepts. Because they need to represent the same ideas, the two "games" share a codebase, letting them share definitions of low-level networking primitives such as message type IDs, error codes, and data structures. This ensures absolute consistency between client and server.
|
||||
</p>
|
||||
<p>
|
||||
The core systems of the game, including these primitives and the shared concepts of the games, are all implemented as an engine module. Meaning they are compiled as part of the engine executable (an advantage of godot being open source). This simplified managing the two versions of the game massively, as the executable only needs to be built once. Switching between the different versions simply means giving the executable one .pck file or the other.
|
||||
</p>
|
||||
<section indented>
|
||||
<h3>Aside: Code and Data</h3>
|
||||
<p>
|
||||
In my technical design I separate all features, bugs or issues into "code" and "data" responsibilities. Data responsiblity is generally "Ways the game can be affected from the editor". Which usually means "Anything that affects the game that isn't code". Meanwhile Code is what directly defines the <i>outcome</i> or <i>interpretation</i> of Data. This definition implies that Data depends on Code to have effect. While the inverse is not necessarily true. But I do keep a hard rule I for myself, that Code cannot depend on Data. Code is not allowed to break because of absence of or fault in Data. This means that any Code that directly deals with Data should be written with extra care to be especially fault-tolerant, and preferably even fault-<i>correcting</i>. To avoid passing faults down a dependency chain. Whereas when Code problems are detected, my preference is to hard-crash to desktop (or debugger), as faults in code can lead to much worse consequences for the user, and hard-crashing means that the problem must be fixed before shipping anyway.
|
||||
</p>
|
||||
<p>
|
||||
The two definitions I use mostly come down to the same thing. But some engines, like Godot and Unreal split them: they have editor-accessible scripting languages (GDScript and Blueprints). Which, by the first definition implies that scripting, despite being code, is a "Data" responsibility. This is a good thing. Because the first definition could be rephrased as "things I want a designer to be able to modify" which absolutely goes for script logic. Letting (technical) designers write scripts is an extremely advantageous part of any larger project workflow. But, scripts being Data, increase Code workload. Because suddenly all script-accessible interfaces have to be treated as suspect. Anything a script can directly access has to be either <i>explicitly marked as dangerous</i>, or <i>extremely fault tolerant</i>.
|
||||
</p>
|
||||
</section>
|
||||
<h2>Networking</h2>
|
||||
<img src="../assets/you-done-it-networking-UML.svg" style="width:100%;"/>
|
||||
<p>
|
||||
The client and the server are both multithreaded, using the STL native threading objects. Both use the second thread to receive data and respond to messages from the other. The server also uses the second thread to regularly send a heartbeat signal to the client, ensuring that the connection is still alive.
|
||||
</p>
|
||||
<h3>Client</h3>
|
||||
<p>
|
||||
The client of the network is the VR game, as it is generally the piece of the puzzle that "sends" information to the server, which is in control of the game state. Before the game initialises the VR display, it launches into a simple flatscreen UI where the player can type in the IP adress of the server, as typing numbers in VR is a fresh user experience nightmare.
|
||||
</p>
|
||||
<p>
|
||||
Once connected, the game starts the VR scene, which contains the player node that sets up the OpenXR API. The game will now be rendering to the VR headset. From here on most of the remaining logic is managed through scripting, as most of it amounts to checking input and passing events to native C++ APIs.
|
||||
</p>
|
||||
<img src="../assets/you-done-it-client-setup.png" style="width:50%;"/>
|
||||
<h3>Server</h3>
|
||||
<p>
|
||||
The server of the network is the flatscreen game. It boots into a short info screen with a button which, once pressed, opens the <code>6667</code> port and starts listening for connections. Once a client sends a
|
||||
<a href="https://git.objectionable.solutions/Team-Immerse-Yourself/YouDunIt/src/commit/ad0c352b34be69939b0de67d552770d448d4d983/modules/you_done_it/ydi_networking.h#L19">MSG_CONNECT</a>
|
||||
message, the server responds with
|
||||
<a href="https://git.objectionable.solutions/Team-Immerse-Yourself/YouDunIt/src/commit/ad0c352b34be69939b0de67d552770d448d4d983/modules/you_done_it/ydi_networking.h#L21">MSG_OK</a>,
|
||||
which completes the connection flow. From now on all connection requests are responded to with
|
||||
<a href="https://git.objectionable.solutions/Team-Immerse-Yourself/YouDunIt/src/commit/ad0c352b34be69939b0de67d552770d448d4d983/modules/you_done_it/ydi_networking.h#L66">NOK_OUT_OF_CONTEXT</a>.
|
||||
</p>
|
||||
<img src="../assets/you-done-it-server-setup.png" style="width:50%;"/>
|
||||
<p>
|
||||
With the connection established, the actual gameplay scene opens, and the game proper starts. From this point on the server thread will send
|
||||
<a href="https://git.objectionable.solutions/Team-Immerse-Yourself/YouDunIt/src/commit/ad0c352b34be69939b0de67d552770d448d4d983/modules/you_done_it/ydi_networking.h#L22">MSG_HEART</a>
|
||||
and expect
|
||||
<a href="https://git.objectionable.solutions/Team-Immerse-Yourself/YouDunIt/src/commit/ad0c352b34be69939b0de67d552770d448d4d983/modules/you_done_it/ydi_networking.h#L23">MSG_BEAT</a>
|
||||
in return within a short time, if no response is given within the expected time the connection is considered lost and the game stops.
|
||||
</p>
|
||||
<p>
|
||||
The primary gameplay message is
|
||||
<a href="https://git.objectionable.solutions/Team-Immerse-Yourself/YouDunIt/src/commit/ad0c352b34be69939b0de67d552770d448d4d983/modules/you_done_it/ydi_networking.h#L25">MSG_REVEAL</a>.
|
||||
This message is sent by the client when the VR player has taken a picture of an object and decides to send it to the other player. MSG_REVEAL comes with a serialised
|
||||
<a href="https://git.objectionable.solutions/Team-Immerse-Yourself/YouDunIt/src/commit/ad0c352b34be69939b0de67d552770d448d4d983/modules/you_done_it/ydi_networking.h#L30">ClueID</a>
|
||||
attached, which is deserialised and stored in a buffer. Every frame, the main thread
|
||||
<a href="https://git.objectionable.solutions/Team-Immerse-Yourself/YouDunIt/src/commit/ad0c352b34be69939b0de67d552770d448d4d983/modules/you_done_it/ydi_server.cpp#L183">
|
||||
will lock this buffer and copy it
|
||||
</a>.
|
||||
Afterward it will handle whatever was copied, if anything.
|
||||
</p>
|
||||
<p>
|
||||
The final message sent between the server and client is
|
||||
<a href="https://git.objectionable.solutions/Team-Immerse-Yourself/YouDunIt/src/commit/ad0c352b34be69939b0de67d552770d448d4d983/modules/you_done_it/ydi_networking.h#L26">MSG_CONCLUSION</a>.
|
||||
It is sent by the server when the flatscreen player believes they know Who Dun It. At first this was only possible if the player had selected all three parts of the case (Murderer, Method, Motive), but testing showed that that made it too easy to win on a technicality. Where the flatscreen player knew who did it, but was missing one clue needed. So this was changed to allowing a submission if the player has entered any clues in the case file.
|
||||
</p>
|
||||
<p>
|
||||
Once the client receives MSG_CONCLUSION it checks if the ClueID sent for the Murderer is correct, and displays the player a message telling them whether or not they won. The flatscreen player is given a similar screen, showing them which of the three clues they submitted, if any, were correct.
|
||||
</p>
|
||||
<img src="../assets/you-done-it-vr-victory.png" style="height:270px">
|
||||
<img src="../assets/you-done-it-flatscreen-end.png" style="height:270px">
|
||||
<h2>Takeaways</h2>
|
||||
<p>
|
||||
I learned a lot from this project. Prior to it I had done a lot of toy projects practicing performance-sensitive multithreading and networking using 0MQ, and this was the first project with actual stakes where I could use the networking part. The multithreading is simple, and not particularly performance-sensitive, but the practice I'd had meant I was far more confident and comfortable with using it. While the knowledge I'd built up in 0MQ networking turned out invaluable to the success of the project.
|
||||
</p>
|
||||
<p>
|
||||
In the end there wasn't much space to release it to a wider public, as the technology and implementation ended up being too specific to the context in which we exposited it. A more complete release could probably be made, but the game turned out too simple to really be worth releasing that way.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
25
sites/sara.objectionable.solutions/shared/header.html
Normal file
25
sites/sara.objectionable.solutions/shared/header.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<link type="stylesheet" href="style.css">
|
||||
<div class="site-header">
|
||||
<ul>
|
||||
<li>
|
||||
<a class="internal" href="../index.html#projects">
|
||||
<h2>Projects</h2>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="internal" href="../index.html#experience">
|
||||
<h2>Experience</h2>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="internal" href="https://git.objectionable.solutions/Sara" target="_blank">
|
||||
<h2>Git↗</h2>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="internal" href="https://blog.winter-software.com/profile/0e41208a-716e-4f10-ae65-8096a10837eb" target="_blank">
|
||||
<h2>Blog↗</h2>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
2
sites/sara.objectionable.solutions/shared/jquery.min.js
vendored
Normal file
2
sites/sara.objectionable.solutions/shared/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
147
sites/sara.objectionable.solutions/shared/projects.css
Normal file
147
sites/sara.objectionable.solutions/shared/projects.css
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
.project-card {
|
||||
padding: 10px;
|
||||
height: 400px;
|
||||
background-color: #333F;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
text-align: left;
|
||||
--hovered-card-color: #FFF4;
|
||||
}
|
||||
|
||||
.project-card-role {
|
||||
font-weight: bold;
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
.project-highlighted {
|
||||
background-color: #ffc587;
|
||||
--foreground-color: #444;
|
||||
--hovered-card-color: #ffc587;
|
||||
--link-hover-color: #44CF;
|
||||
}
|
||||
|
||||
|
||||
.project-grid {
|
||||
display: grid;
|
||||
grid-gap: 10px 10px;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.project-grid {
|
||||
display: grid;
|
||||
grid-gap: 50px 10px;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.project-grid > a {
|
||||
padding: 20px;
|
||||
border-radius: 7px;
|
||||
background: #FFF1;
|
||||
}
|
||||
|
||||
.project-grid > a:hover {
|
||||
border-width: 5px;
|
||||
padding-top: 25px;
|
||||
padding-bottom: 15px;
|
||||
background: #FFF3;
|
||||
}
|
||||
|
||||
.project-grid > a:visited {
|
||||
color: #444F;
|
||||
}
|
||||
|
||||
.project-grid > a:active {
|
||||
background: var(--hovered-card-color);
|
||||
padding-top: 30px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
.project-card[ruins-of-edis] {
|
||||
background-image: url('../assets/ruins-of-edis-cover.jpg');
|
||||
}
|
||||
|
||||
.project-card[stig-kart] {
|
||||
background-image: url('../assets/stig-kart-cover.png');
|
||||
}
|
||||
|
||||
.project-card[spirit-of-science] {
|
||||
background-image: url('../assets/spirit-of-science-cover.jpg');
|
||||
}
|
||||
|
||||
.project-card[boids] {
|
||||
background-image: url('../assets/boids-ecs-cover.jpg');
|
||||
}
|
||||
|
||||
.project-card[gml-tile-movement] {
|
||||
background-image: url('../assets/gml-tile-movement-cover.jpg');
|
||||
}
|
||||
|
||||
.project-card[tower-vr] {
|
||||
background-image: url('../assets/tower-vr-cover.jpg');
|
||||
background-position: 50% 100%;
|
||||
}
|
||||
|
||||
.project-card[station-to-station] {
|
||||
background-image: url('../assets/station-to-station-cover.jpg');
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.project-card[agoraphobia] {
|
||||
background-image: url('../assets/agoraphobia-cover.png');
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
.project-card[going] {
|
||||
background-image: url('../assets/going-cover.png');
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
.project-card[you-done-it] {
|
||||
background-image: url('../assets/you-done-it-front.png');
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
.project-card > h2 {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.project-labels {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.project-labels > p {
|
||||
display: inline;
|
||||
color: white;
|
||||
background-color: #5C5F;
|
||||
border-color: black;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
border-radius: 4px;
|
||||
width: fit-content;
|
||||
margin-bottom: 0px;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.project-labels > p.play-on-itch {
|
||||
background:#fa5c5c;
|
||||
}
|
||||
|
||||
.project-labels > p.play-on-steam {
|
||||
background:rgb(11, 81, 173);
|
||||
}
|
||||
|
||||
h2.project-title {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
217
sites/sara.objectionable.solutions/shared/style.css
Normal file
217
sites/sara.objectionable.solutions/shared/style.css
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
:root {
|
||||
--foreground-color: #AAAF;
|
||||
--background-color: #111F;
|
||||
--link-hover-color: #BBFF;
|
||||
}
|
||||
html {
|
||||
font: 100% monospace, sans-serif;
|
||||
color: var(--foreground-color);
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 1040px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-right: auto;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 1px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
h2.inline {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 50px;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
a.internal {
|
||||
text-decoration: none;
|
||||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
|
||||
section {
|
||||
display: block;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
p.intro-paragraph {
|
||||
color: #999F;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
div {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.info {
|
||||
margin-top: 10px;
|
||||
color: #222F;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
.embed {
|
||||
background-color: #000F;
|
||||
border-radius: 10px;
|
||||
background-color: #000F;
|
||||
border-radius: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 3px;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.embed[youtube] {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.git-block {
|
||||
display: grid;
|
||||
color: white;
|
||||
grid-template-columns: 125px auto;
|
||||
width: fit-content;
|
||||
margin-left: 0px;
|
||||
background-color: #181818;
|
||||
border: 1px solid #FFF3;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
padding-right: 50px
|
||||
}
|
||||
|
||||
.git-block > h2 {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
div.git-logo {
|
||||
background-color: #0000;
|
||||
background-image: url("https://git.objectionable.solutions/assets/img/logo.svg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.project {
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px/i
|
||||
text-align: center; background-color: #0000;
|
||||
}
|
||||
|
||||
.site-header > ul > li {
|
||||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.site-header > ul > li > a > h2 {
|
||||
text-decoration: underline;
|
||||
font-size: 175%;
|
||||
padding: 5px 25px;
|
||||
}
|
||||
|
||||
.site-header > ul > li > a > h2:hover {
|
||||
background: #DDF8;
|
||||
color: #334F;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.personal-info-grid {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
grid-template-columns: 80% auto;
|
||||
}
|
||||
|
||||
.personal-info-photo {
|
||||
background-image: url("../assets/personal-info-photo.jpg");
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.experience-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
p.experience-grid-time {
|
||||
color: #999F;
|
||||
}
|
||||
|
||||
*[indented] {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.code-box {
|
||||
background-color: #2C2C3CFF;
|
||||
border-radius: 10px;
|
||||
overflow: visible;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.code-content {
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
a.button {
|
||||
background: rgb(0, 170, 255);
|
||||
border-radius: 0.2em;
|
||||
padding: 0.2em 1em;
|
||||
font-weight: bold;
|
||||
font-size: 1.25em;
|
||||
border-radius: 100em;
|
||||
}
|
||||
a.button:hover {
|
||||
background: rgb(162, 224, 255);
|
||||
color: black;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.personal-info-grid {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.experience-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 80%;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
margin: 3px auto;
|
||||
}
|
||||
}
|
||||
BIN
sites/saragerretsen.nl/assets/agoraphobia-cover.png
Normal file
BIN
sites/saragerretsen.nl/assets/agoraphobia-cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 443 KiB |
BIN
sites/saragerretsen.nl/assets/going-cover.png
Normal file
BIN
sites/saragerretsen.nl/assets/going-cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 716 KiB After Width: | Height: | Size: 256 KiB |
|
|
@ -2,20 +2,20 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<title>Portfolio - Sara Gerretsen</title>
|
||||
<title>Sara's Game Development Portfolio</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="C# and C++ Game Developer">
|
||||
<meta name="keywords" content="Developer, Portfolio, Game Developer, Software Developer, Programmer, C, C#, C++">
|
||||
<meta name="description" content="Game Developer Portfolio">
|
||||
<meta name="keywords" content="Developer, Portfolio, Game Developer, Software Developer, Programmer, C++, C#, Unity, Unreal, Godot">
|
||||
<meta name="author" content="Sara Gerretsen">
|
||||
|
||||
<link rel="stylesheet" href="shared/style.css">
|
||||
<link rel="stylesheet" href="shared/projects.css">
|
||||
<link rel="me" href="https://tech.lgbt/@sara">
|
||||
<link rel="me" href="https://app.wafrn.net/blog/Sara_Objectionable">
|
||||
|
||||
<style>
|
||||
#intro-sentence {
|
||||
margin-bottom: 100px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -27,15 +27,27 @@
|
|||
|
||||
<body>
|
||||
<section>
|
||||
<h1 id="intro-sentence">Hi! my name is Sara! I'm a game developer in love with the intricacies of player
|
||||
interaction.</h1>
|
||||
<h1 id="intro-sentence">Hi! my name is Sara!<br>I'm a game developer who loves solving complex problems, simply.</h1>
|
||||
<h2 id="about-me">About Me</h2>
|
||||
<div class="personal-info-grid" indented>
|
||||
<div>
|
||||
<p>
|
||||
My tool of choice is Godot engine modules, but I'm adept with a variety of libraries, engines, and frameworks.
|
||||
Most of my experience is C++, both using STL and with engines like Unreal and Godot.
|
||||
I get the most enjoyment out of writing player-facing gameplay systems and designer-facing tools and interfaces.
|
||||
Which is to say, I like writing code that people get to interact with directly.
|
||||
</p>
|
||||
<p style="color: #FFF4">you can email me at sara on this domain (objectionable dot solutions or saragerretsen dot nl)</p>
|
||||
</div>
|
||||
<div class="personal-info-photo"></div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
|
||||
<h2 id="projects">Projects</h2>
|
||||
<h3>Internship @ Galaxy Grove</h3>
|
||||
<div indented>
|
||||
<div class="project-grid">
|
||||
<a class="internal" href="projects/station-to-station.html" style="background-color: #fcece3">
|
||||
<a class="internal" href="projects/station-to-station.html">
|
||||
<div class="project-card" station-to-station></div>
|
||||
<div class="project-labels">
|
||||
<p class="play-on-steam">play on steam!</p>
|
||||
|
|
@ -43,8 +55,40 @@
|
|||
<p>internship</p>
|
||||
</div>
|
||||
<h2 class="project-title">Station to Station</h2>
|
||||
<p class="project-card-role">C++ Intern@Galaxy Grove</p>
|
||||
<p class="project-card-role">C++ Tools Programmer</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Student @ HKU</h3>
|
||||
<div indented>
|
||||
<div class="project-grid">
|
||||
<a class="internal" href="projects/going.html">
|
||||
<div class="project-card" going></div>
|
||||
<div class="project-labels">
|
||||
<p class="play-on-itch">play on itch.io!</p>
|
||||
<p>godot</p>
|
||||
<p>c++ module</p>
|
||||
<p>solo</p>
|
||||
</div>
|
||||
<h2 class="project-title">(Keep) Going</h2>
|
||||
<p class="project-card-role">Solo Developer</p>
|
||||
</a>
|
||||
<a class="internal" href="projects/agoraphobia.html">
|
||||
<div class="project-card" agoraphobia></div>
|
||||
<div class="project-labels">
|
||||
<p class="play-on-itch">play on itch.io!</p>
|
||||
<p>godot</p>
|
||||
<p>c++ extension</p>
|
||||
<p>solo</p>
|
||||
</div>
|
||||
<h2 class="project-title">Agoraphobia</h2>
|
||||
<p class="project-card-role">Solo Developer</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Student @ GLU</h3>
|
||||
<div indented>
|
||||
<div class="project-grid">
|
||||
<a class="internal" href="projects/spirit-of-science.html">
|
||||
<div class="project-card" spirit-of-science></div>
|
||||
<div class="project-labels">
|
||||
|
|
@ -53,7 +97,7 @@
|
|||
<p>gamejam</p>
|
||||
<p>team</p>
|
||||
</div>
|
||||
<h2 class="project-title">Spirit of Science</h2>
|
||||
<h2 class="project-title">Spirit Signal</h2>
|
||||
<p class="project-card-role">General C# Programmer</p>
|
||||
</a>
|
||||
<a class="internal" href="projects/stig-kart.html">
|
||||
|
|
@ -64,7 +108,7 @@
|
|||
<p>team</p>
|
||||
</div>
|
||||
<h2 class="project-title">Stig Kart 64</h2>
|
||||
<p class="project-card-role">C# Gameplay and physics programmer</p>
|
||||
<p class="project-card-role">C# Gameplay and Physics Programmer</p>
|
||||
</a>
|
||||
<a class="internal" href="projects/boids.html">
|
||||
<div class="project-card" boids></div>
|
||||
|
|
@ -85,6 +129,11 @@
|
|||
<h2 class="project-title">Tower VR</h2>
|
||||
<p class="project-card-role">C++ Programmer</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Chief Experimentor @ Home</h3>
|
||||
<div indented>
|
||||
<div class="project-grid">
|
||||
<a class="internal" href="projects/gml-tile-movement.html">
|
||||
<div class="project-card" gml-tile-movement></div>
|
||||
<div class="project-labels">
|
||||
|
|
@ -98,24 +147,13 @@
|
|||
</div>
|
||||
</section>
|
||||
<section>
|
||||
|
||||
<h2 id="about-me">About Me</h2>
|
||||
<div class="personal-info-grid" indented>
|
||||
<div>
|
||||
<p>
|
||||
My primary interests are game programming and player interaction.
|
||||
I like learning about algorithms and design patterns.
|
||||
As well as about how to get players invested and excited.
|
||||
In my free time I like making games from scratch, or in custom engines.
|
||||
When it comes to third party engines I'm most experienced with the Unreal and
|
||||
Godot game engines. For personal projects I mainly work with SDL2, though sometimes I use SFML as well.
|
||||
</p>
|
||||
</div>
|
||||
<div class="personal-info-photo"></div>
|
||||
</div>
|
||||
|
||||
<h2 id="experience">Experience</h2>
|
||||
<div class="experience-grid" indented>
|
||||
<div>
|
||||
<h3>HKU (Utrecht University of the Arts)</h3>
|
||||
<p>Game Development Student</p>
|
||||
<p class="experience-grid-time">September 2023 - August 2027</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Galaxy Grove</h3>
|
||||
<p>C++ Intern</p>
|
||||
|
|
@ -124,12 +162,12 @@
|
|||
<div>
|
||||
<h3>Grafisch Lyceum Utrecht</h3>
|
||||
<p>Game Programming Student</p>
|
||||
<p class="experience-grid-time">September 2021 - Now</p>
|
||||
<p class="experience-grid-time">September 2021 - 2023</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Appalot</h3>
|
||||
<p>Junior API and automation developer</p>
|
||||
<p class="experience-grid-time">September 2021 - Now</p>
|
||||
<p class="experience-grid-time">September 2021 - 2023</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Appalot(internship)</h3>
|
||||
|
|
@ -142,33 +180,21 @@
|
|||
<p class="experience-grid-time">2016 - forever</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="natural languages">Natural Languages</h2>
|
||||
<div class="experience-grid" indented>
|
||||
<div>
|
||||
<h3>Dutch</h3>
|
||||
<p>Native Speaker</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>English</h3>
|
||||
<p>Fluent</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="languages">Formal Languages</h2>
|
||||
<div class="experience-grid" indented>
|
||||
<div>
|
||||
<h3>C++ | Advanced</h3>
|
||||
<p>
|
||||
<b>Frameworks:</b>
|
||||
std/stl, sfml, Unreal Engine
|
||||
Godot (GDExtension & Engine Modules),
|
||||
Dear ImGui, Unreal Engine, 0MQ
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>C | Advanced</h3>
|
||||
<p>
|
||||
<b>Frameworks:</b>
|
||||
SDL2
|
||||
SDL2, Clay
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -178,13 +204,6 @@
|
|||
.NET, Google Cloud Functions, Unity
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Rust | Advanced</h3>
|
||||
<p>
|
||||
<b>Frameworks:</b>
|
||||
godot-rs
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Javascript | Intermediate</h3>
|
||||
<p>
|
||||
|
|
@ -211,6 +230,17 @@
|
|||
</div>
|
||||
</s>
|
||||
</div>
|
||||
<h2 id="natural languages">Natural Languages</h2>
|
||||
<div class="experience-grid" indented>
|
||||
<div>
|
||||
<h3>Dutch</h3>
|
||||
<p>Native Speaker</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>English</h3>
|
||||
<p>Fluent</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
39
sites/saragerretsen.nl/projects/agoraphobia.html
Normal file
39
sites/saragerretsen.nl/projects/agoraphobia.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script type="text/javascript" src="../shared/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="../shared/style.css">
|
||||
|
||||
<div id="site-header">
|
||||
<script>$(function(){$("#site-header").load("../shared/header.html");});</script>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Agoraphobia</h1>
|
||||
<section class="project">
|
||||
<h2>Info</h2>
|
||||
<div indented>
|
||||
<p>Project Type: Godot C++ Solo Game</p>
|
||||
<p>Project Timeframe: Dec 2024 - Jan 2025</p>
|
||||
</div>
|
||||
<iframe frameborder="0" src="https://itch.io/embed/3964851?bg_color=222222&fg_color=eeeeee&border_color=363636" width="552" height="167"><a href="https://sg-dev.itch.io/agoraphobia">Agoraphobia by Sara</a></iframe>
|
||||
<a class="git-block" href="https://git.objectionable.solutions/Sara/trenches/src/branch/main/src" target="_blank">
|
||||
<div class="git-logo"></div>
|
||||
<h2>Sara/trenches.git</h2>
|
||||
</a>
|
||||
<h2>Product Overview</h2>
|
||||
<p>
|
||||
The concept was a horror-adjecent stressful shooter experience similar to the early resident evil games. Taking some inspiration from early Castlevania games.
|
||||
</p>
|
||||
<h2>Project Overview</h2>
|
||||
<p>
|
||||
My goal with this project was to measure my skills at solo game development. Doing all the work from graphics to sound and of course gameplay design and programming. The reason was so I can measure my abilities from start to finish, making a complete product (in this case a demo vertical slice) from scratch on my own.
|
||||
</p>
|
||||
<h2>Postmortem</h2>
|
||||
<p>
|
||||
The concept kind of sucked. As a proof of concept this project ended up soundly disproving my idea. The goal was to play with the limited tank controls of the early Resident Evil games. Trying to make a game that uses those mechanics in a more combat-focused game. The mechanics did not really have the desired effect. The intentional clunk in the controls only frustrated and the slower combat only bored. I'm proud of the result for being a complete product made from scratch solo. But that product is not well designed.
|
||||
</p>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -27,26 +27,6 @@
|
|||
src="https://www.youtube.com/embed/unTQRpplFGU?mute=1&loop=1&autoplay=1"
|
||||
class="embed" youtube
|
||||
></iframe>
|
||||
|
||||
<p>
|
||||
The repository for the boids simulation.
|
||||
</p>
|
||||
<a class="internal" target="_blank" href="https://git.saragerretsen.nl/Sara/boids-ecs">
|
||||
<div class="git-block">
|
||||
<div class="git-logo"></div>
|
||||
<h2>Sara/boids-ecs</h2>
|
||||
</div>
|
||||
</a>
|
||||
<p>
|
||||
The ecs library i wrote this for.
|
||||
</p>
|
||||
<a class="internal" target="_blank" href="https://git.saragerretsen.nl/Sara/easy-ecs">
|
||||
<div class="git-block">
|
||||
<div class="git-logo"></div>
|
||||
<h2>Sara/easy-ecs</h2>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<h2 id="product-overview-v2">Product Overview</h2>
|
||||
<p indented>
|
||||
My second implementation of a <a href="https://en.wikipedia.org/wiki/Boids">boids simulation</a>. This time written in C using a combination of SDL2 for rendering and a self-made ecs library for object management.
|
||||
|
|
|
|||
35
sites/saragerretsen.nl/projects/going.html
Normal file
35
sites/saragerretsen.nl/projects/going.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script type="text/javascript" src="../shared/jquery.min.js"></script>
|
||||
<link rel="stylesheet" href="../shared/style.css">
|
||||
|
||||
<div id="site-header">
|
||||
<script>$(function(){$("#site-header").load("../shared/header.html");});</script>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Going</h1>
|
||||
<section class="project">
|
||||
<h2>Info</h2>
|
||||
<div indented>
|
||||
<p>Project Type: Solo Godot Game (C++ Modules)</p>
|
||||
<p>Project Timeframe: Apr 2025 - Jun 2025</p>
|
||||
</div>
|
||||
<iframe frameborder="0" src="https://itch.io/embed/3650021?bg_color=222222&fg_color=eeeeee&border_color=363636" width="552" height="167"><a href="https://sg-dev.itch.io/keep-going">(Keep) Going by Sara</a></iframe>
|
||||
<a class="git-block" href="https://git.objectionable.solutions/Sara/going/src/branch/development/modules/going" target="_blank">
|
||||
<div class="git-logo"></div>
|
||||
<h2>Sara/keep-going</h2>
|
||||
</a>
|
||||
<h2>Product Overview</h2>
|
||||
<p>
|
||||
A running-platforming game about running and exploring forest. The goal was to translate the way I move while running through a forest into gameplay. With very "manual" actions and a focus on what the game calls a "split-step".
|
||||
</p>
|
||||
<h2>Project Overview</h2>
|
||||
<p>
|
||||
Originally intended to follow up on Agoraphobia, I ended up redesigning it from scratch after discovering that the parts of Agoraphobia that made it interesting were also fundamentally making it unsalvageable. With this also came a redesigning of the toolchain, from godot-cpp with GDExtension, to a godot engine module based approach. This made developing much easier, and meant that a released build only comes with two files (or even just one depending on export settings).
|
||||
</p>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Spirit of Science - Sara Gerretsen</title>
|
||||
<title>Spirit Signal - Sara Gerretsen</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Spirit of Science</h1>
|
||||
<h1>Spirit Signal</h1>
|
||||
<section class="project">
|
||||
<h2 class="inline">Info</h2>
|
||||
<div indented>
|
||||
|
|
|
|||
|
|
@ -6,17 +6,25 @@
|
|||
background-size: cover;
|
||||
background-position: center;
|
||||
text-align: left;
|
||||
--hovered-card-color: #FFF4;
|
||||
}
|
||||
|
||||
.project-card-role {
|
||||
color: #888F;
|
||||
font-weight: bold;
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
.project-highlighted {
|
||||
background-color: #ffc587;
|
||||
--foreground-color: #444;
|
||||
--hovered-card-color: #ffc587;
|
||||
--link-hover-color: #44CF;
|
||||
}
|
||||
|
||||
|
||||
.project-grid {
|
||||
display: grid;
|
||||
grid-gap: 50px 10px;
|
||||
grid-gap: 10px 10px;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
|
@ -34,14 +42,14 @@
|
|||
.project-grid > a {
|
||||
padding: 20px;
|
||||
border-radius: 7px;
|
||||
background: #FFF1;
|
||||
}
|
||||
|
||||
.project-grid > a:hover {
|
||||
border-width: 5px;
|
||||
background: #9993;
|
||||
padding-top: 25px;
|
||||
padding-bottom: 15px;
|
||||
color: #99FF;
|
||||
background: #FFF3;
|
||||
}
|
||||
|
||||
.project-grid > a:visited {
|
||||
|
|
@ -49,7 +57,7 @@
|
|||
}
|
||||
|
||||
.project-grid > a:active {
|
||||
background: #44F3;
|
||||
background: var(--hovered-card-color);
|
||||
padding-top: 30px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
|
@ -77,14 +85,23 @@
|
|||
|
||||
.project-card[tower-vr] {
|
||||
background-image: url('../assets/tower-vr-cover.jpg');
|
||||
background-position: 50% 100%
|
||||
background-position: 50% 100%;
|
||||
}
|
||||
|
||||
.project-card[station-to-station] {
|
||||
background-image: url('../assets/station-to-station-cover.jpg');
|
||||
background-position: 0 0
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.project-card[agoraphobia] {
|
||||
background-image: url('../assets/agoraphobia-cover.png');
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
.project-card[going] {
|
||||
background-image: url('../assets/going-cover.png');
|
||||
background-position: 50% 50%;
|
||||
}
|
||||
|
||||
.project-card > h2 {
|
||||
text-decoration: underline;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
:root {
|
||||
--foreground-color: #AAAF;
|
||||
--background-color: #111F;
|
||||
--link-hover-color: #BBFF;
|
||||
}
|
||||
html {
|
||||
font: 100% monospace, sans-serif;
|
||||
color: black;
|
||||
color: var(--foreground-color);
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -27,15 +33,16 @@ h2.inline {
|
|||
|
||||
h3 {
|
||||
margin-top: 50px;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
a.internal {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #BBFF;
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
|
||||
section {
|
||||
|
|
@ -81,15 +88,13 @@ div.info {
|
|||
display: grid;
|
||||
color: white;
|
||||
grid-template-columns: 125px auto;
|
||||
vertical-align: center;
|
||||
max-width: 660px;
|
||||
width: 94%;
|
||||
width: fit-content;
|
||||
margin-left: 0px;
|
||||
background-color: #445F;
|
||||
border-color: #111F;
|
||||
border-width: 10px;
|
||||
background-color: #181818;
|
||||
border: 1px solid #FFF3;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
padding-right: 50px
|
||||
}
|
||||
|
||||
.git-block > h2 {
|
||||
|
|
@ -99,7 +104,7 @@ div.info {
|
|||
|
||||
div.git-logo {
|
||||
background-color: #0000;
|
||||
background-image: url("../assets/blobcat_gitea.png");
|
||||
background-image: url("https://git.objectionable.solutions/assets/img/logo.svg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -116,7 +121,7 @@ div.git-logo {
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: 10px/i
|
||||
text-align: center; background-color: #0000;
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +158,7 @@ div.git-logo {
|
|||
|
||||
.experience-grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-columns: 50% 50%;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue