diff index.html @ 75:d69f3fe99911

*: remove bootstrap, add projects page, use custom navbar the bootstrap navbar was a bit too bloated for something like this anyway. P.S.: you can see some fun stupid tricks in `projects/index.html`, I had to hack around to make the background work how I wanted
author Paper <paper@paper.us.eu.org>
date Fri, 22 Mar 2024 21:42:50 -0400
parents c8ea71d9d102
children ed130c092d75
line wrap: on
line diff
--- a/index.html	Mon Dec 18 00:26:00 2023 -0500
+++ b/index.html	Fri Mar 22 21:42:50 2024 -0400
@@ -1,13 +1,11 @@
 <!DOCTYPE html>
+<html>
 <head>
-	<title>Home - Paper's website</title>
+	<title>home - Paper's website</title>
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 	<meta name="google-site-verification" content="rILPN0Fit17u21ImKQW-ZHQMvx_Ak7qcuM3ewqtrJg8" />
-	<!-- bootstrap 2.3.2 gives an error that the `zoom` css property isn't supported,
-	     but we don't have anything that uses it anyway -->
-	<link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
-	<link href="./css/style.css" rel="stylesheet" media="screen">
+	<link href="css/style.css" rel="stylesheet" media="screen">
 	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
 	<style>
 		body {
@@ -20,70 +18,52 @@
 		}
 	</style>
 </head>
+
 <body>
 	<!-- I tried to make this HTML as clean as possible, as to reduce clutter
 	     from what these pages used to look like :/
 
 	     Much of this page has taken "inspiration" (read: was stolen) from
 	     sdomi's page at https://sdomi.pl/ -->
-	<div class="navbar navbar-inverse navbar-static-top">
-		<div class="navbar-inner">
-			<a class="brand" href="#">Paper's website</a>
-			<ul class="nav">
-				<li class="active"><a href="#">Home</a></li>
-			</ul>
-		</div>
+	<div class="navbar drop-shadow-box">
+		<a href="#" class="navbar-item-active">home</a>
+		<a href="projects/" class="navbar-item">projects</a>
 	</div>
 
-	<br />
+	<br>
 
 	<div class="header">
 		<img class="avatar drop-shadow-box" src="media/avatar.jpg"
-			alt="Himeko Inaba from Kokoro Connect" title="Himeko Inaba from Kokoro Connect" />
+			alt="Himeko Inaba from Kokoro Connect" title="Himeko Inaba from Kokoro Connect">
 		<h1 class="title drop-shadow-text">Paper's website</h1>
 	</div>
 
+	<br>
+
 	<div class="content drop-shadow-box">
 		<h2 class="drop-shadow-text">About me</h2>
 		<p class="drop-shadow-text">
 			My main interests are retro computers (old Apple stuff mainly),
-			<a href="https://sr.ht/~mrpapersonic">programming</a>,
-			<a href="https://anilist.co/user/PaperAIDS/">anime and manga</a>,
+			<a class="prettylink" target="_blank" href="https://sr.ht/~mrpapersonic">programming</a>,
+			<a class="prettylink" target="_blank" href="https://anilist.co/user/PaperAIDS/">anime and manga</a>,
 			and some linguistics. I also make some
-			<a href="https://modarchive.org/index.php?request=view_artist_modules&query=92603">tunes</a>
+			<a class="prettylink" target="_blank" href="https://modarchive.org/index.php?request=view_artist_modules&query=92603">tunes</a>
 			from time to time.
 		</p>
-		<p class="drop-shadow-text">
-			I use Debian as my main operating system with KDE Plasma as my desktop environment.
-		</p>
 
-		<h2 class="drop-shadow-text">Projects</h2>
-		<ul>
-			<li class="drop-shadow-text">
-				<a href="https://hg.sr.ht/~mrpapersonic/vegas-scripts">Vegas Pro scripts</a>:
-				some scripts that make using Vegas Pro less unbearable
-			</li>
+		<h2 class="drop-shadow-text">Socials</h2>
+		<ul class="index-socials-list">
 			<li class="drop-shadow-text">
-				<a href="https://hg.sr.ht/~mrpapersonic/wgsdk">wgsdk</a>:
-				a Discord GameSDK plugin for Winamp
-			</li>
-		</ul>
-
-		<h2 class="drop-shadow-text">Socials</h2>
-		<ul>
-			<li class="drop-shadow-text">
-				E-mail (<a href="mailto:mrpapersonic@gmail.com">mrpapersonic@gmail.com</a>)
+				E-mail (<a class="prettylink" href="mailto:paper@paper.us.eu.org">paper@paper.us.eu.org</a>)
 			</li>
 			<li class="drop-shadow-text">
 				Discord (@slipofpaper)
 			</li>
-			<li class="drop-shadow-text">
-				Telegram (<a href="https://t.me/mrpapersonic">@mrpapersonic</a>)
-			</li>
 			<br>
 			<li class="drop-shadow-text">
-				Fediverse (<a href="https://miniwa.moe/users/paper">@paper@miniwa.moe</a>)
+				Fediverse (<a class="prettylink" target="_blank" href="https://miniwa.moe/users/paper">@paper@miniwa.moe</a>)
 			</li>
 		</ul>
 	</div>
 </body>
+</html>