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

more content

Browse source
This commit is contained in:
Luca 2024-03-22 14:51:18 +01:00
parent eeb1d1bc70
commit d51e47c549
36 changed files with 144 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

21
compress_images.sh Executable file
View file

@ -0,0 +1,21 @@
#!/bin/bash
# Call this from the repo folder
for image in src/_assets/images/original/*.jpg; do
#echo "Converting $image ..."
filename=$(basename -- "$image")
# imagefolder = "src/_assets/images/"
imagefolder="${image%%original*}"
# filename = "workflows"
imagefilename="${filename%.*}"
# extension = "jpg"
imageextension="${filename##*.}"
echo "${imagefolder}${imagefilename}_mobile.${imageextension}"
convert "$image" -resize 1500 -strip -quality 85 "${imagefolder}${imagefilename}_mobile.${imageextension}"
done

3
package.json
View file

@ -5,9 +5,10 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"start": "npm run dev", "start": "npm run dev",
"optimize": "./compress_images.sh",
"dev": "npx @11ty/eleventy --serve", "dev": "npx @11ty/eleventy --serve",
"build": "npx @11ty/eleventy", "build": "npx @11ty/eleventy",
"deploy": "scp -r build/ server:/tmp/ && ssh server 'sudo cp -r /tmp/build/* ~/www/luca-junge.de/" "deploy": "scp -r build/ server:/tmp/ && ssh server 'sudo cp -r /tmp/build/* ~/www/luca-junge.de/'"
}, },
"keywords": [], "keywords": [],
"author": "Luca Junge", "author": "Luca Junge",

BIN
src/_assets/images/blog_mobile.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 484 KiB

BIN
src/_assets/images/hero-image_mobile.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 407 KiB

BIN
src/_assets/images/museum_mobile.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 188 KiB

BIN
src/_assets/images/original/blog.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.7 MiB

0
src/_assets/images/hero-image.jpg → src/_assets/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/GY2YuO3r.jpg → src/_assets/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/o3KfXg3W.jpg → src/_assets/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

BIN
src/_assets/images/original/portfolio.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
src/_assets/images/original/under-construction.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.8 MiB

BIN
src/_assets/images/original/workflows.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
src/_assets/images/playground_mobile.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 302 KiB

BIN
src/_assets/images/portfolio_mobile.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 241 KiB

BIN
src/_assets/images/under-construction_mobile.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 420 KiB

BIN
src/_assets/images/workflows_mobile.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 161 KiB

10
src/_includes/overview.njk
View file

@ -8,15 +8,17 @@
<link rel="stylesheet" href="/assets/fontawesome/css/all.css"> <link rel="stylesheet" href="/assets/fontawesome/css/all.css">
<title>{{ title }}</title> <title>{{ title }}</title>
</head> </head>
<body> <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" %} {% include "partials/header.njk" %}
<aside> <aside style="margin-top: 70px;">
<h1>{{title}}</h1> <h1>{{title}}</h1>
</aside> </aside>
<main> <main class="flex">
{{ content | safe }} <div class="content-padding container">
{{ content | safe }}
</div>
</main> </main>
{% include "partials/footer.njk" %} {% include "partials/footer.njk" %}

2
src/_includes/partials/footer.njk
View file

@ -3,4 +3,4 @@
<span> <span>
<i class="fa-brands fa-creative-commons-zero" style="margin-right: 8px;"></i>Luca Junge</span> <i class="fa-brands fa-creative-commons-zero" style="margin-right: 8px;"></i>Luca Junge</span>
</div> </div>
</foot> </footer>

35
src/_includes/partials/header.njk
View file

@ -1,33 +1,42 @@
<header id="navigation"> <header id="navigation">
<nav> <nav>
<ul> <ul>
<li class="home-button"> <li id="home-nav">
<a href="/" title="Zur Startseite"> <a href="/" title="To Homepage">
<i class="fa-solid fa-house"></i> <i class="fa-solid fa-house"></i>
</a> </a>
</li> </li>
<li> <li id="portfolio-nav">
<a href="/portfolio/" title="Alle Posts">Portfolio</a> <a href="/portfolio/" title="My Portfolio">Portfolio</a>
</li> </li>
<li> <li id="workflows-nav">
<a href="/workflows/" title="Workflow">Workflows</a> <a href="/workflows/" title="Workflows">Workflows</a>
</li> </li>
<li> <li id="blog-nav">
<a href="/blog/" title="Blog">Blog</a> <a href="/blog/" title="Blog">Blog</a>
</li> </li>
<li class="contact-button"> <li id="contact-nav">
<a href="/contact/" title="Kontakt">Kontakt</a> <a href="/contact/" title="Contact">Kontakt</a>
</li> </li>
<li> <li id="github-nav">
<a href="https://github.com/LucaJunge" title="GitHub Profil"> <a href="https://github.com/LucaJunge" title="GitHub profile">
<i class="fa-brands fa-github"></i> <i class="fa-brands fa-github"></i>
</a> </a>
</li> </li>
<li class="menu-button"> <li id="menu-button">
<a title="Menu anzeigen"> <a title="Show menu">
<i class="fa fa-solid fa-bars"></i> <i class="fa fa-solid fa-bars"></i>
</a> </a>
</li> </li>
</ul> </ul>
</nav> </nav>
</header> </header>
<script>
let menuButton = document.querySelector("#menu-button a")
menuButton.addEventListener("click", () => {
document.querySelector("#navigation").classList.toggle("open")
})
</script>

0
src/blog/blogs.11tydata.js → src/blog/blog.11tydata.js
View file

0
src/blog/blogs.json → src/blog/blog.json
View file

2
src/css/footer.css
View file

@ -1,4 +1,4 @@
#main-footer { footer {
background-color: #111111; background-color: #111111;
color: #ffffff; color: #ffffff;
padding: 0.75rem 1rem 0.75rem 1rem; padding: 0.75rem 1rem 0.75rem 1rem;

8
src/css/header.css
View file

@ -58,7 +58,7 @@
vertical-align: middle; vertical-align: middle;
} }
#navigation .menu-button { #navigation #menu-button {
display: none; display: none;
} }
@ -73,9 +73,9 @@
display: none; display: none;
} }
#navigation li.menu-button, #navigation li#menu-button,
#navigation li.home-button, #navigation li#home-nav,
#navigation li.contact-button { #navigation li#contact-nav {
display: inline-block; display: inline-block;
} }

2
src/css/hero.css
View file

@ -5,7 +5,7 @@
padding-top: calc(128px + 70px); padding-top: calc(128px + 70px);
padding-bottom: 128px; padding-bottom: 128px;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("/assets/images/hero-image.jpg"); url("/assets/images/hero-image_mobile.jpg");
background-size: cover; background-size: cover;
object-fit: cover; object-fit: cover;
} }

25
src/css/sections.css
View file

@ -32,6 +32,7 @@ section:nth-child(even) {
.section-content div { .section-content div {
max-width: 50%; max-width: 50%;
display: flex; display: flex;
row-gap: 14px;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
@ -47,15 +48,37 @@ section p {
margin: 0px; margin: 0px;
line-height: 1.8em; line-height: 1.8em;
font-weight: 600; font-weight: 600;
font-size: 1.2em;
} }
section h1 { section h1 {
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px;
} }
.section-background { .section-background {
background-size: cover; background-size: cover;
object-fit: cover; object-fit: cover;
background-position: center; background-position: center;
backdrop-filter: blur(3px);
}
aside {
padding: 12px 0px 16px 12px;
}
aside h1 {
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
}
@media screen and (max-width: 512px) {
/* Make the left-to-right sections top-to-bottom */
.section-content div {
max-width: 100%;
}
.section-content {
flex-direction: column;
}
} }

