limepotato/limepot-xyz
1
0
Fork 0
Code Issues 3 Pull requests Activity

redesign #5

Merged
limepotato merged 9 commits from redesign into main 2024-06-25 19:00:32 -06:00
Conversation 0 Commits 9 Files changed 13 +619 -224
13 changed files with 619 additions and 224 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/assets/sounds/ambience/383506__klankbeeld__pinewood-in-memoriam-febr-05-nl-giersbergen-33db-170215_1085.flac Normal file
View file

Binary file not shown.

159
public/css/classes.css
View file

@ -31,6 +31,11 @@
padding-left: 10px;
}
.navbar .navbar-menu {
flex-grow: initial;
flex-shrink: initial;
}
.astro-a {
position: absolute;
top: -32px;
@ -86,4 +91,158 @@
-webkit-text-fill-color: transparent;
background-size: 400%;
background-position: 0%;
}
.astro-a {
position: absolute;
top: -32px;
left: 50%;
transform: translatex(-50%);
width: 220px;
height: auto;
z-index: -1;
}
.text-gradient {
background-image: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400%;
background-position: 0%;
}
.instructions {
margin-bottom: 2rem;
border: 1px solid rgba(var(--accent-light), 25%);
background: linear-gradient(rgba(var(--accent-dark), 66%),
rgba(var(--accent-dark), 33%));
padding: 1.5rem;
border-radius: 8px;
}
.instructions code {
font-size: 0.8em;
font-weight: bold;
background: rgba(var(--accent-light), 12%);
color: rgb(var(--accent-light));
border-radius: 4px;
padding: 0.3em 0.4em;
}
.instructions strong {
color: rgb(var(--accent-light));
}
.link-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
gap: 2rem;
padding: 0;
}
.custom-btn {
width: 130px;
height: 40px;
color: #4c4f69;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
7px 7px 20px 0px rgba(0, 0, 0, .1),
4px 4px 5px 0px rgba(0, 0, 0, .1);
outline: none;
}
/* 8 */
.btn-1 {
background-color: #c6d0f5;
background-image: linear-gradient(315deg, #c6d0f5 0%, #fab387 74%);
line-height: 42px;
padding: 0;
border: none;
}
.btn-1 span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.btn-1:before,
.btn-1:after {
position: absolute;
content: "";
right: 0;
bottom: 0;
background: #fab387;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn-1:before {
height: 0%;
width: 2px;
}
.btn-1:after {
width: 0%;
height: 2px;
}
.btn-1:hover:before {
height: 100%;
}
.btn-1:hover:after {
width: 100%;
}
.btn-1:hover {
background: transparent;
}
.btn-1 span:hover {
color: #fab387;
}
.btn-1 span:before,
.btn-1 span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: #fab387;
/*box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
transition: all 0.3s ease;
}
.btn-1 span:before {
width: 2px;
height: 0%;
}
.btn-1 span:after {
height: 2px;
width: 0%;
}
.btn-1 span:hover:before {
height: 100%;
}
.btn-1 span:hover:after {
width: 100%;
}

28
public/css/mystyle.css
View file

@ -15,6 +15,34 @@
font-family: system-ui, sans-serif;
}
html {
font-family: system-ui, sans-serif;
background: #13151a;
background-size: 224px;
}
main {
margin: auto;
padding: 1rem;
width: 800px;
max-width: calc(100% - 2rem);
color: white;
font-size: 20px;
line-height: 1.6;
}
audio {
width: 100%;
}
h1 {
font-size: 4rem;
font-weight: 700;
line-height: 1;
text-align: center;
margin-bottom: 1em;
}
a:link {
color: #89b4fa
}

196
public/scripts/cursor.js Normal file
View file

@ -0,0 +1,196 @@
// <![CDATA[
var colour="#f5e0dc"; // in addition to "random" can be set to any valid colour eg "#f0f" or "red"
var sparkles=300;
/****************************
* Tinkerbell Magic Sparkle *
*(c)2005-13 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
rats.style.zIndex="999";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
rats.style.zIndex="999";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (Math.abs(x-ox)>1 || Math.abs(y-oy)>1) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y+1)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].childNodes[0].style.backgroundColor=star[c].childNodes[1].style.backgroundColor=(colour=="random")?newColour():colour;
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
starx[i]+=(i%5-2)/5;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
tiny[i].style.backgroundColor=star[i].childNodes[0].style.backgroundColor;
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
tinyx[i]+=(i%5-2)/5;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
if (e) {
y=e.pageY;
x=e.pageX;
}
else {
set_scroll();
y=event.y+sdown;
x=event.x+sleft;
}
}
window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)=='number') {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
var sw_min=999999;
var sh_min=999999;
if (document.documentElement && document.documentElement.clientWidth) {
if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
}
if (typeof(self.innerWidth)=='number' && self.innerWidth) {
if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
}
if (document.body.clientWidth) {
if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
}
if (sw_min==999999 || sh_min==999999) {
sw_min=800;
sh_min=600;
}
swide=sw_min;
shigh=sh_min;
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
return (div);
}
function newColour() {
var c=new Array();
c[0]=255;
c[1]=Math.floor(Math.random()*256);
c[2]=Math.floor(Math.random()*(256-c[1]/2));
c.sort(function(){return (0.5 - Math.random());});
return ("rgb("+c[0]+", "+c[1]+", "+c[2]+")");
}
// ]]>

7
public/scripts/fuckchrome.js Normal file
View file

@ -0,0 +1,7 @@
let chromium = /Chrome|Chromium|OPR|Opera|Edge|UC|QQ|Brave/.test(
navigator.userAgent
);
let disclaimer = `<div class="web-disclaimer">`;
if (chromium)
window.location.replace("/nochrome");

112
public/scripts/rain.js Normal file
View file

@ -0,0 +1,112 @@
// <![CDATA[
var speed=33; // lower number for faster
var drops=100; // number of 'drops'
var colour="#a6e3a1"; // colour of drops (generally grey!)
/***************************\
* Rainy Afternoon Effect *
*(c)2011-13 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var flks=new Array();
var flkx=new Array();
var flky=new Array();
var fldy=new Array();
var swide, shigh, boddie;
var ie_version=(navigator.appVersion.indexOf("MSIE")!=-1)?parseFloat(navigator.appVersion.split("MSIE")[1]):false;
function addLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}
addLoadEvent(storm);
function storm() { if (document.getElementById) {
var r1, r2;
boddie=document.createElement("div");
boddie.style.position="fixed";
boddie.style.top="0px";
boddie.style.left="0px";
boddie.style.width="1px";
boddie.style.height="1px";
boddie.style.overflow="visible";
boddie.style.backgroundColor="transparent";
document.body.appendChild(boddie);
set_width();
for (var i=0; i<drops; i++) {
flks[i]=createDiv(16, 2, "transparent");
r1=createDiv(6, 2, colour);
r1.style.top="10px";
r1.style.left="0px";
flks[i].appendChild(r1);
r2=createDiv(10, 2, colour);
r2.style.top="0px";
r2.style.left="0px";
if (ie_version && ie_version<10) r2.style.filter="alpha(opacity=25)";
else r2.style.opacity=0.25;
flks[i].appendChild(r2);
flkx[i]=2*Math.floor(Math.random()*swide/2);
flky[i]=Math.floor(Math.random()*shigh);
fldy[i]=2+Math.floor(Math.random()*4);
flks[i].style.left=flkx[i]+"px";
flks[i].style.top=flky[i]+"px";
boddie.appendChild(flks[i]);
}
setInterval("cats_and_dogs()", speed);
}}
function createDiv(height, width, colour) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
window.onresize=set_width;
function set_width() {
var sw_min=999999;
var sh_min=999999;
if (document.documentElement && document.documentElement.clientWidth) {
sw_min=document.documentElement.clientWidth;
sh_min=document.documentElement.clientHeight;
}
if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
if (self.innerWidth<sw_min) sw_min=self.innerWidth;
if (self.innerHeight<sh_min) sh_min=self.innerHeight;
}
if (document.body.clientWidth) {
if (document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
if (document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
}
if (sw_min==999999 || sh_min==999999) {
sw_min=800;
sh_min=600;
}
swide=sw_min-2;
shigh=sh_min;
}
function cats_and_dogs(c) {
var i, x, o=0;
for (i=0; i<drops; i++) {
flky[i]+=fldy[i];
if (flky[i]>=shigh-16) {
flky[i]=-16;
fldy[i]=2+Math.floor(Math.random()*4);
flkx[i]=2*Math.floor(Math.random()*swide/2);
flks[i].style.left=flkx[i]+"px";
}
flks[i].style.top=flky[i]+"px";
}
}
// ]]>

3
src/components/Head.astro
View file

@ -4,6 +4,9 @@
<meta charset="UTF-8" />
<meta name="description" content="Personal website of LimePotato" />
<meta name="viewport" content="width=device-width" />
<meta content="woman(ish)" property="og:profile:gender">
<meta content="she/they" property="pronouns">
<meta name="generator" content={Astro.generator} />
<link rel="stylesheet" href="/css/mystyle.css" />
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />

61
src/components/Header.astro
View file

@ -3,69 +3,14 @@
<center>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a
role="button"
class="navbar-burger"
data-target="navMenu"
aria-label="menu"
aria-expanded="false"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-start">
<a class="navbar-item" href="/">
<span class="text-gradient">LimePot</span>
</a>
<a class="navbar-item" href="/projects">
<span class="text-gradient">Projects</span>
</a>
<a class="navbar-item" href="/blog">
<span class="text-gradient">Blog</span>
</a>
<button class="custom-btn btn-1" type="button" onclick="location.href='/'" ><span>LimePot</span></button>
<button class="custom-btn btn-1" type="button" onclick="location.href='/projects'" ><span>Projects</span></button>
<button class="custom-btn btn-1" type="button" onclick="location.href='/blog'" ><span>Blog</span></button>
</div>
</div>
</nav>
<div class="navbar-end">
<!--
<a class="navbar-item" href="https://ko-fi.com/limepot">
<img src="/assets/other-branding/ko-fi-button-red.png">
</a>
-->
<!--
<a class="navbar-item" href="https://likeitsthe90s.limepot.xyz/">
Lets act like its the 90s
</a>
-->
</div>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
<script>
document.addEventListener("DOMContentLoaded", () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll(".navbar-burger"),
0
);
// Add a click event on each of them
$navbarBurgers.forEach((el) => {
el.addEventListener("click", () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
});
</script>
</center>
<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->

28
src/layouts/Layout-nochrome.astro Executable file
View file

@ -0,0 +1,28 @@
---
import Header from "../components/Header.astro";
import Head from "../components/Head.astro";
import Footer from "../components/Footer.astro";
interface Props {
title: string;
}
const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<Head />
<title>{title}</title>
</head>
<body onload="redirect()">
<Header />
<section class="section">
<div class="container">
<slot />
</div>
</section>
<Footer />
<script type='text/javascript' src='/scripts/rain.js'></script>
</body>
</html>

86
src/layouts/Layout.astro
View file

@ -15,7 +15,7 @@ const { title } = Astro.props;
<Head />
<title>{title}</title>
</head>
<body>
<body onload="redirect()">
<Header />
<section class="section">
<div class="container">
@ -23,85 +23,7 @@ const { title } = Astro.props;
</div>
</section>
<Footer />
</body><style is:global>
.navbar .navbar-menu {
flex-grow: initial;
flex-shrink: initial;
}
:root {
--accent: 250, 179, 135;
--accent-light: 250, 221, 201;
--accent-dark: 149, 106, 81;
--accent-gradient: linear-gradient(
45deg,
rgb(var(--accent)),
rgb(var(--accent-light)) 30%,
white 60%
);
}
html {
font-family: system-ui, sans-serif;
background: #13151a;
background-size: 224px;
}
main {
margin: auto;
padding: 1rem;
width: 800px;
max-width: calc(100% - 2rem);
color: white;
font-size: 20px;
line-height: 1.6;
}
.astro-a {
position: absolute;
top: -32px;
left: 50%;
transform: translatex(-50%);
width: 220px;
height: auto;
z-index: -1;
}
h1 {
font-size: 4rem;
font-weight: 700;
line-height: 1;
text-align: center;
margin-bottom: 1em;
}
.text-gradient {
background-image: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400%;
background-position: 0%;
}
.instructions {
margin-bottom: 2rem;
border: 1px solid rgba(var(--accent-light), 25%);
background: linear-gradient(
rgba(var(--accent-dark), 66%),
rgba(var(--accent-dark), 33%)
);
padding: 1.5rem;
border-radius: 8px;
}
.instructions code {
font-size: 0.8em;
font-weight: bold;
background: rgba(var(--accent-light), 12%);
color: rgb(var(--accent-light));
border-radius: 4px;
padding: 0.3em 0.4em;
}
.instructions strong {
color: rgb(var(--accent-light));
}
.link-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
gap: 2rem;
padding: 0;
}
</style>
<script type='text/javascript' src='/scripts/fuckchrome.js'></script>
<script type='text/javascript' src='/scripts/cursor.js'></script>
</body>
</html>

108
src/pages/index.astro
View file

@ -5,82 +5,38 @@ import Card from "../components/Card.astro";
<Layout title="LimePot">
<main>
<div class="content">
<center>
<h1 class="title">LimePotato</h1>
<marquee Behavior="Alternate">
<h2>
<span class="text-gradient">Hello World</span>
</h2>
</marquee>
<!--
<a href="/404" style="font-size: 34px" class="subtitle">0 Days since last incident.</a>
-->
<hr />
<p class="title">Name(s):</p>
<p>
You can call me <span style="color: #fab387;">[Nelle]</span>, although
some call me <span style="color: #fab387;">[Luna, Lilith, ???]</span>.
Or you can simply call me by my username <span style="color: #fab387;"
>[LimePot/LimePotato]</span
>.
</p>
<hr />
<p class="title">Pronoun'd:</p>
<p>
<span style="color: #fab387;">[She/They]</span>, Alternatively: <a
href="https://pronouns.cc/@LimePotato"><u>pronouns.cc page</u></a
>.
</p>
<hr />
<p class="title">Some Info:</p>
<p>
I do a lot of tinkering with various things, hardware and software.
Currently messing around with Web Development, Minecraft mods, 3D
Printing, Linux, System Administration, Pixel Art, and whatever comes
to mind really. Checkout my <a href="https://limepot.xyz/projects"
><u>Projects</u></a
> to see what I'm currently working on.
</p>
<br />
<br /><br />
<p class="instructions">
<strong>Where to find/contact me:</strong>
</p><br />
<ul role="list" class="link-card-grid">
<Card
source="/assets/icons/mail-outline.svg"
href="mailto: limepot@protonmail.ch"
title="Email"
alt="Icon of a piece of Mail"
/>
<Card
source="https://upload.wikimedia.org/wikipedia/commons/9/93/Fediverse_logo_proposal.svg"
href="https://ouroboros.gay/@limepot"
title="Fediverse"
alt="Fediverse Icon"
/>
<Card
source="/assets/icons/listenbrainzicon.png"
href="https://listenbrainz.org/user/LimePotato/"
title="ListenBrainz Profile"
alt="ListenBrainz Icon"
/>
<Card
source="/assets/icons/logo-youtube.svg"
href="https://www.youtube.com/channel/UCk_yKIpDnMv_DvuDb9RGfcA"
title="Youtube"
alt="Youtube Logo"
/>
<Card
source="/assets/icons/logo-steam.svg"
href="https://steamcommunity.com/id/limepot/"
title="Steam"
alt="Steam Logo"
/>
</ul>
</center>
<div class="content" style="text-align: center;">
<marquee Behavior="Alternate">
<h2 class="title">LimePotato</h1>
</marquee>
<hr>
<figure>
<figcaption>Some Ambience?</figcaption>
<audio controls src="/assets/sounds/ambience/383506__klankbeeld__pinewood-in-memoriam-febr-05-nl-giersbergen-33db-170215_1085.flac" type="audio/flac">
</figure>
<hr />
<p>
Howdy! You can call me <span style="color: #fab387;">[Nelle]</span>,
although some call me <span style="color: #fab387;"
>[Luna, Lilith, ???]</span
>. Or you can simply call me by my username <span
style="color: #fab387;">[LimePot/LimePotato]</span
>.
</p>
<p>
My pronouns are <span style="color: #fab387;">[She/They]</span>,
Alternatively checkout my <a href="https://pronouns.cc/@LimePotato"
><u>pronouns.cc page</u></a
>.
</p>
<hr />
<p>
I'm a 20-something trans woman that exists purely and solely on the
internet. I like Science Adventure Series (A LOT!), and I enjoy
Minecraft. I make mods for the latter on occassion, I do some Linux
Systems administration, pixel art, 3D Printing, Tinkering, and really
just whatever hits the dopamine in the right spot.
</p>
</div>
</main>
</Layout>

45
src/pages/nochrome.astro Normal file
View file

@ -0,0 +1,45 @@
---
import Layout from "../layouts/Layout-nochrome.astro";
import Card from "../components/Card-noimg.astro";
---
<Layout title="LimePot">
<main>
<div class="content" style="text-align: center;">
<h1 class="title">You Are Using a Chromium-based Browser.</h1>
<h2 class="subtitle">
There are many reasons not to use chrome (as well as base firefox),
consider using an alternative browser.
</h2>
<hr />
<ul role="list" class="link-card-grid">
<Card href="https://fuckoffgoogle.de/" title="Google is Evil" />
<Card href="https://privacytests.org/" title="Browser Privacy Tests" />
</ul>
<hr />
<h2 class="subtitle">Some Recommendations</h2>
<ul role="list" class="link-card-grid">
<Card href="https://librewolf.net/" title="*Librewolf" />
<Card href="https://mullvad.net/en/browser" title="Mullvad Browser" />
<Card href="https://www.waterfox.net/" title="Waterfox" />
<Card href="https://www.netsurf-browser.org/" title="Netsurf" />
<Card
href="https://awesomekling.github.io/Ladybird-a-new-cross-platform-browser-project/"
title="Ladybird"
/>
<Card
href="https://www.microsoft.com/en-us/download/internet-explorer"
title="Internet Explorer"
/>
</ul>
<hr />
<a
href="https://chromewebstore.google.com/detail/user-agent-switcher-and-m/bhchdcejhohfmigjafbampogmaanbfkg"
><h2>
If you are really dead-set on using chromium to browse this website,
you can use a user-agent switcher
</h2></a
>
</div>
</main>
</Layout>

10
src/pages/projects.astro
View file

@ -21,21 +21,15 @@ import Card from "../components/Card.astro";
<Card
source="/assets/icons/Forgejo_logo.svg"
href="https://git.nullafati.xyz/LimePotato/"
title="Self-Hosted ForgeJo Instance"
title="Git"
alt="Forgejo Logo"
/>
<Card
source="https://avatars.githubusercontent.com/u/67560307?s=200&v=4"
href="https://modrinth.com/user/limepotato"
title="Modrinth"
title="Modrinth Profile"
alt="Modrinth Logo"
/>
<Card
source="/assets/icons/image-outline.svg"
href="https://files.nullafati.xyz/Photos/limepotato/"
title="Photography - File Archive"
alt="image icon, mountains and a sun in outline"
/>
</ul>
<br /><br />
<center>