Changes for master

Reviewed-on: #1

.gitea/workflows/build.yaml

@@ -0,0 +1,21 @@
+name: Build Zola Website
+
+on: pull_request
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Set up Zola
+        uses: taiki-e/install-action@v2
+        with:
+          tool: zola@0.17.2
+
+      - name: Build Zola Website
+        run: |
+          zola build
+

.gitea/workflows/build_and_deploy.yaml

@@ -0,0 +1,44 @@
+name: Build and Deploy Zola Website
+
+on:
+  push:
+    branches:
+      - master
+      - dev
+
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Set up Zola
+        uses: taiki-e/install-action@v2
+        with:
+          tool: zola@0.17.2
+
+      - name: Build Zola Website
+        run: |
+          zola build
+
+      - name: Set Destination Folder if MASTER
+        if: ${{ github.ref == 'refs/heads/master' }}
+        run: echo "DEST_FOLDER=/srv/www/cz/filiprojek/www" >> $GITHUB_ENV
+
+      - name: Set Destination Folder if DEV
+        if: ${{ github.ref == 'refs/heads/dev' }}
+        run: echo "DEST_FOLDER=/srv/www/cz/filiprojek/dev" >> $GITHUB_ENV
+
+      - name: Deploy to server
+        uses: AEnterprise/rsync-deploy@v1.0.2
+        env:
+          DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}
+          ARGS: "-e -c -r --delete"
+          SERVER_PORT: 22
+          FOLDER: "./public/"
+          SERVER_IP: ${{ secrets.SERVER_IP }}
+          USERNAME: ${{ secrets.USERNAME }}
+          SERVER_DESTINATION: ${{ env.DEST_FOLDER }}
+

.gitignore

@@ -0,0 +1 @@
+public/

README.md

@@ -1,17 +1,28 @@
 # Website
-- My personal website written in php, html, css and js
+- My personal website https://www.filiprojek.cz
+- Written in [Zola](https://getzola.org)
 
 ## To run development server
-- `php -S localhost:8000`
-- Then it can be access at http://localhost:8000/
-
-## To run using Docker
-- ToDo
+- `zola serve`
+- Then it can be access at http://127.0.0.1:1111/
 
 ## To Do
-- [ ] Docker
-- [ ] kopirovani PGP na click opravit
-- [ ] projekty page css
-- [ ] contact page odesilani mailu
-- [ ] contact page pridat odkazy na dalsi soc site (github atd)
+- [ ] Docker?
+- [ ] redesign contact
+- [ ] redesign about
+- [ ] check about text content
+- [ ] responsibility
+
+# Projects
+ - nork
+ - website
+ - debrepo
+ - auto irrigation
+ - auto awning close
+ - FofrTasks
+ - FofrMess
+ - pkmples.cz
+ - deguapp?
+ - wpa_tui?
+ - dotfiles
 

components/footer.php

@@ -1,2 +0,0 @@
-<p>(c) filiprojek.cz 2023<p>
-

components/header.php

@@ -1,11 +0,0 @@
-<section class="nav">
-	<a class="logo" href="/">
-		<img src="img/fr_logo.webp" alt="logo" />
-	</a>
-	<div class="links">
-		<a href="/home">Úvod</a>
-		<a href="/projects">Projekty</a>
-		<a href="/contact">Kontakt</a>
-	</div>
-</section>
-

config.toml

@@ -0,0 +1,24 @@
+# The URL the site will be built for
+base_url = "https://www.filiprojek.cz"
+title = "Filip Rojek"
+
+compile_sass = true
+minify_html = false
+build_search_index = false
+
+[markdown]
+highlight_code = true
+external_links_target_blank = true
+external_links_no_follow = true
+external_links_no_referrer = true
+smart_punctuation = true
+
+[extra]
+git = "https://git.filiprojek.cz/fr/website"
+nav_items = [
+	{name="Home",      path="/"},
+  #{name="About",     path="/about"},
+	#{name="Projects",  path="/projects/"},
+	#{name="Posts",      path="/posts"}
+]
+

css/contact.css

@@ -1,37 +0,0 @@
-.content {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-
-.form_contact {
-	--base-padding: .5rem 1rem;
-	display: flex;
-	flex-direction: column;
-	width: 15rem;
-	margin-top: 2rem;
-}
-
-.form_contact input {
-	padding: var(--base-padding);
-	margin-bottom: 1rem;
-}
-
-.form_contact button {
-	align-self: center;
-	padding: var(--base-padding);
-	margin-top: 1.5rem;
-	cursor: pointer;
-	background-color: white;
-	color: black;
-}
-
-.form_contact textarea {
-	height: 8rem;
-	resize: none;
-	padding: var(--base-padding);
-}
-
-.form_contact input, textarea, button {
-	border-radius: 5px;
-}

css/home.css

@@ -1,28 +0,0 @@
-.content {
-	margin-block: auto;
-}
-.home {
-	font-size: 1.2rem;
-}
-.home section {
-	text-align: center;
-}
-.home a {
-	color: lightblue;
-	cursor: pointer;
-	text-decoration: underline;
-}
-#pgp {
-	cursor: pointer;
-}
-#pgpmobile {
-	display: none;
-}
-@media (max-width: 600px) {
-	#pgp {
-		display: none;
-	}
-	#pgpmobile {
-		display: inline-block;
-	}
-}

css/projects.css

@@ -1,52 +0,0 @@
-.content h1 {
-	text-align: center;
-	margin-bottom: 2rem;
-}
-
-.projects {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 1rem;
-}
-
-.projects img {
-	max-width: 100%;
-	display: block;
-}
-
-.card {
-	display: flex;
-	border: 1px solid red;
-	border-radius: 15px;
-	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
-	width: min(40rem, calc(100% - 1rem));
-}
-
-.card .card_text > * {
-	margin: 1rem;
-}
-
-.card > * {
-	flex-basis: 100%;
-}
-
-.card .card_left {
-	border: 1px solid green;
-}
-
-.card .card_right {
-	border: 1px solid yellow;
-}
-
-.technologies {
-	display: flex;
-	gap: 1rem;
-	flex-wrap: wrap;
-}
-
-.technologies span {
-	border: 1px solid white;
-	padding: .5rem;
-	border-radius: 5px;
-}

css/variables.css

@@ -1,6 +0,0 @@
-body {
-	--base-padding: .5rem 1rem;
-    --base-margin: 2rem;
-    --background: #111111;
-    --color: #ffffff;
-}

index.php

@@ -1,88 +0,0 @@
-<?php
-	$prod = false;
-	
-	require_once("./libraries/router.php");
-	require_once("./libraries/console.php");
-	
-	// Display Errors
-	ini_set('display_startup_errors', 1);
-	ini_set('display_errors', 1);
-	error_reporting(-1);
-	
-	// Display var_dump
-	#var_dump($_SESSION);
-	
-	// Date Time Zone
-	date_default_timezone_set('Europe/Prague');
-	
-	// site info
-	$keywords = "Filip Rojek, rojek, vyvojar, developer, backend vyvojar, nodejs vyvojar, php vyvojar, web vyvojar, programator, linux administrator";
-	$description = "Linux user, backend web developer and student.";
-	$locale = "cs_CZ";
-	$title = "Filip Rojek | Developer";
-	$site_name = "Filip Rojek | Developer";
-	$author = "Fofrweb | https://fofrweb.com";
-	$email = "webmaster(@)fofrweb.com";
-	$canonical = "https://www.filiprojek.cz/";
-?>
-
-<!doctype html>
-<html>
-<head>
-	<meta charset="UTF-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1.0" />
-	<meta id="contentLanguage" http-equiv="Content-Language" content="<?= $locale ?>" />
-	<meta name="keywords" content="<?= $keywords ?>" />
-	<meta name="description" content="<?= $description ?>" />
-	<meta property="og:locale" content="<?= $locale ?>" />
-	<meta property="og:type" content="website" />
-	<meta property="og:title" content="<?= $title ?>" />
-	<meta property="og:description" content="<?= $description ?>" />
-	<meta property="og:site_name" content="<?= $site_name ?>" />
-	<meta name="author" content="<?= $author ?>" />
-	<meta name="email" content="<?= $email ?>" />
-	<meta name="copyright" content="<?= $copyright ?>" />
-	<meta name="expires" content="never" />
-
-<?php 
-if($prod) { ?>
-		<meta name="robots" content="index,follow" />
-		<meta name="Seznambot" content="index,follow" />
-		<meta name="Googlebot" content="index,follow" />
-<?php } else { ?>
-		<meta name="robots" content="noindex, nofollow" />
-		<meta name="Seznambot" content="noindex, nofollow" />
-		<meta name="Googlebot" content="noindex, nofollow" />
-<?php } ?>
-
-	<title><?= $title ?></title>
-	<link rel="icon" type="image/x-icon" href="/img/fr.ico" />
-	<link rel="canonical" href="<?= $canonical ?>" />
-	<link rel="stylesheet" href="/css/style.css">
-	<link rel="stylesheet" href="/css/variables.css">
-</head>
-<body>
-	<?php
-		require_once("./components/header.php");
-	?>
-	<section class="content">
-		<?php
-			$R = new Router();
-			$R->route('GET', '/', 'home');
-			$R->route('GET', '/home', 'home');
-			$R->route('GET', '/domu', 'home');
-
-			$R->route('POST', '/contact/send', 'contact');
-
-			$R = null;
-		?>
-	</section>
-	<footer>
-		<?php
-			require_once("./components/footer.php");
-		?>
-	</footer>
-</body>
-</html>
-

libraries/console.php

@@ -1,9 +0,0 @@
-<?php
-
-function console_log($data) {
-    $output = $data;
-    if (is_array($output))
-        $output = implode(',', $output);
-
-    echo "<script>console.log('Debug Objects: " . $output . "' );</script>";
-}

libraries/mail.php

@@ -1,31 +0,0 @@
-<?php
-class Mail {
-    public $from;
-    public $to;
-    public $subject;
-    public $message;
-    public $headers;
-
-    function __construct($from, $to, $subject, $message, $headers=null) {
-        $this->from = $from;
-        $this->to = $to;
-        $this->subject = $subject;
-        $this->headers = $headers;
-    }
-
-    public function send() {
-        // odeslání e-mailu
-        $headers = 'From: noreply@fofrweb.com' . "\r\n" .
-            'Reply-To: support@fofrweb.com' . "\r\n" .
-            'X-Mailer: PHP/' . phpversion();
-        $this->headers = $headers;
-
-        if (gettype($this->message) == 'string') {
-            if(mail($this->to, $this->subject, $this->message, $this->headers)) {
-                return true;
-            } else {
-                return false;
-            }
-        }
-    }
-}

libraries/router.php

@@ -1,33 +0,0 @@
-<?php
-class Router {
-	public $returned = false;
-
-	function route($method, $url, $filename) {
-		$methods = ['GET', 'POST'];
-		if(in_array($method, $methods)) {
-			if($_SERVER['REQUEST_METHOD'] == $method) {
-				if ($_SERVER['REQUEST_URI'] == $url) {
-					require_once("./pages/$filename/$filename.php");
-					$this->returned = true;
-					return;
-				}
-			}
-		}
-	}
-
-	function __destruct() {
-		if($_SERVER['REQUEST_METHOD'] == 'GET') {
-			if(!$this->returned){
-				$url = explode("/", $_SERVER['REQUEST_URI']);
-				$url = $url[count($url)-1];
-
-				if (file_exists("./pages/$url/$url.php")) {
-					require_once("./pages/$url/$url.php");
-				} else {
-					require_once("./pages/errors/404.php");
-				}
-			}
-		}
-	}
-}
-

pages/contact/contact.php

@@ -1,61 +0,0 @@
-<link rel="stylesheet" href="/css/contact.css">
-<h1>Kontaktujte mě</h1>
-
-<form class="form_contact" action="/contact/send" method="post" name="contact">
-	<label for="name">Vaše jméno:</label>
-	<input id="name" type="text" placeholder="Petr Novák" required autocomplete="on" />
-
-	<label for="email">Váš e-mail:</label>
-	<input id="email" type="email" placeholder="petr@novak.cz" required autocomplete="on" />
-
-	<label for="message">Zpráva:</label>
-	<textarea id="message" placeholder="Napište zprávu..." required></textarea>
-
-	<button type="button" id="submit">Odeslat zprávu</button>
-</form>
-
-<script>
-	const submit = document.querySelector("#submit")
-	submit.addEventListener("click", async (e) => {
-		e.preventDefault()
-		
-		const formData = new FormData();
-		formData.append('name', document.querySelector("#name").value);
-		formData.append('email', document.querySelector("#email").value);
-		formData.append('message', document.querySelector("#message").value);
-
-		try {
-  			await fetch('/contact/send', {
-    			method: 'POST',
-    			body: formData
-			});
-  			console.log('Message sent successfully.')
-		} catch (err) {
- 		 	console.error('Error:', error)
-		}
-	})
-</script>
-
-<?php
-ini_set('log_errors', 1);
-
-if(isset($_POST['email']) && isset($_POST['message'])) {
-	$email = $_POST['email'];
-	$message = $_POST['message'];
-	$name = $_POST['name'];
-
-	require_once(__DIR__ . "/../../libraries/mail.php");
-	$message = "Nová zpráva z webu filiprojek.cz\n\nOdesílatel: $email\nZpráva:\n$message";
-	$m = new Mail($_POST['email'], 'webmaster@filiprojek.cz', 'Nová zpráva z webu filiprojek.cz', $message);
-
-	if($m->send()) {
-		console_log("zprava odeslana");
-		header('Location: /?sent=true');
-	} else {
-		error_log("Message wasn't sent");
-		error_log(var_dump($m));
-		echo "<p>Něco se nepovedlo, zkuste to znovu... :(</p>";
-	    echo "<a href='/'>Zpět</a>";
-	}
-}
-

pages/errors/404.php

@@ -1,2 +0,0 @@
-<h1>Error 404 - not found</h1>
-

pages/home/home.php

@@ -1,33 +0,0 @@
-<link rel="stylesheet" href="./css/home.css" >
-<section class="home">
-	<section>
-		<p>Filip Rojek &ltfilip(at)filiprojek.cz&gt</p>
-		<br>
-		<p>Backend node.js & php developer <a href="https://www.fofrweb.com/" target="_blank">@fofrweb</a>,<br> Linux Gentoo user, student and coffee enthusiast<span class="underscore">_</span><p>
-		<br>
-		<p id="pgp" title="copy pgp to clipboard">PGP: fc37b989787acf8cbce7c0c2a56a345efe321161</p>
-		<br>
-		<p><a href="https://git.filiprojek.cz/fr" target="_blank">Git</a> <a href="https://t.me/filiprojek" target="_blank">Telegram</a> <a href="#" id="pgpmobile" title="copy pgp to clipboard">PGP</a></p>
-	</section>
-
-	<script>
-		const _ = document.querySelector(".underscore")
-		let b = false
-		setInterval(() => {
-			b ? _.style.visibility = "visible" : _.style.visibility = "hidden"
-			b = !b
-		}, 500)
-
-		const pgp = document.querySelector("#pgp")
-		const pgpmobile = document.querySelector("#pgpmobile")
-		const pgpcp = (e) => {
-			console.log(e)
-			navigator.clipboard.writeText("fc37b989787acf8cbce7c0c2a56a345efe321161")
-			alert("pgp has been copied to the clipboard")
-		}
-
-		pgp.addEventListener("click", pgpcp)
-		pgpmobile.addEventListener("click", pgpcp)
-	</script>
-</section>
-

pages/projects/projects.php

@@ -1,107 +0,0 @@
-<link rel="stylesheet" href="/css/projects.css">
-<h1>Projekty</h1>
-
-<section class="projects">
-	<div class="card">
-		<div class="card_left card_text">
-			<p>pkmples.cz</p>
-			<p>Komerční webová stránka pro PKM PARTY PLES.</p>
-			<div class="technologies">
-				<span>PHP</span>
-				<span>Linux</span>
-				<span>Nginx</span>
-			</div>
-			<p>01/2023</p>
-		</div>
-		<div class="card_right">
-			<img src="https://www.fofrweb.com/images/pkm_two.png" alt="project screenshot">
-		</div>
-	</div>
-
-	<div class="card">
-		<div class="card_left">
-			<img src="https://www.fofrweb.com/images/rapidd.png" alt="project screenshot">
-		</div>
-		<div class="card_right card_text">
-			<p>rapiddglass.cz</p>
-			<p>Komerční webová stránka pro přípravek na ochranu a čištění krbového skla Rapidd Glass.</p>
-			<p>10/2022</p>
-			<div class="technologies">
-				<span>PHP</span>
-				<span>Linux</span>
-				<span>Nginx</span>
-			</div>
-		</div>
-	</div>
-
-	<div class="card">
-		<div class="card_left card_text">
-			<p>danielryslavy.cz</p>
-			<p>Komerční webová stránka osobního trenéra Daniela Ryšlavého.</p>
-			<p>06/2022</p>
-			<div class="technologies">
-				<span>PHP</span>
-				<span>Linux</span>
-				<span>Nginx</span>
-			</div>
-	</div>
-		<div class="card_right">
-			<img src="https://www.fofrweb.com/images/fitness.png" alt="project screenshot">
-		</div>
-	</div>
-
-	<div class="card">
-		<div class="card_left">
-			<img src="#" alt="project screenshot">
-		</div>
-		<div class="card_right card_text">
-			<p>Fofrmess</p>
-			<p>Chatovací realtime PWA aplikace.</p>
-			<p>02/2022</p>
-			<div class="technologies">
-				<span>Node.js</span>
-				<span>Express.js</span>
-				<span>PostgreSQL</span>
-				<span>Linux</span>
-				<span>Nginx</span>
-			</div>
-		</div>
-	</div>
-
-	<div class="card">
-		<div class="card_left card_text">
-			<p>Fofrtasks</p>
-			<p>Aplikace pro vytváření a správu poznámek a úkolů.</p>
-			<p>10/2021</p>
-			<div class="technologies">
-				<span>Node.js</span>
-				<span>Express.js</span>
-				<span>MongoDB</span>
-				<span>Linux</span>
-				<span>Nginx</span>
-			</div>
-		</div>
-		<div class="card_right">
-			<img src="#" alt="project screenshot">
-		</div>
-	</div>
-
-	<div class="card">
-		<div class="card_left">
-			<img src="#" alt="project screenshot">
-		</div>
-		<div class="card_right card_text">
-			<p>Fofrbazar</p>
-			<p>Internetová bazarová platforma.</p>
-			<p>04/2021</p>
-			<div class="technologies">
-				<span>PHP</span>
-				<span>Laravel</span>
-				<span>MySQL</span>
-				<span>Linux</span>
-				<span>Apache</span>
-			</div>
-		</div>
-	</div>
-</section>
-

sass/_fonts.scss

@@ -0,0 +1,25 @@
+@font-face {
+	font-family: open-sans;
+	font-weight: normal;
+	font-style: normal;
+	src: url('fonts/open-sans-regular.woff2') format('woff2'),
+	     url('fonts/open-sans-regular.woff') format('woff'),
+	     url('fonts/open-sans-regular.ttf') format('truetype');
+}
+@font-face {
+	font-family: open-sans;
+	font-weight: normal;
+	font-style: italic;
+	src: url('fonts/open-sans-italic.woff2') format('woff2'),
+	     url('fonts/open-sans-italic.woff') format('woff'),
+	     url('fonts/open-sans-italic.ttf') format('truetype');
+}
+@font-face {
+	font-family: open-sans;
+	font-weight: bold;
+	font-style: normal;
+	src: url('fonts/open-sans-bold.woff2') format('woff2'),
+	     url('fonts/open-sans-bold.woff') format('woff'),
+	     url('fonts/open-sans-bold.ttf') format('truetype');
+}
+

sass/content.scss

@@ -0,0 +1,20 @@
+.content {
+	display: flex;
+	flex-direction: column;
+	margin: 2rem 20%;
+}
+
+.content {
+	@media (max-width: 690px) {
+		margin: 2rem 2rem;
+	}
+		.pgpwrap {
+			 word-break: break-all;
+		}
+}
+
+.contact {
+	h1 {
+		margin-bottom: 1rem;
+	}
+}

sass/general.scss

@@ -0,0 +1,14 @@
+.flex-col {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+}
+
+.flex-row {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: row;
+}
+

sass/home.scss

@@ -0,0 +1,34 @@
+.content {
+	margin-block: auto;
+}
+.home {
+	margin-top: 5rem;
+	font-size: 1.2rem;
+
+	section {
+		text-align: center;
+	}
+
+	a {
+		color: lightblue;
+		cursor: pointer;
+		text-decoration: underline;
+	}
+
+	#pgp {
+		cursor: pointer;
+	}
+
+	#pgpmobile {
+		display: none;
+	}
+}
+@media (max-width: 600px) {
+	#pgp {
+		display: none;
+	}
+	#pgpmobile {
+		display: inline-block;
+	}
+}
+

sass/project.scss

@@ -0,0 +1,23 @@
+//.project-wrapper {
+//	justify-content: start;
+//	align-items: start;
+//}
+//
+//.left-bar {
+//	width: 15rem;
+//	justify-content: start;
+//	align-items: start;
+//	border-right: thin solid var(--c-blue);
+//	margin-right: 2.5rem;
+//	padding: 0 2.5rem;
+//
+//	h2 {
+//		padding-bottom: 2.5rem;
+//	}
+//}
+
+
+.project-wrapper {
+  display: flex;
+  gap: 2.5rem;
+}

sass/project_list.scss

@@ -0,0 +1,25 @@
+.project-list  {
+	h1 {
+		margin-bottom: 2rem;
+		font-size: 2rem;
+	}
+	.project {
+		margin-bottom: 3rem;
+
+		.title {
+			text-decoration: none;
+			font-size: 1.2rem;
+			font-weight: bold;
+		}
+		
+		.description {
+			font-style: italic;
+			margin-bottom: .5rem;
+			margin-top: .5rem;
+		}
+		hr {
+			margin-bottom: .5rem;
+		}
+	}
+
+}

sass/style.scss

@@ -30,48 +30,53 @@ html {
     background: #000000;
 }
 
-.nav {
+nav {
 	position: relative;
 	display: flex;
-	padding: 1rem;
+	padding: 1rem 2rem;
 	justify-content: space-between;
 	isolation: isolate;
+
+	.logo img {
+		height: 3rem;
+	}
+
+	.links {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 1rem;
+		z-index: -1;
+		color: var(--color);
+		font-size: 1.3rem;
+	}
 }
 
-.nav .logo img {
-	height: 3rem;
-}
-
-.nav .links {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 1rem;
-	z-index: -1;
-	color: var(--color);
-}
 
 a { color: var(--color); }
 a:visited { color: var(--color); }
-a:hover { color: red; }
+a:hover { color: var(--a-hover); }
 
 @media (min-width: 400px) {
-	.nav .links {
+	nav .links {
 		position: absolute;
 		inset: 0;
 	}
 }
 
+/*
 .content {
 	padding: 2rem 1rem;
 }
-
+*/
 footer {
 	display: flex;
 	width: 100vw;
+	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 	align-self: flex-end;
 	margin-top: auto;
 	margin-bottom: 2rem;
 }
+

sass/vars.scss

@@ -0,0 +1,14 @@
+* {
+	--base-padding: .5rem 1rem;
+	--base-margin: 2rem;
+
+	--c-white: #ffffff;
+	--c-gray: #111111;
+	--c-red: #FF3A20;
+	--c-darkblue: #02081e;
+	--c-blue: #5B85AA;
+
+	--a-hover: var(--c-red);
+	--color: var(--c-white);
+	--background: var(--c-gray);
+}

static/img/at.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path fill="#ffffffff" d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v58q0 59-40.5 100.5T740-280q-35 0-66-15t-52-43q-29 29-65.5 43.5T480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480v58q0 26 17 44t43 18q26 0 43-18t17-44v-58q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h200v80H480Zm0-280q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Z"/></svg>

static/js/console.js

@@ -0,0 +1,107 @@
+const c = document.querySelector(".console")
+const ps1 = "[fr@website ~]$ "
+const motd = "Welcome to my website!<br>You can use `help` for more informations :)"
+let line = "";
+
+function exec(command) {
+  switch (command[0]) {
+    case "help":
+      line = "help<br>author<br>contact<br>clear<br>echo"
+      break;
+    case "author":
+      line = "Filip Rojek, 2023"
+      break
+    case "contact":
+      line = "Filip Rojek &lt<a href='mailto: &#102;&#105;&#108;&#105;&#112;&#064;&#102;&#105;&#108;&#105;&#112;&#114;&#111;&#106;&#101;&#107;&#046;&#099;&#122;'>&#102;&#105;&#108;&#105;&#112;&#064;&#102;&#105;&#108;&#105;&#112;&#114;&#111;&#106;&#101;&#107;&#046;&#099;&#122;</a>&gt<br>web: <a href='https://filiprojek.cz' target='_blank'>www.filiprojek.cz</a><br>telegram: <a href='https://t.me/filiprojek' target='_blank'>@filiprojek</a>"
+      break
+    case "clear":
+      write("000ctrll")
+      return false
+    case "echo":
+      line = ""
+      command.forEach((cmd, i) => {
+        if (i === 0) return
+        line += cmd + " "
+      });
+      line = line.substring(0, line.length - 1) // remove last space
+      break
+    default:
+      line = "frsh: " + command[0] + ": command not found"
+      break;
+  }
+
+  return line
+}
+
+function write(key, payload) {
+  switch(key) {
+    case "Enter":
+      command = c.lastChild.textContent.replace(ps1, "")
+      command = command.split(" ");
+      let out = exec(command)
+      if(out !== false) {
+        line = document.createElement("p")
+        line.innerHTML += out
+        line.innerHTML += "<br>"
+        c.appendChild(line)
+        line = document.createElement("p")
+        line.innerHTML += ps1
+        c.appendChild(line)
+      }
+      command = ""
+      break
+    case "000ctrll":
+      c.innerHTML = ""
+      if(payload == motd) c.innerHTML = motd
+      line = document.createElement("p")
+      line.innerHTML += ps1
+      c.appendChild(line)
+      break
+    case "000backspace":
+      if(c.lastChild.textContent.slice(0, -1) !== ps1.slice(0, -1)) {
+        c.lastChild.innerHTML = c.lastChild.textContent.slice(0, -1)
+      }
+      break
+
+    default:
+      c.lastChild.innerHTML += key
+  }
+}
+
+function customCtrlShortcuts(plusKey) {
+  document.addEventListener("keydown", e => {
+    if(e.ctrlKey && e.key == plusKey) {
+      e.preventDefault()
+      write("000ctrl"+plusKey)
+    }
+  })
+}
+
+// On load init the terminal
+window.addEventListener("load", () => {
+  write("000ctrll", motd)
+  if (navigator.userAgent.toLowerCase().includes("mobile")) {
+    const mi = document.querySelector(".mobile-input")
+    mi.style="opacity: 0; width: 0; height: 0"
+    c.addEventListener("click", e => {
+      mi.focus()
+    })
+  }
+})
+
+// Capture the keypress
+window.addEventListener("keypress", e => {
+  e.preventDefault()
+  write(e.key)
+})
+
+window.addEventListener("keydown", e => {
+  if(e.key == "Backspace") {
+    e.preventDefault()
+    write("000backspace")
+  }
+})
+
+// Register custom ctrl shortcuts
+customCtrlShortcuts("l") // ctrl + l
+customCtrlShortcuts("c") // ctrl + c

templates/404.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>Filip Rojek | 404 Not found</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="icon" type="image/x-icon" href="/img/fr.ico">
+	<link rel="stylesheet" href="/general.css">
+	<link rel="stylesheet" href="/vars.css">
+	<link rel="stylesheet" href="/style.css">
+	<style>
+		.flex-col {
+			height: 100vh;
+		}
+	</style>
+</head>
+<body>
+	<div class="content flex-col">
+		<h2>404 - Not found</h2>
+		<a href="/">Home</a>
+	</div>
+</body>
+</html>

templates/about.html

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+
+{% block styles %}
+	<link rel="stylesheet" href="/about.css">
+{% endblock styles %}
+
+{% block content %}
+	<section class="about content">
+  	{{ page.content | safe }}
+	</section>
+{% endblock content %}

templates/base.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>
+			{% block title %}
+				{% if current_path != "/" %}
+					{{ config.title }} &ndash;
+					{% if section.title %}
+						{{ section.title }}
+					{% elif page.title %}
+						{{ page.title }}
+					{% endif %}
+				{% else %}
+					{{ config.title }}
+				{% endif %}
+			{% endblock title %}
+		</title>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<link rel="icon" type="image/x-icon" href="/img/fr.ico">
+		<link rel="stylesheet" href="/general.css">
+		<link rel="stylesheet" href="/vars.css">
+		<link rel="stylesheet" href="/content.css">
+		<link rel="stylesheet" href="/style.css">
+		<link rel="stylesheet" href="/home.css">
+		{% block styles %}
+		{% endblock styles %}
+	</head>
+	<body>
+		<header>
+			<nav>
+				<a href="/" class="logo">
+					<img src="/img/fr_logo.webp" alt="logo">
+				</a>
+				<!--<div class="links">
+					{% for item in config.extra.nav_items %}
+						<a href="{{ item.path }}"
+							{% if item.path == current_path and item.path != "/" %}
+								class="active"
+							{% endif %}
+						>{{ item.name }}</a>
+						{% endfor %}				
+        </div>-->
+			</nav>
+		</header>
+
+		<main>
+			{% block content %}
+				<section>
+					{% if section %}
+						{{ section.content | safe }}
+					{% elif page %}
+						{{ page.content | safe }}
+					{% endif %}
+				</section>
+			{% endblock content %}
+		</main>
+		<footer>
+			{% if config.extra.git %}
+				<a href="{{ config.extra.git }}">Source</a>
+			{% endif %}</p>
+			<p>&copy; filiprojek.cz 2022 - {{ now() | date(format="%Y")}}</p>
+		</footer>
+
+	</body>
+</html>
+

templates/index.html

@@ -0,0 +1,26 @@
+{% extends "base.html" %}
+{% block content %}
+
+<section class="home">
+	<section>
+		<p>Filip Rojek &lt&#102;&#105;&#108;&#105;&#112;&#064;&#102;&#105;&#108;&#105;&#112;&#114;&#111;&#106;&#101;&#107;&#046;&#099;&#122;&gt</p>
+		<br>
+		<p>Linux sysadmin, backend node.js & php developer <a href="https://www.fofrweb.com/" target="_blank">@fofrweb</a>,<br> GNU/Linux <a href="http://voidlinux.org" target="_blank">Void</a> user, student and coffee enthusiast<span class="underscore">_</span><p>
+		<br>
+		<p>PGP: <a href="https://keys.openpgp.org/vks/v1/by-fingerprint/CA3D9BE28315B49164130CD97E65EA58C6075F09" target="_blank">0x7E65EA58C6075F09</a></p>
+		<br>
+		<p><a href="https://git.filiprojek.cz/fr" target="_blank">Git</a> <a href="https://t.me/filiprojek" target="_blank">Telegram</a> <a href="#" id="pgpmobile" title="copy pgp to clipboard">PGP</a></p>
+	</section>
+
+	<script>
+		const _ = document.querySelector(".underscore")
+		let b = false
+		setInterval(() => {
+			b ? _.style.visibility = "visible" : _.style.visibility = "hidden"
+			b = !b
+		}, 500)
+	</script>
+</section>
+
+{% endblock content %}
+

templates/project.html

@@ -0,0 +1,26 @@
+{% extends "base.html" %}
+
+{% block styles %}
+	<link rel="stylesheet" href="/project.css">
+{% endblock styles %}
+
+{% block content %}
+	<section class="project-wrapper flex-col">
+    <!--
+		<section class="left-bar flex-col">
+			<h2>Projects</h2>
+			{% set section = get_section(path=page.ancestors | last) %}
+			{% for project in section.pages %}
+				<a href="{{ project.permalink }}">{{project.title}}</a>
+			{% endfor %}
+		</section>
+-->
+	
+    <h2>{{ page.title }}</h2>
+    <div>
+      {{ page.content | safe }}
+    </div>
+    <a href="/projects">Back to list of projects</a>
+	</section>
+{% endblock content %}
+

templates/project_list.html

@@ -0,0 +1,28 @@
+{% extends "base.html" %}
+
+{% block styles %}
+	<link rel="stylesheet" href="/project_list.css">
+{% endblock styles %}
+
+{% block content %}
+	<section class="project-list content">
+		<h1>My Projects</h1>
+			{% for project in section.pages %}
+				<div class="project">
+						<a class="title" href="{{ project.permalink }}">
+							{{ project.title }}
+						</a>
+						<p class="description">
+							{% if project.description %}
+								{{ project.description }}
+							{% else %}
+								&hellip;
+							{% endif %}
+						</p>
+						<hr>
+						<p>{{ project.date }} | {{ project.extra.state}}</p>
+				</div>
+			{% endfor %}
+	</section>
+{% endblock content %}
+