Mercurial > web

diff index.html @ 72:ff98f97603ca

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
*: giant redesign I decided to go from a largely carrd-inspired design to something more deserving of the title "website". I also removed much of the old, very crusty HTML and CSS that I had written almost 2 years ago now O_o
author Paper <mrpapersonic@gmail.com>
date Fri, 15 Dec 2023 18:56:52 -0500
parents 2e645b936727
children c8ea71d9d102
line wrap: on
line diff
--- a/index.html	Sun Oct 01 04:06:23 2023 -0400
+++ b/index.html	Fri Dec 15 18:56:52 2023 -0500
@@ -8,49 +8,80 @@
 	     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 rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
+	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
 	<style>
 		body {
 			background-size: cover;
-			background-image: url("indexbg.jpg");
+			background-repeat: no-repeat;
+			background-image: url("indexbg.jpg"); /* Hibike! Euphonium */
 			background-position: center top;
-			background-size: cover;
 			background-color: #1F255A;
+			min-height: 100vh;
 		}
 	</style>
 </head>
 <body>
-    <div class="navbar-wrapper">
-		<div class="container">
-			<div class="navbar navbar-inverse">
-				<div class="navbar-inner">
-					<a class="brand" href="#">Paper's website</a>
-					<ul class="nav">
-						<li class="active"><a href="#">Home</a></li>
-						<li><a href="music.html">Music</a></li>
-						<li><a href="projects.html">Projects</a></li>
-					</ul>
-				</div>
-			</div>
+	<!-- 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>
-	<div class="box center" style="width: 300px">
-		<h2>I'm Paper!</h2>
-		<p>I code and make music sometimes.</p>
-		<div class="fs-4 mb-3 logos">
-			<a href="https://www.youtube.com/c/PaperYTPMV"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white" class="bi bi-youtube" viewBox="0 0 16 16">
-				<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
-			</svg></a>
-			&nbsp;
-			<a href="https://sr.ht/~mrpapersonic"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white" viewBox="0 0 512 512">
-				<path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"/>
-			</svg></a>
-			&nbsp;
-			<a href="https://modarchive.org/index.php?request=view_profile&query=92603"><svg version="1.1" id="svg108" width="32" height="32" fill="white" viewBox="0 0 32 32" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs112"/> <g id="g114"><image id="mod-archive" width="32" height="32" preserveAspectRatio="none"  xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACx
-jwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABvSURBVDhP1ZDRCYAwDERjp3AER3EUN+q48RLu
-o5JIbQXBB7E+rhxR+QRVXW2oEYSbDTWAzKFGmN9eYJzmhecF3N1tqH28HlC73pJu0ANdhw11fAOq
-+9QGLQVFle/WXEd9wSP9OU95/wk8p/l9gcgJo2aKKBW4giYAAAAASUVORK5CYII=
-" id="image116" /></g></svg></a>
-		</div>
+
+	<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" />
+		<h1 class="title drop-shadow-text">Paper's website</h1>
+	</div>
+
+	<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),
+			programming, and some linguistics. I also make some
+			<a 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>
+			<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>)
+			</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>)
+			</li>
+		</ul>
 	</div>
 </body>