Update May 2024

Added new links, images, fixed margins, padding, flex
Added discord embed meta tags
fixed some things being selectable
This commit is contained in:
Zoey 2024-05-16 18:37:55 +02:00
parent 13e80cc46f
commit b22218d80f
15 changed files with 272 additions and 56 deletions

BIN
bun.lockb Executable file

Binary file not shown.

40
public/forgejologo.svg Normal file
View file

@ -0,0 +1,40 @@
<svg viewBox="0 0 212 212" xmlns="http://www.w3.org/2000/svg">
<metadata
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
>
<rdf:RDF>
<cc:Work rdf:about="https://codeberg.org/forgejo/meta/src/branch/readme/branding#logo">
<dc:title>Forgejo logo</dc:title>
<cc:creator rdf:resource="https://caesarschinas.com/"><cc:attributionName>Caesar Schinas</cc:attributionName></cc:creator>
<cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/" />
</cc:Work>
</rdf:RDF>
</metadata>
<style type="text/css">
circle {
fill: none;
stroke: #000;
stroke-width: 15;
}
path {
fill: none;
stroke: #000;
stroke-width: 25;
}
.orange {
stroke:#ff6600;
}
.red {
stroke:#d40000;
}
</style>
<g transform="translate(6,6)">
<path d="M58 168 v-98 a50 50 0 0 1 50-50 h20" class="orange" />
<path d="M58 168 v-30 a50 50 0 0 1 50-50 h20" class="red" />
<circle cx="142" cy="20" r="18" class="orange" />
<circle cx="142" cy="88" r="18" class="red" />
<circle cx="58" cy="180" r="18" class="red" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

85
public/graphitelogo.svg Normal file
View file

