Added: biome for formatting, Makefile

This reverts commit b022a4ae37.

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

Makefile

@@ -0,0 +1,10 @@
+all: clean format build
+
+format:
+	biome format --write .
+
+build:
+	zola build
+
+clean:
+	rm -rf 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
 

biome.json

@@ -0,0 +1,15 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
+	"files": {
+		"ignore": [".vscode/", "node_modules/", "public/"]
+	},
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": false,
+		"rules": {
+			"recommended": true
+		}
+	}
+}

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://dev.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"}
+]
+

content/about.md

@@ -0,0 +1,27 @@
++++
+title = "About"
+template = "about.html"
++++
+
+## About
+I am student of IT at Charles University in Prague (Faculty of Education).
+
+In high school I started programming and got interested in `Linux`. I created several projects with a classmate under [Fofrweb](https://fofrweb.com). Especially web applications written in `Node.js` and `Vue.js`. All projects are hosted on my own Linux server.
+
+I am member of [Microlab](https://microlab.space) - hacker space at Charles University.
+
+I am also package maintainer for [Void Linux](https://voidlinux.org).
+
+## Contact
+- <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>
+- [@filiprojek](https://t.me/filiprojek) on Telegram
+- PGP: [0x7E65EA58C6075F09](https://keys.openpgp.org/vks/v1/by-fingerprint/CA3D9BE28315B49164130CD97E65EA58C6075F09)
+
+## Work
+I currently work as a Linux engineer at IS Media. Most of my work involves Debian based systems - desktops (Raspberry Pi, Intel NUC) and servers. I also manage an instance of GitLab.
+
+## Projects
+Most of my projects are hosted on Gitea and GitHub:
+- Gitea: [git.filiprojek.cz](https://git.filiprojek.cz/fr)
+- GitHub: [github.com/filiprojek](https://github.com/filiprojek)
+

content/projects/_index.md

@@ -0,0 +1,7 @@
++++
+title = "Projects"
+template = "project_list.html"
+page_template = "project.html"
+sort_by = "date"
++++
+

content/projects/debrepo.md

@@ -0,0 +1,18 @@
++++
+title = "Debrepo"
+date = 2023-05-01
+description = "A Debian repository management tool"
+
+[extra]
+state = "stable"
++++
+
+# Debrepo
+- A Debian repository management tool.
+
+## About
+- `Debrepo` is a software tool designed for creating and managing Debian repositories for `*.deb` packages, providing a lightweight and user-friendly alternative to more complex tools like `reprepo` or `aptly`. While these alternatives may offer more advanced features, Debrepo focuses on providing essential functionality and ease of use for repository management, allowing users to easily add, remove, and update packages within their repositories. With Debrepo, users can efficiently manage their Debian repositories without the unnecessary complexity of more advanced tools.
+
+## Links
+- [Git](https://git.filiprojek.cz/fr/debrepo)
+

content/projects/dotfiles.md

@@ -0,0 +1,16 @@
++++
+title = "Dotfiles"
+date = 2019-01-01
+description = "Collection of my configuration dotfiles"
+
+[extra]
+state = "active"
++++
+
+# Dotfiles
+
+## About
+- Collection of my configuration dotfiles.
+## Links
+- [Git](https://git.filiprojek.cz/fr/dotfiles)
+

content/projects/fofrweb.md

@@ -0,0 +1,34 @@
++++
+title = "Fofrweb"
+date = 2019-11-27
+description = "Custom websites and student projects"
+
+[extra]
+state = "active"
++++
+
+# About
+- Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
+
+# Projects
+
+## Websites
+### date
+### links
+
+## FofrMess
+### date
+
+## FofrTasks
+### date
+
+## Fofrbazar
+- Internetová bazarová platforma
+### 04/2021
+- Technologie
+    - PHP
+    - Laravel
+    - MySQL
+    - Linux
+    - Apache
+

content/projects/nork.md

@@ -0,0 +1,15 @@
++++
+title = "Nork"
+date = 2021-08-13
+description = "Simple node.js tool that extends express projects"
+
+[extra]
+state = "done"
++++
+
+# Nork
+## About
+- Simple node.js tool that extends express projects.
+
+## Links
+- [Git](https://github.com/filiprojek/nork)

content/projects/pkmples.md

@@ -0,0 +1,17 @@
++++
+title = "pkmples.cz website"
+date = 2023-12-18
+description = "Website for PKM Ples written in Zola"
+
+[extra]
+state = "done"
++++
+
+Website for PKM Ples written in [Zola](https://getzola.org).
+
+I am using [Gitea Actions](https://docs.gitea.com/usage/actions/overview) for CI/CD.
+
+It is available at [pkmples.cz](https://pkmples.cz).
+
+Source is available on my [Gitea](https://git.filiprojek.cz/fofrweb/com_pkmples.cz).
+

content/projects/website.md

@@ -0,0 +1,16 @@
++++
+title = "Website"
+date = 2023-08-29
+description = "My personal website"
+
+[extra]
+state = "in development"
++++
+
+# Website
+## About
+- This website is built using the Zola static site generator.
+
+## Links
+- [Git](https://git.filiprojek.cz/fr/website)
+

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,35 @@
+.content {
+	margin-block: auto;
+}
+.home {
+	margin-top: 5rem;
+	font-size: 1.2rem;
+	padding: 0 5%;
+
+	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,71 @@
+<!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>
+			<p>Build time: {{ now() | date(format="%Y-%m-%d %H:%M") }},
+			{% if config.extra.git %}
+				<a href="{{ config.extra.git }}" target="_blank">Source</a>
+			{% endif %}</p>
+			<p>&copy; filiprojek.cz 2022 - {{ now() | date(format="%Y")}}</p>
+		</footer>
+
+		<script>
+			console.log("I heard that a cool frontend developer works for https://fofrweb.com")
+		</script>
+	</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 %}
+