-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
152 lines (152 loc) · 12.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<title>the fernsite!</title>
<meta charset="utf-8">
<meta name="description" content="hey hi! it's the website of fern!">
<meta property="og:description" content="hey hi! it's the website of fern!">
<meta property="og:title" content="the fernsite!">
<meta property="og:site_name" content="the fernsite!">
<meta property="og:type" content="website">
<link rel="stylesheet" href="style.min.css">
<script src="script.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="container">
<nav id="navbox">
<ul>
<li><a href="javascript:showpage('home')" class="url pagelink">Home</a></li>
<li><a href="javascript:showpage('socials')" class="url pagelink">Socials</a></li>
<li><a href="javascript:showpage('aboutme')" class="url pagelink">About Me</a></li>
<li><a href="javascript:showpage('stuffimade')" class="url pagelink">Stuff I've Made</a></li>
</ul>
</nav>
<div id="main">
<div id="inner">
<div id="nameandimage">
<div id="wrapper">
<img src="/media/banner.png" class="banner" alt="fern's profile picture" width="1920" height="1080">
<h1 id="username">fern!</h1>
</div>
</div>
<hr id="seperatortop">
<div id="home">
<p>Hi! I'm Fern (sometimes ffernn) and this is a lil site I put together to kinda collate a bunch of info about me and what I've done!</p>
<p>There's a navbar to the left to get around and a theme switcher at the bottom for those who prefer light mode (or just want to see the cool colour change)</p>
<p>Some info about this site:</p>
<ul id="siteinfo">
<li>It's pretty tiny, weighing in at just under 200kb</li>
<li>It gets a perfect Google Lighthouse score (well, almost. I get marked down for the layout shift due to hiding and showing content sections)</li>
<li>And it took me probably 3 weeks on and off to make</li>
<li>Oh and I think some regulation says that I need to let you know I use 1 cookie to store what theme you prefer for next time :></li>
</ul>
</div>
<div id="socials">
<div class="list-button">
<a href="https://github.com/ffernn-dev" class="button-href" id="github-button">
<div class="icon-holder">
<svg viewBox="0 0 98 96" class="button-logo"">
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#f7fff7"/>
</svg>
</div>
<span class="label">Github</span></a>
</div>
<div class="list-button">
<a href="https://www.youtube.com/channel/UCML242reim253tInH3ClhOA" class="button-href" id="youtube-button">
<div class="icon-holder">
<svg viewBox="0 0 121.485 85.039" class="button-logo">
<path class="svg" xmlns="https://www.w3.org/2000/svg" d="M118.9,13.3L118.9,13.3c-1.4-5.2-5.5-9.3-10.7-10.7C98.7,0,60.7,0,60.7,0s-38,0-47.5,2.5C8,3.9,3.9,8,2.5,13.3 C0,22.8,0,42.5,0,42.5s0,19.8,2.5,29.2C3.9,77,8,81.1,13.3,82.5C22.8,85,60.7,85,60.7,85s38,0,47.5-2.5c5.2-1.4,9.3-5.5,10.7-10.7 c2.5-9.5,2.5-29.2,2.5-29.2S121.5,22.8,118.9,13.3z M48.6,60.7V24.3l31.6,18.2L48.6,60.7z" fill="#f7fff7"/>
</svg>
</div>
<span class="label">Youtube</span></a>
</div>
<div class="list-button">
<a href="https://www.tumblr.com/ffernn-things" class="button-href" id="twitter-button">
<div class="icon-holder">
<svg viewBox="0 0 90.2 159.3" class="button-logo">
<path d="M-633.1-147.5c-24 0-41.8-12.3-41.8-41.8v-47.2h-21.8v-25.6c24-6.2 34-26.8 35.1-44.7h24.9v40.6h29v29.7h-29v41.1c0 12.3 6.2 16.6 16.1 16.6h14.1v31.3h-26.6zm89.1 1.4c13.6 0 29.3-5.9 37.8-16.4v15h44.8V-173h-11.4v-93.3H-527v25.9h15.4v44.9c0 3.6-3 18.7-23.3 18.7-13 0-15.4-7.8-15.4-17.7v-71.8h-39.9v73.4c.1 18.3 8.4 46.8 46.2 46.8zm96.9-1.4h65.6V-173h-13.4v-44.4c0-6.5 5.5-19.7 22.4-19.7 13.6 0 16.4 8.3 16.4 18.1v46h-13.2v25.5h65.1V-173H-318v-44.4c0-6.5 5-19.7 21.9-19.7 13.7 0 17.1 8.3 17.1 18.1v46h-13v25.5h64.8V-173h-13.3v-41.5c0-24.4-9.2-53.2-45.6-53.2-18 0-32.7 8.5-38.9 19-7.8-11.9-19.7-19-37.4-19-14.1 0-29.5 6-37.8 17.4v-16h-49.2v25.9h15.9v67.4H-447v25.5zm303 1.4c33.2 0 51-24.9 51-62.2 0-35.8-16.6-59.3-50.3-59.3-11.9 0-23.7 4.5-30.9 10v-49.2h-54.8v25.7h15.9v133.6h36.5V-158a50 50 0 0 0 32.6 11.9zm-8.3-29c-11.6 0-23-7.4-23-30.6 0-28 13.5-33 22.8-33 10.8 0 20.4 8.8 20.4 30.5-.1 31.4-14.1 32.4-20.2 33.1zm66.5 27.6h66V-173H-34v-133.9h-54.4v25.7h15.9V-173H-86v25.5zm80.4 0h64.9V-173H46.1v-33.2c0-22.6 15.9-27.5 28-27.5h16.1v-34h-13c-14.7 0-28.3 7.1-34.4 18.5v-17.2H-6.7v25.9H7.6v67.4H-5.5v25.6zm69.1 306.8c-24 0-41.8-12.3-41.8-41.8V70.3H0V44.7C24 38.5 34 17.9 35.1 0H60v40.6h29v29.7H60v41.1c0 12.3 6.2 16.6 16.1 16.6h14.1v31.3H63.6zm-354.4-158c-43.4 0-78.6 35.1-78.6 78.3s35.1 78.5 78.6 78.5c43.2 0 78.3-35.3 78.3-78.5 0-43.4-35.1-78.3-78.3-78.3z" fill="#f7fff7"/>
</svg>
</div>
<span class="label">Tumblr</span></a>
</div>
<div class="list-button">
<a href="https://www.twitch.tv/ffernnlive" class="button-href" id="twitch-button">
<div class="icon-holder">
<svg viewBox="0 0 2400 2800" class="button-logo">
<path class="svg" d="M500 0L0 500v1800h600v500l500-500h400l900-900V0H500zm1700 1300l-400 400h-400l-350 350v-350H600V200h1600v1100zm-500-750h200v600h-200zm-550 0h200v600h-200z" fill="#f7fff7"/>
</svg>
</div>
<span class="label">Twitch</span></a>
</div>
</div>
<div id="aboutme">
<p>Getting up close and personal 😳</p>
<h2>The basics</h2>
<p>I'm <span id="age"></span> years old and I was born and live in Australia. I love making things! I do a bit of webdev, I really enjoy gamedev, I try to make music sometimes and on occasion I even make physical things :O. I've also started to do a lot of 3D archviz and VFX stuff which I'm really enjoying</p>
<h2>Pronouns?</h2>
<p>Quick answer: he/him or she/her</p>
<p>Long answer: I dunno how I came to this conclusion but I don't mind which pronouns people refer to me with. Basically just use whichever ones you want lol. Obviously that won't work for people who don't know me too well, so if you're not sure just use he/him. For more information check out my <a href="https://en.pronouns.page/@hihi.fernguy" class="url inlineurl">pronouns.page</a>.</p>
<h2>Gender Identity</h2>
<p>Right. So I'm genderfluid, which means my gender isn't fixed. Sometimes I lean more towards male, sometimes female, sometimes both or neither. <a href="https://www.webmd.com/sex/what-is-fluid" class="url inlineurl">WebMD has an alright article</a> that explains things a bit better than I can, but then again it's not super complicated and as I said, I don't mind how you see my gender or how you refer to me :></p>
</div>
<div id="stuffimade">
<h2>Games!</h2>
<p>(All of these can be downloaded on my <a href="https://ffernn.itch.io" class="url inlineurl">itch page</a>)</p>
<div class="itchbox">
<img class="itchimage" alt="Procrastination Simulator Banner Image" src="/media/itch_proc_sim.png" width="315" height="250"/>
<h2>Procrastination Simulator</h2>
<p>A game about procrastination made for LD 50</p>
<a class="itchbutton" href="https://ffernn.itch.io/procrastination-simulator">Play now</a>
</div>
<div class="itchbox">
<img class="itchimage" alt="IDIAPIG Banner Image" src="/media/itch_unstable.png" width="315" height="250"/>
<h2>Unstable (adj.)</h2>
<p>A short game for Ludum Dare 49 about words</p>
<a class="itchbutton" href="https://ffernn.itch.io/unstable-adj">Play now</a>
</div>
<div class="itchbox">
<img class="itchimage" alt="IDIAPIG Banner Image" src="/media/itch_bongocat.png" width="315" height="250"/>
<h2>Bongo Cat 3D</h2>
<p>A cute 3D bongo simulator made as a secret santa gift</p>
<a class="itchbutton" href="https://ffernn.itch.io/bongo-cat-3d">Play now</a>
</div>
<h2>Web thingies</h2>
<h3><a href="https://ffernn-dev.github.io/" class="url inlineurl">This website! (does that count? idk).</a></h4>
<p>The goal of this site was to be a kind of portfolio for stuff I do, and also I just wanted to make a website</p>
<p>I somehow got an idea in my head that I wanted it to be as small as possible and so I sacrificed a whole lot of maintanability to make it all in one page. I got a lot of help from my friends so thx for that :)</p>
<h3><a href="https://app.chargd.social" class="url inlineurl">Chargd</a></h4>
<img class="banner" alt="The Chargd website main page." src="/media/chargd.png">
<p><strong>|| UPDATE OCT 2023: this isn't actively being worked on for the forseeable future sorry ||</strong> I'm working on this with <a href="https://bucketfish.me" class="url inlineurl">my friend Bucketfish</a>, the plan is for it to be a social media where the 'posts' are only when you charge or unplug your phone. In some small testing it's quite fun and it becomes a tiny little blog e.g. "Just got home from school 😮💨" or "oh no forgot to plug in my phone last night!" There's a lot of work to go, but I hope it comes to fuition.</p>
<h3><a href="https://ffernn-dev.github.io/SaveCodr/" class="url inlineurl">SaveCodr</a></h4>
<p>A VERY work in progress save code generator for some games. At the moment it only works for <a href="https://kodiqi.itch.io/idle-breakout" class="url inlineurl">Idle Breakout</a></p>
<p>Again, got a couple things WIP that I hope to put here, I'll keep this page updated.</p>
<h3><p>Unnamed music social app</a></h4>
<p>I am currenly working with a team as part of the Sydney Uni Computer Science High School Fellowship Program on a social app that allows users to find new music and people using visual maps of how they and others interact with songs and musicians.</p>
<p>It's being developed with NodeJS, HTMX, PostgreSQL, and TailwindCSS, and will hopefully be finished by the end of 2023.</p>
<h2>♫ Music ♫</h2>
<h3><a href="https://www.youtube.com/watch?v=dlqc2lCFK4U" class="url inlineurl">The synth, Hector</a></h4>
<p>A funky song I made for a music class once, the name is just the first thing that popped into my head. (No, I don't know anyone called Hector and no, it's not a reference)</p>
<h3><a href="https://www.youtube.com/watch?v=KQAerXb0C_8" class="url inlineurl">Fern's panpipes</a></h4>
<p>A tiny tune I made using only kids' instruments. I have a <a href="https://www.youtube.com/watch?v=a-hTWMLpbbQ" class="url inlineurl">"making of"</a> video on my channel</p>
<h3><a href="https://www.youtube.com/watch?v=MHno-3wnqrY" class="url inlineurl">aaaaaa - Island Song</a></h4>
<p>A cover I arranged and mixed of Island Song from Adventure Time with some friends</p>
<p>Wow there's not much here. I plan to fill this list some more, but I'm very bad at finishing projects so who knows :/</p>
</div>
<hr id="seperatorbottom">
<div id="footer">
<div id="bucket-webring">
<span id="left">⥼ <a href="https://webring.bucketfish.me/redirect.html?to=prev&name=Fern" id="prev" class="url">prev</a></span>
<span id="mid"> 🏳️🌈 <a href="https://webring.bucketfish.me" id="header" class="url">bucket webring</a> 🏳️🌈 </span>
<span id="right"><a href="https://webring.bucketfish.me/redirect.html?to=next&name=Fern" id="next" class="url">next</a> ⥽</span>
</div>
<p id="footertext">© Copyright 2023 Fern</p>
</div>
</div>
</div>
<svg viewBox="0 0 100 100" class="themeswitch" onclick="switchtheme()">
<path class="svg" d="M0,50A50,50,0,1,0,50,0,50.0567,50.0567,0,0,0,0,50ZM50,8.8261V91.1739A41.1739,41.1739,0,0,1,50,8.8261Z" fill="#f7fff7"/>
</svg>
</div>
</body>
</html>