@ -0,0 +1,85 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M1935 6994 c-186 -39 -328 -137 -415 -287 -24 -39 -51 -84 -61 -99
-11 -15 -19 -29 -19 -31 0 -3 -39 -71 -86 -153 -47 -82 -160 -277 -251 -434
-90 -157 -169 -292 -174 -300 -5 -8 -55 -96 -112 -195 -113 -196 -393 -681
-408 -705 -5 -8 -41 -71 -80 -140 -40 -69 -85 -147 -101 -175 -73 -126 -100
-226 -97 -349 3 -109 33 -203 106 -329 69 -117 281 -485 310 -537 11 -19 111
-192 223 -385 111 -192 212 -366 222 -385 11 -19 37 -64 58 -100 21 -36 47
-81 58 -100 11 -19 59 -102 107 -185 48 -82 95 -163 104 -180 9 -16 49 -86 89
-155 40 -69 78 -134 85 -145 77 -134 155 -215 259 -268 145 -74 44 -69 1583
-69 1525 0 1434 -4 1570 63 l62 31 304 -217 c167 -120 360 -259 429 -308 69
-50 148 -106 175 -125 48 -34 130 -93 150 -110 6 -4 21 -16 35 -26 17 -12 19
-16 6 -12 -31 11 -209 55 -246 61 -19 3 -42 8 -50 10 -28 8 -184 26 -285 33
-203 13 -1356 5 -1760 -13 -44 -2 -161 -6 -260 -10 -99 -4 -209 -8 -245 -10
-36 -2 -121 -6 -190 -10 -191 -9 -276 -14 -380 -20 -90 -5 -125 -8 -315 -20
-44 -3 -114 -8 -155 -11 -198 -13 -326 -22 -405 -29 -27 -2 -81 -7 -120 -10
-38 -3 -88 -8 -110 -10 -22 -3 -62 -7 -90 -10 -27 -3 -66 -7 -85 -10 -19 -3
-55 -7 -80 -10 -25 -4 -64 -11 -88 -16 -23 -5 -59 -12 -80 -15 -74 -11 -307
-76 -381 -106 -42 -17 -91 -42 -109 -55 l-33 -25 38 -28 c47 -35 138 -66 218
-75 33 -4 71 -9 85 -11 27 -5 291 -11 860 -19 462 -7 617 -12 1355 -40 66 -3
181 -7 255 -10 74 -3 178 -7 230 -10 52 -3 142 -7 200 -10 232 -12 407 -28
575 -50 17 -2 56 -7 88 -10 32 -4 111 -12 175 -19 104 -12 493 -13 602 -2 19
1 78 6 130 11 52 4 102 9 112 10 9 2 48 7 85 10 37 4 75 8 83 10 8 2 35 7 60
10 84 11 172 25 205 31 11 2 34 7 50 10 141 25 376 82 477 115 204 67 307 135
359 237 20 40 24 61 24 142 0 83 -7 178 -20 301 -3 20 -7 65 -10 100 -3 35 -7
84 -10 109 -2 25 -7 73 -9 108 -12 137 -17 188 -21 212 -2 14 -6 61 -10 105
-5 74 -8 102 -20 225 -7 68 -15 158 -21 225 -3 33 -7 80 -10 105 -2 25 -6 71
-9 102 -2 31 -6 82 -9 112 -3 31 -8 81 -11 111 -3 30 -7 79 -10 108 -3 28 -7
79 -10 112 -3 33 -7 84 -10 113 -3 28 -7 76 -10 105 -2 28 -7 75 -9 102 -3 28
-8 82 -11 120 -3 39 -8 86 -10 105 -2 19 -7 67 -10 105 -3 39 -8 90 -10 115
-3 25 -7 74 -10 110 -3 36 -7 85 -10 110 -5 48 -11 105 -20 210 -3 36 -8 85
-10 110 -3 25 -7 74 -10 110 -5 69 -13 141 -21 202 -7 53 -46 144 -110 255
-32 54 -66 114 -77 133 -10 19 -61 107 -112 195 -51 88 -102 177 -114 199 -12
21 -78 135 -147 255 -68 119 -130 225 -136 236 -6 11 -74 127 -151 259 -76
131 -148 255 -159 275 -33 60 -288 501 -335 579 -23 40 -43 75 -43 78 0 10
-63 88 -100 122 -78 74 -174 125 -275 147 -48 11 -341 13 -1440 13 -759 0
-1389 -2 -1400 -4z m2666 -602 c87 -43 85 -39 309 -427 51 -88 104 -180 118
-205 14 -25 33 -58 43 -75 10 -16 32 -55 49 -85 17 -30 40 -71 51 -90 12 -19
134 -229 271 -467 l249 -432 -33 -37 c-18 -20 -42 -47 -53 -58 -58 -60 -211
-273 -280 -390 -10 -17 -56 -26 -205 -41 -36 -4 -78 -8 -95 -10 -113 -12 -153
-17 -175 -20 -14 -2 -56 -7 -95 -11 -38 -4 -81 -8 -95 -9 -14 -2 -34 -3 -45
-4 -15 -1 -47 -37 -105 -117 -47 -64 -90 -122 -95 -128 -6 -6 -22 -27 -35 -46
-13 -19 -68 -94 -121 -166 l-97 -131 -69 -2 c-145 -3 -301 -21 -457 -52 -94
-19 -99 -19 -112 -2 -7 10 -14 21 -14 25 0 3 -21 42 -46 85 -26 43 -57 96 -70
119 -13 23 -105 182 -205 355 -100 173 -192 332 -204 354 -13 22 -105 182
-205 355 -101 173 -194 335 -208 359 -47 84 -82 146 -92 161 -8 13 -160 278
-185 322 -5 10 -80 138 -165 285 -85 147 -167 288 -181 315 -14 26 -31 54 -38
62 -24 29 65 158 133 193 76 40 73 40 1310 39 l1201 -1 46 -23z m-2956 -912
c43 -74 86 -151 97 -170 11 -19 93 -161 182 -315 239 -412 431 -745 453 -785
11 -19 76 -132 145 -250 69 -118 137 -236 151 -262 15 -26 82 -143 150 -260
68 -117 195 -337 282 -488 87 -151 176 -303 198 -338 42 -66 56 -77 487 -385
74 -53 215 -154 313 -224 l179 -128 -1071 -3 c-1052 -2 -1071 -2 -1123 18 -59
23 -113 68 -144 120 -115 194 -164 279 -164 284 0 3 -15 29 -33 58 -19 29 -47
78 -64 108 -17 30 -54 96 -83 145 -29 50 -61 106 -72 125 -45 78 -322 559
-353 610 -18 30 -103 179 -190 330 -87 151 -170 295 -185 320 -48 81 -58 177
-26 253 13 32 221 398 353 622 7 11 38 65 70 120 32 55 64 112 73 126 8 14 47
81 85 148 39 67 75 130 80 139 6 9 37 63 69 120 32 56 60 101 61 100 1 -2 37
-64 80 -138z m4304 -1486 c1 -32 4 -61 6 -64 2 -3 7 -48 10 -100 3 -52 8 -97
10 -100 2 -3 6 -45 10 -95 4 -49 8 -101 10 -115 4 -26 8 -67 25 -240 17 -173
21 -214 25 -240 2 -14 6 -65 10 -115 3 -49 8 -97 10 -105 2 -8 7 -51 10 -94 4
-43 8 -86 10 -95 1 -9 6 -54 10 -101 4 -47 8 -98 10 -115 2 -16 7 -64 11 -105
3 -41 7 -82 9 -90 2 -8 6 -53 10 -100 4 -47 9 -88 11 -92 2 -3 2 -12 -1 -20
-4 -10 -20 -13 -53 -12 -71 4 -179 -22 -259 -61 -79 -39 -189 -139 -223 -203
-37 -71 -28 -72 -155 19 -64 46 -126 91 -138 99 -12 8 -83 59 -157 112 -74 53
-174 125 -223 160 -190 137 -212 153 -215 160 -2 5 -7 8 -12 8 -7 0 -188 126
-300 210 -14 10 -106 76 -205 147 -290 208 -315 226 -312 229 7 7 227 42 312
49 39 4 110 8 159 9 80 3 91 6 107 27 10 13 65 87 121 164 56 77 106 145 110
150 5 6 49 64 97 131 49 66 95 121 102 121 24 0 167 14 186 17 10 2 50 7 88
11 39 3 84 8 100 10 17 3 50 7 75 9 25 2 93 10 151 17 l106 12 38 64 c65 110
281 394 296 387 3 -2 7 -29 8 -60z"/>
<path d="M1314 4324 c-43 -14 -93 -67 -96 -99 -5 -66 5 -92 78 -218 78 -134
88 -152 153 -265 20 -35 41 -71 46 -80 13 -21 67 -116 93 -162 11 -19 83 -145
161 -278 77 -134 141 -248 141 -253 0 -5 5 -9 10 -9 6 0 10 -4 10 -10 0 -5 27
-55 60 -111 33 -55 60 -102 60 -104 0 -2 27 -49 60 -104 33 -56 60 -104 60
-107 0 -2 8 -17 18 -32 11 -15 40 -63 67 -108 50 -85 77 -108 136 -118 49 -7
116 28 141 74 37 68 11 140 -142 390 -28 47 -807 1395 -842 1460 -43 78 -66
108 -91 122 -40 21 -84 26 -123 12z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.8 KiB

View file

@ -4,40 +4,22 @@
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/bunnie48px.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta content="#763568" data-react-helmet="true" name="theme-color" />
<meta content="Zoey's Bits" property="og:title" />
<meta content="Somebunny's place." property="og:description" />
<meta content="https://bits.li-yo.ts.net/" property="og:url" />
<meta content="https://bits.li-yo.ts.net/bunnie96px.png" property="og:image" />
<meta
name="description"
content="For all your bunny needs."
content="Somebunny's place."
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/bunnie48px.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Zoey's Bits</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

24
public/jellyfinlogo.svg Normal file
View file

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- ***** BEGIN LICENSE BLOCK *****
- Part of the Jellyfin project (https://jellyfin.media)
-
- All copyright belongs to the Jellyfin contributors; a full list can
- be found in the file CONTRIBUTORS.md
-
- This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License.
- To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/.
- ***** END LICENSE BLOCK ***** -->
<svg version="1.1" id="icon-transparent" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
<defs>
<linearGradient id="linear-gradient" gradientUnits="userSpaceOnUse" x1="110.25" y1="213.3" x2="496.14" y2="436.09">
<stop offset="0" style="stop-color:#AA5CC3"/>
<stop offset="1" style="stop-color:#00A4DC"/>
</linearGradient>
</defs>
<title>icon-transparent</title>
<g id="icon-transparent">
<path id="inner-shape" d="M256,201.6c-20.4,0-86.2,119.3-76.2,139.4s142.5,19.9,152.4,0S276.5,201.6,256,201.6z" fill="url(#linear-gradient)"/>
<path id="outer-shape" d="M256,23.3c-61.6,0-259.8,359.4-229.6,420.1s429.3,60,459.2,0S317.6,23.3,256,23.3z
M406.5,390.8c-19.6,39.3-281.1,39.8-300.9,0s110.1-275.3,150.4-275.3S426.1,351.4,406.5,390.8z" fill="url(#linear-gradient)"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
public/memoslogo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 349 KiB

BIN
public/owncastlogo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

BIN
public/photonlogo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

View file

@ -1,11 +0,0 @@
godot 4.2.1-1,
blender 17:4.0.2-8,
inkscape 1.3.2-3,
krita 5.2.2-2,
gimp 2.10.36-3
please GOD LET ME FIX THIS BS

View file

@ -15,28 +15,90 @@
}
.BunnyLogo,
.GiteaLogo,
.NextcloudLogo {
.MemosLogo,
.OwncastLogo,
.PhotonLogo {
width: 115px;
height: 115px;
user-select: none;
pointer-events: none;
object-position: center;
}
.LogoBoxes {
width: 100%;
height: auto;
.PubP {
color: #111111;
font-size: larger;
user-select: none;
pointer-events: none;
object-position: center;
}
.LogoBoxesPub {
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}
.LogoBoxes {
.LogoBoxesPub {
transition: transform 0.25s ease;
}
.LogoBoxes:hover {
.LogoBoxesPub:hover {
transform: scale(1.1) /*rotate(360deg)*/;
animation: LogoHoverAnim 0.5s ease-in-out;
}
.TextButt {
user-select: none;
object-position: center;
}
.Teardrop {
user-select: none;
pointer-events: none;
object-position: center;
}
.ForgejoLogo,
.JellyfinLogo,
.GraphiteLogo {
height: 76px;
width: 76px;
user-select: none;
pointer-events: none;
object-position: center;
}
.TailP {
color: #111111;
user-select: none;
pointer-events: none;
object-position: center;
}
.SubHeaders {
user-select: none;
pointer-events: none;
object-position: center;
}
.LogoBoxesTail {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.LogoBoxesTail {
transition: transform 0.25s ease;
}
.LogoBoxesTail:hover {
transform: scale(1.1) rotate(360deg);
animation: LogoHoverAnim 1s ease-in-out;
animation: LogoHoverSpinAnim 1s ease-in-out;
}
.VersionBox {
@ -101,6 +163,17 @@
}
@keyframes LogoHoverAnim {
from {
/*transform: rotate(0deg) scale(1);*/
transform: scale(1);
}
to {
/*transform: rotate(360deg) scale(1.1);*/
transform: scale(1.1);
}
}
@keyframes LogoHoverSpinAnim {
from {
transform: rotate(0deg) scale(1);
}
@ -109,6 +182,7 @@
}
}
@keyframes Welcome-spin {
from {
transform: rotate(-2deg);

View file

@ -12,7 +12,7 @@ import Home from './Home';
function App() {
return (
<div className="body">
<div className="body">
<Home />
<TopBar />
<BottomBar />

View file

@ -21,15 +21,37 @@ function Home() {
<div className="flex w-screen h-screen overflow-hidden MainBG">
<div className="flex flex-col mt-20 items-center justify-center text-secondary top-14 bottom-8 w-screen overflow-hidden">
<p className="text-4xl mb-16 shadow-2xl WelcomeText">Welcome, fellow traveller!</p>
<div className="flex justify-center align-middle">
<a href="https://librebun.ooguy.com/nc/" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 LogoBoxes">
<img className="NextcloudLogo" draggable="false" src={process.env.PUBLIC_URL + "/Nextcloud_Logo.svg"} alt="Nextcloud"></img>
<p className="text-2xl mb-5 shadow-2xl SubHeaders">Public Services.</p>
<div className="flex justify-center align-middle h-auto">
<a href="https://memos.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 flex-col LogoBoxesPub">
<img className="MemosLogo" draggable="false" src={process.env.PUBLIC_URL + "/memoslogo.png"} alt="Memos"></img>
<p className="PubP">Memos</p>
</a>
<a href="https://librebun.ooguy.com/gt/" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 LogoBoxes">
<img className="mx-0 GiteaLogo" draggable="false" src={process.env.PUBLIC_URL + "/Gitea_Logo.svg"} alt="Gitea"></img>
<a href="https://lemmy.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 flex-col LogoBoxesPub">
<img className="PhotonLogo" draggable="false" src={process.env.PUBLIC_URL + "/photonlogo.png"} alt="Lemmy"></img>
<p className="PubP">Lemmy</p>
</a>
<a href="https://cast.li-yo.ts.net/" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 flex-col LogoBoxesPub">
<img className="OwncastLogo" draggable="false" src={process.env.PUBLIC_URL + "/owncastlogo.png"} alt="Owncast"></img>
<p className="PubP">Owncast</p>
</a>
</div>
<div className="bg-primary rounded-lg shadow-lg w-96 h-60 mt-20 overflow-hidden VersionBox">
<p className="text-2xl mt-5 mb-5 shadow-2xl SubHeaders">Tailscale</p>
<div className="flex justify-center align-middle mb-20">
<a href="http://daughter:4020/" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 flex-col LogoBoxesTail">
<img className="ForgejoLogo" draggable="false" src={process.env.PUBLIC_URL + "/forgejologo.svg"} alt="Forgejo"></img>
<p className="TailP">Forgejo</p>
</a>
<a href="http://daughter:4008" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 flex-col LogoBoxesTail">
<img className="JellyfinLogo" draggable="false" src={process.env.PUBLIC_URL + "/jellyfinlogo.svg"} alt="Jellyfin"></img>
<p className="TailP">Jellyfin</p>
</a>
<a href="http://daughter:4033" target="_blank" rel="noopener noreferrer" className="bg-white shadow-md outline outline-secondary rounded-2xl p-1 mx-2 flex-col LogoBoxesTail">
<img className="GraphiteLogo" draggable="false" src={process.env.PUBLIC_URL + "/graphitelogo.svg"} alt="Graphite"></img>
<p className="TailP">Graphite</p>
</a>
</div>
<div className="bg-primary rounded-lg shadow-lg w-96 h-60 mt-0 overflow-hidden VersionBox">
<div className="flex">
<div className="flex-row mt-1">
<p className="ml-2 mr-2">_&gt;# </p>

View file

@ -16,15 +16,15 @@ const TopBar = () => {
</div>
</div>
<div className="flex items-center">
<div className="flex items-center TextButt">
<div className="TopButton">
<p className="text-lg mx-4">Projects</p>
<p className="text-lg mx-4 TextButt">Projects</p>
</div>
<div className="w-px bg-black h-8"></div>
<div className="w-px bg-black h-8 TextButt"></div>
<div className="TopButton">
<p className="text-lg mx-4">Rants</p>
<p className="text-lg mx-4 TextButt">Rants</p>
</div>
<div className="w-px bg-black h-8"></div>
<div className="w-px bg-black h-8 TextButt"></div>
<div className="TopButton">
<p className="text-lg mx-4">About</p>
</div>