Skip to content

Commit bf8ea7c

Browse files
freddxyzfreddxyz
committed
Mobile navbar testing, pushing because I might lose power
1 parent 898b228 commit bf8ea7c

File tree

13 files changed

+451
-196
lines changed

13 files changed

+451
-196
lines changed

‎.prettierrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"tabWidth": 4,
3+
"useTabs": false,
4+
"singleQuote": true,
5+
"bracketSpacing": false,
6+
"semi": true
7+
}

‎about.html‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<html>
2+
<head>
3+
<title>FradZGenius | Projects</title>
4+
5+
<!--ICON-->
6+
7+
<link
8+
rel="apple-touch-icon"
9+
sizes="180x180"
10+
href="assets/apple-touch-icon.png"
11+
/>
12+
<link
13+
rel="icon"
14+
type="image/png"
15+
sizes="32x32"
16+
href="assets/favicon-32x32.png"
17+
/>
18+
<link
19+
rel="icon"
20+
type="image/png"
21+
sizes="16x16"
22+
href="assets/favicon-16x16.png"
23+
/>
24+
25+
<!--FONTS-->
26+
27+
<link rel="preconnect" href="https://fonts.googleapis.com" />
28+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
29+
<link
30+
href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"
31+
rel="stylesheet"
32+
/>
33+
<link
34+
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700;800&display=swap"
35+
rel="stylesheet"
36+
/>
37+
38+
<!--CSS-->
39+
40+
<link rel="stylesheet" href="style/essential.css" />
41+
</head>
42+
<body>
43+
<div class = "wrapper">
44+
<nav class = "navbar fixed">
45+
<img src = "assets/logo.png" id = "logo" class = "logo noselect">
46+
<ul class = "nav-items">
47+
<li>
48+
<a href = "index.html">Home</a>
49+
</lix>
50+
<li>
51+
<a href = "projects.html">Projects</a>
52+
</li>
53+
<li>
54+
<a href = "https://www.youtube.com/channel/UCxkhPyPBxjc_AfXWWrP_JGw">Youtube</a>
55+
</li>
56+
<li>
57+
<a href = "about.html">About me</a>
58+
</li>
59+
</ul>
60+
</nav>
61+
<div class = "page-content">
62+
<div class = "canvas-container">
63+
<canvas class = "background-canvas" id = "background-canvas"></canvas>
64+
</div>
65+
<div class = "canvas-cover primary-cover">
66+
<h1 class = "cover-header main">About Me</h1>
67+
<p>
68+
A little bit about myself
69+
</p>
70+
<div class = "showcase-container">
71+
<div class = "showcase-card">
72+
<h1 class = "card-title">
73+
Who Am I?
74+
</h1>
75+
<p class = "card-text">
76+
I am FradZGenius, aka Fred.
77+
I honestly don't really know where the name "FradZGenius" comes from, but that's just what I've been using so I'm going to stick with it.
78+
79+
</p>
80+
</div>
81+
<div class = "showcase-card">
82+
<h1 class = "card-title">
83+
Interests
84+
</h1>
85+
<p class = "card-text">
86+
Some of my interests include game development, web development, programming, math, computer science, and really just building anything in general.
87+
I also like to teach my skills to others. I am currently working part time as a Mentor/Student Mentor at
88+
<a class = "link-in-text" href = "https://kidoyo.com/" target = "_blank" rel = "noopener noreferrer">KidOYO</a>
89+
and I run a <a class = "link-in-text" href = "https://www.youtube.com/channel/UCxkhPyPBxjc_AfXWWrP_JGw" target = "_blank" rel = "noopener noreferrer">YouTube channel</a>
90+
where I post videos teaching people how to build cool stuff.
91+
92+
</p>
93+
</div>
94+
<div class = "showcase-card">
95+
<h1 class = "card-title">
96+
Other Things I Like To Do
97+
</h1>
98+
<p class = "card-text">
99+
I like to ski, play badminton, swim, bike, and occasionally play video games.
100+
101+
</p>
102+
</div>
103+
<div class = "showcase-card">
104+
<h1 class = "card-title">
105+
Contact
106+
</h1>
107+
<p class = "card-text">
108+
You can reach me via discord or email.
109+
</p>
110+
<p class = "card-text">
111+
Discord: FradZGenius#5872
112+
</p>
113+
<p class = "card-text">
114+
Email: [email protected]
115+
</p>
116+
</div>
117+
</div>
118+
</div>
119+
</div>
120+
</div>
121+
122+
<!--JS/background driver-->
123+
<script src = "js/useful.js"></script>
124+
<script src = "js/expanding-circle-canvas-driver.js"></script>
125+
</body>
126+
</html>

‎assets/circletest.png‎

