117 lines
2.6 KiB
Svelte
117 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import Latest from '$lib/articles/latest.svelte';
|
|
import Header from '$lib/header.svelte';
|
|
|
|
const title: string = "Hi, I'm Fred";
|
|
const subtitle: string = 'Crafting Digital';
|
|
</script>
|
|
|
|
<Header {title} {subtitle} />
|
|
<section>
|
|
<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 digital magic, design experiences, and build tools.
|
|
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>Discover more at <a href="https://fredboniface.co.uk">fredboniface.co.uk</a></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>
|
|
|
|
<Latest />
|
|
|
|
<style>
|
|
section {
|
|
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;
|
|
size: 18px;
|
|
}
|
|
|
|
#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) {
|
|
section {
|
|
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 */
|
|
}
|
|
}
|
|
</style>
|