aidan/aidxnFUN
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

chore: upgrade to tailwind v4

Browse Source
This commit is contained in:
Aidan 2025-03-08 00:29:23 -05:00
parent c44357b398
commit ec233989b2
11 changed files with 46 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/css/base.css
View File

@ -1,6 +1,26 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';
@theme {
--font-afacad-flux: 'Afacad Flux', sans-serif;
}
/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}
.glow-txt {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.3);

13
tailwind.config.js
View File

@ -1,13 +0,0 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./views/**/*.{ejs,js}"],
theme: {
extend: {
fontFamily: {
'afacad-flux': ['"Afacad Flux"', 'sans-serif'],
},
},
},
plugins: [],
};

4
views/about.ejs
View File

@ -9,13 +9,13 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-slate-900 to-black text-white font-afacad-flux">
<body class="bg-linear-to-br from-slate-900 to-black text-white font-afacad-flux">
<%- include('shards/header.ejs', { req: req }) %>
<header class="flex flex-col items-center justify-center h-[40vh] p-6">
<h1 class="text-5xl font-bold mb-2 text-center">About Me</h1>
<p class="text-lg text-gray-300 max-w-xl text-center mt-3">Looking to learn more?</p>
</header>
<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
<div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
<h3 class="text-2xl font-bold mb-4 text-white">What you're looking for</h3>
<p class="text-slate-300 mb-4">Heyo! I'm Aidan, and I'm a human being, like you. I'm a Wikipedia editor, hobbyist programmer (Python, Node.js and PHP) and student. I am a troubled teen industry survivor and I also <i>love</i> music! I love walking (pretty much anywhere), particularly Boston and some Mass suburbs. I'm a cryptocurrency user and love it way more than credit cards/cash. However, I am strongly opposed to the adoption of Web3 technology.</p>
<p class="text-slate-300 mb-4">I archive adverts and culture items (especially digital media) over on my secondary website for my online personality, <a href="https://p0ntus.com" class="underline">p0ntus.com</a>. Maybe give it a peek! Most items are uploaded in full quality, and files are served from a server in Michigan.</p>

4
views/cloud.ejs
View File

@ -9,13 +9,13 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-slate-900 to-black text-white font-afacad-flux">
<body class="bg-linear-to-br from-slate-900 to-black text-white font-afacad-flux">
<%- include('shards/header.ejs', { req: req }) %>
<header class="flex flex-col items-center justify-center h-[40vh] p-6">
<h1 class="text-5xl font-bold mb-2 text-center">Cloud</h1>
<p class="text-lg text-gray-300 max-w-xl text-center mt-3">Looking to learn about my experience with the cloud?</p>
</header>
<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
<div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
<h3 class="text-2xl font-bold mb-4 text-white">Platforms</h3>
<p class="text-slate-300 mb-4">I also work a <i>LOT</i> in the cloud, but not the type you might be thinking about. I almost have an obsession to enterprise cloud computing. Hell, you're actually connected to one... right now! Here are some of my favorite platforms, ranked.</p>
<p class="text-slate-300 mb-4">This section is a work in progress, for those who don't know cloud computing. I'm working to make the wording clearer, so the non-technical folk can still understand everything here!</p>

4
views/contact.ejs
View File

@ -10,7 +10,7 @@
<link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="bg-gradient-to-br from-slate-900 to-black text-white font-afacad-flux">
<body class="bg-linear-to-br from-slate-900 to-black text-white font-afacad-flux">
<%- include('shards/header.ejs', { req: req }) %>
<header class="flex flex-col items-center justify-center h-[40vh] p-6">
@ -18,7 +18,7 @@
<p class="text-lg text-gray-300 max-w-xl text-center mt-3">Looking to contact me? You found it!</p>
</header>
<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
<div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
<h3 class="text-2xl font-bold mb-4 text-white">Contact Details</h3>
<p class="text-slate-300 mb-4">This one can be a hard one for most people, as I'm not a fan of modern social media, albeit I give in here and there.</p>
<p class="text-slate-300 mb-4">If you're looking for my email, simply replace the brackets with the character it's referencing, like so: test[at]test[dot]com becomes test@test.com. This is in order to prevent bots from contacting me!</p>

8
views/index.ejs
View File

