luca/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

restructured to public folder

Browse source
This commit is contained in:
Luca 2024-11-04 17:50:27 +01:00
parent 43addb92a2
commit 83737bd3a6
101 changed files with 2945 additions and 8373 deletions
Download patch file Download diff file Expand all files Collapse all files

43
.eleventy.js
View file

@ -1,43 +0,0 @@
const { DateTime } = require("luxon")
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight")
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(syntaxHighlight)
//eleventyConfig.addPassthroughCopy("css")
//eleventyConfig.addPassthroughCopy("src/_assets/*.png")
//eleventyConfig.addPassthroughCopy("src/_assets/*.jpg")
eleventyConfig.addPassthroughCopy("src/pwa.webmanifest")
eleventyConfig.addPassthroughCopy("src/css/*.css")
eleventyConfig.addPassthroughCopy("src/libs/**/*.js")
eleventyConfig.addPassthroughCopy({ "src/_assets/": "assets" })
eleventyConfig.addFilter("formatDate", (dateObj) => {
return DateTime.fromJSDate(dateObj, {
zone: "Europe/Berlin",
})
.setLocale("de")
.toLocaleString(DateTime.DATE_FULL)
})
// Filter for showing excerpts of posts on the "/posts/" site, limited to 180 characters (about 4 lines on mobile)
eleventyConfig.addFilter("createExcerpt", (post) => {
// This removes "<" and ">" from the output
const content = post.replace(/(<([^>]+)>)/gi, "")
return content.substr(0, content.lastIndexOf(" ", 450)) + "..."
})
eleventyConfig.addFilter("stringify", (object) => {
return JSON.stringify(object, null, 2)
})
return {
passthroughFileCopy: true,
dir: {
input: "src",
includes: "_includes",
data: "_data",
output: "build",
},
}
}

2
.eleventyignore
View file

@ -1,2 +0,0 @@
README.md
node_modules

1
.gitignore vendored
View file

@ -1,2 +1,3 @@
node_modules
build
_site

0
src/_includes/partials/footer.njk → _includes/_footer.njk
View file

4
src/_includes/partials/header.njk → _includes/_header.njk
View file

@ -9,9 +9,9 @@
<li id="portfolio-nav">
<a href="/portfolio/" title="Portfolio">Portfolio</a>
</li>
<li id="workflows-nav">
<!--li id="workflows-nav">
<a href="/workflows/" title="Workflows">Workflows</a>
</li>
</li-->
<li id="blog-nav">
<a href="/blog/" title="Blog">Blog</a>
</li>

6
src/_includes/base.njk → _includes/layouts/base.njk
View file

@ -5,17 +5,17 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/assets/fontawesome/css/all.css">
<link rel="stylesheet" href="/libraries/fontawesome/css/all.css">
<link rel="manifest" href="/pwa.webmanifest" />
<title>{{ title }}</title>
</head>
<body>
{% include "partials/header.njk" %}
{% include "_header.njk" %}
<main>
{{ content | safe }}
</main>
{% include "partials/footer.njk" %}
{% include "_footer.njk" %}
</body>
</html>

8
src/_includes/overview.njk → _includes/layouts/overview.njk
View file

@ -5,11 +5,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/assets/fontawesome/css/all.css">
<link rel="stylesheet" href="/libraries/fontawesome/css/all.css">
<title>{{ title }}</title>
</head>
<body style="background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(50, 50, 50, 0.9)), url('/assets/images/blog_mobile.jpg');">
{% include "partials/header.njk" %}
<body>
{% include "_header.njk" %}
<aside class="flex" style="margin-top: 70px;">
<h1>{{title}}</h1>
@ -21,6 +21,6 @@
</div>
</main>
{% include "partials/footer.njk" %}
{% include "_footer.njk" %}
</body>
</html>

10
src/_includes/post.njk → _includes/layouts/post.njk
View file

@ -5,11 +5,13 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/assets/fontawesome/css/all.css">
<link rel="stylesheet" href="/libraries/fontawesome/css/all.css">
<title>{{ title }}</title>
</head>
<body>
{% include "partials/header.njk" %}
{% include "_header.njk" %}
<div class="post">
<aside>
<a class="button" onclick="history.back()">
@ -26,12 +28,12 @@
<span>{{ page.date | formatDate }}</span>
</aside>
<main class="flex container">
<main class="post-main">
<article>
{{ content | safe }}
</article>
</main>
</div>
{% include "partials/footer.njk" %}
{% include "_footer.njk" %}
</body>
</html>

