added redacted backeground
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Successful in 15s
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Successful in 15s
This commit is contained in:
BOTAlex
parent
ba9cf8073a
commit
7524eb3fe5
2 changed files with 126 additions and 109 deletions
|
|
@ -46,72 +46,88 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<title>{$re?.name ?? "Alex"}'s CV {getFormattedDate()}</title>
|
||||
<meta content="{$re?.name ?? 'Alex'}'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>
|
||||
<title>{$re?.name ?? "Alex"}'s CV {getFormattedDate()}</title>
|
||||
<meta content="{$re?.name ?? 'Alex'}'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 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 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 flex justify-center">
|
||||
<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 class="w-full h-full flex flex-col justify-center overflow-hidden">
|
||||
<div class=" w-full flex h-[1131.25px] justify-center">
|
||||
<RepeatedSkills
|
||||
class="cozette-force text-5xl text-base-300 {$re?.name ? 'hidden' : ''}"
|
||||
style="transform: translateY(-90rem)"
|
||||
textOverride={["REDACTED VERSION"]}
|
||||
targetTextHeight={90}
|
||||
targetTextWidth={150}
|
||||
textRowPadding={"1rem"}
|
||||
/>
|
||||
</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
|
||||
class="NotoSans cv-config cv-container-container include-in-print absolute"
|
||||
>
|
||||
<div class="cv-container sections decorations">
|
||||
<div id="left-section" class="bg-grid-cv flex justify-center">
|
||||
<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)] bg-white">
|
||||
<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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,62 +1,63 @@
|
|||
<script lang="ts">
|
||||
// Width of num chars and height nom of chars
|
||||
export let targetTextWidth: number;
|
||||
export let targetTextHeight: number;
|
||||
// Width of num chars and height nom of chars
|
||||
export let targetTextWidth: number;
|
||||
export let targetTextHeight: number;
|
||||
export let textRowPadding: string = "";
|
||||
|
||||
export let applyRotation: boolean = true;
|
||||
export let applyRotation: boolean = true;
|
||||
|
||||
export let textOverride: string[] | undefined = undefined;
|
||||
export let textOverride: string[] | undefined = undefined;
|
||||
|
||||
// Assign default value if textOverride is undefined
|
||||
let repeatingText : string[] = textOverride ?? [
|
||||
"C++",
|
||||
"C#",
|
||||
"ARDUINO",
|
||||
"PYTHON",
|
||||
"JAVA",
|
||||
"JAVASCRIPT",
|
||||
"TYPESCRIPT",
|
||||
"HTML",
|
||||
"CSS",
|
||||
];
|
||||
// Assign default value if textOverride is undefined
|
||||
let repeatingText: string[] = textOverride ?? [
|
||||
"C++",
|
||||
"C#",
|
||||
"ARDUINO",
|
||||
"PYTHON",
|
||||
"JAVA",
|
||||
"JAVASCRIPT",
|
||||
"TYPESCRIPT",
|
||||
"HTML",
|
||||
"CSS",
|
||||
];
|
||||
|
||||
function getRandomInt(max: number) {
|
||||
return Math.floor(Math.random() * max);
|
||||
function getRandomInt(max: number) {
|
||||
return Math.floor(Math.random() * max);
|
||||
}
|
||||
|
||||
function GrabRandomString() {
|
||||
let outString: string = "";
|
||||
while (outString.length < targetTextWidth) {
|
||||
outString += repeatingText[getRandomInt(repeatingText.length)] + " ";
|
||||
}
|
||||
|
||||
function GrabRandomString() {
|
||||
let outString: string = "";
|
||||
while (outString.length < targetTextWidth) {
|
||||
outString +=
|
||||
repeatingText[
|
||||
getRandomInt(repeatingText.length)
|
||||
] + " ";
|
||||
}
|
||||
|
||||
return outString; // At about target size
|
||||
}
|
||||
return outString; // At about target size
|
||||
}
|
||||
</script>
|
||||
|
||||
<div {...$$restProps}>
|
||||
{#each { length: targetTextHeight } as _, i}
|
||||
<span class="{applyRotation ? "rotate45" : ""} SkillsText">
|
||||
{GrabRandomString()}
|
||||
</span>
|
||||
{/each}
|
||||
{#each { length: targetTextHeight } as _, i}
|
||||
<span
|
||||
class="{applyRotation ? 'rotate45' : ''} SkillsText"
|
||||
style="padding: {textRowPadding};"
|
||||
>
|
||||
{GrabRandomString()}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.SkillsText {
|
||||
text-align: start;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
.SkillsText {
|
||||
text-align: start;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
|
||||
width: 2rem;
|
||||
}
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.rotate45 {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
</style>
|
||||
.rotate45 {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue