reduced image size, changed sections on index
This commit is contained in:
parent
83737bd3a6
commit
c4316e4cdf
16 changed files with 97 additions and 104 deletions
|
|
@ -6,7 +6,7 @@ permalink: /contact/index.html
|
|||
|
||||
<section>
|
||||
<div class="section-content">
|
||||
<p>Feel free to contact me via <a href="mailto:mail@luca-junge.de">mail@luca-junge.de</a>
|
||||
<p>Feel free to contact me at <a href="mailto:mail@luca-junge.de">mail@luca-junge.de</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,120 +1,118 @@
|
|||
#navigation {
|
||||
position: relative;
|
||||
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.6);
|
||||
position: relative;
|
||||
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.6);
|
||||
}
|
||||
|
||||
#navigation a {
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#navigation ul {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
list-style-type: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: baseline;
|
||||
list-style-type: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#navigation a {
|
||||
padding: 8px;
|
||||
display: inline-block;
|
||||
transition: background-color 0.25s ease-in-out;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
display: inline-block;
|
||||
transition: background-color 0.25s ease-in-out;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#navigation a:hover,
|
||||
#navigation a:focus-visible {
|
||||
outline: 1px solid rgba(255, 255, 255, 0.05);
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
outline: 1px solid rgba(255, 255, 255, 0.05);
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
#navigation img {
|
||||
height: 1em;
|
||||
object-fit: contain;
|
||||
height: 1em;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#navigation .icon-button a {
|
||||
padding: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#navigation .icon-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#navigation .icon-button img {
|
||||
vertical-align: middle;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#navigation #menu-button {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#navigation #install-button {
|
||||
display: none;
|
||||
background: linear-gradient(to right, #ad5389, #3c1053);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
background: linear-gradient(to right, #ad5389, #3c1053);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Breakpoints */
|
||||
|
||||
@media (max-width: 512px) {
|
||||
#navigation nav ul {
|
||||
justify-content: space-between;
|
||||
}
|
||||
#navigation nav ul {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#navigation nav ul li {
|
||||
display: none;
|
||||
}
|
||||
#navigation nav ul li {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#navigation li#menu-button,
|
||||
#navigation li#home-nav,
|
||||
#navigation li#contact-nav {
|
||||
display: inline-block;
|
||||
}
|
||||
#navigation li#menu-button,
|
||||
#navigation li#home-nav,
|
||||
#navigation li#contact-nav {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Hide all buttons except home and menu */
|
||||
/*#navigation nav ul li *:not(a.menu-button),
|
||||
/* Hide all buttons except home and menu */
|
||||
/*#navigation nav ul li *:not(a.menu-button),
|
||||
#navigation :not(a.home-button) {
|
||||
display: none;
|
||||
}*/
|
||||
|
||||
/* This should always be the same header image as the hero element */
|
||||
#navigation.open {
|
||||
padding: 0px;
|
||||
/*background-color: rgba(59, 66, 82, 1);*/
|
||||
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;
|
||||
object-fit: cover;
|
||||
}
|
||||
/* This should always be the same header image as the hero element */
|
||||
#navigation.open {
|
||||
padding: 0px;
|
||||
background-color: #342e37;
|
||||
background-position: top left;
|
||||
background-size: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#navigation.open nav ul {
|
||||
padding: 12px;
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
#navigation.open nav ul {
|
||||
padding: 12px;
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
#navigation.open ul {
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
#navigation.open ul {
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#navigation.open nav ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
#navigation.open nav ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ permalink: /index.html
|
|||
</div>
|
||||
<div>
|
||||
<p>
|
||||
I'm Luca Junge, a web developer specializing on interactive progressive web apps and 3D content.</p>
|
||||
I'm Luca Junge ― a web developer creating 3D Applications and Tools</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -22,31 +22,8 @@ permalink: /index.html
|
|||
<h1>Interactive Applications & Games</h1>
|
||||
</div>
|
||||
<div>
|
||||
<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('/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>
|
||||
|
||||
<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/portfolio_mobile.jpg');">
|
||||
<div class="section-content">
|
||||
<div>
|
||||
<h1>My Portfolio</h1>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
<p>My focus is on interactive applications in the museum context</p>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -54,11 +31,23 @@ permalink: /index.html
|
|||
<section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/blog_mobile.jpg');">
|
||||
<div class="section-content">
|
||||
<div>
|
||||
<h1>My Blog</h1>
|
||||
<h1>Open-Source Workflow and Tools</h1>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
<p>Every part of my workflow uses open-source tools and software:</p>
|
||||
<p>VS Codium, three.js, Godot Engine, Meshlab, Meshroom, Instant Meshes & more</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--section class="section-background" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/blog_mobile.jpg');">
|
||||
<div class="section-content">
|
||||
<div>
|
||||
<h1>My Blog</h1>
|
||||
</div>
|
||||
<div>
|
||||
<p></p>
|
||||
<a class="button" href="/blog/">Visit</a>
|
||||
</div>
|
||||
</div>
|
||||
</section-->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue