Browse Source

New homepage, contact form is more accessible

Signed-off-by: Dušan Mitrović <dusan@dusanmitrovic.xyz>
master
Dušan Mitrović 3 weeks ago
parent
commit
1236e30a2b
No known key found for this signature in database GPG Key ID: 54261991535AB4CB
13 changed files with 129 additions and 148 deletions
  1. +15
    -2
      routes/home.js
  2. +0
    -1
      static/css/blog-post.css
  3. +0
    -65
      static/css/card.css
  4. +6
    -0
      static/css/contact.css
  5. +51
    -2
      static/css/homepage.css
  6. +0
    -1
      static/css/navbar.css
  7. +1
    -1
      static/css/style.css
  8. +2
    -4
      views/home.hbs
  9. +0
    -2
      views/layouts/main.hbs
  10. +13
    -5
      views/partials/contact-form.hbs
  11. +1
    -1
      views/partials/footer.hbs
  12. +0
    -64
      views/view-data/home.js
  13. +40
    -0
      views/view-data/home.md

+ 15
- 2
routes/home.js View File

@@ -5,12 +5,25 @@
* @summary HTTP routes for the main page
*/
const express = require('express');
const homeViewData = require('../views/view-data/home');
const markdown2Html = require('../utilities/markdown-2-html');
const router = express.Router();
const fs = require('fs').promises;
const path = require('path');

router.get('/', async (req, res) => {
const contentPath = path.join(__dirname, '../views/view-data/home.md');
const content = await fs.readFile(contentPath, { encoding: 'utf-8' });

return res.render('home', {
...homeViewData,
title: 'Home',
css: ['/static/css/homepage.css'],
openGraph: {
title: 'Home',
type: 'website',
url: process.env.HOST,
description: `I'm a network engineering student and a professional software developer and a gigantic GNU/Linux enthusiast.`,
},
content: markdown2Html(content),
});
});



+ 0
- 1
static/css/blog-post.css View File

@@ -55,7 +55,6 @@

.blog-post-link {
color: var(--red);
text-decoration: none;
}

.blog-navigation {


+ 0
- 65
static/css/card.css View File

@@ -1,65 +0,0 @@
.card {
display: flex;
align-items: center;
justify-content: space-around;
padding: 1em 2em;
margin: 1em;
}

.card-body {
width: 60%;
margin-left: 2em;
text-align: justify;
text-justify: inter-word;
}

.card-title {
color: var(--red);
font-size: 2rem;
margin-bottom: 0.5em;
}

.card-links {
margin-top: 2em;
display: flex;
justify-content: space-around;
}

.card-link {
color: var(--foreground);
font-size: 1.3rem;
text-decoration: none;
}

.card-link:hover {
color: var(--red);
}

@media screen and (max-width: 800px) {
.card {
flex-direction: column;
padding: 0.5em 1em;
}

.card-body {
width: 100%;
margin: 0;
}

.card-text {
width: 100%;
margin-top: 1em;
}

.card-links {
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}

.card-link {
margin: 0.5em 0;
font-size: 1.2rem;
}
}

+ 6
- 0
static/css/contact.css View File

@@ -11,3 +11,9 @@
width: 100%;
}
}

.contact-label {
color: var(--red);
font-size: 1.2rem;
margin-bottom: 0.5em;
}

+ 51
- 2
static/css/homepage.css View File

@@ -2,8 +2,57 @@
font-size: 1.2rem;
}

.homepage {
line-height: 1.6;
}

.homepage h1 {
color: var(--red);
font-size: 1.5rem;
margin: 0.5em 0;
}

.homepage h2 {
color: var(--red);
font-size: 1.3rem;
margin: 0.5em 0;
}

.homepage ul, ol {
list-style-position: inside;
margin: 1rem 0;
}

.homepage li {
font-size: 1.2rem;
margin: 0.3rem 0;
}

.homepage a {
color: var(--yellow-light);
text-decoration-color: var(--yellow-light);
}

.homepage p {
font-size: 1.2rem;
margin: 0.5em 0;
text-align: justify;
}

@media screen and (max-width: 1000px) {
#homepage {
width: 100%;
.container {
width: 90%;
}

.homepage h1 {
margin: 1em 0;
}

.homepage li {
font-size: 1rem;
}

.homepage p {
font-size: 1rem;
}
}

+ 0
- 1
static/css/navbar.css View File