@ -20,7 +20,7 @@
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4">
<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
<div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
<h1 class="text-4xl font-bold mb-4 text-white">Welcome!</h1>
<p class="text-slate-300">Outside of the internet, I am known as Aidan. If you are a <a class="underline" href="https://tilde.club">tilde.club</a> user, you will know me as <a class="underline" href="https://tilde.club/~lxu">~lxu</a>! I am a technology enthusiast, Wikipedia editor, personal systems administator, and Linux user.</p>
<p class="text-slate-300 mt-3">Here, you can learn more about me, put my programming skills to the test, and even have some fun along the way!</p>
@ -28,13 +28,13 @@
<p class="text-slate-300 mt-3">This website is currently hosted in Frankfurt, Germany. Page load speeds may be impacted, however my website's data is hosted under stricter data protection laws. I'm not a millionaire, and hosting out of Germany helps me save money on hosting, and serve a wider range of countries with better speeds.</p>
<p class="text-slate-300 mt-3">The content and code of this website is hereby released under the public domain. You are free to use this servers content for whatever you please, and you can additionally view this website's source code on GitHub <a class="underline" href="https://github.com/ihatenodejs/aidxnFUN/">here</a>.</p>
</div>
<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
<div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
<h1 class="text-4xl font-bold mb-4 text-white">Where to start</h1>
<p class="text-slate-300">This website has a lot of content, albeit spread apart. If you're interested in learning about me as a person, I'd obviously suggest <a class="underline" href="/about">my about page</a>. For opinionated content, my <a class="underline" href="https://blog.aidxn.fun">blog</a> (currently down) is a great place to check out. I also write casually on my <a class="underline" href="https://tilde.club/~lxu">tilde site</a> hosted on <a class="underline" href="https://tilde.club/">tilde.club</a>.</p>
<p class="text-slate-300 mt-3">If you merely need to contact me, check out the <a class="underline" href="/contact">contact page</a> on the sidebar (or you could click that link).</p>
<p class="text-slate-300 mt-3">This website is always a work in progress, and not every page is going to be finished, however I aim for every page to be functional and relevant. Content is always being added, as I progress through my life. Why not start early?</p>
</div>
<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
<div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
<h1 class="text-4xl font-bold mb-4 text-white">Music</h1>
<%- include('shards/music.ejs') %>
<h1 class="text-3xl text-white py-3.5">My Music Taste</h1>
@ -42,7 +42,7 @@
<p class="text-slate-300 mt-3">Some of my favorite artists include tobi lou, Flyana Boss, and Kali Uchis. Some of my "classics" are Mike Stud (before his name change to "mike."), Skizzy Mars, tobi lou, The Neighbourhood, and Ryan Caraveo.</p>
<p class="text-slate-300 mt-3">If you are interested, you can check out my LastFM profile <a class="underline" href="https://www.last.fm/user/aidxn_">here</a>.
</div>
<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
<div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
<h1 class="text-4xl font-bold mb-4 text-white">About the design</h1>
<p class="text-slate-300">With this revision, I was aiming to provide a modern design, with an easy-to-navigate interface. I always appreciate dark-themed websites, and decided to add some subtle gradients with glass effects to spice the design up. While I am a developer more than I am a designer, I quite favor this design and it has become the pinnacle of my design work.</p>
<p class="text-slate-300 mt-3">For this design, I chose Tailwind CSS. I appreciate their flexibility, although it appears their documentation poorly written on purpose. They encourage purchasing their components subscription (which costs a lot of money!) all over the documentation, especially in confusing ways. While it has been a poor experience there, I have been able to figure it out with the help of their free elements, documentation, prior knowledge, and the docs.</p>

4
views/manifesto.ejs
View File

@ -9,13 +9,13 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-slate-900 to-black text-white font-afacad-flux">
<body class="bg-linear-to-br from-slate-900 to-black text-white font-afacad-flux">
<%- include('shards/header.ejs', { req: req }) %>
<header class="flex flex-col items-center justify-center h-[40vh] p-6">
<h1 class="text-5xl font-bold mb-2 text-center">Digital Manifesto</h1>
<p class="text-lg text-gray-300 max-w-xl text-center mt-3">A commitment from me for a better Internet space.</p>
</header>
<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
<div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
<h3 class="text-2xl font-bold mb-4 text-white">1. Empathy and Understanding</h3>
<p class="text-slate-300 mb-4">We live in a distant world. People I meet are from all over, which can be hard to understand for others. I aim to utilize my ability to connect by understanding and getting <i>interested</i> in people's lives. I pledge to:</p>
<ul class="list-disc pl-5 space-y-2">

4
views/projects.ejs
View File

@ -9,13 +9,13 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-slate-900 to-black text-white font-afacad-flux">
<body class="bg-linear-to-br from-slate-900 to-black text-white font-afacad-flux">
<%- include('shards/header.ejs', { req: req }) %>
<header class="flex flex-col items-center justify-center h-[40vh] p-6">
<h1 class="text-5xl font-bold mb-2 text-center">Projects</h1>
<p class="text-lg text-gray-300 max-w-xl text-center mt-3">Looking to learn more about my projects?</p>
</header>
<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
<div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
<h3 class="text-2xl font-bold mb-4 text-white">Currently working on</h3>
<p class="text-slate-300 mb-4">You can check out my GitHub account right <a href="https://github.com/ihatenodejs">here</a>.</p>
<p class="text-slate-300 mb-4">I am currently working on the following projects (in order of activity):</p>

