169 lines
4.1 KiB
Svelte
169 lines
4.1 KiB
Svelte
<script>
|
|
// Left side
|
|
import NameAndImage from "../Comps/NameAndImage.svelte";
|
|
import ShortProfile from "../Comps/ShortProfile.svelte"
|
|
import CombinedContacts from "../Comps/CombinedContacts.svelte"
|
|
import LinkedInQR from "../Comps/LinkedInQR.svelte";
|
|
|
|
// Right side
|
|
import Profile from "../Comps/Profile.svelte";
|
|
import Education from "../Comps/Education.svelte";
|
|
import Experience from "../Comps/Experience.svelte";
|
|
|
|
// Decorations
|
|
import LeftTopDecor from "../Comps/LeftTopDecor.svelte";
|
|
import BottomRightDecor from "../Comps/BottomRightDecor.svelte";
|
|
import AlexWatermark from "../Comps/AlexWatermark.svelte";
|
|
import RepeatedSkills from "../Comps/RepeatedSkills.svelte";
|
|
|
|
// Cedit
|
|
import LinkToSource from "../Comps/LinkToSource.svelte";
|
|
</script>
|
|
|
|
<div class="cv-container-container include-in-print">
|
|
<div class="cv-container sections decorations">
|
|
<div id="left-section">
|
|
<LeftTopDecor/>
|
|
<BottomRightDecor/>
|
|
<div>
|
|
<NameAndImage/>
|
|
<ShortProfile/>
|
|
<CombinedContacts/>
|
|
<LinkedInQR/>
|
|
</div>
|
|
</div>
|
|
<div id="right-section">
|
|
<AlexWatermark/>
|
|
<div id="TopRightSkillsText">
|
|
<RepeatedSkills targetTextHeight={30} targetTextWidth={75}/>
|
|
</div>
|
|
<div id="Credit">
|
|
<LinkToSource/>
|
|
</div>
|
|
<div>
|
|
<Profile/>
|
|
<Experience/>
|
|
<Education/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.cv-container-container{
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.cv-container-container * {
|
|
color: black; // Set all text black
|
|
}
|
|
|
|
.cv-container {
|
|
width: 210mm;
|
|
height: 297mm;
|
|
|
|
background-color: #eeeeee;
|
|
|
|
overflow: visible;
|
|
display: flex;
|
|
padding: auto;
|
|
}
|
|
|
|
.include-in-print { &, & * {
|
|
-webkit-print-color-adjust:exact !important;
|
|
print-color-adjust:exact !important;
|
|
}}
|
|
|
|
.sections {
|
|
// Shared between sections
|
|
> div {
|
|
display: grid;
|
|
z-index: 0;
|
|
|
|
// Needed to cuttoff the extra decoration
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#left-section{
|
|
background-color: #bdd6ee;
|
|
width: calc(100% / 3 * 1);
|
|
|
|
filter: drop-shadow(1mm 1mm 1mm #00000042);
|
|
|
|
> div:last-child {
|
|
z-index: 1;
|
|
width: 100%;
|
|
|
|
left: 0;
|
|
|
|
display: grid;
|
|
place-items: center;
|
|
|
|
padding-top: 30mm;
|
|
padding-bottom: 30mm;
|
|
}
|
|
}
|
|
|
|
#right-section{
|
|
width: calc(100% / 3 * 2);
|
|
|
|
> div:last-child {
|
|
z-index: 1;
|
|
width: 100%;
|
|
|
|
left: 0;
|
|
|
|
display: grid;
|
|
place-items: center;
|
|
row-gap: 6mm;
|
|
|
|
padding-top: 45mm;
|
|
padding-bottom: 30mm;
|
|
|
|
// Disable interactivity for padding
|
|
pointer-events:none;
|
|
> * {
|
|
pointer-events:all;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.decorations {
|
|
> div {
|
|
#TopRightSkillsText {
|
|
position: absolute;
|
|
z-index: 0;
|
|
|
|
display: grid;
|
|
place-items: center;
|
|
vertical-align: top;
|
|
width: 100%;
|
|
|
|
place-content: center;
|
|
|
|
padding: 0;
|
|
height: 50mm;
|
|
|
|
mask-image: linear-gradient(180deg, #000 0%, transparent 110%);
|
|
|
|
color: rgb(190, 190, 190);
|
|
font-family: 'CozetteVector';
|
|
font-size: x-large;
|
|
}
|
|
|
|
#Credit {
|
|
position: absolute;
|
|
z-index: 0;
|
|
|
|
display: flex;
|
|
align-self: flex-end;
|
|
}
|
|
}
|
|
}
|
|
</style> |