DeprivedDevs/deprived-main-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

I think my CV done!

Browse source
This commit is contained in:
BOTAlex 2024-06-10 06:55:08 +02:00
parent e6b2d05463
commit bd4124cd83
21 changed files with 2745 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/routes/zhen/cv/Comps/BottomRightDecor.svelte
View file

@ -1,12 +1,16 @@
<div class="container">
<div/>
<div/>
<div>
<div>
Thank you! ❤
</div>
</div>
</div>
<style lang="scss">
.container {
position: absolute;
transform: translate(31mm, 31mm) rotate(-45deg);
transform: translate(40.2mm, 5mm) rotate(-45deg);
display: grid;
justify-self: end;
vertical-align: bottom;
@ -27,7 +31,17 @@
> div:nth-child(2) {
background-color: #2f5496;
width: 100mm;
height: 30mm;
height: 25mm;
// Text
display: grid;
place-content: center;
align-content: flex-start;
> div {
padding-top: 3.5mm;
color: #4a7bcf;
font-weight: bold;
}
}
}
</style>

23
src/routes/zhen/cv/Comps/LeftTopDecor.svelte
View file

@ -1,5 +1,11 @@
<script>
import RepeatedSkills from "./RepeatedSkills.svelte";
</script>
<div class="container">
<div/>
<div>
<RepeatedSkills textOverride={["Hello", "你好", "Hej"]} targetTextHeight={4} targetTextWidth={50} applyRotation={false}/>
</div>
<div/>
</div>
@ -15,9 +21,20 @@
z-index: 0;
> div:nth-child(1) {
background-color: #2f5496;
//background-color: #2f559622;
width: 100mm;
height: 15mm;
height: 17.5mm;
// Text inside
display: grid;
place-content: center;
border: #4472c4 dotted 1mm;
&:first-child {
color: #4472c4;
font-size: 3mm;
//font-weight: bold;
}
}
> div:nth-child(2) {

51
src/routes/zhen/cv/Comps/LinkToSource.svelte Normal file
View file

@ -0,0 +1,51 @@
<script>
import svelteLogo from "$lib/svelteLogos/svelte-logo-cutout.svg"
</script>
<div class="container">
<div>
This CV was made using <a href="https://kit.svelte.dev/"><img src={svelteLogo} alt="SvelteKit logo"/></a>
</div>
<div>
Sources:
<a href="https://gitea.deprived.dev/Sveskejuice/deprived-main-website">Gitea</a>
and
<a href="https://dev.deprived.dev/zhen/cv/epos?hideOnPrint=1">My Website</a>
</div>
</div>
<style lang="scss">
.container {
z-index: 1;
padding-left: 2mm;
//white-space: nowrap;
color: #777777;
* a {
color: #3d6ddc;
padding-left: 1mm;
padding-right: 1mm;
text-decoration: underline;
}
div:first-child {
display: flex;
place-content: center;
justify-content: start;
a:nth-child(1) > img {
width: 5mm;
padding-left: 1mm;
padding-right: 1mm;
}
}
div:nth-child(2){
padding-bottom: 2mm;
}
}
</style>

62
src/routes/zhen/cv/Comps/RepeatedSkills.svelte Normal file
View file

@ -0,0 +1,62 @@
<script lang="ts">
// Width of num chars and height nom of chars
export let targetTextWidth: number;
export let targetTextHeight: number;
export let applyRotation: boolean = true;
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",
];
function getRandomInt(max: number) {
return Math.floor(Math.random() * max);
}
function GrabRandomString() {
let outString: string = "";
while (outString.length < targetTextWidth) {
outString +=
repeatingText[
getRandomInt(repeatingText.length)
] + " ";
}
return outString; // At about target size
}
</script>
<div {...$$restProps}>
{#each { length: targetTextHeight } as _, i}
<span class="{applyRotation ? "rotate45" : ""} SkillsText">
{GrabRandomString()}
</span>
{/each}
</div>
<style>
.SkillsText {
text-align: start;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
width: 2rem;
}
.rotate45 {
transform: rotate(-45deg);
}
</style>

67
src/routes/zhen/cv/epos/+page.svelte
View file

@ -14,10 +14,14 @@
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";
</script>
<div class="cv-container-container include-in-print">
<div class="cv-container sections">
<div class="cv-container sections decorations">
<div id="left-section">
<LeftTopDecor/>
<BottomRightDecor/>
@ -30,6 +34,12 @@
</div>
<div id="right-section">
<AlexWatermark/>
<div id="TopRightSkillsText">
<RepeatedSkills targetTextHeight={30} targetTextWidth={75}/>
</div>
<div id="Credit">
<LinkToSource/>
</div>
<div>
<Profile/>
<Experience/>
@ -69,6 +79,7 @@
}}
.sections {
// Shared between sections
> div {
display: grid;
z-index: 0;
@ -82,7 +93,9 @@
background-color: #bdd6ee;
width: calc(100% / 3 * 1);
> div {
filter: drop-shadow(1mm 1mm 1mm #00000042);
> div:last-child {
z-index: 1;
width: 100%;
@ -92,17 +105,14 @@
place-items: center;
padding-top: 30mm;
padding-bottom: 20mm;
padding-bottom: 30mm;
}
}
#right-section{
width: calc(100% / 3 * 2);
padding-top: 30mm;
padding-bottom: 20mm;
> div {
> div:last-child {
z-index: 1;
width: 100%;
@ -112,9 +122,48 @@
place-items: center;
row-gap: 6mm;
padding-top: 30mm;
padding-bottom: 20mm;
padding-top: 45mm;
padding-bottom: 30mm;
// Disable interactivity for padding
pointer-events:none;
> * {
pointer-events:all;
}
}
}
}
.decorations {
> 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>