361797bc3b
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Successful in 21s
306 lines
7.7 KiB
Svelte
306 lines
7.7 KiB
Svelte
<script lang="ts">
|
|
|
|
// Left side
|
|
import NameAndImage from "../CompsRev3/NameAndImage.svelte";
|
|
import ShortProfile from "../CompsRev3/ShortProfile.svelte";
|
|
import CombinedContacts from "../CompsRev3/CombinedContacts.svelte";
|
|
import LinkedInQR from "../CompsRev3/LinkedInQR.svelte";
|
|
|
|
// Right side
|
|
import Profile from "../CompsRev3/Profile.svelte";
|
|
import Education from "../CompsRev3/Education.svelte";
|
|
import Experience from "../CompsRev3/Experience.svelte";
|
|
import BiggestFlex from "../CompsRev3/BiggestFlex.svelte";
|
|
import TableOfProjects from "../CompsRev3/TableOfProjects.svelte";
|
|
|
|
// Decorations
|
|
import LeftTopDecor from "../CompsRev3/LeftTopDecor.svelte";
|
|
import BottomRightDecor from "../CompsRev3/BottomRightDecor.svelte";
|
|
import AlexWatermark from "../CompsRev3/AlexWatermark.svelte";
|
|
import RepeatedSkills from "../CompsRev3/RepeatedSkills.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 CV" property="og:title" />
|
|
<meta
|
|
content="This CV is made completely with svelte + 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 made entirely in HTML and CSS.
|
|
The page is designed 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="NotoSans cv-config cv-container-container include-in-print">
|
|
<div class="cv-container sections decorations">
|
|
<div id="left-section" class="bg-grid-cv">
|
|
<LeftTopDecor />
|
|
<BottomRightDecor Style="pointer-events: none;" />
|
|
<div
|
|
class="absolute rotate-12 width-[10cm] h-full right-[15cm]"
|
|
style="background-color: #bdd6ee"
|
|
></div>
|
|
<div class="text-[var(--left-text-color)] pointer-events-none">
|
|
<div class="pointer-events-auto flex flex-col justify-center w-full items-center">
|
|
<NameAndImage />
|
|
<div class="py-2"></div>
|
|
<ShortProfile />
|
|
<div class="py-2"></div>
|
|
<CombinedContacts />
|
|
<div class="py-2"></div>
|
|
<LinkedInQR />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="leftSectionSeperator"></div>
|
|
<div id="right-section" class="text-[var(--right-text-color)]">
|
|
<AlexWatermark Style="pointer-events: none;" />
|
|
<div id="TopRightSkillsText">
|
|
<RepeatedSkills
|
|
class="cozette-force"
|
|
targetTextHeight={30}
|
|
targetTextWidth={75}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Profile />
|
|
<BiggestFlex />
|
|
<TableOfProjects />
|
|
<Experience />
|
|
<Education />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
|
|
.cv-config * {
|
|
--left-text-color: #eeeeee;
|
|
--left-line-color: #999999;
|
|
|
|
--left-decor-text-color: #eeeeee;
|
|
--left-decor-line-color: #999999;
|
|
|
|
--qr-color: #999999;
|
|
|
|
--left-grid-line-color: #ffffff;
|
|
--left-grid-bg-color: #000000;
|
|
--left-grid-opacity: 0.1;
|
|
--left-grid-size: 10px;
|
|
|
|
|
|
--right-text-color: #333333;
|
|
}
|
|
|
|
.corner-border-container {
|
|
background-color: var(--left-grid-bg-color);
|
|
background-image:
|
|
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
|
|
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
|
|
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
|
|
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color));
|
|
background-size:
|
|
30px 4px, /* top-left horizontal */
|
|
4px 30px, /* top-left vertical */
|
|
30px 4px, /* bottom-right horizontal */
|
|
4px 30px; /* bottom-right vertical */
|
|
background-repeat: no-repeat;
|
|
background-position:
|
|
top left,
|
|
top left,
|
|
bottom right,
|
|
bottom right;
|
|
}
|
|
|
|
.bg-grid-cv {
|
|
background:
|
|
linear-gradient(-90deg, rgba(255, 255, 255, var(--left-grid-opacity)) 1px, transparent 1px),
|
|
linear-gradient(rgba(255, 255, 255, var(--left-grid-opacity)) 1px, transparent 1px), var(--left-grid-line-color);
|
|
background-size:
|
|
var(--left-grid-size) var(--left-grid-size),
|
|
var(--left-grid-size) var(--left-grid-size),
|
|
80px 80px,
|
|
80px 80px,
|
|
80px 80px,
|
|
80px 80px,
|
|
80px 80px,
|
|
80px 80px;
|
|
background-color: var(--color-base-100);
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
}
|
|
|
|
.cv-container-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
|
|
.cv-container {
|
|
width: 210mm;
|
|
height: 297mm;
|
|
|
|
background-color: #eeeeee;
|
|
|
|
overflow: visible;
|
|
display: flex;
|
|
padding: auto;
|
|
}
|
|
|
|
.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;
|
|
|
|
> 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;
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|