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",
"scripts": {
"start": "npm run dev",
"optimize": "./compress_images.sh",
"dev": "npx @11ty/eleventy --serve",
"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": [],
"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">
<title>{{ title }}</title>
</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" %}
<aside>
<aside style="margin-top: 70px;">
<h1>{{title}}</h1>
</aside>
<main>
{{ content | safe }}
<main class="flex">
<div class="content-padding container">
{{ content | safe }}
</div>
</main>
{% include "partials/footer.njk" %}

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

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

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

@ -1,33 +1,42 @@
<header id="navigation">
<nav>
<ul>
<li class="home-button">
<a href="/" title="Zur Startseite">
<li id="home-nav">
<a href="/" title="To Homepage">
<i class="fa-solid fa-house"></i>
</a>
</li>
<li>
<a href="/portfolio/" title="Alle Posts">Portfolio</a>
<li id="portfolio-nav">
<a href="/portfolio/" title="My Portfolio">Portfolio</a>
</li>
<li>
<a href="/workflows/" title="Workflow">Workflows</a>
<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>
<li class="contact-button">
<a href="/contact/" title="Kontakt">Kontakt</a>
<li id="contact-nav">
<a href="/contact/" title="Contact">Kontakt</a>
</li>
<li>
<a href="https://github.com/LucaJunge" title="GitHub Profil">
<li id="github-nav">
<a href="https://github.com/LucaJunge" title="GitHub profile">
<i class="fa-brands fa-github"></i>
</a>
</li>
<li class="menu-button">
<a title="Menu anzeigen">
<li id="menu-button">
<a title="Show menu">
<i class="fa fa-solid fa-bars"></i>
</a>
</li>
</ul>
</nav>
</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;
color: #ffffff;
padding: 0.75rem 1rem 0.75rem 1rem;

8
src/css/header.css
View file

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

2
src/css/hero.css
View file

@ -5,7 +5,7 @@
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-image.jpg");
url("/assets/images/hero-image_mobile.jpg");
background-size: cover;
object-fit: cover;
}

25
src/css/sections.css
View file

@ -32,6 +32,7 @@ section:nth-child(even) {
.section-content div {
max-width: 50%;
display: flex;
row-gap: 14px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
@ -47,15 +48,37 @@ section p {
margin: 0px;
line-height: 1.8em;
font-weight: 600;
font-size: 1.2em;
}
section h1 {
margin-top: 0px;
margin-bottom: 0px;
}
.section-background {
background-size: cover;
object-fit: cover;
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("./normalize.css");
@import url("./variables.css");
@ -8,6 +9,7 @@
html,
body {
color: #ffffff;
font-family: "Montserrat", sans-serif;
background-color: rgba(59, 66, 82, 1);
}
@ -15,6 +17,7 @@ body {
/* Button */
button,
.button {
display: inline-block;
box-sizing: border-box;
border: none;
color: inherit;
@ -37,6 +40,10 @@ button:focus-visible,
border: 3px solid rgba(163, 190, 140, 0.3);
}
.inline-button {
color: rgb(51, 100, 224);
}
a {
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>
</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>
<h1>This is a another section statement</h1>
<h1>Interactive Applications & Games</h1>
</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>
</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>
<h1>My Portfolio</h1>
@ -41,35 +41,27 @@ permalink: /index.html
</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/workflows_mobile.jpg');">
<div class="section-content">
<div>
<h1>My Workflows</h1>
<a class="button" href="/workflows/">Explore</a>
</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>
</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>
<h1>My Blog</h1>
<a class="button" href="/blog/">Visit</a>
</div>
<div>
<p>This is currently work in progress.</p>
</div>
</div>
</section>
<section>
<div class="section-content">
<div>
<h1>Kontakt</h1>
</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>

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>