Removed svelte parallax
This commit is contained in:
BOT Alex
parent
2558592d9c
commit
2fa0e4ee8e
9 changed files with 74 additions and 441 deletions
|
|
@ -6,7 +6,6 @@
|
|||
import Button from '$lib/IO/Button.svelte';
|
||||
import { ButtonType } from '$lib/IO/ButtonType.ts';
|
||||
import Timeline from '../comps/timeline/timeline.svelte';
|
||||
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
|
||||
import { onMount, tick } from 'svelte'
|
||||
|
||||
import PreviewDeprivedLogo from "$lib/images/DeprivedLogo-NoBackground.png";
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
<script lang="ts">
|
||||
import TopAnimatedBackground from "./Comps/TopAnimatedBackground.svelte";
|
||||
import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
|
||||
import ZhenInformatikTimeline from "./Comps/ZhenInformatikTimeline.svelte"
|
||||
import AboutMe from "./Comps/AboutMe.svelte"
|
||||
</script>
|
||||
|
||||
<Parallax sections={3} config={{ stiffness: 0.1, damping: 0.3 }}>
|
||||
<TopAnimatedBackground/>
|
||||
<ParallaxLayer rate={0.5} offset={0.5} style="background-color: var(--background);">
|
||||
<AboutMe/>
|
||||
</ParallaxLayer>
|
||||
|
||||
<ParallaxLayer rate={0.5} offset={0.8} style="background-color: var(--background);">
|
||||
<ZhenInformatikTimeline/>
|
||||
</ParallaxLayer>
|
||||
</Parallax>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
export function throttle(callback, wait) {
|
||||
let timeoutId = null;
|
||||
let lastExecutedTime = 0;
|
||||
|
||||
return function (...args) {
|
||||
const currentTime = Date.now();
|
||||
|
||||
const execute = () => {
|
||||
lastExecutedTime = currentTime;
|
||||
callback.apply(this, args);
|
||||
};
|
||||
|
||||
if (currentTime - lastExecutedTime >= wait) {
|
||||
execute();
|
||||
} else {
|
||||
clearTimeout(timeoutId);
|
||||
timeoutId = setTimeout(execute, wait - (currentTime - lastExecutedTime));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
export class Vector2 {
|
||||
x: number;
|
||||
y: number;
|
||||
|
||||
constructor(x: number, y: number) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
}
|
||||
|
||||
Add(vec2: Vector2){
|
||||
return new Vector2(this.x + vec2.x, this.y + vec2.y);
|
||||
}
|
||||
|
||||
Sub(vec2: Vector2){
|
||||
return new Vector2(this.x - vec2.x, this.y - vec2.y);
|
||||
}
|
||||
|
||||
Scale(mult: number){
|
||||
return new Vector2(this.x * mult, this.y * mult);;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
<script lang="ts">
|
||||
import RepeatedSkills from "../../cv/Comps/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 LinkedIn banner {getFormattedDate()}</title>
|
||||
<meta content="Zhentao Wei's LinkedIn banner" property="og:title" />
|
||||
<meta content="This Linkedin banner is made completely with 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 Linkedin banner. This page has been able to be saved as PDF, and the banner can be extracted as an image fro mthe 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="container include-in-print">
|
||||
<div>
|
||||
<RepeatedSkills targetTextHeight={70} targetTextWidth={175}/>
|
||||
</div>
|
||||
<div/>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.hide-on-print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.include-in-print { &, & * {
|
||||
-webkit-print-color-adjust:exact !important;
|
||||
print-color-adjust:exact !important;
|
||||
}}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
> div:nth-child(1) {
|
||||
width: 419.1mm;
|
||||
height: 104.775mm;
|
||||
|
||||
background-color: #383636;
|
||||
overflow: hidden;
|
||||
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
font-size: 10mm;
|
||||
font-family: cozetteVector;
|
||||
color: #d4d4d4;
|
||||
|
||||
filter: blur(0); // Force save as image
|
||||
}
|
||||
|
||||
> div:nth-child(2){
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<script lang="ts">
|
||||
import A4 from "../sharedComps/A4.svelte";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<script>
|
||||
MathJax = {
|
||||
tex: {
|
||||
inlineMath: [
|
||||
["$", "$"],
|
||||
["\\(", "\\)"],
|
||||
],
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<script
|
||||
id="MathJax-script"
|
||||
async
|
||||
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"
|
||||
></script>
|
||||
</svelte:head>
|
||||
|
||||
<div class="flex justify-center m-auto text-slate-900">
|
||||
<div class="flex flex-col">
|
||||
<A4>
|
||||
<!-- <div>$$v_f = v_i + at$$</div>
|
||||
<div>$$\Delta x = v_i t + \frac{1}{2} a t^2$$</div>
|
||||
<div>$$v_f^2 = v_i^2 + 2a\Delta x$$</div>
|
||||
<div>$$v_{\text{avg} = \frac{v_i + v_f}{2}$$</div>
|
||||
<div>$$\Delta x = v_{\text{avg}} t$$</div> -->
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Symbol</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>$v_i$</td>
|
||||
<td>Initial velo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$v_f$</td>
|
||||
<td>Final velo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$a$</td>
|
||||
<td>Accel</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$\Delta x$</td>
|
||||
<td>The amount of change.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$t$</td>
|
||||
<td>You're on your own on this one</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</A4>
|
||||
<A4>
|
||||
{#each { length: 3 } as _, i}
|
||||
<div>test {i}</div>
|
||||
{/each}
|
||||
</A4>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue