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