151 lines
3.1 KiB
Svelte
151 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import Latest from '$lib/posts/PostsSummary.svelte';
|
|
import Header from '$lib/header.svelte';
|
|
import Emphasis from '$lib/highlights/emphasis.svelte';
|
|
import LatestPosts from '$lib/posts/PostsSummary.svelte';
|
|
|
|
const title: string = "Hi, I'm Fred";
|
|
const subtitle: string = 'Crafting Digital';
|
|
</script>
|
|
|
|
<Header {title} {subtitle} />
|
|
<section id="welcome">
|
|
<div id="header-text">
|
|
<div id="text-content">
|
|
<p>
|
|
Alongside the railway's iron path, I earn my living and fuel my passions. By day, I'm woven
|
|
into the rail's story. By night, I craft, design and build tools that work for people. My
|
|
canvas? The web, and beyond.
|
|
</p>
|
|
<p>
|
|
With a family close to heart, I capture life's moments through photography and dabble in
|
|
model railways. All in a world I shape with creativity.
|
|
</p>
|
|
<p>Sometimes, I write about it too.</p>
|
|
</div>
|
|
</div>
|
|
<div id="header-visual">
|
|
<picture>
|
|
<source srcset="/me/face-200.jxl" type="image/jxl" />
|
|
<source srcset="/me/face-200.webp" type="image/webp" />
|
|
<img src="/me/face-200.webp" alt="Just me" />
|
|
</picture>
|
|
</div>
|
|
</section>
|
|
<section id="meta-links">
|
|
<div id="projects" class="col">
|
|
<h1>Projects</h1>
|
|
|
|
</div>
|
|
<div id="posts" class="col">
|
|
<h1>Posts</h1>
|
|
|
|
</div>
|
|
<div id="tags" class="col">
|
|
<h1>Tags</h1>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
#welcome {
|
|
display: flex;
|
|
flex-direction: column; /* Start with column layout for mobile */
|
|
align-items: center;
|
|
width: 100%;
|
|
background-color: var(--main-text-color);
|
|
color: var(--main-bg-color);
|
|
margin: 0; /* Reset margin to ensure full width */
|
|
padding: 0; /* Reset padding to ensure full width */
|
|
box-sizing: border-box; /* Include padding and border in width calculation */
|
|
}
|
|
|
|
#header-text {
|
|
flex: 1;
|
|
max-width: 100%;
|
|
color: #2b2b2b;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
#text-content {
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#text-content p {
|
|
font-size: 18px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
#header-visual {
|
|
order: -1;
|
|
max-width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
img {
|
|
margin: auto;
|
|
margin-top: 10px;
|
|
border-radius: 100px;
|
|
border-style: solid;
|
|
border-color: var(--accent-color);
|
|
border-width: 3px;
|
|
max-height: 150px;
|
|
height: 30vw;
|
|
}
|
|
|
|
/* Media query for larger screens */
|
|
@media (min-width: 768px) {
|
|
#welcome {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
#header-visual {
|
|
order: 1;
|
|
flex: 0 0 30%;
|
|
display: flex;
|
|
align-items: center; /* Vertically center the content */
|
|
justify-content: center;
|
|
}
|
|
|
|
#header-text {
|
|
flex: 0 0 70%;
|
|
}
|
|
|
|
#text-content {
|
|
margin-left: 25px;
|
|
margin-right: 25px;
|
|
}
|
|
|
|
img {
|
|
margin: 0; /* Remove any margin */
|
|
padding: 0; /* Remove any padding */
|
|
border-radius: 100px;
|
|
border-style: solid;
|
|
border-color: var(--accent-color);
|
|
border-width: 3px;
|
|
max-height: 150px;
|
|
height: 100%; /* Fill the height of the #header-visual container */
|
|
}
|
|
}
|
|
|
|
#meta-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
#meta-links {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.col {
|
|
width: 30%;
|
|
}
|
|
}
|
|
</style>
|