7
content/blog/blog.11tydata.js Normal file
View file

@ -0,0 +1,7 @@
export default {
layout: 'layouts/post.njk',
title: 'Unnamed',
tags: ['post'],
author: 'Luca Junge',
date: 'Created',
};

8
src/blog/blog.njk → content/blog/blog.njk
View file

@ -1,6 +1,6 @@
---
title: My blog posts
layout: overview.njk
layout: layouts/overview.njk
title: All blogposts
eleventyExcludeFromCollections: true
---
@ -11,10 +11,10 @@ eleventyExcludeFromCollections: true
<a href="{{post.url}}">{{post.data.title}}</a>
</h1>
<time>{{post.date | formatDate }}</time>
<!--time>{{post.date | formatDate }}</time-->
</header>
<p>{{post.templateContent | createExcerpt}}</p>
<p>{{post.data.excerpt}}</p>
<a class="button" href="{{post.url}}">
Weiterlesen

6
content/blog/test.md Normal file
View file

@ -0,0 +1,6 @@
---
title: Hello World This is a title
excerpt: This is the excerpt
---
Creating a successful blog post involves a few key elements: engaging content, valuable insights, and a clear structure. Begin with a captivating introduction that highlights what readers will gain. In the body, break down the topic into digestible sections using headings for clarity. Keep paragraphs short, use bullet points, and include examples to keep readers interested. To wrap it up, a summary or actionable takeaway helps solidify the message. Don’t forget to add visuals, as they increase engagement and make the post more shareable.

13
content/contact.njk Normal file
View file

@ -0,0 +1,13 @@
---
title: "Kontakt"
layout: layouts/base.njk
permalink: /contact/index.html
---
<section>
<div class="section-content">
<p>Feel free to contact me via <a href="mailto:mail@luca-junge.de">mail@luca-junge.de</a>
</p>
</div>
</section>

4
content/css/fonts.css Normal file
View file

@ -0,0 +1,4 @@
@font-face {
font-family: 'Montserrat';
src: url('/fonts/montserrat/Montserrat-VariableFont_wght.ttf');
}

0
src/css/footer.css → content/css/footer.css
View file

0
src/css/header.css → content/css/header.css
View file

12
content/css/hero.css Normal file
View file

@ -0,0 +1,12 @@
.hero {
display: flex;
justify-content: center;
margin: 0px;
padding-top: calc(128px + 70px);
padding-bottom: 128px;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('/images/hero_image2_mobile.jpg');
background-size: cover;
object-fit: cover;
background-position: top left;
}

0
src/css/normalize.css → content/css/normalize.css vendored
View file

29
content/css/post.css Normal file
View file

@ -0,0 +1,29 @@
.post {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 70px;
}
.post > * {
max-width: var(--breakpoint-small);
}
.post > aside {
display: flex;
flex-direction: column;
margin-left: 20px;
margin-top: 20px;
margin-right: 20px;
}
.post > aside > a.button {
align-self: flex-start;
}
.post-main {
margin-left: 20px;
margin-right: 20px;
}

79
content/css/sections.css Normal file
View file

@ -0,0 +1,79 @@
/* Styles for the sections, mainly used on the start page, the portfolio and workflow page */
section {
display: flex;
justify-content: center;
color: #ffffff;
background-color: rgb(82, 76, 121);
padding-top: 128px;
padding-bottom: 128px;
}
section:nth-child(odd) {
background-color: #342e37;
}
section:nth-child(even) {
background-color: #342e37;
}
.section-content {
max-width: 1024px;
gap: 20px;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 64px;
margin-right: 64px;
}
.section-content div {
max-width: 50%;
display: flex;
row-gap: 14px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
section h1,
section p {
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
}
section p {
padding: 0px;
margin: 0px;
line-height: 1.8em;
font-weight: 600;
}
section h1 {
margin-top: 0px;
margin-bottom: 0px;
}
.section-background {
background-size: cover;
object-fit: cover;
background-position: center;
backdrop-filter: blur(3px);
}
@media screen and (max-width: 512px) {
/* Make the left-to-right sections top-to-bottom */
.section-content {
align-items: flex-start;
}
.section-content div {
max-width: 100%;
}
.section-content {
flex-direction: column;
}
}

51
content/css/style.css Normal file
View file

@ -0,0 +1,51 @@
@import url('./utilities.css');
@import url('./fonts.css');
@import url('./normalize.css');
@import url('./variables.css');
@import url('./header.css');
@import url('./footer.css');
@import url('./sections.css');
@import url('./hero.css');
@import url('./post.css');
html,
body {
color: #ffffff;
font-family: 'Montserrat', sans-serif;
background-color: #342e37;
}
/* Button */
button,
.button {
display: inline-block;
box-sizing: border-box;
border: none;
color: inherit;
text-decoration: none;
padding: 12px 16px;
transition: background-color 0.25s ease-in-out, border 0.25s ease-in-out;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
background-color: rgba(0, 0, 0, 0.7);
border: 3px solid rgba(0, 0, 0, 0.7);
}
button:hover,
.button:hover,
button:focus-visible,
.button:focus-visible {
background-color: rgba(60, 60, 60, 0.7);
border: 3px solid rgba(60, 60, 60, 0.7);
}
.inline-button {
color: rgb(51, 100, 224);
}
a {
color: inherit;
}

23
content/css/utilities.css Normal file
View file

@ -0,0 +1,23 @@
:root {
--distance-small: 4px;
--distance-medium: 8px;
--distance-large: 12px;
--distance-huge: 16px;
}
.content-padding {
padding: var(--distance-large);
}
.container {
max-width: var(--breakpoint);
margin-left: 32px;
margin-right: 32px;
}
.flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

14
content/css/variables.css Normal file
View file

@ -0,0 +1,14 @@
:root {
--white: #ffffff;
--black: #000000;
--background-color: #393e46;
--dark-background-color: #2d3138;
--text-color: #eeeeee;
--accent: #00adb5;
--border-radius: 8px;
--breakpoint-small: 512px;
--breakpoint: 1024px;
}

23
src/index/index.njk → content/index.njk
View file

@ -1,5 +1,5 @@
---
layout: base.njk
layout: layouts/base.njk
title: luca-junge.de
permalink: /index.html
---
@ -16,7 +16,7 @@ permalink: /index.html
</div>
</section>
<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./assets/images/museum2_mobile.jpg');">
<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/museum2_mobile.jpg');">
<div class="section-content">
<div>
<h1>Interactive Applications & Games</h1>
@ -28,7 +28,7 @@ permalink: /index.html
</div>
</section>
<section class="section-background" style="display: none; background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./assets/images/portfolio_mobile.jpg');">
<section class="section-background" style="display: none; background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/portfolio_mobile.jpg');">
<div class="section-content">
<div>
<h1>Open Source Workflow</h1>
@ -39,7 +39,7 @@ permalink: /index.html
</div>
</section>
<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./assets/images/portfolio_mobile.jpg');">
<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/portfolio_mobile.jpg');">
<div class="section-content">
<div>
<h1>My Portfolio</h1>
@ -51,20 +51,7 @@ permalink: /index.html
</div>
</section>
<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./assets/images/workflows_mobile.jpg');">
<div class="section-content">
<div>
<h1>My Workflows</h1>
</div>
<div>
<p>Over the years I have developed workflows and techniques to get the most out of my tools I use which I want to share here.</p>
<p>To see how I create my applications, see my documented workflows.</p>
<a class="button" href="/workflows/">Explore my Workflows</a>
</div>
</div>
</section>
<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./assets/images/blog_mobile.jpg');">
<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/blog_mobile.jpg');">
<div class="section-content">
<div>
<h1>My Blog</h1>

5
src/portfolio/index.njk → content/portfolio.njk
View file

@ -1,9 +1,10 @@
---
layout: layouts/base.njk
title: "My Portfolio"
layout: base.njk
permalink: /portfolio/index.html
---
<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assets/images/under-construction_mobile.jpg');">
<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/under-construction_mobile.jpg');">
<div class="section-content">
<p>My Portfolio is currently under construction</p>
</div>

0
src/pwa.webmanifest → content/pwa.webmanifest
View file

34
eleventy.config.js Normal file
View file

@ -0,0 +1,34 @@
/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
export default function (eleventyConfig) {
// Folder configuration
eleventyConfig.setInputDirectory('content');
eleventyConfig.setIncludesDirectory('../_includes'); // relative to the input directory, therefore the ../
eleventyConfig.setOutputDirectory('_site');
// Ignores
eleventyConfig.ignores.add('node_modules');
eleventyConfig.ignores.add('README.md');
eleventyConfig.ignores.add('public/images/original/');
// Passthroughs
eleventyConfig.addPassthroughCopy('content/pwa.webmanifest');
eleventyConfig.addPassthroughCopy('content/css/*.css');
// TODO: Figure out how to prevent public/images/original from syncing
eleventyConfig.addPassthroughCopy({ 'public/': '/' });
eleventyConfig.setFrontMatterParsingOptions({
excerpt: true,
// Optional, default is "---"
excerpt_separator: '<!-- excerpt -->',
});
// Custom date filter
eleventyConfig.addFilter('formatDate', (dateObj) => {
return new Intl.DateTimeFormat('de-DE', {
day: 'numeric',
month: 'long',
year: 'numeric',
}).format(dateObj);
});
}

10462
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

44
package.json
View file

@ -1,28 +1,20 @@
{
"name": "website",
"version": "0.0.1",
"description": "",
"main": "index.js",
"scripts": {
"start": "npm run dev",
"optimize": "./compress_images.sh",
"dev": "npx @11ty/eleventy --serve",
"build": "npx @11ty/eleventy",
"deploy": "rsync -av build/* server:/tmp/build/ && ssh server 'sudo cp -r /tmp/build/* ~/www/luca-junge.de/'"
},
"keywords": [],
"author": "Luca Junge",
"license": "MIT",
"devDependencies": {
"@11ty/eleventy": "^1.0.2",
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
"autoprefixer": "^10.4.13",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.18",
"prettier": "2.7.1"
},
"dependencies": {
"chart.js": "^4.4.0",
"luxon": "^3.1.0"
}
"name": "luca-junge.de",
"version": "0.0.1",
"description": "Source code for my website",
"type": "module",
"main": "index.js",
"scripts": {
"start": "npm run dev",
"optimize": "./compress_images.sh",
"dev": "npx @11ty/eleventy --serve",
"build": "npx @11ty/eleventy",
"deploy": "rsync -av --rsync-path='mkdir -p /tmp/luca-junge.de-build/ && rsync' _site/* server:/tmp/luca-junge.de-build/ && ssh server 'sudo cp -r /tmp/luca-junge.de-build/* ~/www/luca-junge.de/'"
},
"keywords": [],
"author": "Luca Junge <LucaJunge@posteo.de> (https://luca-junge.de/)",
"license": "MIT",
"devDependencies": {
"@11ty/eleventy": "^3.0.0"
}
}

0
src/_assets/fonts/Montserrat-VariableFont_wght.ttf → public/fonts/montserrat/Montserrat-VariableFont_wght.ttf
View file

0
src/_assets/fonts/OFL.txt → public/fonts/montserrat/OFL.txt
View file

0
src/_assets/images/blog_mobile.jpg → public/images/blog_mobile.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 484 KiB

After

Width:  |  Height:  |  Size: 484 KiB

Before After
Before After

0
src/_assets/images/hero-image_mobile.jpg → public/images/hero-image_mobile.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 407 KiB

After

Width:  |  Height:  |  Size: 407 KiB

Before After
Before After

0
src/_assets/images/hero_image2_mobile.jpg → public/images/hero_image2_mobile.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 266 KiB

After

Width:  |  Height:  |  Size: 266 KiB

Before After
Before After

0
src/_assets/images/logo-github.svg → public/images/logo-github.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before After
Before After

0
src/_assets/images/logo.png → public/images/logo.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

Before After
Before After

0
src/_assets/images/logo.svg → public/images/logo.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

Before After
Before After

0
src/_assets/images/museum2_mobile.jpg → public/images/museum2_mobile.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 347 KiB

After

Width:  |  Height:  |  Size: 347 KiB

Before After
Before After

0
src/_assets/images/museum_mobile.jpg → public/images/museum_mobile.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 188 KiB

After

Width:  |  Height:  |  Size: 188 KiB

Before After
Before After

0
src/_assets/images/original/blog.jpg → public/images/original/blog.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 MiB

After

Width:  |  Height:  |  Size: 3.7 MiB

Before After
Before After

0
src/_assets/images/original/hero-image.jpg → public/images/original/hero-image.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 MiB

After

Width:  |  Height:  |  Size: 3.4 MiB

Before After
Before After

0
src/_assets/images/original/hero_image2.png → public/images/original/hero_image2.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.1 MiB

After

Width:  |  Height:  |  Size: 6.1 MiB

Before After
Before After

0
src/_assets/images/original/museum.jpg → public/images/original/museum.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 MiB

After

Width:  |  Height:  |  Size: 1.9 MiB

Before After
Before After

0
src/_assets/images/original/museum2.png → public/images/original/museum2.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.9 MiB

After

Width:  |  Height:  |  Size: 8.9 MiB

Before After
Before After

0
src/_assets/images/original/playground.jpg → public/images/original/playground.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 MiB

After

Width:  |  Height:  |  Size: 3.1 MiB

Before After
Before After

0
src/_assets/images/original/portfolio.jpg → public/images/original/portfolio.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 MiB

After

Width:  |  Height:  |  Size: 2.2 MiB

Before After
Before After

0
src/_assets/images/original/under-construction.jpg → public/images/original/under-construction.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 MiB

After

Width:  |  Height:  |  Size: 3.8 MiB

Before After
Before After

0
src/_assets/images/original/workflows.jpg → public/images/original/workflows.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 1.7 MiB

Before After
Before After

0
src/_assets/images/playground_mobile.jpg → public/images/playground_mobile.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 302 KiB

After

Width:  |  Height:  |  Size: 302 KiB

Before After
Before After

0
src/_assets/images/portfolio_mobile.jpg → public/images/portfolio_mobile.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 241 KiB

After

Width:  |  Height:  |  Size: 241 KiB

Before After
Before After

0
src/_assets/images/under-construction_mobile.jpg → public/images/under-construction_mobile.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 420 KiB

After

Width:  |  Height:  |  Size: 420 KiB

Before After
Before After

0
src/_assets/images/workflows_mobile.jpg → public/images/workflows_mobile.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 161 KiB

After

Width:  |  Height:  |  Size: 161 KiB

Before After
Before After

0
src/_assets/draco/draco_decoder.wasm → public/libraries/draco/draco_decoder.wasm
View file

0
src/_assets/draco/draco_wasm_wrapper.js → public/libraries/draco/draco_wasm_wrapper.js
View file

0
src/_assets/fontawesome/LICENSE.txt → public/libraries/fontawesome/LICENSE.txt
View file

0
src/_assets/fontawesome/css/all.css → public/libraries/fontawesome/css/all.css vendored
View file

0
src/_assets/fontawesome/css/all.min.css → public/libraries/fontawesome/css/all.min.css vendored
View file

0
src/_assets/fontawesome/css/brands.css → public/libraries/fontawesome/css/brands.css vendored
View file

0
src/_assets/fontawesome/css/brands.min.css → public/libraries/fontawesome/css/brands.min.css vendored
View file

0
src/_assets/fontawesome/css/fontawesome.css → public/libraries/fontawesome/css/fontawesome.css vendored
View file

0
src/_assets/fontawesome/css/fontawesome.min.css → public/libraries/fontawesome/css/fontawesome.min.css vendored
View file

0
src/_assets/fontawesome/css/regular.css → public/libraries/fontawesome/css/regular.css vendored
View file

0
src/_assets/fontawesome/css/regular.min.css → public/libraries/fontawesome/css/regular.min.css vendored
View file

0
src/_assets/fontawesome/css/solid.css → public/libraries/fontawesome/css/solid.css vendored
View file

0
src/_assets/fontawesome/css/solid.min.css → public/libraries/fontawesome/css/solid.min.css vendored
View file

0
src/_assets/fontawesome/css/svg-with-js.css → public/libraries/fontawesome/css/svg-with-js.css vendored
View file

0
src/_assets/fontawesome/css/svg-with-js.min.css → public/libraries/fontawesome/css/svg-with-js.min.css vendored
View file

0
src/_assets/fontawesome/css/v4-font-face.css → public/libraries/fontawesome/css/v4-font-face.css vendored
View file

0
src/_assets/fontawesome/css/v4-font-face.min.css → public/libraries/fontawesome/css/v4-font-face.min.css vendored
View file

0
src/_assets/fontawesome/css/v4-shims.css → public/libraries/fontawesome/css/v4-shims.css vendored
View file

0
src/_assets/fontawesome/css/v4-shims.min.css → public/libraries/fontawesome/css/v4-shims.min.css vendored
View file

0
src/_assets/fontawesome/css/v5-font-face.css → public/libraries/fontawesome/css/v5-font-face.css vendored
View file

0
src/_assets/fontawesome/css/v5-font-face.min.css → public/libraries/fontawesome/css/v5-font-face.min.css vendored
View file

0
src/_assets/fontawesome/webfonts/fa-brands-400.ttf → public/libraries/fontawesome/webfonts/fa-brands-400.ttf
View file

0
src/_assets/fontawesome/webfonts/fa-brands-400.woff2 → public/libraries/fontawesome/webfonts/fa-brands-400.woff2
View file

0
src/_assets/fontawesome/webfonts/fa-regular-400.ttf → public/libraries/fontawesome/webfonts/fa-regular-400.ttf
View file

0
src/_assets/fontawesome/webfonts/fa-regular-400.woff2 → public/libraries/fontawesome/webfonts/fa-regular-400.woff2
View file

0
src/_assets/fontawesome/webfonts/fa-solid-900.ttf → public/libraries/fontawesome/webfonts/fa-solid-900.ttf
View file

0
src/_assets/fontawesome/webfonts/fa-solid-900.woff2 → public/libraries/fontawesome/webfonts/fa-solid-900.woff2
View file

0
src/_assets/fontawesome/webfonts/fa-v4compatibility.ttf → public/libraries/fontawesome/webfonts/fa-v4compatibility.ttf
View file

0
src/_assets/fontawesome/webfonts/fa-v4compatibility.woff2 → public/libraries/fontawesome/webfonts/fa-v4compatibility.woff2
View file

0
src/_assets/model-viewer.min.js → public/libraries/modelviewer/model-viewer.min.js vendored
View file

71
src/_includes/pie-chart.njk
View file

@ -1,71 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/assets/fontawesome/css/all.css">
<script src="/libs/chart.min.js"></script>
<title>{{ title }}</title>
</head>
<body>
{% include "partials/header.njk" %}
<aside>
<a onclick="history.back()">
<i class="fa fa-solid fa-angle-left"></i>Zurück
</a>
<h1 >{{ title }}</h1>
<span>{{ page.date | formatDate }}</span>
</aside>
<main id="content">
<canvas id="chart" height="200"></canvas>
</main>
{% include "partials/footer.njk" %}
<script>
let projectData = {{ projects | stringify | safe }}
let chart = new Chart(document.querySelector("#chart"), {
type: "pie",
data: {
labels: projectData.map(row => row.name),
datasets: [
{
data: projectData.map(row => row.amount)
}
]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: function (context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
label += new Intl
.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR'
})
.format(context.parsed);
return label;
}
}
}
},
responsive: false
}
})
</script>
</body>
</html>