83.3 KB
Loading

‎index.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,19 +43,22 @@
4343
</ul>
4444
</nav>
4545

46+
<!--Mobile Navbar-->
47+
48+
4649
<!--Main page content-->
4750

4851
<div class = "page-content">
4952
<div class = "canvas-container">
5053
<canvas class = "background-canvas" id = "canvas"></canvas>
5154
</div>
52-
<div class = "canvas-cover">
55+
<div class = "canvas-cover primary-cover">
5356
<h1 class = "cover-header">Hi, I'm Fred.</h1>
5457
<p>I like programming, computer science, math, and game development. IDK what else to put here</p>
5558
</div>
5659
</div>
5760
</div>
58-
61+
5962
<!--Landing page redirection script-->
6063

6164
<script>

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

Lines changed: 54 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
window.onload = () => {
2-
const FADE_DURATION = 1;
3-
var origin = new vec2(0, innerHeight / 2);
2+
const MIN_WIDTH = 800;
3+
const FADE_DURATION = 2;
44
var fadeTicker = 0;
55
var fade = 0;
6+
7+
var origin = new vec2(0, innerHeight / 2);
68
var canvas = document.getElementById('background-canvas');
79
var context = canvas.getContext('2d');
810

@@ -27,6 +29,28 @@ window.onload = () => {
2729
Math.pow(canvas.height / 2, 2) + Math.pow(canvas.width, 2)
2830
);
2931

32+
var doFade = () => {
33+
if (fadeTicker < FADE_DURATION) {
34+
fade = cosineInterpolate(0, 1, fadeTicker / FADE_DURATION);
35+
fadeTicker += dt;
36+
} else {
37+
fade = 1;
38+
}
39+
};
40+
41+
var createCircles = (lines) => {
42+
for (let i = 0; i < lines; i++) {
43+
let circ = new Circle(
44+
(lines - 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+
3054
var initCircles = () => {
3155
//expandSpeed = increase in radius per second
3256
//creationInterval = amount of seconds in between each new circle
@@ -39,39 +63,10 @@ window.onload = () => {
3963
createTicker = 0;
4064
circles = [];
4165
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-
}
66+
createCircles(circlesRequired);
5267
};
5368

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-
69+
var circleCreation = () => {
7570
if (createTicker > creationInterval) {
7671
createTicker = 0;
7772
let cl = colors[colorInd];
@@ -83,7 +78,9 @@ window.onload = () => {
8378

8479
circles.push(circle);
8580
}
81+
};
8682

83+
var deleteCircles = () => {
8784
let newCircles = [];
8885

8986
for (let i = 0; i < circles.length; i++) {
@@ -101,13 +98,32 @@ window.onload = () => {
10198
circles = newCircles;
10299
};
103100

104-
window.onfocus = () => {
105-
initCircles();
106-
};
101+
initCircles();
107102

108-
window.onresize = () => {
109-
initCircles();
103+
var dt = 0;
104+
105+
var draw = () => {
106+
requestAnimationFrame(draw);
107+
if (window.innerWidth < MIN_WIDTH) {
108+
return;
109+
}
110+
canvas.width = window.innerWidth * 0.8;
111+
canvas.height = window.innerHeight;
112+
113+
let now = Date.now();
114+
dt = (now - prevTick) / 1000;
115+
prevTick = now;
116+
117+
createTicker += dt;
118+
119+
doFade();
120+
121+
circleCreation();
122+
123+
deleteCircles();
110124
};
111125

126+
window.onfocus = window.onresize = initCircles;
127+
112128
requestAnimationFrame(draw);
113129
};

‎js/useful.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,3 +102,8 @@ class vec2 {
102102
this.y = y;
103103
}
104104
}
105+
106+
const logo = document.getElementById('logo');
107+
window.onscroll = function () {
108+
logo.style.transform = `rotate(${window.pageYOffset / 2}deg)`;
109+
};

‎landing.html‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<link rel="stylesheet" href="style/landing.css">
5-
<link rel="preconnect" href="https://fonts.googleapis.com">
6-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
7-
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
4+
<link rel="stylesheet" href="style/landing.css" />
5+
<link rel="preconnect" href="https://fonts.googleapis.com" />
6+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
7+
<link
8+
href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"
9+
rel="stylesheet"
10+
/>
811
</head>
912
<body>
10-
<script src = "js/useful.js"></script>
11-
<script src = "js/landing.js"></script>
12-
<canvas align = "center" id = "landing_canvas"></canvas>
13+
<script src="js/useful.js"></script>
14+
<script src="js/landing.js"></script>
15+
<canvas align="center" id="landing_canvas"> </canvas>
1316
</body>
14-
</html>
17+
</html>

0 commit comments

Comments
 (0)