Some design and some content, Also Makefile

.gitignore

@@ -0,0 +1,2 @@
+dist
+.idea

Makefile

@@ -0,0 +1,29 @@
+.PHONY: mkdist clean
+
+all: clean index now links
+	rm -rf dist/template.html
+
+watch:
+	while sleep 1 ; do \
+		find ./src -iname '*.html' -o -name "*.css" \
+		  | entr -d make -f ./Makefile ; \
+	done
+
+mkdist:
+	mkdir -p dist
+
+template: mkdist src/start.html src/nav.html src/side.html
+	cp -r src/styles dist
+	cat src/start.html src/nav.html src/side.html > dist/template.html
+
+index: template src/pages/index.html
+	cat dist/template.html src/pages/index.html src/end.html > dist/index.html
+
+now: template src/pages/now.html
+	cat dist/template.html src/pages/now.html src/end.html > dist/now.html
+
+links: template src/pages/links.html
+	cat dist/template.html src/pages/links.html src/end.html > dist/links.html
+
+clean:
+	rm -rf dist

README.md

@@ -1,3 +1,13 @@
-# website
+# Homepage
+
+My own private website hosted at https://rhetenor.de .
+
+Goal is to create an accessible homepage using only HTML5 + CSS . 
+
+The static generation works mainly with GNU utils (cat, make, sh) and the blog is written in markdown converted with pandoc.
+
+## Usage
+
+  * `make` to create the homepage, requires GNU utils
+  * `make watch` to update the homepage whenever a file in `src/` changes. Requires `entr` for file watching
 
-My own private website hosted at https://rhetenor.de

src/blog/test/1.md

@@ -0,0 +1,3 @@
+# hej
+ein test
+** toller blogpost **

src/blog/test/2.md

@@ -0,0 +1,4 @@
+# lol
+another test
+
+** with an even better english blogpost ** oO

src/blog/test/3.md

@@ -0,0 +1,2 @@
+i dont care about this
+

src/blog/test/out.html

@@ -0,0 +1,6 @@
+<h1 id="hej">hej</h1>
+<p>ein test ** toller blogpost **</p>
+<h1 id="lol">lol</h1>
+<p>another test</p>
+<p>** with an even better english blogpost ** oO</p>
+<p>i dont care about this</p>

src/end.html

@@ -0,0 +1,2 @@
+</body>
+</html>

src/nav.html

@@ -0,0 +1,10 @@
+<nav>
+    <ul>
+        <li><a href="/" aria-label="Main">main()</a></li>
+        <li><a href="/blog" aria-label="Blog">blog()</a></li>
+        <li><a href="/now" aria-label="Now">now()</a></li>
+        <li><a href="/links" aria-label="Links">links()</a></li>
+        <li><a href="/misc">misc()</a></li>
+        <li><a href="https://git.rhetenor.de" aria-label="External link to my git">git()</a></li>
+    </ul>
+</nav>

src/pages/index.html

@@ -0,0 +1,29 @@
+<main>
+    <article>
+        <h1 id="mainHeading">$ mount /dev/home</h1>
+        <p>
+            Hej and welcome to my personal homepage.
+        </p>
+        <p>
+            Probably not the catchiest phrase but definitely nostalgic towards the early 2000s homepages.
+            Since I'd like to live in a world of small independent unique websites,
+            this site is my kind of contribution.
+        </p>
+        <p>
+            In here you'll find all kind of things I'm interested in and like to share.
+            (Stronger) opinions and beliefs in my <a href="/blog">blog()</a>,
+            things I'm doing right <a href="/now">now()</a>,
+            a more or less curated <a href="/link">link()</a> list
+            and a collection of my personal <a href="/philosophy">philosophy()</a> for whomever cares.
+            I also share some tools and their code for whomever they are useful to.
+        </p>
+        <p>
+            Just be awesome and excellent to each other :)
+        </p>
+        <p>
+            PS: If you're accessing this content from any sort of accessibility device and got
+            any problems please call out via mail to <a href="mailto:rhetenor@rhetenor.de">rhetenor@rhetenor.de</a>.
+        </p>
+    </article>
+</main>
+

src/pages/links.html

@@ -0,0 +1,17 @@
+<main id="links">
+  <h1 id="mainHeading">mount /dev/links</h1>
+
+  A page with my personal categorized awesome list of links.
+
+  <h2>Link aggregators</h2>
+    <p>
+      <a href="https://news.ycombinator.com">Hackernews</a>
+        Quite common but mostly nice articles of CS/Math related things
+    </p>
+    <p><a href="https://lobste.rs">lobste.rs</a> More programming related links.</p>
+
+  <h2>Comics</h2>
+  <p>
+  <a href="https://xkcd.com">xkcd</a> The classic
+  </p>
+</main>

src/pages/now.html

@@ -0,0 +1,18 @@
+<main>
+    <h1 id="mainHeading">mount /dev/now</h1>
+
+    This page contains all projects I'm working on right now. As a reminder and incentive to keep going!
+
+    <h2>Projects</h2>
+    <ul>
+        <li>This website</li>
+        <li>Colemak Split Keyboard <a href="https://git.rhetenor.de/rhetenor/tastarut">Git</a></li>
+    </ul>
+    <h2>Education</h2>
+    <ul>
+        <li>Colemak Keyboard Layout</li>
+        <li>French</li>
+        <li>Swedish</li>
+    </ul>
+    <span>Last updated: 01.05.2024</span>
+</main>

