Accidentally sent out an old link. So this is here for a temp
This commit is contained in:
parent
9460d8c04a
commit
8b7210f603
|
|
@ -0,0 +1,250 @@
|
|||
<script lang="ts">
|
||||
// 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";
|
||||
|
||||
// Discord embed
|
||||
import preveiwImage from "$lib/zhen/cv-comps/EposCvPreveiw.png"
|
||||
|
||||
// Print detection setup
|
||||
import { onMount } from "svelte";
|
||||
onMount(() => {
|
||||
// Check if the query parameter exists in the URL
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const hideOnPrintParam = urlParams.get('hideOnPrint');
|
||||
|
||||
// If the query parameter is not detected, reload the page with the parameter added
|
||||
if (!hideOnPrintParam) {
|
||||
window.location.href = `${window.location.href}?hideOnPrint=1`;
|
||||
}
|
||||
});
|
||||
|
||||
function getFormattedDate(): string {
|
||||
const date = new Date();
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const year = date.getFullYear();
|
||||
|
||||
return `${day}-${month}-${year}`;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<title>Zhentao Wei's CV {getFormattedDate()}</title>
|
||||
<meta content="Zhentao Wei's Epos CV" property="og:title" />
|
||||
<meta content="This CV is made completely with html + css + js" property="og:description" />
|
||||
<meta content={preveiwImage} property="og:image" />
|
||||
<meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
|
||||
|
||||
<div class="cv-info-container hide-on-print">
|
||||
<div>
|
||||
Under here is my CV rev1 for an application. This page has been able to be saved as PDF.
|
||||
This can be done by pressing <div class="keyboard-key">P</div> + <div class="keyboard-key">CTRL</div>, then set scaling to 100% and no margins. Lastly, select save to PDF or print.
|
||||
<br/>
|
||||
<br/>
|
||||
I have to sadly recommend chrome for this process. Firefox somehow messes with the quality of the PDF :(
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="leftSectionSeperator"><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-info-container {
|
||||
height: 40mm;
|
||||
background-color: #2b2a2a;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.keyboard-key {
|
||||
display: inline;
|
||||
padding-left: 1mm;
|
||||
padding-right: 1mm;
|
||||
|
||||
border-radius: 2mm;
|
||||
|
||||
background-color: #3e3d3d;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: 80%;
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.hide-on-print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
|
||||
> 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.decorations {
|
||||
#leftSectionSeperator{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
> div {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 5mm;
|
||||
z-index: 1;
|
||||
background: linear-gradient(90deg, #3636364f, #00000000);
|
||||
}
|
||||
}
|
||||
> 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>
|
||||
Loading…
Reference in New Issue