diff --git a/src/_includes/base.njk b/src/_includes/base.njk index 3e8d632..a6cb835 100644 --- a/src/_includes/base.njk +++ b/src/_includes/base.njk @@ -4,8 +4,8 @@ - - + + {{ title }} diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk index 27783b1..da89f60 100644 --- a/src/_includes/partials/header.njk +++ b/src/_includes/partials/header.njk @@ -1,18 +1,33 @@ diff --git a/src/posts/adding-custom-icons-for-file-types-on-linux/gltf-before.jpg b/src/blog/adding-custom-icons-for-file-types-on-linux/gltf-before.jpg similarity index 100% rename from src/posts/adding-custom-icons-for-file-types-on-linux/gltf-before.jpg rename to src/blog/adding-custom-icons-for-file-types-on-linux/gltf-before.jpg diff --git a/src/posts/adding-custom-icons-for-file-types-on-linux/index.md b/src/blog/adding-custom-icons-for-file-types-on-linux/index.md similarity index 100% rename from src/posts/adding-custom-icons-for-file-types-on-linux/index.md rename to src/blog/adding-custom-icons-for-file-types-on-linux/index.md diff --git a/src/posts/adding-custom-icons-for-file-types-on-linux/output1.png b/src/blog/adding-custom-icons-for-file-types-on-linux/output1.png similarity index 100% rename from src/posts/adding-custom-icons-for-file-types-on-linux/output1.png rename to src/blog/adding-custom-icons-for-file-types-on-linux/output1.png diff --git a/src/posts/posts.njk b/src/blog/blog.njk similarity index 95% rename from src/posts/posts.njk rename to src/blog/blog.njk index 69b29b5..42f5221 100644 --- a/src/posts/posts.njk +++ b/src/blog/blog.njk @@ -1,5 +1,5 @@ --- -title: Alle Posts +title: My blog posts layout: overview.njk eleventyExcludeFromCollections: true --- diff --git a/src/posts/posts.11tydata.js b/src/blog/blogs.11tydata.js similarity index 100% rename from src/posts/posts.11tydata.js rename to src/blog/blogs.11tydata.js diff --git a/src/posts/posts.json b/src/blog/blogs.json similarity index 100% rename from src/posts/posts.json rename to src/blog/blogs.json diff --git a/src/posts/open-source-donations/index.md b/src/blog/open-source-donations/index.md similarity index 100% rename from src/posts/open-source-donations/index.md rename to src/blog/open-source-donations/index.md diff --git a/src/posts/open-source-donations/open-source-donations.11tydata.json b/src/blog/open-source-donations/open-source-donations.11tydata.json similarity index 100% rename from src/posts/open-source-donations/open-source-donations.11tydata.json rename to src/blog/open-source-donations/open-source-donations.11tydata.json diff --git a/src/posts/test/index.md b/src/blog/test/index.md similarity index 100% rename from src/posts/test/index.md rename to src/blog/test/index.md diff --git a/src/contact/contact.njk b/src/contact/contact.njk new file mode 100644 index 0000000..6dd73b9 --- /dev/null +++ b/src/contact/contact.njk @@ -0,0 +1,12 @@ +--- +title: "Kontakt" +layout: base.njk +--- + +
+
+

Feel free to contact me via kontakt@luca-junge.de +

+
+ +
diff --git a/src/css/header.css b/src/css/header.css index c460e1d..548cdc8 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -3,6 +3,7 @@ z-index: 2; background-color: rgba(0, 0, 0, 0.4); padding: 12px; + -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); margin-bottom: -70px; outline: 1px solid rgba(0, 0, 0, 0.5); @@ -57,10 +58,43 @@ vertical-align: middle; } +#navigation .menu-button { + display: none; +} + /* Breakpoints */ -@media (max-width: 400px) { - #main-header > nav > ul { +@media (max-width: 512px) { + #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; } + + #navigation.open nav ul li { + display: inline-block; + } } diff --git a/src/css/sections.css b/src/css/sections.css index 457289c..0daeb7f 100644 --- a/src/css/sections.css +++ b/src/css/sections.css @@ -25,8 +25,8 @@ section:nth-child(even) { align-items: center; margin-top: 0px; margin-bottom: 0px; - margin-left: 32px; - margin-right: 32px; + margin-left: 64px; + margin-right: 64px; } .section-content div { @@ -42,6 +42,18 @@ section p { 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 { background-size: cover; object-fit: cover; diff --git a/src/css/style.css b/src/css/style.css index d37f55f..3da4c00 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -9,23 +9,34 @@ html, body { font-family: "Montserrat", sans-serif; + background-color: rgba(59, 66, 82, 1); } /* Button */ -button { +button, +.button { + box-sizing: border-box; border: none; color: inherit; text-decoration: none; - background-color: rgba(255, 255, 255, 0.2); - padding: 8px; + padding: 12px 16px; transition: background-color 0.25s ease-in-out; - border-radius: 4px; + border-radius: 8px; font-weight: bold; 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:focus-visible { - outline: 1px solid rgba(255, 255, 255, 0.05); - background-color: rgba(255, 255, 255, 0.5); +.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); +} + +a { + color: inherit; } diff --git a/src/index/index.njk b/src/index/index.njk index e76b20e..fdcca80 100644 --- a/src/index/index.njk +++ b/src/index/index.njk @@ -7,67 +7,69 @@ permalink: /index.html
-

This is a test for my website

- +

Welcome to my website!

+ Contact me
-

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? +

My name is Luca Junge.

+

+ I'm a web developer, specializing on interactive web apps and 3D content.

-
+
-
-
-

This is a another section statement

-
-
-

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?

-
+
+
+

This is a another section statement

+
+

And a small text that explains this statement further. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, a qui!

+
+
-
-
-

My Portfolio

-
-
-

This is currently work in progress.

-
+
+
+

My Portfolio

+
+

This is currently work in progress.

+
+
-
-
-

My Workflows

-
-
-

This is currently work in progress.

-
+
+
+

My Workflows

+
+

This is currently work in progress.

+
+
-
-
-

My Blog

-
-
-

This is currently work in progress.

-
+
+
+

My Blog

+
+

This is currently work in progress.

+
+
-
-
-

Kontakt

-
-
-

This is currently work in progress.

-
+
+
+

Kontakt

+
+

This is currently work in progress.

+
+