src/side.html

@@ -0,0 +1,27 @@
+<aside>
+    <section aria-labelledby="updates_heading">
+
+        <h1 id="updates_heading">Updates</h1>
+        <ul class="outer_list">
+            <li>
+                <h2>2024-05-08:</h2>
+                <ul class="inner_list">
+                    <li>Updated Style</li>
+                    <li>main() Content</li>
+                    <li>More links()</li>
+                    <li>Added Misc</li>
+                </ul>
+            </li>
+
+            <li><h2>2024-04-28:</h2>Website created</li>
+        </ul>
+    </section>
+
+    <section aria-labelledby="tools_heading">
+        <h1 id="tools_heading">Tools</h1>
+        <ul class="outer_list">
+            <li><h2><a href="https://awesm.sh">awesm.sh</a></h2></li>
+        </ul>
+    </section>
+</aside>
+

src/start.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>rhetenors_homepage.index()</title>
+    <link rel="stylesheet" href="styles/style.css">
+    <link rel="stylesheet" href="styles/main.css">
+    <link rel="stylesheet" href="styles/aside.css">
+    <link rel="stylesheet" href="styles/nav.css">
+</head>
+<body>
+

src/styles/aside.css

@@ -0,0 +1,39 @@
+aside {
+    max-width: 170px;
+    height: 100%;
+    overflow: hidden;
+    margin-right: 1vw;
+    margin-top: 3vh;
+    width: 18%;
+    border-right: solid;
+
+    & section {
+        padding: 0;
+        overflow: hidden;
+    }
+
+    .outer_list {
+        padding: 0;
+        display: flex;
+        flex-flow: column wrap;
+        overflow: hidden;
+        list-style: none;
+    }
+
+    .inner_list {
+        padding-left: 1em;
+        list-style: linear-gradient(90deg, #111111 10%, cornflowerblue 20%, white 95%);
+    }
+
+    & h1 {
+        text-align: center;
+        margin: 0;
+    }
+
+    & h2 {
+        text-align: center;
+        margin-top: 0.25em;
+        margin-bottom: 0;
+        font-size: 1em;
+    }
+}

src/styles/main.css

@@ -0,0 +1,39 @@
+main {
+    margin: 1%;
+    width: 78%;
+
+    & h1 {
+        text-align: center;
+    }
+
+    #mainHeading {
+        color: #8ae234;
+    }
+    #mainHeading:after {
+        content: "";
+        width: .35em;
+        height: .9em;
+        margin-left: .07em;
+        margin-bottom: -0.05em;
+        background: floralwhite;
+        display: inline-block;
+        animation: cursor-blink 1.3s steps(2) infinite;
+    }
+}
+
+@keyframes cursor-blink {
+    0% {
+        opacity: 0;
+    }
+}
+
+#links {
+    & p {
+        display: flex;
+        flex-wrap: nowrap;
+        flex-direction: column;
+    }
+    & a:after {
+        content: "/~"
+    }
+}

src/styles/nav.css

@@ -0,0 +1,42 @@
+nav {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    text-align: center;
+    overflow: hidden;
+
+    & ul {
+        margin: 0;
+        padding: 0;
+        //border-bottom: 1px solid cornflowerblue;
+        overflow: hidden;
+        background: linear-gradient(
+              45deg,
+            #222222 15%,
+            royalblue 15% 90%
+        ),
+        linear-gradient(
+            -45deg,
+            #222222 15%,
+            transparent 15%
+        );
+    ;
+        background-blend-mode: overlay;
+        display: flex;
+        gap: 3em;
+        justify-content: center;
+        list-style: none;
+    }
+    & li:hover {
+        background-color: blue;
+    }
+
+    & a {
+        color: #f2f2f2;
+        text-decoration: none;
+        font-size: 17px;
+    }
+    & a:active {
+        background-color: green;
+    }
+}

src/styles/style.css

@@ -0,0 +1,55 @@
+html {
+    height: 100%;
+    width: 100%;
+}
+
+body {
+    color: floralwhite;
+    height: 100%;
+    width: 100%;
+    margin: 0 0 0 0;
+    display: flex;
+    flex-flow: row wrap;
+    padding: 0;
+    background-image:
+            linear-gradient(
+                30deg,
+                #181a1b 7%,
+                white 7.3% 7.5%,
+                #000 7.8%
+            ),
+            linear-gradient(
+                    60deg,
+                    #000123 7.2%,
+                    white 7.3% 7.35%,
+                    #000 7.45%
+            ),
+            linear-gradient(
+                    -20deg,
+                    #181a1b 38%,
+                    red 38.2% 38.3%,
+                    #000 38.5%
+            ),
+            linear-gradient(
+                    12deg,
+                    #181a1b 14%,
+                    green 14.3% 14.5%,
+                    #000 14.8%
+            ),
+            linear-gradient(
+                    11deg,
+                    #181a1b 3%,
+                    white 3.3% 3.5%,
+                    #333333 3.8%
+            );
+    background-blend-mode: screen;
+}
+
+main > h1 {
+  color: green;
+}
+
+a {
+    color: dodgerblue;
+    text-decoration: none;
+}