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

added web-app workflow and changed post css

Browse source
This commit is contained in:
Luca 2024-04-21 14:40:12 +02:00
parent ae75a8880a
commit 43addb92a2
11 changed files with 91 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/_includes/overview.njk
View file

@ -11,7 +11,7 @@
<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 style="margin-top: 70px;">
<aside class="flex" style="margin-top: 70px;">
<h1>{{title}}</h1>
</aside>

39
src/_includes/post.njk
View file

@ -10,29 +10,28 @@
</head>
<body>
{% include "partials/header.njk" %}
<div class="post">
<aside>
<a class="button" onclick="history.back()">
<i class="fa fa-solid fa-angle-left"></i> Zurück
</a>
<aside>
{% if header %}
<div>
<img src="{{ header }}" alt="{{ title }}">
</div>
{% endif %}
<a class="button" onclick="history.back()">
<i class="fa fa-solid fa-angle-left"></i> Zurück
</a>
{% if header %}
<div>
<img src="{{ header }}" alt="{{ title }}">
</div>
{% endif %}
<h1 >{{ title }}</h1>
<span>{{ page.date | formatDate }}</span>
</aside>
<main>
<article>
{{ content | safe }}
</article>
</main>
<h1 >{{ title }}</h1>
<span>{{ page.date | formatDate }}</span>
</aside>
<main class="flex container">
<article>
{{ content | safe }}
</article>
</main>
</div>
{% include "partials/footer.njk" %}
</body>
</html>

3
src/css/header.css
View file

@ -96,7 +96,7 @@
#navigation.open {
padding: 0px;
/*background-color: rgba(59, 66, 82, 1);*/
background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("/assets/images/hero_image2_mobile.jpg");
background-position: top left;
background-size: cover;
@ -105,6 +105,7 @@
#navigation.open nav ul {
padding: 12px;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}

1
src/css/hero.css
View file

@ -9,5 +9,4 @@
background-size: cover;
object-fit: cover;
background-position: top left;
}

8
src/css/post.css Normal file
View file

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

16
src/css/sections.css
View file

@ -62,18 +62,14 @@ section h1 {
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 {
align-items: flex-start;
}
.section-content div {
max-width: 100%;
}

12
src/css/style.css
View file

@ -6,6 +6,7 @@
@import url("./footer.css");
@import url("./sections.css");
@import url("./hero.css");
@import url("./post.css");
html,
body {
@ -23,21 +24,22 @@ button,
color: inherit;
text-decoration: none;
padding: 12px 16px;
transition: background-color 0.25s ease-in-out;
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(163, 190, 140, 0.5);
border: 3px solid rgba(163, 190, 140, 0.5);
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(163, 190, 140, 0.3);
border: 3px solid rgba(163, 190, 140, 0.3);
background-color: rgba(60, 60, 60, 0.7);
border: 3px solid rgba(60, 60, 60, 0.7);
}
.inline-button {

2
src/css/utilities.css
View file

@ -12,6 +12,8 @@
.container {
max-width: var(--breakpoint);
margin-left: 32px;
margin-right: 32px;
}
.flex {

32
src/index/index.njk
View file

@ -8,13 +8,10 @@ permalink: /index.html
<div class="section-content">
<div>
<h1>Welcome to my website!</h1>
<a class="button" href="/contact/" class="bg-primary">Contact me</a>
</div>
<div>
<p>My name is Luca Junge.</p>
<p>
I'm a web developer, specializing on interactive web apps and 3D content.</p>
</p>
I'm Luca Junge, a web developer specializing on interactive progressive web apps and 3D content.</p>
</div>
</div>
</section>
@ -25,7 +22,19 @@ permalink: /index.html
<h1>Interactive Applications & Games</h1>
</div>
<div>
<p>I specialize in 3D interactive content on the web. Built with three.js or the Godot Engine.</p>
<p>Most of my work is created using standard web technologies in combination with open source libraries like three.js.</p>
<p>For more demanding projects I am using the Godot Engine.</p>
</div>
</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');">
<div class="section-content">
<div>
<h1>Open Source Workflow</h1>
</div>
<div>
<p>My projects rely on various open source projects like Meshlab, Blender, Meshroom, Godot Engine and more.</p>
</div>
</div>
</section>
@ -36,7 +45,8 @@ permalink: /index.html
<h1>My Portfolio</h1>
</div>
<div>
<p>This is currently work in progress.</p>
<p>I want to publish and show some of my demo projects here. Feel free to check them out and look at the source code.</p>
<a class="button" href="/portfolio/">Take a look at my projects</a>
</div>
</div>
</section>
@ -45,11 +55,11 @@ permalink: /index.html
<div class="section-content">
<div>
<h1>My Workflows</h1>
<a class="button" href="/workflows/">Explore</a>
</div>
<div>
<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>
<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>
@ -58,10 +68,10 @@ permalink: /index.html
<div class="section-content">
<div>
<h1>My Blog</h1>
<a class="button" href="/blog/">Visit</a>
</div>
<div>
<p>Whenever I see or discover something not easily found online, I'm writing a blog post about it!</p>
<p>Whenever I see a new technique or discover something useful, I'm writing a blog post about it!</p>
<a class="button" href="/blog/">Visit</a>
</div>
</div>
</section>

24
src/workflows/index.njk
View file

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

7
src/workflows/web-app/index.md Normal file
View file

@ -0,0 +1,7 @@
---
title: Creating a Web App
layout: post.njk
tags: "workflow"
---
Test