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

7
src/_includes/post.njk
View file

@ -10,9 +10,8 @@
</head> </head>
<body> <body>
{% include "partials/header.njk" %} {% include "partials/header.njk" %}
<div class="post">
<aside> <aside>
<a class="button" onclick="history.back()"> <a class="button" onclick="history.back()">
<i class="fa fa-solid fa-angle-left"></i> Zurück <i class="fa fa-solid fa-angle-left"></i> Zurück
</a> </a>
@ -27,12 +26,12 @@
<span>{{ page.date | formatDate }}</span> <span>{{ page.date | formatDate }}</span>
</aside> </aside>
<main> <main class="flex container">
<article> <article>
{{ content | safe }} {{ content | safe }}
</article> </article>
</main> </main>
</div>
{% include "partials/footer.njk" %} {% include "partials/footer.njk" %}
</body> </body>
</html> </html>

3
src/css/header.css
View file

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

1
src/css/hero.css
View file

@ -9,5 +9,4 @@
background-size: cover; background-size: cover;
object-fit: cover; object-fit: cover;
background-position: top left; 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); 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) { @media screen and (max-width: 512px) {
/* Make the left-to-right sections top-to-bottom */ /* Make the left-to-right sections top-to-bottom */
.section-content {
align-items: flex-start;
}
.section-content div { .section-content div {
max-width: 100%; max-width: 100%;
} }

12
src/css/style.css
View file

@ -6,6 +6,7 @@
@import url("./footer.css"); @import url("./footer.css");
@import url("./sections.css"); @import url("./sections.css");
@import url("./hero.css"); @import url("./hero.css");
@import url("./post.css");
html, html,
body { body {
@ -23,21 +24,22 @@ button,
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
padding: 12px 16px; 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; border-radius: 8px;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
background-color: rgba(163, 190, 140, 0.5); background-color: rgba(0, 0, 0, 0.7);
border: 3px solid rgba(163, 190, 140, 0.5); border: 3px solid rgba(0, 0, 0, 0.7);
} }
button:hover, button:hover,
.button:hover, .button:hover,
button:focus-visible, button:focus-visible,
.button:focus-visible { .button:focus-visible {
background-color: rgba(163, 190, 140, 0.3); background-color: rgba(60, 60, 60, 0.7);
border: 3px solid rgba(163, 190, 140, 0.3); border: 3px solid rgba(60, 60, 60, 0.7);
} }
.inline-button { .inline-button {

2
src/css/utilities.css
View file

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

32
src/index/index.njk
View file

@ -8,13 +8,10 @@ permalink: /index.html
<div class="section-content"> <div class="section-content">
<div> <div>
<h1>Welcome to my website!</h1> <h1>Welcome to my website!</h1>
<a class="button" href="/contact/" class="bg-primary">Contact me</a>
</div> </div>
<div> <div>
<p>My name is Luca Junge.</p>
<p> <p>
I'm a web developer, specializing on interactive web apps and 3D content.</p> I'm Luca Junge, a web developer specializing on interactive progressive web apps and 3D content.</p>
</p>
</div> </div>
</div> </div>
</section> </section>
@ -25,7 +22,19 @@ permalink: /index.html
<h1>Interactive Applications & Games</h1> <h1>Interactive Applications & Games</h1>
</div> </div>
<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>
</div> </div>
</section> </section>
@ -36,7 +45,8 @@ permalink: /index.html
<h1>My Portfolio</h1> <h1>My Portfolio</h1>
</div> </div>
<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>
</div> </div>
</section> </section>
@ -45,11 +55,11 @@ permalink: /index.html
<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>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>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 and software, see my documented workflows.</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>
</div> </div>
</section> </section>
@ -58,10 +68,10 @@ permalink: /index.html
<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>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>
</div> </div>
</section> </section>

24
src/workflows/index.njk
View file

@ -1,11 +1,23 @@
--- ---
title: "My Workflows" 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');"> {%- for post in collections.workflow -%}
<div class="section-content"> <article>
<p>My Workflows are currently under construction</p> <header>
</div> <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