Fix about section
parent
bf5b1d0b74
commit
1b8d53df86
@ -1,33 +1,62 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import Box from "../atoms/Box.svelte";
|
||||||
import Box from "../atoms/Box.svelte";
|
import Thumbnail from "../molecules/Thumbnail.svelte";
|
||||||
import ContainerDualColumn from "../atoms/ContainerDualColumn.svelte";
|
|
||||||
import Paragraph from "../atoms/Paragraph.svelte";
|
|
||||||
import Thumbnail from "../molecules/Thumbnail.svelte";
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Box title="About">
|
<Box title="About">
|
||||||
<ContainerDualColumn leftRatio="1" rightRatio="2">
|
<div class="about-content">
|
||||||
<Thumbnail
|
<div class="about-image">
|
||||||
slot="left"
|
<Thumbnail
|
||||||
imageData={{
|
imageData={{
|
||||||
altText:
|
altText:
|
||||||
"A picture of Ferris, the Rust mascot. An orange crab plushie.",
|
"A picture of Ferris, the Rust mascot. An orange crab plushie.",
|
||||||
formats: [
|
formats: [
|
||||||
{
|
{
|
||||||
name: "original",
|
name: "original",
|
||||||
mime: "image/jpeg",
|
mime: "image/jpeg",
|
||||||
url: "/images/profile.jpg",
|
url: "/images/profile.jpg",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Paragraph slot="right">
|
</div>
|
||||||
|
<p>
|
||||||
Heyyy. I'm a software developer and tinkerer from Germany. I do a lot of
|
Heyyy. I'm a software developer and tinkerer from Germany. I do a lot of
|
||||||
stuff so this website is an attempt in providing an overview.
|
stuff so this website is an attempt in providing an overview.
|
||||||
<br /><br />
|
<br /><br />
|
||||||
Right now it's very much a work in progress as I'm figuring out how to properly
|
Right now it's very much a work in progress as I'm figuring out how to properly
|
||||||
design a website (lol). But there's already some content to explore.
|
design a website (lol). But there's already some content to explore.
|
||||||
</Paragraph>
|
</p>
|
||||||
</ContainerDualColumn>
|
</div>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import "$lib/styles/mixins.scss";
|
||||||
|
|
||||||
|
@layer component {
|
||||||
|
.about-content {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
@include portrait {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-image {
|
||||||
|
margin-right: 1em;
|
||||||
|
float: left;
|
||||||
|
width: 30%;
|
||||||
|
|
||||||
|
@include portrait {
|
||||||
|
width: 100%;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
Loading…
Reference in New Issue