BIN
src/blog/adding-custom-icons-for-file-types-on-linux/gltf-before.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.4 KiB

68
src/blog/adding-custom-icons-for-file-types-on-linux/index.md
View file

@ -1,68 +0,0 @@
---
title: Adding custom icons for MIME types on linux
sources:
- https://blog.robertelder.org/custom-mime-type-ubuntu/
- another source
---
# The problem
I frequently work with 3D models in the web and therefore with .gltf or .glb files. These formats are the best choice for compressing and optimizing models for the web but they still seem to lack support in operating systems and their file managers. That is also the case for the preview icons. For example, that's how a .gltf file shows up in the default file manager in Fedora 38, which is Nautilus:
![A window of the default file manager in Fedora 38 showing a broken file icon for the file named 'DamagedHelmet.gltf'](./gltf-before.jpg)
That's obviously not very helpful. It's blurry, shows a warning symbol and does not really represent the file's contents.
I was wondering if it's possible to change icons for specific file types (also called MIME types) and as it turns out, it's possible!
## What to do
First, it's important to make the file extension known to the operating system. You can find existing custom definitions for all users in the `/usr/share/mime/packages` folder:
![The contents of the /usr/share/mime/packages/ folder, showing multiple files with .xml extension](./output1.png)
Notice the `gltf.xml` and `glb.xml` files? For every file type you want to add a custom icon to you need to add a corresponding `.xml` file. Let's look at the `glb.xml` file for reference:
```xml
<?xml version="1.0" encoding="UTF-8"?>
<mime-info xmlns='http://www.freedesktop.org/standards/shared-mime-info'>
<mime-type type="model/gltf-binary">
<comment>glTF Binary Format MIME Type</comment>
<glob pattern="*.glb"/>
</mime-type>
</mime-info>
```
The important part is the `<mime-type type="model/gltf-binary">` and the `<glob pattern="*.glb">` line. Add a new file and change the lines according to your MIME type and file extension and also name the file accordingly.
### Update the mime database
The next step is to update the mime database to give your defined MIME types to files ending with .glb or .gltf.
You can do that with:
```bash
sudo update-mime-database /usr/share/mime
```
This will generate a folder with your MIME type xml definition in `/usr/share/mime/`, so for `.glb` and `.gltf` it will create the following files:
```bash
luca@carbon /usr/share/mime $ tree model
model
├── 3mf.xml
├── gltf-binary.xml
├── gltf+json.xml
└── ...
1 directory, 4 files
```
### Add the icons to your file types
The final step is getting your .svg icon ready and connect it to your MIME type. Copy your svg icon to `/usr/share/icons/hicolor/scalable/mimetypes/<mimetype-group>-<mimetype>.svg`. For .glb the mimetype-group would be `model` and the mimetype would be `gltf-binary`, resulting in this line for the whole filepath:
```bash
/usr/share/icons/hicolor/scalable/mimetypes/model-binary-gltf.svg
```
Now you just need to update your icon database with `sudo update-icon-caches /usr/share/icons/*` on Debian/Ubuntu or `sudo gtk-update-icon-cache /usr/share/icons/*` on Fedora. You may need to restart you system to get the icon to show up.

