Compare commits
No commits in common. "7134f79809aea85d6dfca68eeed3c15824f774d3" and "03cfd5a6176e8f4fd7710a65a994ba108c9e956e" have entirely different histories.
7134f79809
...
03cfd5a617
|
|
@ -1,5 +1,82 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import TopAnimatedBackground from "./Comps/TopAnimatedBackground.svelte";
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
|
// Params
|
||||||
|
let mouseMoveDevider = 1.5;
|
||||||
|
|
||||||
|
// Site variables
|
||||||
|
let mouseX = 0;
|
||||||
|
let mouseY = 0;
|
||||||
|
|
||||||
|
// Element binded variables
|
||||||
|
let animatedTopBackgroundX = 0;
|
||||||
|
let animatedTopBackgroundY = 0;
|
||||||
|
|
||||||
|
let StartPageAnimated: Element;
|
||||||
|
|
||||||
|
function handleMouseMove(event: MouseEvent) {
|
||||||
|
// Calculate the mouse position relative to the center of the div
|
||||||
|
const centerX = StartPageAnimated.clientWidth / 2;
|
||||||
|
const centerY = StartPageAnimated.clientHeight / 2;
|
||||||
|
|
||||||
|
mouseX = event.clientX;
|
||||||
|
mouseY = event.clientY;
|
||||||
|
|
||||||
|
animatedTopBackgroundX = mouseX - StartPageAnimated.clientLeft - centerX;
|
||||||
|
animatedTopBackgroundY = mouseY - StartPageAnimated.clientTop - centerY;
|
||||||
|
|
||||||
|
//console.log(mouseX+"\n"+mouseY);
|
||||||
|
}
|
||||||
|
|
||||||
|
// let windowWidth = window.innerWidth;
|
||||||
|
// let windowHeight = window.innerHeight;
|
||||||
|
|
||||||
|
// // Update window dimensions on mount
|
||||||
|
// onMount(() => {
|
||||||
|
// const updateDimensions = () => {
|
||||||
|
// windowWidth = window.innerWidth;
|
||||||
|
// windowHeight = window.innerHeight;
|
||||||
|
// };
|
||||||
|
|
||||||
|
// window.addEventListener('resize', updateDimensions);
|
||||||
|
|
||||||
|
// return () => {
|
||||||
|
// window.removeEventListener('resize', updateDimensions);
|
||||||
|
// };
|
||||||
|
// });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<TopAnimatedBackground/>
|
<svelte:body on:mousemove={handleMouseMove}/>
|
||||||
|
|
||||||
|
<div class="StartPageContainer">
|
||||||
|
|
||||||
|
<div class="StartPageAnimated" bind:this={StartPageAnimated} style="transform: translate({animatedTopBackgroundX}px, {animatedTopBackgroundY}px);">
|
||||||
|
<span class="rotate45" style="display: flex; justify-content: center; align-items: center;">TEXT!!!</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.StartPageContainer{
|
||||||
|
height: 40vh;
|
||||||
|
|
||||||
|
background-color: burlywood;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.StartPageAnimated{
|
||||||
|
background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$");
|
||||||
|
position: static;
|
||||||
|
height: 100vh;
|
||||||
|
height: 100vw;
|
||||||
|
|
||||||
|
transition: all 1000ms cubic-bezier(0.16,1.63,0.01,0.99);
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rotate45 {
|
||||||
|
transform: rotate(-45deg); /* Rotate the element by 45 degrees */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,168 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import HorizonalStack from './../../../comps/Utils/HorizonalStack.svelte'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div style="flex-grow: 1;" />
|
|
||||||
<div class="TextContainer">
|
|
||||||
<span class="NamePlateText" >
|
|
||||||
Zhentao Wei
|
|
||||||
<br/>
|
|
||||||
<p class="NickNameText">Alex</p>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div style="flex-grow: 2;" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.container{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.TextContainer{
|
|
||||||
align-items: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
/* background-color: aliceblue; */
|
|
||||||
background-color: rgba(45, 45, 45, 0.645);
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
border-radius: 20px;
|
|
||||||
|
|
||||||
backdrop-filter: blur(1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.NamePlateText{
|
|
||||||
/* font-family: 'CozetteVector'; */
|
|
||||||
text-align: left;
|
|
||||||
font-size: 5rem;
|
|
||||||
color: rgb(225, 225, 225);
|
|
||||||
|
|
||||||
border-left: 0.5rem solid rgb(88, 198, 82);
|
|
||||||
padding-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.NickNameText{
|
|
||||||
font-size: 2rem;
|
|
||||||
margin: 0;
|
|
||||||
margin-top: -1rem;
|
|
||||||
|
|
||||||
color: rgb(99, 99, 99);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -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);;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue