169 lines
3.9 KiB
Svelte
169 lines
3.9 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import { Vector2 } from "./../Utils/Vector2";
|
|
import TopNameTextPlate from "./TopNameTextPlate.svelte";
|
|
//import { throttle } from "./../Utils/Throttle";
|
|
|
|
// Params
|
|
let mouseMoveScale: number = 0.25;
|
|
let targetTextLenght: number = 70;
|
|
|
|
// Site variables
|
|
let mousePos: Vector2;
|
|
|
|
// Element binded variables
|
|
let mouseRelativeScaled: Vector2 = new Vector2(0, 0);
|
|
|
|
let windowWidth = 0;
|
|
let windowHeight = 0;
|
|
|
|
let screenCenter: Vector2;
|
|
|
|
let StartPageAnimated: Element;
|
|
let windowRef: Window;
|
|
|
|
function onMouseMoved(event: MouseEvent) {
|
|
mousePos = new Vector2(event.clientX, event.clientY);
|
|
|
|
updateAnimation(mousePos);
|
|
}
|
|
|
|
function updateAnimation(mousePos: Vector2) {
|
|
let mouseRelativePos = mousePos.Sub(screenCenter);
|
|
mouseRelativeScaled = mouseRelativePos.Scale(mouseMoveScale);
|
|
|
|
//console.log(mouseRelativePos.x+"\n"+mouseRelativePos.y);
|
|
}
|
|
|
|
onMount(() => {
|
|
windowRef = window;
|
|
|
|
const updateDimensions = () => {
|
|
windowWidth = windowRef.innerWidth;
|
|
windowHeight = windowRef.innerHeight;
|
|
|
|
screenCenter = new Vector2(windowWidth / 2, windowHeight / 2);
|
|
|
|
//console.log("Window size changed: (" + windowWidth + ", " + windowHeight + ")");
|
|
};
|
|
|
|
updateDimensions(); // On first pass
|
|
|
|
windowRef.addEventListener("resize", updateDimensions);
|
|
|
|
return () => {
|
|
windowRef.removeEventListener("resize", updateDimensions);
|
|
};
|
|
});
|
|
|
|
const programmingLanguages: string[] = [
|
|
"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 < targetTextLenght) {
|
|
outString += programmingLanguages[getRandomInt(programmingLanguages.length)] + " ";
|
|
}
|
|
|
|
return outString; // At about target size
|
|
}
|
|
|
|
</script>
|
|
|
|
<svelte:window on:mousemove={onMouseMoved} />
|
|
|
|
<div class="StartPageContainer">
|
|
<div class="TopOverlay">
|
|
<TopNameTextPlate/>
|
|
</div>
|
|
|
|
<div
|
|
class="StartPageAnimated"
|
|
bind:this={StartPageAnimated}
|
|
style="transform: translate({mouseRelativeScaled.x}px, {mouseRelativeScaled.y}px);"
|
|
>
|
|
{#each {length: 100} as _, i}
|
|
|
|
<span
|
|
class="rotate45 SkillsText"
|
|
>
|
|
{GrabRandomString()}
|
|
</span
|
|
>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.StartPageContainer {
|
|
height: 40vh;
|
|
|
|
background-color: burlywood;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
|
|
padding: 0;
|
|
}
|
|
|
|
.StartPageAnimated {
|
|
/* background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$"); */
|
|
background-color: #131313;
|
|
position: absolute;
|
|
height: 150vh;
|
|
width: 150vw;
|
|
|
|
padding: 0;
|
|
|
|
transition: all 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
|
|
|
|
justify-content: center;
|
|
vertical-align: middle;
|
|
display: flex;
|
|
}
|
|
|
|
.SkillsText{
|
|
font-family: 'CozetteVector';
|
|
|
|
text-align: start;
|
|
font-size: x-large;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-wrap: nowrap;
|
|
|
|
width: 2rem;
|
|
|
|
color: rgb(66, 66, 66);
|
|
}
|
|
|
|
.TopOverlay {
|
|
position: absolute;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
padding: 0;
|
|
}
|
|
|
|
.rotate45 {
|
|
transform: rotate(-45deg); /* Rotate the element by 45 degrees */
|
|
}
|
|
</style>
|