deprecated some old things
Some checks failed
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Failing after 0s
Some checks failed
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Failing after 0s
This commit is contained in:
BOTAlex
parent
f0a51f17fe
commit
28eea2d035
46 changed files with 1243 additions and 0 deletions
306
deprecated/zhen/cv/rev3/+page.svelte
Normal file
306
deprecated/zhen/cv/rev3/+page.svelte
Normal file
|
|
@ -0,0 +1,306 @@
|
|||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue