Compare commits
No commits in common. "7134f79809aea85d6dfca68eeed3c15824f774d3" and "03cfd5a6176e8f4fd7710a65a994ba108c9e956e" have entirely different histories.
7134f79809
...
03cfd5a617
|
|
@ -1,5 +1,82 @@
|
|||
<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>
|
||||
|
||||
<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