BIN
src/blog/adding-custom-icons-for-file-types-on-linux/output1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 20 KiB

26
src/blog/blog.11tydata.js
View file

@ -1,26 +0,0 @@
function showDraft(data) {
const isDraft = 'draft' in data && data.draft !== false
return !isDraft
}
module.exports = function () {
return {
eleventyComputed: {
eleventyExcludeFromCollections: function (data) {
if (showDraft(data)) {
return data.eleventyExcludeFromCollections;
} else {
return true
}
},
permalink: function (data) {
if (showDraft(data)) {
return data.permalink
} else {
return false
}
}
}
}
}

7
src/blog/blog.json
View file

@ -1,7 +0,0 @@
{
"layout": "post.njk",
"title": "Unnamed",
"tags": "post",
"author": "Luca Junge",
"date": "Created"
}

5
src/blog/open-source-donations/index.md
View file

@ -1,5 +0,0 @@
---
title: Open Source Donations
layout: pie-chart.njk
draft: false
---

16
src/blog/open-source-donations/open-source-donations.11tydata.json
View file

@ -1,16 +0,0 @@
{
"projects": [
{
"name": "Godot Engine",
"amount": "25"
},
{
"name": "Kenney (Game Assets)",
"amount": "4"
},
{
"name": "Mozilla Thunderbird",
"amount": "5.70"
}
]
}

