67 lines
5.9 KiB
HTML
67 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>home | aidxn</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<link rel="stylesheet" href="css/index.css">
|
|
</head>
|
|
<body>
|
|
<div id="loading"></div>
|
|
<div id="page" style="display: none;">
|
|
<header class="sidebar">
|
|
<a href="#"><img src="img/logo.gif" alt="Animated logo text displaying AIDXN ONLINE" class="logo"></a>
|
|
<p class="cap">Welcome to my world wide web site!</p>
|
|
<img src="img/links.gif" alt="Animated text displaying LINKS" width="30%" class="mm-label">
|
|
<ul>
|
|
<li class="menu-opt"><img src="img/bullet.gif" alt="*" class="bullet"><b>home</b></li>
|
|
<li class="menu-opt"><img src="img/bullet.gif" alt="*" class="bullet"><a href="about.html">about</a></li>
|
|
<li class="menu-opt"><img src="img/bullet.gif" alt="*" class="bullet"><a href="contact.html">contact</a></li>
|
|
<li class="menu-opt"><img src="img/bullet.gif" alt="*" class="bullet"><a href="verify.html">verify a message</a></li>
|
|
<li class="menu-opt"><img src="img/bullet.gif" alt="*" class="bullet"><a href="status.html">status</a></li>
|
|
<li class="menu-opt"><img src="img/bullet.gif" alt="*" class="bullet"><a href="design.html">design</a></li>
|
|
<li class="menu-opt"><img src="img/bullet.gif" alt="*" class="bullet"><a href="projects.html">projects</a></li>
|
|
</ul>
|
|
<img src="img/information.gif" alt="Animated text displaying INFORMATION" width="68%" class="mm-label">
|
|
<p id="date"></p>
|
|
<div class="music-section">
|
|
<img id="album-art" style="height: 64px; width: 64px;" src="img/loading.gif" alt="Album cover">
|
|
<b id="albumLabel">Now Playing:</b><br>
|
|
<b id="song">Loading...</b>
|
|
<p id="album">Loading...</p>
|
|
<p id="artist">Loading...</p>
|
|
</div>
|
|
<span class="extra-text"><b>Note: </b>This page is best viewed on a computer.</span>
|
|
</header>
|
|
<aside class="main-content">
|
|
<h1>Welcome to my world wide web site!</h1>
|
|
<p>My name is Aidan, but if you are on <a href="https://tilde.club">tilde.club</a>, you will know me as <a href="https://tilde.club/~lxu">~lxu</a>!</p>
|
|
<p>I'm a technology enthusiast, and a Wikipedia editor, among other things.</p>
|
|
<p>Here, you can learn more about me, visit a more nostalgic and relaxing web site, and even have some fun along the way.</p>
|
|
<p>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 thus helps me save money on hosting, and serve a wider range of countries with better speeds.</p>
|
|
<p>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 href="https://github.com/ihatenodejs/aidxnFUN/">here</a>.</p>
|
|
<h1>Where to start</h1>
|
|
<p>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 href="about.html">my about page</a>.</p>
|
|
<p>If you merely need to contact me, check out the <a href="contact.html">contact page</a> on the sidebar (or you could click that link).</p>
|
|
<p>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>
|
|
<h1>About the design</h1>
|
|
<p>This is a brief description of my design choices when creating the styling of this website. You can view a more extensive description of design choices <a href="design.html">here</a>.</p>
|
|
<p>In the past, I was very focused on using <a href="https://getbootstrap.com">Bootstrap</a> and <a href="https://tailwindcss.com">Tailwind CSS</a>, which are modern design tools, to save time on styling your pages with CSS.</p>
|
|
<p>In this design, I have opted to fully understand the CSS, which is going on in the background when I use the aforementioned tools. This is essentially the selling point of these tools. Tailwind CSS says it themselves:</p>
|
|
<blockquote>Rapidly build modern websites without ever leaving your HTML</blockquote>
|
|
<p class="quote">- <a href="https://tailwindcss.com">Tailwind CSS Home Page</a></p>
|
|
<p>However, I don't believe people who use either tools are "lazy" or don't actually know how to code. Bootstrap is for modern design, and raw CSS is for complete control.</p>
|
|
<p>That wasn't my only idea behind the design, however. I was first inspired by some of my tilde neighbors, and especially by <a href="https://sadgrl.online">sadgrl</a>'s website.</p>
|
|
<p>I am going for an older design, one that's flashy, fun, and makes you think. I'm constantly improving the design to adhere to outdated design standards which end up looking better than modern ones (subjective)!</p>
|
|
<p>With this project, I have aimed to adhere to modern HTML5 standards, while emulating the experience of a proper mid-2000s design. Sadly, I wasn't around for when HTML4 was more widespread.</p>
|
|
</aside>
|
|
</div>
|
|
<script src="js/main.js"></script>
|
|
<script src="js/music.js"></script>
|
|
<script src="js/ping.js"></script>
|
|
</body>
|
|
</html> |