7
src/css/style.css
View file

@ -1,3 +1,4 @@
@import url("./utilities.css");
@import url("./fonts.css"); @import url("./fonts.css");
@import url("./normalize.css"); @import url("./normalize.css");
@import url("./variables.css"); @import url("./variables.css");
@ -8,6 +9,7 @@
html, html,
body { body {
color: #ffffff;
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
background-color: rgba(59, 66, 82, 1); background-color: rgba(59, 66, 82, 1);
} }
@ -15,6 +17,7 @@ body {
/* Button */ /* Button */
button, button,
.button { .button {
display: inline-block;
box-sizing: border-box; box-sizing: border-box;
border: none; border: none;
color: inherit; color: inherit;
@ -37,6 +40,10 @@ button:focus-visible,
border: 3px solid rgba(163, 190, 140, 0.3); border: 3px solid rgba(163, 190, 140, 0.3);
} }
.inline-button {
color: rgb(51, 100, 224);
}
a { a {
color: inherit; color: inherit;
} }

22
src/css/utilities.css Normal file
View file

@ -0,0 +1,22 @@
: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);
}
.flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

7
src/examples/examples.json
View file

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

23
src/examples/examples.njk
View file

@ -1,23 +0,0 @@
---
title: Alle Beispiele
layout: overview.njk
eleventyExcludeFromCollections: true
---
{%- for post in collections.example -%}
<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 -%}