4
src/blog/test/index.md
View file

@ -1,4 +0,0 @@
---
title: This is a test post with a very long title lorem ipsum dolor sit amet
draft: true
---

12
src/contact/contact.njk
View file

@ -1,12 +0,0 @@
---
title: "Kontakt"
layout: base.njk
---
<section>
<div class="section-content">
<p>Feel free to contact me via <a href="mailto:kontakt@luca-junge.de">kontakt@luca-junge.de</a>
</p>
</div>
</section>

4
src/css/fonts.css
View file

@ -1,4 +0,0 @@
@font-face {
font-family: "Montserrat";
src: url("/assets/fonts/Montserrat-VariableFont_wght.ttf");
}

12
src/css/hero.css
View file

@ -1,12 +0,0 @@
.hero {
display: flex;
justify-content: center;
margin: 0px;
padding-top: calc(128px + 70px);
padding-bottom: 128px;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("/assets/images/hero_image2_mobile.jpg");
background-size: cover;
object-fit: cover;
background-position: top left;
}

8
src/css/post.css
View file

@ -1,8 +0,0 @@
.post {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 70px;
max-width: var(--breakpoint);
}

80
src/css/sections.css
View file

@ -1,80 +0,0 @@
/* Styles for the sections, mainly used on the start page, the portfolio and workflow page */
section {
display: flex;
justify-content: center;
color: #ffffff;
background-color: rgb(82, 76, 121);
padding-top: 128px;
padding-bottom: 128px;
}
section:nth-child(odd) {
background-color: rgb(82, 76, 121);
}
section:nth-child(even) {
background-color: rgb(150, 143, 194);
}
.section-content {
max-width: 1024px;
gap: 20px;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 64px;
margin-right: 64px;
}
.section-content div {
max-width: 50%;
display: flex;
row-gap: 14px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
section h1,
section p {
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
}
section p {
padding: 0px;
margin: 0px;
line-height: 1.8em;
font-weight: 600;
}
section h1 {
margin-top: 0px;
margin-bottom: 0px;
}
.section-background {
background-size: cover;
object-fit: cover;
background-position: center;
backdrop-filter: blur(3px);
}
@media screen and (max-width: 512px) {
/* Make the left-to-right sections top-to-bottom */
.section-content {
align-items: flex-start;
}
.section-content div {
max-width: 100%;
}
.section-content {
flex-direction: column;
}
}

51
src/css/style.css
View file

@ -1,51 +0,0 @@
@import url("./utilities.css");
@import url("./fonts.css");
@import url("./normalize.css");
@import url("./variables.css");
@import url("./header.css");
@import url("./footer.css");
@import url("./sections.css");
@import url("./hero.css");
@import url("./post.css");
html,
body {
color: #ffffff;
font-family: "Montserrat", sans-serif;
background-color: rgba(59, 66, 82, 1);
}
/* Button */
button,
.button {
display: inline-block;
box-sizing: border-box;
border: none;
color: inherit;
text-decoration: none;
padding: 12px 16px;
transition: background-color 0.25s ease-in-out, border 0.25s ease-in-out;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
background-color: rgba(0, 0, 0, 0.7);
border: 3px solid rgba(0, 0, 0, 0.7);
}
button:hover,
.button:hover,
button:focus-visible,
.button:focus-visible {
background-color: rgba(60, 60, 60, 0.7);
border: 3px solid rgba(60, 60, 60, 0.7);
}
.inline-button {
color: rgb(51, 100, 224);
}
a {
color: inherit;
}

24
src/css/utilities.css
View file

@ -1,24 +0,0 @@
:root {
--distance-small: 4px;
--distance-medium: 8px;
--distance-large: 12px;
--distance-huge: 16px;
--breakpoint: 1024px;
}
.content-padding {
padding: var(--distance-large);
}
.container {
max-width: var(--breakpoint);
margin-left: 32px;
margin-right: 32px;
}
.flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

11
src/css/variables.css
View file

@ -1,11 +0,0 @@
:root {
--white: #ffffff;
--black: #000000;
--background-color: #393e46;
--dark-background-color: #2d3138;
--text-color: #eeeeee;
--accent: #00adb5;
--border-radius: 8px;
}

1
src/libs/chart.min.js vendored
View file

File diff suppressed because one or more lines are too long

23
src/workflows/index.njk
View file

@ -1,23 +0,0 @@
---
title: "My Workflows"
layout: overview.njk
eleventyExcludeFromCollections: true
---
{%- for post in collections.workflow -%}
<article>
<header>
<h1>
<a href="{{post.url}}">{{post.data.title}}</a>
</h1>
<time>{{post.date | formatDate }}</time>
</header>
<p>{{post.templateContent | createExcerpt}}</p>
<a class="button" href="{{post.url}}">
Weiterlesen
</a>
</article>
{%- endfor -%}

Some files were not shown because too many files have changed in this diff Show more