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

restructure

Browse source
This commit is contained in:
Luca Junge 2024-03-21 11:59:37 +01:00
parent 546d4bc4c7
commit eeb1d1bc70
16 changed files with 141 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/_includes/base.njk
View file

@ -4,8 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{'css/style.css' | url}}"> <link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="{{'assets/fontawesome/css/all.css' | url}}"> <link rel="stylesheet" href="/assets/fontawesome/css/all.css">
<title>{{ title }}</title> <title>{{ title }}</title>
</head> </head>
<body> <body>

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

@ -1,18 +1,33 @@
<header id="navigation"> <header id="navigation">
<nav> <nav>
<ul> <ul>
<li class="home-button">
<a href="/" title="Zur Startseite">
<i class="fa-solid fa-house"></i>
</a>
</li>
<li> <li>
<a href="/portfolio/" title="Alle Posts">Portfolio</a> <a href="/portfolio/" title="Alle Posts">Portfolio</a>
</li> </li>
<li> <li>
<a href="/workflow/" title="Workflow">Workflow</a> <a href="/workflows/" title="Workflow">Workflows</a>
</li> </li>
<li> <li>
<a href="/blog/" title="Blog">Blog</a> <a href="/blog/" title="Blog">Blog</a>
</li> </li>
<li> <li class="contact-button">
<a href="/contact/" title="Kontakt">Kontakt</a> <a href="/contact/" title="Kontakt">Kontakt</a>
</li> </li>
<li>
<a href="https://github.com/LucaJunge" title="GitHub Profil">
<i class="fa-brands fa-github"></i>
</a>
</li>
<li class="menu-button">
<a title="Menu anzeigen">
<i class="fa fa-solid fa-bars"></i>
</a>
</li>
</ul> </ul>
</nav> </nav>
</header> </header>

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

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before After
Before After

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

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

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Before After
Before After

2
src/posts/posts.njk → src/blog/blog.njk
View file

@ -1,5 +1,5 @@
--- ---
title: Alle Posts title: My blog posts
layout: overview.njk layout: overview.njk
eleventyExcludeFromCollections: true eleventyExcludeFromCollections: true
--- ---

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

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

0
src/posts/open-source-donations/index.md → src/blog/open-source-donations/index.md
View file

0
src/posts/open-source-donations/open-source-donations.11tydata.json → src/blog/open-source-donations/open-source-donations.11tydata.json
View file

0
src/posts/test/index.md → src/blog/test/index.md
View file

12
src/contact/contact.njk Normal file
View file

@ -0,0 +1,12 @@
---
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>

38
src/css/header.css
View file

@ -3,6 +3,7 @@
z-index: 2; z-index: 2;
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
padding: 12px; padding: 12px;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
margin-bottom: -70px; margin-bottom: -70px;
outline: 1px solid rgba(0, 0, 0, 0.5); outline: 1px solid rgba(0, 0, 0, 0.5);
@ -57,10 +58,43 @@
vertical-align: middle; vertical-align: middle;
} }
#navigation .menu-button {
display: none;
}
/* Breakpoints */ /* Breakpoints */
@media (max-width: 400px) { @media (max-width: 512px) {
#main-header > nav > ul { #navigation nav ul {
justify-content: space-between;
}
#navigation nav ul li {
display: none;
}
#navigation li.menu-button,
#navigation li.home-button,
#navigation li.contact-button {
display: inline-block;
}
/* Hide all buttons except home and menu */
/*#navigation nav ul li *:not(a.menu-button),
#navigation :not(a.home-button) {
display: none;
}*/
#navigation.open {
background-color: rgba(59, 66, 82, 1);
}
#navigation.open ul {
justify-content: space-between;
flex-direction: column; flex-direction: column;
} }
#navigation.open nav ul li {
display: inline-block;
}
} }

16
src/css/sections.css
View file