6
views/shards/header.ejs
View File

@ -1,7 +1,7 @@
<!-- The body/head/html tag is purposely not included here, as it gives the user easier freedom to control the stying and details of the page (such as title) -->
<div id="notification-banner" class="relative isolate flex items-center gap-x-6 overflow-hidden bg-gray-800/50 backdrop-blur-md px-6 py-2.5 rounded-lg shadow-lg">
<div class="absolute left-0 top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl">
<div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
<div class="aspect-577/310 w-[36.0625rem] bg-linear-to-r from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
</div>
<div class="flex flex-wrap items-center gap-x-4 gap-y-2">
<p class="text-sm leading-6 text-gray-100">
@ -11,7 +11,7 @@
</svg>
Check out old.aidxn.fun for a retro experience!
</p>
<a href="https://old.aidxn.fun" class="flex-none rounded-full bg-gray-900 px-3.5 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-700">Go retro <span aria-hidden="true">&rarr;</span></a>
<a href="https://old.aidxn.fun" class="flex-none rounded-full bg-gray-900 px-3.5 py-1 text-sm font-semibold text-white shadow-xs hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-700">Go retro <span aria-hidden="true">&rarr;</span></a>
</div>
<div class="flex flex-1 justify-end">
<button type="button" id="dismiss-btn" class="-m-3 p-3 focus-visible:outline-offset-[-4px]">
@ -48,7 +48,7 @@
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
</a>
<div class="absolute right-0 z-10 w-56 origin-top-right rounded-md bg-gray-800 shadow-lg ring-1 ring-gray-700 focus:outline-none mt-5 hidden" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="absolute right-0 z-10 w-56 origin-top-right rounded-md bg-gray-800 shadow-lg ring-1 ring-gray-700 focus:outline-hidden mt-5 hidden" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="py-1" role="none">
<a href="https://aidxn.cc" class="block px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-1">Main Site</a>
<a href="https://blog.aidxn.fun" class="block px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-1">Blog</a>

4
views/status.ejs
View File

@ -10,7 +10,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-slate-900 to-black text-white font-afacad-flux">
<body class="bg-linear-to-br from-slate-900 to-black text-white font-afacad-flux">
<%- include('shards/header.ejs', { req: req }) %>
<header class="flex flex-col items-center justify-center h-[40vh] p-6">
@ -23,7 +23,7 @@
<h1 class="text-2xl font-bold">Testing pings...</h1>
</div>
<div id="content" class="hidden bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
<div id="content" class="hidden bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
<div>
<h3 class="text-2xl font-bold mb-4 text-white">What is this page?</h3>
<p class="text-slate-300 mb-4">This page displays information about the status of my personal servers. This excludes private servers, which are used for projects such as my "home" lab (it's hosted in the cloud).</p>

8
views/verify.ejs
View File

@ -10,7 +10,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-slate-900 to-black text-white font-afacad-flux">
<body class="bg-linear-to-br from-slate-900 to-black text-white font-afacad-flux">
<%- include('shards/header.ejs', { req: req }) %>
<header class="flex flex-col items-center justify-center h-[40vh] p-6">
@ -18,7 +18,7 @@
<p class="text-lg text-gray-300 max-w-xl text-center mt-3">Let's check if that message really came from me!</p>
</header>
<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
<div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
<h3 class="text-2xl font-bold mb-4 text-white">Introduction</h3>
<p class="text-slate-300 mb-4">Did I send you a PGP signed message? Let's check it's actually from me! The form below will verify the message was signed by my key.</p>
<p class="text-slate-300 mb-4"><span class="font-bold">Remember</span>, if you have confirmed my key in person, you should always trust that key over this page.</p>
@ -27,10 +27,10 @@
<form action="/verify" method="POST" class="space-y-4">
<label for="pgpMessage" class="block text-slate-300">PGP Message:</label>
<textarea id="pgpMessage" name="pgpMessage" class="w-full p-2 bg-slate-800 text-slate-300 rounded-md" rows="10" placeholder="Paste a PGP-signed message here"></textarea>
<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Verify</button>
<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-sm">Verify</button>
</form>
<% if (verifyResult) { %>
<div class="mt-4 p-4 rounded bg-slate-800 text-white">
<div class="mt-4 p-4 rounded-sm bg-slate-800 text-white">
<p><%= verifyResult %></p>
</div>
<% } %>