comparison 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
comparison
equal deleted inserted replaced
74:c8ea71d9d102 75:d69f3fe99911
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html>
2 <head> 3 <head>
3 <title>Home - Paper's website</title> 4 <title>home - Paper's website</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6 <meta name="google-site-verification" content="rILPN0Fit17u21ImKQW-ZHQMvx_Ak7qcuM3ewqtrJg8" /> 7 <meta name="google-site-verification" content="rILPN0Fit17u21ImKQW-ZHQMvx_Ak7qcuM3ewqtrJg8" />
7 <!-- bootstrap 2.3.2 gives an error that the `zoom` css property isn't supported, 8 <link href="css/style.css" rel="stylesheet" media="screen">
8 but we don't have anything that uses it anyway -->
9 <link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
10 <link href="./css/style.css" rel="stylesheet" media="screen">
11 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico?"> 9 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
12 <style> 10 <style>
13 body { 11 body {
14 background-size: cover; 12 background-size: cover;
15 background-repeat: no-repeat; 13 background-repeat: no-repeat;
18 background-color: #1F255A; 16 background-color: #1F255A;
19 min-height: 100vh; 17 min-height: 100vh;
20 } 18 }
21 </style> 19 </style>
22 </head> 20 </head>
21
23 <body> 22 <body>
24 <!-- I tried to make this HTML as clean as possible, as to reduce clutter 23 <!-- I tried to make this HTML as clean as possible, as to reduce clutter
25 from what these pages used to look like :/ 24 from what these pages used to look like :/
26 25
27 Much of this page has taken "inspiration" (read: was stolen) from 26 Much of this page has taken "inspiration" (read: was stolen) from
28 sdomi's page at https://sdomi.pl/ --> 27 sdomi's page at https://sdomi.pl/ -->
29 <div class="navbar navbar-inverse navbar-static-top"> 28 <div class="navbar drop-shadow-box">
30 <div class="navbar-inner"> 29 <a href="#" class="navbar-item-active">home</a>
31 <a class="brand" href="#">Paper's website</a> 30 <a href="projects/" class="navbar-item">projects</a>
32 <ul class="nav">
33 <li class="active"><a href="#">Home</a></li>
34 </ul>
35 </div>
36 </div> 31 </div>
37 32
38 <br /> 33 <br>
39 34
40 <div class="header"> 35 <div class="header">
41 <img class="avatar drop-shadow-box" src="media/avatar.jpg" 36 <img class="avatar drop-shadow-box" src="media/avatar.jpg"
42 alt="Himeko Inaba from Kokoro Connect" title="Himeko Inaba from Kokoro Connect" /> 37 alt="Himeko Inaba from Kokoro Connect" title="Himeko Inaba from Kokoro Connect">
43 <h1 class="title drop-shadow-text">Paper's website</h1> 38 <h1 class="title drop-shadow-text">Paper's website</h1>
44 </div> 39 </div>
40
41 <br>
45 42
46 <div class="content drop-shadow-box"> 43 <div class="content drop-shadow-box">
47 <h2 class="drop-shadow-text">About me</h2> 44 <h2 class="drop-shadow-text">About me</h2>
48 <p class="drop-shadow-text"> 45 <p class="drop-shadow-text">
49 My main interests are retro computers (old Apple stuff mainly), 46 My main interests are retro computers (old Apple stuff mainly),
50 <a href="https://sr.ht/~mrpapersonic">programming</a>, 47 <a class="prettylink" target="_blank" href="https://sr.ht/~mrpapersonic">programming</a>,
51 <a href="https://anilist.co/user/PaperAIDS/">anime and manga</a>, 48 <a class="prettylink" target="_blank" href="https://anilist.co/user/PaperAIDS/">anime and manga</a>,
52 and some linguistics. I also make some 49 and some linguistics. I also make some
53 <a href="https://modarchive.org/index.php?request=view_artist_modules&query=92603">tunes</a> 50 <a class="prettylink" target="_blank" href="https://modarchive.org/index.php?request=view_artist_modules&query=92603">tunes</a>
54 from time to time. 51 from time to time.
55 </p> 52 </p>
56 <p class="drop-shadow-text">
57 I use Debian as my main operating system with KDE Plasma as my desktop environment.
58 </p>
59
60 <h2 class="drop-shadow-text">Projects</h2>
61 <ul>
62 <li class="drop-shadow-text">
63 <a href="https://hg.sr.ht/~mrpapersonic/vegas-scripts">Vegas Pro scripts</a>:
64 some scripts that make using Vegas Pro less unbearable
65 </li>
66 <li class="drop-shadow-text">
67 <a href="https://hg.sr.ht/~mrpapersonic/wgsdk">wgsdk</a>:
68 a Discord GameSDK plugin for Winamp
69 </li>
70 </ul>
71 53
72 <h2 class="drop-shadow-text">Socials</h2> 54 <h2 class="drop-shadow-text">Socials</h2>
73 <ul> 55 <ul class="index-socials-list">
74 <li class="drop-shadow-text"> 56 <li class="drop-shadow-text">
75 E-mail (<a href="mailto:mrpapersonic@gmail.com">mrpapersonic@gmail.com</a>) 57 E-mail (<a class="prettylink" href="mailto:paper@paper.us.eu.org">paper@paper.us.eu.org</a>)
76 </li> 58 </li>
77 <li class="drop-shadow-text"> 59 <li class="drop-shadow-text">
78 Discord (@slipofpaper) 60 Discord (@slipofpaper)
79 </li> 61 </li>
80 <li class="drop-shadow-text">
81 Telegram (<a href="https://t.me/mrpapersonic">@mrpapersonic</a>)
82 </li>
83 <br> 62 <br>
84 <li class="drop-shadow-text"> 63 <li class="drop-shadow-text">
85 Fediverse (<a href="https://miniwa.moe/users/paper">@paper@miniwa.moe</a>) 64 Fediverse (<a class="prettylink" target="_blank" href="https://miniwa.moe/users/paper">@paper@miniwa.moe</a>)
86 </li> 65 </li>
87 </ul> 66 </ul>
88 </div> 67 </div>
89 </body> 68 </body>
69 </html>