@ -25,8 +25,8 @@ section:nth-child(even) {
align-items: center; align-items: center;
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
margin-left: 32px; margin-left: 64px;
margin-right: 32px; margin-right: 64px;
} }
.section-content div { .section-content div {
@ -42,6 +42,18 @@ section p {
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8); text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
} }
section p {
padding: 0px;
margin: 0px;
line-height: 1.8em;
font-weight: 600;
font-size: 1.2em;
}
section h1 {
margin-top: 0px;
}
.section-background { .section-background {
background-size: cover; background-size: cover;
object-fit: cover; object-fit: cover;

25
src/css/style.css
View file

@ -9,23 +9,34 @@
html, html,
body { body {
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
background-color: rgba(59, 66, 82, 1);
} }
/* Button */ /* Button */
button { button,
.button {
box-sizing: border-box;
border: none; border: none;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
background-color: rgba(255, 255, 255, 0.2); padding: 12px 16px;
padding: 8px;
transition: background-color 0.25s ease-in-out; transition: background-color 0.25s ease-in-out;
border-radius: 4px; border-radius: 8px;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
backdrop-filter: blur(4px);
background-color: rgba(163, 190, 140, 0.5);
border: 3px solid rgba(163, 190, 140, 0.5);
} }
button:hover, button:hover,
button:focus-visible { .button:hover,
outline: 1px solid rgba(255, 255, 255, 0.05); button:focus-visible,
background-color: rgba(255, 255, 255, 0.5); .button:focus-visible {
background-color: rgba(163, 190, 140, 0.3);
border: 3px solid rgba(163, 190, 140, 0.3);
}
a {
color: inherit;
} }

32
src/index/index.njk
View file

@ -7,67 +7,69 @@ permalink: /index.html
<section class="hero"> <section class="hero">
<div class="section-content"> <div class="section-content">
<div> <div>
<h1>This is a test for my website</h1> <h1>Welcome to my website!</h1>
<button>Contact me</button> <a class="button" href="/contact/" class="bg-primary">Contact me</a>
</div> </div>
<div> <div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora eligendi impedit labore voluptatibus accusamus rerum fugit amet aut, porro quo ad vel omnis rem distinctio excepturi voluptas et soluta natus sunt delectus animi modi laborum fuga! Magni id pariatur natus est ab accusantium iusto exercitationem, vitae ipsam necessitatibus doloribus vero? <p>My name is Luca Junge.</p>
<p>
I'm a web developer, specializing on interactive web apps and 3D content.</p>
</p> </p>
</div> </div>
</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/GY2YuO3r.jpg');">
<div class="section-content"> <div class="section-content">
<div> <div>
<h1>This is a another section statement</h1> <h1>This is a another section statement</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! Laboriosam explicabo reprehenderit iusto ipsam animi earum dolor vero?</p> <p>And a small text that explains this statement further. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, a qui!</p>
</div>
</div> </div>
</div>
</section> </section>
<section> <section>
<div class="section-content"> <div class="section-content">
<div> <div>
<h1>My Portfolio</h1> <h1>My Portfolio</h1>
</div> </div>
<div> <div>
<p>This is currently work in progress.</p> <p>This is currently work in progress.</p>
</div> </div>
</div> </div>
</section> </section>
<section> <section>
<div class="section-content"> <div class="section-content">
<div> <div>
<h1>My Workflows</h1> <h1>My Workflows</h1>
</div> </div>
<div> <div>
<p>This is currently work in progress.</p> <p>This is currently work in progress.</p>
</div> </div>
</div> </div>
</section> </section>
<section> <section>
<div class="section-content"> <div class="section-content">
<div> <div>
<h1>My Blog</h1> <h1>My Blog</h1>
</div> </div>
<div> <div>
<p>This is currently work in progress.</p> <p>This is currently work in progress.</p>
</div> </div>
</div> </div>
</section> </section>
<section> <section>
<div class="section-content"> <div class="section-content">
<div> <div>
<h1>Kontakt</h1> <h1>Kontakt</h1>
</div> </div>
<div> <div>
<p>This is currently work in progress.</p> <p>This is currently work in progress.</p>
</div> </div>
</div> </div>
</section> </section>