Initial redesign

nonk123 · Mar 13, 2024 · ec6df2a · ec6df2a
1 parent e1c547b
commit ec6df2a
Show file tree

Hide file tree

Showing 19 changed files with 152 additions and 260 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -6,6 +6,6 @@ end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[*.{html,css,scss,md}]
+[*.{html,css,md}]
 indent_style = space
 indent_size = 4
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -23,15 +23,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-      - name: Render SASS
-        uses: gha-utilities/[email protected]
-        with:
-          source: index.scss
-          destination: static/index.css
-      - name: Copy files
+     - name: Copy files
         run: |
           mkdir -p dist
-          cp -r index.html robots.txt static/ dist/
+          cp -r index.html index.css favicon.ico robots.txt dist/
       - name: Setup Pages
         uses: actions/configure-pages@v3
       - name: Upload artifact

diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,4 @@
 /.vscode
 
-static/index.css
-static/index.css.map
-
 \#*
 *~
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 nonk123
+Copyright (c) 2023-2024 nonk123
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,10 +1,3 @@
 # nonk.dev
 
-My mediocre website.
-
-## Instructions for my future self
-
-```bash
-sass --watch index.scss static/index.css
-py -m http.server 8080
-```
+My awesome website. See it live at <https://nonk.dev>.
diff --git a/static/favicon.ico → favicon.ico b/static/favicon.ico → favicon.ico
diff --git a/index.css b/index.css
@@ -0,0 +1,106 @@
+html, body {
+	margin: 0;
+	padding: 0;
+}
+
+* {
+	box-sizing: border-box;
+
+	font-size: 16px;
+	font-family: 'Courier New', Courier, monospace;
+}
+
+body {
+	width: 100vw;
+	height: 100vh;
+
+	color: #EEF0F2;
+	background: #141414;
+}
+
+#root {
+	display: grid;
+
+	width: 100ex;
+	height: 100%;
+
+	margin: 0 auto;
+	padding: 1em 0;
+
+	overflow-y: hidden;
+
+	grid-template-rows: 1fr 1em;
+	grid-template-columns: 72% 28%;
+	grid-template-areas:
+		"cont side"
+		"foot foot";
+}
+
+header {
+	grid-area: head;
+}
+
+footer {
+	grid-area: foot;
+	text-align: end;
+}
+
+nav {
+	grid-area: side;
+}
+
+main {
+	grid-area: cont;
+	overflow-y: auto;
+}
+
+nav, main {
+	padding: 1ex 1em;
+}
+
+h1::before {
+	content: "# ";
+}
+
+ul {
+    margin: 0;
+	padding: 0;
+
+    padding-left: 2ex;
+
+	list-style-type: none;
+}
+
+ul > li::before {
+    content: "- ";
+}
+
+ul.links > li::before {
+	content: "> ";
+}
+
+p, h1, ul {
+	margin-top: 0;
+	margin-bottom: 1em;
+}
+
+a {
+	text-decoration: none;
+	font-weight: bold;
+}
+
+a {
+	color: #14EE14;
+}
+
+a:visited {
+	color: #149914;
+}
+
+a::before {
+	content: "[";
+}
+
+a::after {
+	content: "]";
+}
diff --git a/index.html b/index.html
@@ -4,60 +4,54 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
-    <link rel="stylesheet" href="/static/index.css">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="/index.css">
     <script async src="https://umami.schwungus.software/script.js"
         data-website-id="4d6f1497-24de-4a6e-9991-9931303cfa2c"></script>
     <title>nonk's website</title>
     <meta name="description"
-        content="A software developer with a thing for cats. This is my personal doomcore website plus a portfolio.">
+          content="A software developer with a thing for cats. Here is my portfolio.">
 </head>
 
 <body>
