redaction polishing #2
2 changed files with 126 additions and 109 deletions
|
|
@ -46,72 +46,88 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<title>{$re?.name ?? "Alex"}'s CV {getFormattedDate()}</title>
|
<div>
|
||||||
<meta content="{$re?.name ?? 'Alex'}'s CV" property="og:title" />
|
<title>{$re?.name ?? "Alex"}'s CV {getFormattedDate()}</title>
|
||||||
<meta
|
<meta content="{$re?.name ?? 'Alex'}'s CV" property="og:title" />
|
||||||
content="This CV is made completely with svelte + html + css + js"
|
<meta
|
||||||
property="og:description"
|
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" />
|
<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 class="cv-info-container hide-on-print">
|
||||||
<div>
|
<div>
|
||||||
Under here is my CV rev1 for an application made entirely in HTML and CSS.
|
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
|
The page is designed to be saved as PDF. This can be done by pressing <div
|
||||||
class="keyboard-key"
|
class="keyboard-key"
|
||||||
>
|
>
|
||||||
P
|
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="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>
|
<div class="w-full h-full flex flex-col justify-center overflow-hidden">
|
||||||
|
<div class=" w-full flex h-[1131.25px] justify-center">
|
||||||
<div class="NotoSans cv-config cv-container-container include-in-print">
|
<RepeatedSkills
|
||||||
<div class="cv-container sections decorations">
|
class="cozette-force text-5xl text-base-300 {$re?.name ? 'hidden' : ''}"
|
||||||
<div id="left-section" class="bg-grid-cv flex justify-center">
|
style="transform: translateY(-90rem)"
|
||||||
<LeftTopDecor />
|
textOverride={["REDACTED VERSION"]}
|
||||||
<BottomRightDecor Style="pointer-events: none;" />
|
targetTextHeight={90}
|
||||||
<div
|
targetTextWidth={150}
|
||||||
class="absolute rotate-12 width-[10cm] h-full right-[15cm]"
|
textRowPadding={"1rem"}
|
||||||
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>
|
||||||
<div id="leftSectionSeperator"></div>
|
|
||||||
<div id="right-section" class="text-[var(--right-text-color)]">
|
<div
|
||||||
<AlexWatermark Style="pointer-events: none;" />
|
class="NotoSans cv-config cv-container-container include-in-print absolute"
|
||||||
<div id="TopRightSkillsText">
|
>
|
||||||
<RepeatedSkills
|
<div class="cv-container sections decorations">
|
||||||
class="cozette-force"
|
<div id="left-section" class="bg-grid-cv flex justify-center">
|
||||||
targetTextHeight={30}
|
<LeftTopDecor />
|
||||||
targetTextWidth={75}
|
<BottomRightDecor Style="pointer-events: none;" />
|
||||||
/>
|
<div
|
||||||
</div>
|
class="absolute rotate-12 width-[10cm] h-full right-[15cm]"
|
||||||
<div>
|
style="background-color: #bdd6ee"
|
||||||
<Profile />
|
></div>
|
||||||
<BiggestFlex />
|
<div class="text-[var(--left-text-color)] pointer-events-none">
|
||||||
<TableOfProjects />
|
<div
|
||||||
<Experience />
|
class="pointer-events-auto flex flex-col justify-center w-full items-center"
|
||||||
<Education />
|
>
|
||||||
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,62 +1,63 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
// Width of num chars and height nom of chars
|
// Width of num chars and height nom of chars
|
||||||
export let targetTextWidth: number;
|
export let targetTextWidth: number;
|
||||||
export let targetTextHeight: 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
|
// Assign default value if textOverride is undefined
|
||||||
let repeatingText : string[] = textOverride ?? [
|
let repeatingText: string[] = textOverride ?? [
|
||||||
"C++",
|
"C++",
|
||||||
"C#",
|
"C#",
|
||||||
"ARDUINO",
|
"ARDUINO",
|
||||||
"PYTHON",
|
"PYTHON",
|
||||||
"JAVA",
|
"JAVA",
|
||||||
"JAVASCRIPT",
|
"JAVASCRIPT",
|
||||||
"TYPESCRIPT",
|
"TYPESCRIPT",
|
||||||
"HTML",
|
"HTML",
|
||||||
"CSS",
|
"CSS",
|
||||||
];
|
];
|
||||||
|
|
||||||
function getRandomInt(max: number) {
|
function getRandomInt(max: number) {
|
||||||
return Math.floor(Math.random() * max);
|
return Math.floor(Math.random() * max);
|
||||||
|
}
|
||||||
|
|
||||||
|
function GrabRandomString() {
|
||||||
|
let outString: string = "";
|
||||||
|
while (outString.length < targetTextWidth) {
|
||||||
|
outString += repeatingText[getRandomInt(repeatingText.length)] + " ";
|
||||||
}
|
}
|
||||||
|
|
||||||
function GrabRandomString() {
|
return outString; // At about target size
|
||||||
let outString: string = "";
|
}
|
||||||
while (outString.length < targetTextWidth) {
|
|
||||||
outString +=
|
|
||||||
repeatingText[
|
|
||||||
getRandomInt(repeatingText.length)
|
|
||||||
] + " ";
|
|
||||||
}
|
|
||||||
|
|
||||||
return outString; // At about target size
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div {...$$restProps}>
|
<div {...$$restProps}>
|
||||||
{#each { length: targetTextHeight } as _, i}
|
{#each { length: targetTextHeight } as _, i}
|
||||||
<span class="{applyRotation ? "rotate45" : ""} SkillsText">
|
<span
|
||||||
{GrabRandomString()}
|
class="{applyRotation ? 'rotate45' : ''} SkillsText"
|
||||||
</span>
|
style="padding: {textRowPadding};"
|
||||||
{/each}
|
>
|
||||||
|
{GrabRandomString()}
|
||||||
|
</span>
|
||||||
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.SkillsText {
|
.SkillsText {
|
||||||
text-align: start;
|
text-align: start;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rotate45 {
|
.rotate45 {
|
||||||
transform: rotate(-45deg);
|
transform: rotate(-45deg);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue