Added: copy text button

This reverts commit b022a4ae37.

.gitea/workflows/build_and_deploy.yaml

@@ -6,22 +6,28 @@ on:
       - master
       - dev
 
+env:
+  ZOLA_VERSION: "0.19.2"
+  HOST: ${{ secrets.SERVER_IP }}
+  SSH_USERNAME: ${{ secrets.USERNAME }}
+  SSH_PRIVATE_KEY: ${{ secrets.DEPLOY_KEY }}
+
 jobs:
   build_and_deploy:
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Zola
-        uses: taiki-e/install-action@v2
-        with:
-          tool: zola@0.17.2
+        run: |
+          wget https://github.com/getzola/zola/releases/download/v${ZOLA_VERSION}/zola-v${ZOLA_VERSION}-x86_64-unknown-linux-gnu.tar.gz
+          tar -xvzf *.tar.gz
 
       - name: Build Zola Website
         run: |
-          zola build
+          ./zola build
 
       - name: Set Destination Folder if MASTER
         if: ${{ github.ref == 'refs/heads/master' }}
@@ -31,14 +37,12 @@ jobs:
         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 }}
+      - name: Deploy
+        run: |
+          apt update -y && apt-get install -y --no-install-recommends rsync
+          eval "$(ssh-agent -s)"
+          ssh-add - <<< "${SSH_PRIVATE_KEY}"
+          mkdir -p ~/.ssh/
+          ssh-keyscan -H ${HOST} >> ~/.ssh/known_hosts
+          rsync -r --delete-after public/* "${SSH_USERNAME}@${HOST}:${{ env.DEST_FOLDER }}"
 

Makefile

@@ -0,0 +1,10 @@
+all: clean format build
+
+format:
+	biome format --write .
+
+build:
+	zola build
+
+clean:
+	rm -rf public/

README.md

@@ -8,15 +8,9 @@
 
 ## 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)
-- [ ] fixnout resize hr v projektu
 - [ ] redesign contact
 - [ ] redesign about
 - [ ] check about text content
-- [ ] add some more projects
 - [ ] responsibility
 
 # Projects

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

config.toml

@@ -1,13 +1,14 @@
 # The URL the site will be built for
-base_url = "https://www.filiprojek.cz"
+base_url = "https://dev.filiprojek.cz"
 title = "Filip Rojek"
 
 compile_sass = true
-minify_html = 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
@@ -18,5 +19,6 @@ nav_items = [
 	{name="Home",      path="/"},
 	{name="About",     path="/about"},
 	{name="Projects",  path="/projects/"},
+	{name="Posts",      path="/posts"}
 ]
 

content/about.md

@@ -3,8 +3,25 @@ title = "About"
 template = "about.html"
 +++
 
-I am 20 years old and I study in Prague. My journey into the world of coding started at IT high school. Now I am studying IT at Charles University.
+## About
+I am student of IT at Charles University in Prague (Faculty of Education).
 
-My coding adventure took me from student collaboration on projects like Fofrweb, where we created applications like FofrMess or FofrTasks - realtime web applications built using `Node.js` and `Vue.js`.
+My programming journey began in high school, where I developed a passion for `Linux` and co-founded [Fofrweb](https://fofrweb.com). Together with a classmate, I created web applications using `Node.js` and `Vue.js`, all hosted on my own Linux server.
+
+As a member of [Microlab](https://microlab.space), the university's hacker space, I engage with fellow tech enthusiasts. Additionally, I contribute to the open-source community as a package maintainer for [Void Linux](https://voidlinux.org).
+
+## Work
+I currently work as a Linux engineer. Most of my work involves Debian based systems - desktops (Raspberry Pi, Intel NUC) and servers.
+
+I also create custom websites from time to time.
+
+## 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)
+
+## 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)
 
-I now work as a Linux engineer at IS Media. Most of my work involves Debian-based systems - desktops and servers. I have a lot of experience with other distributions as well. For example, I use `Void Linux` or `Gentoo` on my personal workstations. At Fofrweb we used `RHEL` based distributions like `Cent OS` or later `Rocky Linux`.

content/posts/_index.md

@@ -0,0 +1,7 @@
++++
+title = "Posts"
+template = "post_list.html"
+page_template = "post.html"
+sort_by = "date"
++++
+

content/posts/jellyfin.md

@@ -0,0 +1,193 @@
++++
+title = "Jellyfin"
+date = 2024-10-03
+description = "Hosting a Jellyfin Instance with Docker and Docker Compose"
++++
+
+# Hosting a Jellyfin Instance with Docker and Docker Compose
+Running your own media server is a great way to have complete control over your media library, and Jellyfin is one of the best open-source media server solutions available today. With Docker and Docker Compose, you can efficiently manage and scale your Jellyfin instance, along with useful companion services like Jellyseerr and Jellystat for enhanced functionality.
+
+In this article, I’ll walk through my setup of a Jellyfin media server, hosted in Docker using Docker Compose. This assumes you already have Docker and Docker Compose installed and are comfortable with Linux environments. I’ll cover the configuration of Jellyfin, hardware transcoding, and the integration of supporting services like Jellyseerr and Jellystat to manage requests and track server statistics.
+
+## Docker Compose Configuration Breakdown
+Here’s the Docker Compose file I use to deploy Jellyfin and its associated services.
+
+```yaml
+services:
+  jellyfin:
+    image: jellyfin/jellyfin:latest
+    container_name: jellyfin
+    user: 1000:1000
+    restart: 'unless-stopped'
+    devices:
+      - /dev/dri:/dev/dri # for hardware transcoding
+      - /dev/dri/renderD128:/dev/dri/renderD128
+      #- /dev/kfd:/dev/kfd # Remove this device if you don't use the OpenCL tone-mapping
+    group_add:
+      - "103" # render gid 
+      - "27"  # video gid
+    networks:
+      - default
+    ports:
+      - 5100:8096
+    volumes:
+      - ./config:/config
+      - ./cache:/cache
+      - /mnt/media/torrent:/media:ro
+      - /dev/shm:/data/transcode # Offload transcoding to RAM if you have enough RAM
+    environment:
+      - JELLYFIN_PublishedServerUrl=https://your.host.com
+
+  jellyseerr:
+    image: fallenbagel/jellyseerr:latest
+    container_name: jellyseerr
+    environment:
+      - LOG_LEVEL=debug
+      - TZ=Europe/Prague
+    ports:
+      - 5280:5055
+    volumes:
+      - ./jellyseerr-config:/app/config
+    restart: unless-stopped
+
+  jellystat-db:
+    image: postgres:15.2
+    container_name: jellystat-db
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: <password>
+    volumes:
+      - ./jellystat-db:/var/lib/postgresql/data
+
+  jellystat:
+    image: cyfershepard/jellystat:latest
+    container_name: jellystat
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: <password>
+      POSTGRES_IP: jellystat-db
+      POSTGRES_PORT: 5432
+      JWT_SECRET: <jwt_secret>
+      TZ: Europe/Prague
+    volumes:
+      - ./jellystat-data:/app/backend/backup-data
+    ports:
+      - "5110:3000"
+    depends_on:
+      - jellystat-db
+```
+
+## Jellyfin Service
+The core of this setup is the jellyfin service. This container runs the Jellyfin server itself, and the configuration is designed to optimize performance and security.
+
+### Hardware Transcoding
+For efficient media transcoding, I’ve configured Jellyfin to leverage the hardware capabilities of the host machine. Specifically, I’ve mounted the /dev/dri device to the container for Intel or AMD GPU transcoding:
+
+```yaml
+devices:
+  - /dev/dri:/dev/dri
+  - /dev/dri/renderD128:/dev/dri/renderD128
+```
+
+If you don’t need OpenCL tone-mapping, you can skip the /dev/kfd device. By adding the necessary GIDs (103 for render and 27 for video), the container has access to GPU resources.
+
+Additionally, I’ve offloaded transcoding operations to the system’s RAM by mounting /dev/shm as the transcode directory:
+
+```yaml
+volumes:
+  - /dev/shm:/data/transcode
+```
+
+This is particularly useful if you have sufficient RAM, as it improves transcoding performance by avoiding disk I/O overhead.
+
+### Storage
+In the `volumes` section, I’ve mounted the following directories:
+
+ - `./config:/config`: Stores Jellyfin’s configuration data.
+ - `./cache:/cache`: Holds cache data to improve performance.
+ - `/mnt/media/torrent:/media:ro`: This is the read-only mount where Jellyfin accesses my media library. It’s pointed to my torrent directory, ensuring that Jellyfin can index and serve files from there but not modify them.
+
+### Network and Ports
+
+The Jellyfin server is exposed on port `5100` (mapped to Jellyfin’s default 8096 internal port). I also set the JELLYFIN_PublishedServerUrl environment variable to make sure the correct public URL is used for generating media links and external access.
+
+## Jellyseerr for Media Requests
+
+Jellyseerr is a companion service to Jellyfin, allowing users to request new content directly from the web interface. Here’s how I’ve integrated it:
+
+```yaml
+jellyseerr:
+  image: fallenbagel/jellyseerr:latest
+  container_name: jellyseerr
+  environment:
+    - LOG_LEVEL=debug
+    - TZ=Europe/Prague
+  ports:
+    - 5280:5055
+  volumes:
+    - ./jellyseerr-config:/app/config
+  restart: unless-stopped
+```
+
+I’ve exposed Jellyseerr on port `5280` and linked it to the default timezone (`Europe/Prague` in my case). It’s important to store the Jellyseerr configuration separately in the `./jellyseerr-config` directory to persist user settings and requests.
+
+## Jellystat for Tracking Server Stats
+
+Jellystat adds another layer of utility, giving you the ability to track detailed statistics about your Jellyfin server usage, including playback metrics, user activity, and media insights.
+
+It relies on a PostgreSQL database (`jellystat-db` service) to store all the data. I’ve configured it like this:
+
+```yaml
+jellystat-db:
+  image: postgres:15.2
+  container_name: jellystat-db
+  restart: unless-stopped
+  environment:
+    POSTGRES_USER: postgres
+    POSTGRES_PASSWORD: <password>
+  volumes:
+    - ./jellystat-db:/var/lib/postgresql/data
+
+```
+
+Jellystat then communicates with the PostgreSQL instance:
+
+```yaml
+jellystat:
+  image: cyfershepard/jellystat:latest
+  container_name: jellystat
+  restart: unless-stopped
+  environment:
+    POSTGRES_USER: postgres
+    POSTGRES_PASSWORD: <password>
+    POSTGRES_IP: jellystat-db
+    POSTGRES_PORT: 5432
+    JWT_SECRET: <jwt_secret>
+    TZ: Europe/Prague
+  volumes:
+    - ./jellystat-data:/app/backend/backup-data
+  ports:
+    - "5110:3000"
+  depends_on:
+    - jellystat-db
+```
+
+In this configuration, Jellystat is exposed on port `5110`, and I’ve configured the necessary environment variables to link it to the `jellystat-db` container. The JWT secret is used to authenticate requests between Jellystat and Jellyfin.
+
+# Optimizing and Securing the Setup
+## 1. Automatic Restart
+Each service is configured with `restart: unless-stopped`, ensuring that the containers are restarted automatically if they crash or the host reboots. This adds reliability to the deployment, minimizing downtime.
+
+## 2. Using RAM for Transcoding
+Offloading transcoding operations to RAM using `/dev/shm` significantly boosts the performance of Jellyfin, especially when dealing with multiple simultaneous streams or high-bitrate media.
+
+## 3. Resource Isolation and Security
+By specifying the `user: 1000:1000` directive in the Jellyfin container, I’ve ensured that the Jellyfin service runs as a non-root user on the host. This enhances security by limiting the container's privileges. Also, mounting `/media` in read-only (`ro`) mode ensures that the Jellyfin service cannot modify the media files directly, reducing the risk of accidental data corruption.
+
+# Conclusion
+This Docker Compose setup offers a robust Jellyfin media server that takes full advantage of hardware transcoding, secure media access, and useful companion services like Jellyseerr for content requests and Jellystat for usage tracking. Docker makes it easy to maintain, update, and scale this setup with minimal hassle, ensuring you have full control over your media experience.
+
+With this configuration, you can efficiently manage and monitor your media server, adding a layer of automation and insight to your Jellyfin instance.
+

content/posts/nextcloud.md

@@ -0,0 +1,9 @@
++++
+title = "Nextcloud"
+date = 2024-10-03
+description = "My Nextcloud docker based instance"
++++
+
+This is an post about my docker based Nextcloud instance
+
+

content/projects/debrepo.md

@@ -8,10 +8,10 @@ state = "stable"
 +++
 
 # Debrepo
-- A Debian repository management tool.
+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.
+`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/gitlab-ce-auto-minor-upgrade.md

@@ -1,19 +0,0 @@
-+++
-title = "Gitlab auto upgrade script"
-date = 2023-07-17
-description = "Gitlab CE auto minor upgrade script"
-
-[extra]
-state = "done"
-+++
-
-# gitlab-ce auto minor upgrade script
-## About
-- This lightweight Bash script automates minor upgrades via crontab, ensuring your GitLab CE stays up to date with minimal effort. Designed for efficiency, it uses `apt` to identify and implement upgrades, while logging any issues for your peace of mind.
-
-## Get Started and Contribute
-- Download the script, set up your crontab. GitLab-CE-Auto-Minor-Upgrade-Script is open source, meaning you can get involved, provide feedback, or contribute enhancements.
-
-## Links
-- [Git](https://git.filiprojek.cz/fr/gitlab-ce-auto-minor-upgrade)
-

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

@@ -0,0 +1,21 @@
++++
+title = "Self Hosting"
+date = 2024-10-14
+description = "My selfhosting services"
+
+[extra]
+state = "pending"
++++
+
+# Next Cloud
+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.
+
+# Jellyfin
+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.
+
+# Uptime Kuma
+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.
+
+# Gitea
+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.
+

content/projects/wpa_tui.md

@@ -1,18 +0,0 @@
-+++
-title = "wpa_tui"
-date = 2023-06-21
-description = "WPA Supplicant Terminal User Interface"
-
-[extra]
-state = "in development"
-+++
-
-# wpa_tui
-## About
-- WPA Supplicant Terminal User Interface
-- Collection of `dmenu` scripts for interacting with WPA Supplicant
-- Terminal User Interface app for interacting with WPA Supplicant
-- Main goal of this tool is comfort of sending commands to WPA-Supplicant from terminal over remembering explicit wpa commands as well as having to click in the wpa_gui (abandoned graphical interface)
-
-## Links
-- [Git](https://git.microlab.space/fr/wpa_tui)

sass/about.scss

@@ -0,0 +1,15 @@
+.about {
+  h2 {
+    margin-top: 1rem;
+    margin-bottom: .5rem;
+  }
+  h3, h4, h5, h6, p {
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+  }
+
+  p {
+    text-align: left;
+  }
+}
+

sass/content.scss

@@ -1,7 +1,7 @@
 .content {
 	display: flex;
 	flex-direction: column;
-	margin: 2rem 8rem;
+	margin: 2rem 30%;
 }
 
 .content {
@@ -18,3 +18,25 @@
 		margin-bottom: 1rem;
 	}
 }
+
+code {
+  font-size: 1rem;
+}
+
+ul {
+  list-style: none;
+  padding-left: 0;
+
+  li {
+    position: relative;
+    padding-left: 1rem;
+  }
+
+  li::before {
+    content: '•';
+    position: absolute;
+    left: 0;
+    color:white;
+  }
+}
+

sass/home.scss

@@ -4,6 +4,7 @@
 .home {
 	margin-top: 5rem;
 	font-size: 1.2rem;
+	padding: 0 5%;
 
 	section {
 		text-align: center;

sass/project.scss

@@ -1,17 +1,65 @@
+.language-yaml {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-x: auto;
+  padding: .5rem;
+  margin: .5rem 0;
+  border-radius: 5px;
+}
+
 .project-wrapper {
-	justify-content: start;
-	align-items: start;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 20px;
+
+  h1 {
+    margin-top: 2.5rem;
+    margin-bottom: 1rem;
+  }
+
+  h2 {
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+  }
+
+  h3, h4, h5, h6, p {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+  
+  p {
+    text-align: left;
+  }
 }
 
-.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;
-	}
+.link-back {
+  margin: 2rem 0;
 }
+
+.copy-code-wrapper {
+  position: relative;
+}
+
+.copy-code {
+  position: absolute;
+  top: .5rem;
+  right: .5rem;
+  cursor: pointer;
+  background-color: #1b1f26;
+  padding: .3rem ;
+  border-radius: 5px;
+}
+
+@media (max-width: 768px) {
+  .project-wrapper {
+    max-width: 100%;
+    padding: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .project-wrapper {
+    padding: 5px;
+  }
+}
+

sass/project_list.scss

@@ -22,4 +22,8 @@
 		}
 	}
 
+  a {
+    color: var(--color);
+  }
 }
+

sass/style.scss

@@ -50,11 +50,18 @@ nav {
 		color: var(--color);
 		font-size: 1.3rem;
 	}
+
+  a {
+    color: var(--color);
+  }
 }
 
+a {
+	color: lightblue;
+	cursor: pointer;
+	text-decoration: underline;
+}
 
-a { color: var(--color); }
-a:visited { color: var(--color); }
 a:hover { color: var(--a-hover); }
 
 @media (min-width: 400px) {
@@ -64,11 +71,6 @@ a:hover { color: var(--a-hover); }
 	}
 }
 
-/*
-.content {
-	padding: 2rem 1rem;
-}
-*/
 footer {
 	display: flex;
 	width: 100vw;

sass/vars.scss

@@ -12,3 +12,4 @@
 	--color: var(--c-white);
 	--background: var(--c-gray);
 }
+

static/js/code-copy.js

@@ -0,0 +1,30 @@
+let codes = document.querySelectorAll("pre")
+
+codes.forEach(code => {
+  const elWrapper = document.createElement("div")
+  elWrapper.classList.add("copy-code-wrapper")
+
+
+  const el = document.createElement("span")
+  el.textContent = "Copy"
+  el.classList.add("copy-code")
+
+  elWrapper.appendChild(el)
+
+  code.parentNode.insertBefore(elWrapper, code)
+
+  let textContent = ""
+  code.childNodes.forEach(child => {
+    textContent += child.textContent;
+  })
+
+  elWrapper.addEventListener("click", (e) => {
+    e.preventDefault()
+    navigator.clipboard.writeText(textContent)
+    el.textContent = "Copied!"
+    setTimeout(() => {
+      el.textContent = "Copy"
+    }, 5000);
+  })
+})
+

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

@@ -6,18 +6,6 @@
 
 {% block content %}
 	<section class="about content">
-	<h2>About me</h2>
-	{{ page.content | safe }}
-	</section>
-
-	<section class="contact content">
-		<h1>Contact me</h1>
-		<div class="contact-list">
-			<p>email: <a href="mailto:hello@filiprojek.cz">hello@filiprojek.cz</a></p>
-			<p>telegram: <a href="https://t.me/filiprojek">@filiprojek</a></p>
-			<p>git: <a href="https://git.filiprojek.cz">Personal git</a></p>
-			<p>github: <a href="https://github.com/filiprojek">GitHub</a></p>
-			<p>PGP: <a href="#" class="pgpwrap">fc37b989787acf8cbce7c0c2a56a345efe321161</a></p>
-		</div>
+  	{{ page.content | safe }}
 	</section>
 {% endblock content %}

templates/base.html

@@ -17,6 +17,7 @@
 		</title>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="Filip Rojek - Personal website">
 		<link rel="icon" type="image/x-icon" href="/img/fr.ico">
 		<link rel="stylesheet" href="/general.css">
 		<link rel="stylesheet" href="/vars.css">
@@ -58,14 +59,17 @@
 		<footer>
 			<p>Build time: {{ now() | date(format="%Y-%m-%d %H:%M") }},
 			{% if config.extra.git %}
-				<a href="{{ config.extra.git }}">Source</a>
+				<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("pls don't judge me by the source code you can see here, I'm just an ordinary backend developer trying to make a frontend:))")
-			console.log("but I heard that a cool frontend developer works for https://fofrweb.com")
+			console.log("I heard that a cool frontend developer works for https://fofrweb.com")
 		</script>
+
+    {% block scripts %}
+    {% endblock scripts %}
 	</body>
 </html>
+

templates/index.html

@@ -1,22 +1,13 @@
 {% extends "base.html" %}
-
-{% block styles %}
-	<style>
-		.at {
-			height: 1rem;
-		}
-	</style>
-{% endblock styles %}
-
 {% block content %}
 
 <section class="home">
 	<section>
-		<p>Filip Rojek &ltfilip<img src="/img/at.svg" alt=" (at) " class="at">filiprojek.cz&gt</p>
+		<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>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>
+		<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 id="pgp" title="copy pgp to clipboard">PGP: fc37b989787acf8cbce7c0c2a56a345efe321161</p>
+		<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>
@@ -28,18 +19,8 @@
 			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>
 
 {% endblock content %}
+

templates/post.html

@@ -0,0 +1,31 @@
+{% extends "base.html" %}
+
+{% block styles %}
+	<link rel="stylesheet" href="/project.css">
+{% endblock styles %}
+
+{% block scripts %}
+  <script src="/js/code-copy.js" defer></script> 
+{% endblock scripts %}
+
+
+{% 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="/posts" class="link-back">Back to list of posts</a>
+	</section>
+{% endblock content %}
+

templates/post_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 Posts</h1>
+			{% for post in section.pages %}
+				<div class="project">
+						<a class="title" href="{{ post.permalink }}">
+							{{ post.title }}
+						</a>
+						<p class="description">
+							{% if post.description %}
+								{{ post.description }}
+							{% else %}
+								&hellip;
+							{% endif %}
+						</p>
+						<hr>
+						<p>{{ post.date }}</p>
+				</div>
+			{% endfor %}
+	</section>
+{% endblock content %}
+

templates/project.html

@@ -5,7 +5,8 @@
 {% endblock styles %}
 
 {% block content %}
-	<section class="project-wrapper flex-row">
+	<section class="project-wrapper flex-col">
+    <!--
 		<section class="left-bar flex-col">
 			<h2>Projects</h2>
 			{% set section = get_section(path=page.ancestors | last) %}
@@ -13,9 +14,13 @@
 				<a href="{{ project.permalink }}">{{project.title}}</a>
 			{% endfor %}
 		</section>
+-->
 	
-		<section class="project-full">
-			{{ page.content | safe }}
-		</section>
+    <h2>{{ page.title }}</h2>
+    <div>
+      {{ page.content | safe }}
+    </div>
+    <a href="/projects" class="link-back">Back to list of projects</a>
 	</section>
 {% endblock content %}
+

templates/project_list.html

@@ -4,7 +4,6 @@
 	<link rel="stylesheet" href="/project_list.css">
 {% endblock styles %}
 
-
 {% block content %}
 	<section class="project-list content">
 		<h1>My Projects</h1>
@@ -26,3 +25,4 @@
 			{% endfor %}
 	</section>
 {% endblock content %}
+