reduced image size, changed sections on index
|
|
@ -28,6 +28,11 @@
|
||||||
<i class="fa-brands fa-github"></i>
|
<i class="fa-brands fa-github"></i>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li id="mastodon-nav">
|
||||||
|
<a href="https://fosstodon.org/@ljunge/" title="Mastodon Profile">
|
||||||
|
<i class="fa-brands fa-mastodon"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
<li id="menu-button">
|
<li id="menu-button">
|
||||||
<a title="Show or hide menu">
|
<a title="Show or hide menu">
|
||||||
<i class="fa fa-solid fa-bars"></i>
|
<i class="fa fa-solid fa-bars"></i>
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@
|
||||||
<link rel="stylesheet" href="/css/style.css">
|
<link rel="stylesheet" href="/css/style.css">
|
||||||
<link rel="stylesheet" href="/libraries/fontawesome/css/all.css">
|
<link rel="stylesheet" href="/libraries/fontawesome/css/all.css">
|
||||||
<link rel="manifest" href="/pwa.webmanifest" />
|
<link rel="manifest" href="/pwa.webmanifest" />
|
||||||
|
<link href="https://fosstodon.org/@ljunge" rel="me">
|
||||||
<title>{{ title }}</title>
|
<title>{{ title }}</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ set -euo pipefail
|
||||||
|
|
||||||
# Call this from the repo folder
|
# Call this from the repo folder
|
||||||
|
|
||||||
for image in src/_assets/images/original/*.{jpg,png}; do
|
for image in public/images/original/*.{jpg,png}; do
|
||||||
#echo "Converting $image ..."
|
#echo "Converting $image ..."
|
||||||
|
|
||||||
filename=$(basename -- "$image")
|
filename=$(basename -- "$image")
|
||||||
|
|
@ -18,5 +18,5 @@ for image in src/_assets/images/original/*.{jpg,png}; do
|
||||||
imageextension="${filename##*.}"
|
imageextension="${filename##*.}"
|
||||||
|
|
||||||
echo "${imagefolder}${imagefilename}_mobile.${imageextension}"
|
echo "${imagefolder}${imagefilename}_mobile.${imageextension}"
|
||||||
convert "$image" -resize 1500 -strip -quality 85 "${imagefolder}${imagefilename}_mobile.jpg"
|
magick "$image" -resize 1000 -strip -quality 70 "${imagefolder}${imagefilename}_mobile.jpg"
|
||||||
done
|
done
|
||||||
|
|
@ -6,7 +6,7 @@ permalink: /contact/index.html
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<div class="section-content">
|
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -95,9 +95,7 @@
|
||||||
/* This should always be the same header image as the hero element */
|
/* This should always be the same header image as the hero element */
|
||||||
#navigation.open {
|
#navigation.open {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
/*background-color: rgba(59, 66, 82, 1);*/
|
background-color: #342e37;
|
||||||
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-position: top left;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ permalink: /index.html
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -22,31 +22,8 @@ permalink: /index.html
|
||||||
<h1>Interactive Applications & Games</h1>
|
<h1>Interactive Applications & Games</h1>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p>Most of my work is created using standard web technologies in combination with open source libraries like three.js.</p>
|
<p>My focus is on interactive applications in the museum context</p>
|
||||||
<p>For more demanding projects I am using the Godot Engine.</p>
|
<p></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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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');">
|
<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 class="section-content">
|
||||||
<div>
|
<div>
|
||||||
<h1>My Blog</h1>
|
<h1>Open-Source Workflow and Tools</h1>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p>Whenever I see a new technique or discover something useful, I'm writing a blog post about it!</p>
|
<p>Every part of my workflow uses open-source tools and software:</p>
|
||||||
<a class="button" href="/blog/">Visit</a>
|
<p>VS Codium, three.js, Godot Engine, Meshlab, Meshroom, Instant Meshes & more</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('/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-->
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 484 KiB After Width: | Height: | Size: 169 KiB |
|
Before Width: | Height: | Size: 407 KiB After Width: | Height: | Size: 139 KiB |
|
Before Width: | Height: | Size: 266 KiB After Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 347 KiB After Width: | Height: | Size: 104 KiB |
|
Before Width: | Height: | Size: 188 KiB After Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 3.1 MiB |
|
Before Width: | Height: | Size: 302 KiB |
|
Before Width: | Height: | Size: 241 KiB After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 420 KiB After Width: | Height: | Size: 129 KiB |
|
Before Width: | Height: | Size: 161 KiB After Width: | Height: | Size: 62 KiB |