[talks] Added a new sections for talks and added a demo presentation

5 files changed, 135 insertions, 1 deletions

diff --git a/.hooks/pre-commit.sh b/.hooks/pre-commit.sh
index 3c45bcd..8a23dbc 100755
--- a/.hooks/pre-commit.sh
+++ b/.hooks/pre-commit.sh
@@ -8,7 +8,7 @@ if [ -e "index.md" ]; then
 fi
 
 root='./src/'
-names=('about' 'archives' 'blog' 'assets' 'tutorials' 'reposts' 'software' 'archived-websites')
+names=('about' 'archives' 'blog' 'assets' 'tutorials' 'reposts' 'software' 'archived-websites' 'talks')
 
 changes=0
 for name in ${names[@]}; do
diff --git a/src/_header.html b/src/_header.html
index 254adbd..3939b31 100644
--- a/src/_header.html
+++ b/src/_header.html
@@ -35,6 +35,7 @@
 		<div class="arrowed-list">
 			<a href="/blog">Blog</a>
 			<a href="/tutorials">Tutorials</a>
+			<a href="/talks">Talks</a>
 			<a href="/reposts">Reposts</a>
 		</div>
 		<span>Hosted data</span>
diff --git a/src/talks.md b/src/talks.md
new file mode 100644
index 0000000..4168e6a
--- /dev/null
+++ b/src/talks.md
@@ -0,0 +1,10 @@
+# Talks
+
+These are the different talks (presentations) I've made. Currently I don't have any, but soon there will be.
+
+<br>
+
+#### *2022*
+
+[Demo presentation](./demo.html) &emsp; *Won't be presented*
+: Showcase of my presentation system
diff --git a/src/talks/demo.md b/src/talks/demo.md
new file mode 100644
index 0000000..e29f2f5
--- /dev/null
+++ b/src/talks/demo.md
@@ -0,0 +1,113 @@
+# Demo presentation
+
+[Slides Source]() || [PDF version]()
+
+**Created: 27 September 2022** || **Edited: 27 September 2022**
+
+This is a small presentation, explaining how my custom system for making presentations works.
+
+&&presentation
+
+&&slide
+
+&&flexer
+
+&&centered
+
+# Slides system demo
+
+<br>
+
+Before we go any further, click the **icon, next to the printer** right above this rectangle.
+
+Now the presentation should be fullscreen, on the bottom right are your controls.
+
+Press the *right arrow* to go to the next slide.
+
+&&/centered
+
+&&flexer
+
+kamen AT syndamia.com || 2022
+
+&&/slide
+
+
+
+&&slide
+
+# Introduction
+
+This is my system for making and showing presentations. All articles on this website are written in Markdown and are converted into HTML, and these slides are no different. The contents are plain old Markdown, and the formatting is some "inserted" HTML.
+
+The way I make these presentations is by wrapping valid Markdown with, what I call, [ftags](): short pieces of text that are replaced by some [scripts]() with specific HTML code. This allowes me to abstract and simplify certain stuff, like the [image tags for nationality flags]() or the way presentations are made.
+
+## Why?
+
+Well, I have always thought about making something with which I could make presentations. Also, from time to time I do need to make a presentation, but tools like Microsoft PowerPoint or LibreOffice Impress have cause me many-a-headaches.
+
+&&/slide
+
+
+
+&&slide
+
+# Features
+
+The main things that my system provides, outside of what Markdown can do, are flexboxed rows and columns. There are two ftags via which I can specify a row or column, where everything inside is evenly spaced out and fills all possible space.
+
+This allowes me to have content in multiple columns very easily:
+
+&&fow
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed lectus porttitor nibh pellentesque ultrices ut in lorem. Pellentesque commodo dignissim placerat.
+
+&&fol
+
+And these are
+
+items
+
+in a
+
+ &&fol column.
+
+&&/fol
+
+&&flexer
+
+Vestibulum sodales pharetra justo, placerat egestas arcu hendrerit vitae. Integer eros est, lobortis sit amet mollis nec, mollis in ex. In hac habitasse platea dictumst.
+
+![](/tutorials/fix-no-frame-buffer-plan9/img/rio-default-login.png)
+
+&&/fow
+
+About that empty middle column, it's actually also an ftag, just an empty element with `flex: 1`.
+
+&&/slide
+
+
+
+&&slide
+
+Another good feature is the printing compatibility. Each slide is the size of an A4 sheet of paper (in landscape orientation, of course), and there is special styling to make sure it all formats correctly when printing. Given that my website also supports a light mode, printing it out is a non-issue.
+
+Although, a more sane thing to do is to print to a PDF file ...
+
+And well, that's it. If you're interested, read more about it [here](), but overall, that's everything it currently provides (and the navigation bar, obviously).
+
+I will for sure add more ftags and capabilitites in the future, but for now, this is all folkes!
+
+&&flexer
+
+&&centered
+
+# Have a great day!
+
+&&/centered
+
+&&flexer
+
+*P.S. You can exit out of the presentation by pressing the same icon in the navbar, or by reloading the page ;)*
+
+&&/slide
diff --git a/src/talks/index.md b/src/talks/index.md
new file mode 100644
index 0000000..4168e6a
--- /dev/null
+++ b/src/talks/index.md
@@ -0,0 +1,10 @@
+# Talks
+
+These are the different talks (presentations) I've made. Currently I don't have any, but soon there will be.
+
+<br>
+
+#### *2022*
+
+[Demo presentation](./demo.html) &emsp; *Won't be presented*
+: Showcase of my presentation system