-    <div id="static">
-        <img class="fire-pillar" src="/static/firepillar.gif" alt="Pillar filling the gap on the left">
-        <img class="fire-pillar" src="/static/firepillar.gif" alt="Pillar filling the gap on the right">
-    </div>
-    <div class="slide">
-        <div id="super-container">
-            <div id="logo-container">
-                <img class="devil-fire" src="/static/devilfire.gif" alt="My cat's guardian (left)">
-                <img class="big-logo" src="/static/logo.png" alt="My beautiful cat">
-                <img class="devil-fire" src="/static/devilfire.gif" alt="My cat's guardian (right)">
-            </div>
-            <div class="stairs"></div>
-        </div>
-        <div id="title-container">
-            <h1>nonk's website</h1>
-        </div>
-        <div class="down-hand-container">
-            <img src="/static/downhand.gif" alt="Pointing downwards to get your attention (1)">
-            <img src="/static/downhand.gif" alt="Pointing downwards to get your attention (2)">
-            <img src="/static/downhand.gif" alt="Pointing downwards to get your attention (3)">
-        </div>
-    </div>
-    <div class="slide">
-        <div id="check-out">
-            <img class="fire1" src="/static/fire1.gif" alt="Fire GIF (left)">
-            <h2>My projects</h2>
-            <img class="fire1" src="/static/fire1.gif" alt="Fire GIF (right)">
-        </div>
-        <div class="projects">
-            <a href="https://bombswab.schwungus.software">
-                <img src="/static/projects/bombswab.png" alt="Bombswab, the roguelike Minesweeper clone">
-            </a>
-            <a href="https://schwungus.software">
-                <img src="/static/projects/schwungus-software.png" alt="The Schwungus Software website">
-            </a>
-            <a href="https://ghost-liner.nonk.dev">
-                <img src="/static/projects/ghost-liner.png"
-                    alt="GhostLiner, the Line Rider clone where you explode if you die">
-            </a>
-            <a href="https://github.com/Schwungus-Software/shroom">
-                <img src="/static/projects/shroom.png" alt="shroom, a Doom-compatible engine">
-            </a>
-        </div>
-    </div>
+    <div id="root">
+    	<nav>
+        	<p>Socials:</p>
+			<ul class="links">
+    			<li><a href="mailto:[email protected]">Email</a></li>
+    			<li><a href="https://github.com/nonk123">GitHub</a></li>
+    			<li><a href="https://discord.com/users/268677450144153611">Discord</a></li>
+			</ul>
+			<p>Friends:</p>
+			<ul class="links">
+    			<li><a href="https://cantsleep.cc">Can't Sleep</a></li>
+			</ul>
+			<p>Collectives:</p>
+			<ul class="links">
+    			<li><a href="https://schwungus.software">Schwungus</a></li>
+			</ul>
+    	</nav>
+    	<main>
+        	<h1>nonk is here to help!</h1>
+        	<p>I am a tinkerer, a coder, and a self-hosting enthusiast.</p>
+        	<p>My interests are:</p>
+        	<ul>
+            	<li>Good ol' C, C++, and Rust.</li>
+            	<li>Free software.</li>
+                <li>Simplicity and minimalism at the core.</li>
+            	<li>Game development. Mostly with <a href="https://github.com/raysan5/raylib">raylib</a>.</li>
+            	<li>Everything Linux.</li>
+        	</ul>
+        	<p>As for the formalities, I have a bachelor's degree in computer science.</p>
+        	<p>I seldom leave the command line. The only graphical apps I actively use are Discord and Firefox.</p>
+        	<p>My text editor of choice is <a href="https://github.com/mawww/kakoune">Kakoune</a>. Though, I used to be an avid proponent of GNU/Emacs for several years.</p>
+        	<p>Did I mention I love cats? And dogs too. Also manatees.</p>
+        	<p>Found me useful? Contact me!</p>
+    	</main>
+    	<footer>
+        	(c) 2023-2024 nonk <a href="https://github.com/nonk123/nonk.dev">source code</a>
+    	</footer>
+	</root>
 </body>
 
 </html>