diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e2d9e9f --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +dist +.idea diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..d2bca13 --- /dev/null +++ b/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 diff --git a/README.md b/README.md index 62961fc..a809f49 100644 --- a/README.md +++ b/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 \ No newline at end of file diff --git a/src/blog/test/1.md b/src/blog/test/1.md new file mode 100644 index 0000000..17f6e90 --- /dev/null +++ b/src/blog/test/1.md @@ -0,0 +1,3 @@ +# hej +ein test +** toller blogpost ** diff --git a/src/blog/test/2.md b/src/blog/test/2.md new file mode 100644 index 0000000..7dda38e --- /dev/null +++ b/src/blog/test/2.md @@ -0,0 +1,4 @@ +# lol +another test + +** with an even better english blogpost ** oO diff --git a/src/blog/test/3.md b/src/blog/test/3.md new file mode 100644 index 0000000..14e6419 --- /dev/null +++ b/src/blog/test/3.md @@ -0,0 +1,2 @@ +i dont care about this + diff --git a/src/blog/test/out.html b/src/blog/test/out.html new file mode 100644 index 0000000..e68dcf3 --- /dev/null +++ b/src/blog/test/out.html @@ -0,0 +1,6 @@ +

hej

+

ein test ** toller blogpost **

+

lol

+

another test

+

** with an even better english blogpost ** oO

+

i dont care about this

diff --git a/src/end.html b/src/end.html new file mode 100644 index 0000000..308b1d0 --- /dev/null +++ b/src/end.html @@ -0,0 +1,2 @@ + + diff --git a/src/nav.html b/src/nav.html new file mode 100644 index 0000000..05c1a20 --- /dev/null +++ b/src/nav.html @@ -0,0 +1,10 @@ + diff --git a/src/pages/index.html b/src/pages/index.html new file mode 100644 index 0000000..f064f1b --- /dev/null +++ b/src/pages/index.html @@ -0,0 +1,29 @@ +
+
+

$ mount /dev/home

+

+ Hej and welcome to my personal homepage. +

+

+ 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. +

+

+ In here you'll find all kind of things I'm interested in and like to share. + (Stronger) opinions and beliefs in my blog(), + things I'm doing right now(), + a more or less curated link() list + and a collection of my personal philosophy() for whomever cares. + I also share some tools and their code for whomever they are useful to. +

+

+ Just be awesome and excellent to each other :) +

+

+ PS: If you're accessing this content from any sort of accessibility device and got + any problems please call out via mail to rhetenor@rhetenor.de. +

+
+
+ diff --git a/src/pages/links.html b/src/pages/links.html new file mode 100644 index 0000000..20205cc --- /dev/null +++ b/src/pages/links.html @@ -0,0 +1,17 @@ +
+

mount /dev/links

+ + A page with my personal categorized awesome list of links. + +

Link aggregators

+

+ Hackernews + Quite common but mostly nice articles of CS/Math related things +

+

lobste.rs More programming related links.

+ +

Comics

+

+ xkcd The classic +

+
diff --git a/src/pages/now.html b/src/pages/now.html new file mode 100644 index 0000000..62f3936 --- /dev/null +++ b/src/pages/now.html @@ -0,0 +1,18 @@ +
+

mount /dev/now

+ + This page contains all projects I'm working on right now. As a reminder and incentive to keep going! + +

Projects

+ +

Education

+ + Last updated: 01.05.2024 +
diff --git a/src/side.html b/src/side.html new file mode 100644 index 0000000..ff30a16 --- /dev/null +++ b/src/side.html @@ -0,0 +1,27 @@ + + diff --git a/src/start.html b/src/start.html new file mode 100644 index 0000000..6cf27cf --- /dev/null +++ b/src/start.html @@ -0,0 +1,13 @@ + + + + + + rhetenors_homepage.index() + + + + + + + diff --git a/src/styles/aside.css b/src/styles/aside.css new file mode 100644 index 0000000..157ae8e --- /dev/null +++ b/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; + } +} diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 0000000..eaf7654 --- /dev/null +++ b/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: "/~" + } +} diff --git a/src/styles/nav.css b/src/styles/nav.css new file mode 100644 index 0000000..103b5a8 --- /dev/null +++ b/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; + } +} diff --git a/src/styles/style.css b/src/styles/style.css new file mode 100644 index 0000000..f1565a0 --- /dev/null +++ b/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; +}