Skip to content

Commit 898b228

Browse files
freddxyzfreddxyz
committed
Made a ton of changed (see desc)
Added page icon, reorganized some files/folders, made line animation on index.html and circle animation on projects.html, made projects showcase page, made main page.
1 parent 4202a36 commit 898b228

24 files changed

+983
-123
lines changed

‎assets/FortressWarfarethumb.PNG

2.05 MB
Loading

‎assets/apple-touch-icon.png

9.43 KB
Loading

‎assets/castleBombing.png

325 KB
Loading

‎assets/collisionDetection.PNG

17.8 KB
Loading

‎assets/favicon-16x16.png

634 Bytes
Loading

‎assets/favicon-32x32.png

1.08 KB
Loading

‎assets/favicon.ico

15 KB
Binary file not shown.

‎assets/fpsframeworkthumbnail.PNG

994 KB
Loading

‎assets/linus.png

437 KB
Loading

‎assets/logo.png

928 Bytes
Loading

‎assets/planegame.PNG

65.5 KB
Loading

‎assets/topdownshooter.PNG

21.4 KB
Loading

‎index.html

Lines changed: 66 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,73 @@
11
<!DOCTYPE html>
22
<html>
3+
<head>
4+
<title>FradZGenius | Home</title>
5+
6+
<!--ICON-->
7+
8+
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
9+
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
10+
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
11+
12+
<!--FONTS-->
13+
14+
<link rel="preconnect" href="https://fonts.googleapis.com">
15+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
17+
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700;800&display=swap" rel="stylesheet">
18+
19+
<!--CSS-->
20+
21+
<link rel = "stylesheet" href = "style/essential.css">
22+
<link rel = "stylesheet" href = "style/index.css">
23+
24+
</head>
325
<body>
4-
<h1>Work in progress</h1>
5-
<p>Coming soon...</p>
26+
<div class = "wrapper">
27+
<!--Navbar-->
28+
<nav class = "navbar fixed">
29+
<img src = "assets/logo.png" id = "logo" class = "logo noselect">
30+
<ul class = "nav-items">
31+
<li>
32+
<a href = "index.html">Home</a>
33+
</lix>
34+
<li>
35+
<a href = "projects.html">Projects</a>
36+
</li>
37+
<li>
38+
<a href = "https://www.youtube.com/channel/UCxkhPyPBxjc_AfXWWrP_JGw">Youtube</a>
39+
</li>
40+
<li>
41+
<a href = "about.html">About me</a>
42+
</li>
43+
</ul>
44+
</nav>
45+
46+
<!--Main page content-->
47+
48+
<div class = "page-content">
49+
<div class = "canvas-container">
50+
<canvas class = "background-canvas" id = "canvas"></canvas>
51+
</div>
52+
<div class = "canvas-cover">
53+
<h1 class = "cover-header">Hi, I'm Fred.</h1>
54+
<p>I like programming, computer science, math, and game development. IDK what else to put here</p>
55+
</div>
56+
</div>
57+
</div>
58+
59+
<!--Landing page redirection script-->
60+
661
<script>
7-
location = "landing/landing.html"
62+
if(!JSON.parse(localStorage.getItem("landed"))){
63+
location = "landing.html"
64+
console.log('bruh')
65+
}
866
</script>
67+
68+
<!--JS-->
69+
70+
<script src = "js/useful.js"></script>
71+
<script src = "js/main-page-canvas-driver.js"></script>
972
</body>
1073
</html>

‎js/expanding-circle-canvas-driver.js

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
window.onload = () => {
2+
const FADE_DURATION = 1;
3+
var origin = new vec2(0, innerHeight / 2);
4+
var fadeTicker = 0;
5+
var fade = 0;
6+
var canvas = document.getElementById('background-canvas');
7+
var context = canvas.getContext('2d');
8+
9+
var createTicker = 0;
10+
11+
var creationInterval = 2;
12+
var expandSpeed = 100;
13+
var prevTick = Date.now();
14+
15+
var testCircle = new Circle(1000, COLOR_RED, context);
16+
17+
var circles = [];
18+
19+
var colors = [COLOR_RED, COLOR_WHITE, COLOR_BLACK];
20+
21+
var colorInd = 0;
22+
23+
canvas.width = window.innerWidth * 0.8;
24+
canvas.height = window.innerHeight;
25+
26+
var pageDiag = Math.sqrt(
27+
Math.pow(canvas.height / 2, 2) + Math.pow(canvas.width, 2)
28+
);
29+
30+
var initCircles = () => {
31+
//expandSpeed = increase in radius per second
32+
//creationInterval = amount of seconds in between each new circle
33+
origin.y = innerHeight / 2;
34+
colorInd = 0;
35+
pageDiag = Math.sqrt(
36+
Math.pow(innerHeight / 2, 2) + Math.pow(innerWidth * 0.8, 2)
37+
);
38+
prevTick = Date.now();
39+
createTicker = 0;
40+
circles = [];
41+
let circlesRequired = pageDiag / (creationInterval * expandSpeed);
42+
for (let i = 0; i < circlesRequired; i++) {
43+
let circ = new Circle(
44+
(circlesRequired - i) * expandSpeed * creationInterval,
45+
colors[colorInd],
46+
context
47+
);
48+
colorInd = (colorInd + 1) % colors.length;
49+
circ.position = origin;
50+
circles.push(circ);
51+
}
52+
};
53+
54+
initCircles();
55+
56+
var draw = () => {
57+
requestAnimationFrame(draw);
58+
59+
canvas.width = window.innerWidth * 0.8;
60+
canvas.height = window.innerHeight;
61+
62+
let now = Date.now();
63+
let dt = (now - prevTick) / 1000;
64+
prevTick = now;
65+
66+
createTicker += dt;
67+
68+
if (fadeTicker < 1) {
69+
fade = cosineInterpolate(0, 1, fadeTicker);
70+
fadeTicker += dt;
71+
} else {
72+
fade = 1;
73+
}
74+
75+
if (createTicker > creationInterval) {
76+
createTicker = 0;
77+
let cl = colors[colorInd];
78+
79+
colorInd = (colorInd + 1) % colors.length;
80+
81+
let circle = new Circle(0, cl, context);
82+
circle.position = origin;
83+
84+
circles.push(circle);
85+
}
86+
87+
let newCircles = [];
88+
89+
for (let i = 0; i < circles.length; i++) {
90+
let item = circles[i];
91+
item.radius += dt * expandSpeed;
92+
let itemBefore = item;
93+
if (i != circles.length - 1) itemBefore = circles[i + 1];
94+
if (itemBefore.radius < pageDiag) {
95+
newCircles.push(item);
96+
}
97+
item.color.a = fade;
98+
item.draw();
99+
}
100+
101+
circles = newCircles;
102+
};
103+
104+
window.onfocus = () => {
105+
initCircles();
106+
};
107+
108+
window.onresize = () => {
109+
initCircles();
110+
};
111+
112+
requestAnimationFrame(draw);
113+
};

0 commit comments

Comments
 (0)