@@ -37,7 +37,6 @@ header {

.navbar-link {
color: var(--foreground);
text-decoration: none;
}

.navbar-link:hover {


+ 1
- 1
static/css/style.css View File

@@ -44,7 +44,7 @@ h3 {
.container {
overflow: hidden;
margin: 3em auto 1em auto;
width: 1500px;
width: 700px;
}

.text-center {


+ 2
- 4
views/home.hbs View File

@@ -1,7 +1,5 @@
<section id="homepage" class="container">
<main id="homepage-content">
{{#each cards}}
{{> card title=this.title image=this.image content=this.content links=this.links }}
{{/each}}
<main id="homepage-content" class="homepage">
{{{ content }}}
</main>
</section>

+ 0
- 2
views/layouts/main.hbs View File

@@ -17,8 +17,6 @@
{{/if}}
<!-- Navbar Stylesheet -->
<link rel="stylesheet" href="/static/css/navbar.css">
<!-- Card Stylesheet -->
<link rel="stylesheet" href="/static/css/card.css">
<!-- Footer Stylesheet -->
<link rel="stylesheet" href="/static/css/footer.css">
<!-- Form Stylesheet -->


+ 13
- 5
views/partials/contact-form.hbs View File

@@ -5,11 +5,19 @@
{{#if success}}
<span class="success-message">{{ success.message }}</span>
{{/if}}
<input name="name" class="form-input" type="text" placeholder="Your name" value="{{ name }}" required>
<input name="email" class="form-input" type="email" placeholder="Your email address" value="{{ email }}" required>
<input name="subject" class="form-input" type="text" placeholder="Subject" value="{{ subject }}" required>
<textarea rows="20" cols="10" name="message" class="form-textarea" placeholder="Your message" required>{{message}}</textarea>
<label for="antispamAnswer">What is {{ antispam }}?</label>
<label class="contact-label" for="name">Your name *</label>
<input name="name" class="form-input" type="text" value="{{ name }}" required>

<label class="contact-label" for="email">Your email address *</label>
<input name="email" class="form-input" type="email" value="{{ email }}" required>

<label class="contact-label" for="subject">Subject *</label>
<input name="subject" class="form-input" type="text" value="{{ subject }}" required>

<label class="contact-label" for="message">Your message *</label>
<textarea rows="20" cols="10" name="message" class="form-textarea" required>{{message}}</textarea>

<label class="contact-label" for="antispamAnswer">What is {{ antispam }}?</label>
<input name="antispamAnswer" class="form-input" type="number" required>
<input name="antispamQuestion" type="hidden" value="{{ antispam }}">
<button class="form-button" type="submit">Send</button>


+ 1
- 1
views/partials/footer.hbs View File

@@ -1,6 +1,6 @@
<footer>
<a class="footer-license" rel="license" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/legalcode.txt">
<img alt="Creative Commons Licence" style="border-width:0" src="/static/images/cc.png" />
<img alt="Creative Commons Licence" src="/static/images/cc.png" />
</a>
<p class="footer-copy"><span class="footer-copyleft">©</span> {{#copyrightDate}}{{/copyrightDate}} Dušan Mitrović - All rights reversed</p>
</footer>

+ 0
- 64
views/view-data/home.js View File

@@ -1,64 +0,0 @@
module.exports = {
title: 'Home',
css: ['/static/css/homepage.css'],
openGraph: {
title: 'Home',
type: 'website',
url: process.env.HOST,
description: `I'm a network engineering student and a professional software developer and a gigantic GNU/Linux enthusiast.`,
},
cards: [
{
title: 'About me',
content: `I'm a professional software developer, advocate of free and open source software and minimalism.
When I'm not coding I usually study what I find interesting in the moment.
Despite working as a backend developer professionally, I still consider programming mostly a hobby.
This website was created to fullfil my desire to express myself creatively.
You can find my config files and more by visiting my Github page at the link below.
`,
links: [
{
url: 'https://github.com/dusnm',
text: '🐙 Github',
},
{
url: 'https://git.dusanmitrovic.xyz',
text: '🍵 Gitea',
},
{
url: 'https://mastodon.technology/@duxontraitor',
text: '🐘 Mastodon',
},
{
url: 'mailto:business@dusanmitrovic.xyz',
text: '✉️ Email',
},
{
url: '/rss',
text: '📰 RSS Feed',
},
{
url: '/static/dusancv.pdf',
text: '💼 Résumé',
},
],
},
{
title: 'Other',
content: `This website is free software, licensed under the terms of the GNU AGPL 3.0 or later.
You're free to study it, modify it and redistribute it as long as you abide by the license terms and conditions.
Additionally all content is licensed under the terms of the CC BY-SA 4.0 license.
If you want to contact me with encrypted email, my PGP key is listed below as well.`,
links: [
{
url: 'https://git.dusanmitrovic.xyz/dusan/dusanmitrovic.xyz',
text: '🔧 Source Code',
},
{
url: '/static/publickey.txt',
text: '🔑 PGP Key',
},
],
},
],
};

+ 40
- 0
views/view-data/home.md View File

@@ -0,0 +1,40 @@
# Greetings stranger,

You managed to find my secluded home on the web.

I'm a professional software developer, a tinkerer, advocate of free and open source software and minimalism.

When I'm not coding I usually study what I find interesting in the moment. (I have quite a lot of interests.)

I develop hobby projects (including this blog) and I'm quite passionate about my work.

I created this blog to fulfill my desire to express myself creatively.

## About this blog

Inspired by the minimal design of the 90s, with a decidedly modern twist I am proud to say that this entire page weighs < 14KB.

In the age of the modern web, content has given way to flashy animations, parralax scrolls and hundreds of kilobytes of JavaScript. It is my mission not to contribute to this trend. As such I'm very proud to feature TEXT in all of it's unicode glory, to be read and appreciated.

## Some of my links

* [Github](https://github.com/dusnm) - Check out some of my projects.
* [Gitea](https://git.dusanmitrovic.xyz) - And some more...
* [Mastodon](https://mastodon.technology/@duxontraitor) - I post about tech and everything else.
* [Email](mailto:business@dusanmitrovic.xyz) - Have questions? Feel free to contact me.
* [RSS](/rss) - Preffer syndication? This RSS feed has got you covered.
* [Résumé](/static/dusancv.pdf) - Check out where I worked and more.
* [PGP](/static/publickey.txt) - Send me encrypted email, files, you name it.
* [Source code of this blog](https://git.dusanmitrovic.xyz/dusan/dusanmitrovic.xyz) - Take a look at how this blog is built.

## Other

This blog is free software.

Source code is licensed under the terms of the [GNU Affero General Public License, version 3 or later](https://www.gnu.org/licenses/agpl-3.0.txt).

You're free to study it, modify it and redistribute verbatim or modified copies as long as you abide by the license terms and conditions.

All content is licensed under the terms of the [Creative Commons Attribution-ShareAlike International 4.0](https://creativecommons.org/licenses/by-sa/4.0/legalcode.txt).

You're free to share and adapt it as you see fit.

Loading…
Cancel
Save