7
src/examples/test-example/index.md
View file

@ -1,7 +0,0 @@
---
title: Test Example
---
# Hello World
This is a test

30
src/index/index.njk
View file

@ -19,18 +19,18 @@ permalink: /index.html
</div> </div>
</section> </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/GY2YuO3r.jpg');"> <section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./assets/images/museum_mobile.jpg');">
<div class="section-content"> <div class="section-content">
<div> <div>
<h1>This is a another section statement</h1> <h1>Interactive Applications & Games</h1>
</div> </div>
<div> <div>
<p>And a small text that explains this statement further. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, a qui!</p> <p>I specialize in 3D interactive content on the web. Built with three.js or the Godot Engine.</p>
</div> </div>
</div> </div>
</section> </section>
<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');">
<div class="section-content"> <div class="section-content">
<div> <div>
<h1>My Portfolio</h1> <h1>My Portfolio</h1>
@ -41,35 +41,27 @@ permalink: /index.html
</div> </div>
</section> </section>
<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 class="section-content">
<div> <div>
<h1>My Workflows</h1> <h1>My Workflows</h1>
<a class="button" href="/workflows/">Explore</a>
</div> </div>
<div> <div>
<p>This is currently work in progress.</p> <p>I am using many technologies and devices for my work. Over the years I have developed workflows and techniques to get the most out of my hardware and software.</p>
<p>To see how I create my applications and software, see my documented workflows.</p>
</div> </div>
</div> </div>
</section> </section>
<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');">
<div class="section-content"> <div class="section-content">
<div> <div>
<h1>My Blog</h1> <h1>My Blog</h1>
<a class="button" href="/blog/">Visit</a>
</div> </div>
<div> <div>
<p>This is currently work in progress.</p> <p>Whenever I see or discover something not easily found online, I'm writing a blog post about it!</p>
</div>
</div>
</section>
<section>
<div class="section-content">
<div>
<h1>Kontakt</h1>
</div>
<div>
<p>This is currently work in progress.</p>
</div> </div>
</div> </div>
</section> </section>

11
src/portfolio/index.njk Normal file
View file

@ -0,0 +1,11 @@
---
title: "My Portfolio"
layout: base.njk
---
<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');">
<div class="section-content">
<p>My Portfolio is currently under construction</p>
</div>
</section>

7
src/tutorials/test-tutorial/index.md
View file

@ -1,7 +0,0 @@
---
title: Test Tutorial
---
# Hello World
This is a test

7
src/tutorials/tutorials.json
View file

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

23
src/tutorials/tutorials.njk
View file

@ -1,23 +0,0 @@
---
title: Alle Tutorials
layout: overview.njk
eleventyExcludeFromCollections: true
---
{%- for post in collections.tutorial -%}
<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 -%}

11
src/workflows/index.njk Normal file
View file

@ -0,0 +1,11 @@
---
title: "My Workflows"
layout: base.njk
---
<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');">
<div class="section-content">
<p>My Workflows are currently under construction</p>
</div>
</section>