Skip to content

Commit bf8ea7c

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

13 files changed

+451
-196
lines changed
 

‎.prettierrc

+7
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

+126
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: thefradzgenius@gmail.com
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

+5-2
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

+54-38
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

+5
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

+11-8
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>

‎projects.html

+46-39
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,10 @@
2020
<!--CSS-->
2121

2222
<link rel = "stylesheet" href = "style/essential.css">
23-
<link rel = "stylesheet" href = "style/projects.css">
24-
23+
<link rel = "stylesheet" href = "style/projectShowcase.css">
24+
<meta name = "author" content = "Fred">
25+
<meta name = "description" content = "FradZGenius's Projects">
26+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2527
</head>
2628
<body>
2729
<div class = "wrapper">
@@ -42,34 +44,50 @@
4244
</li>
4345
</ul>
4446
</nav>
47+
<nav class = "mobile-navbar">
48+
<ul class = "mobile-nav-items">
49+
<li>
50+
<a href = "index.html">Home</a>
51+
</li>
52+
<li>
53+
<a href = "projects.html">Projects</a>
54+
</li>
55+
<li>
56+
<a href = "https://www.youtube.com/channel/UCxkhPyPBxjc_AfXWWrP_JGw">YouTube</a>
57+
</li>
58+
<li>
59+
<a href = "about.html">About Me</a>
60+
</li>
61+
</ul>
62+
</nav>
4563
<div class = "page-content">
4664
<div class = "canvas-container">
4765
<canvas class = "background-canvas" id = "background-canvas"></canvas>
4866
</div>
49-
<div class = "canvas-cover header-cover">
67+
<div class = "canvas-cover primary-cover">
5068
<h1 class = "cover-header main">My Projects</h1>
5169
<p>
5270
Here are some of the projects I've built.
5371
</p>
5472
</div>
55-
<div class = "canvas-cover showcase-cover">
73+
<div class = "canvas-cover secondary-cover">
5674
<h1 class = "cover-header">Roblox</h1>
57-
<div class = "project-showcase-container">
58-
<div class = "project-showcase-card">
59-
<h1 class = "showcase-card-title title-emphasis">FPS Framework</h1>
60-
<a href = "https://www.roblox.com/games/5477980027/FPS-Testing">
75+
<div class = "showcase-container">
76+
<div class = "showcase-card">
77+
<h1 class = "card-title title-emphasis">FPS Framework</h1>
78+
<a href = "https://www.roblox.com/games/5477980027/FPS-Testing" target = "_blank" rel = "noopener noreferrer">
6179
<img src = "assets/fpsframeworkthumbnail.PNG">
6280
</a>
6381
</div>
64-
<div class = "project-showcase-card">
65-
<h1 class = "showcase-card-title">Fortress Warfare</h1>
66-
<a href = "https://www.roblox.com/games/2593053649/Fortress-Warfare">
82+
<div class = "showcase-card">
83+
<h1 class = "card-title">Fortress Warfare</h1>
84+
<a href = "https://www.roblox.com/games/2593053649/Fortress-Warfare" target = "_blank" rel = "noopener noreferrer">
6785
<img src = "assets/FortressWarfarethumb.PNG">
6886
</a>
6987
</div>
70-
<div class = "project-showcase-card">
71-
<h1 class = "showcase-card-title">The Great Castle Bombing</h1>
72-
<a href = "https://www.roblox.com/games/1320789304/The-Great-Castle-Bombing">
88+
<div class = "showcase-card">
89+
<h1 class = "card-title">The Great Castle Bombing</h1>
90+
<a href = "https://www.roblox.com/games/1320789304/The-Great-Castle-Bombing" target = "_blank" rel = "noopener noreferrer">
7391
<img src = "assets/castleBombing.png">
7492
</a>
7593
</div>
@@ -78,27 +96,27 @@ <h1 class = "showcase-card-title">The Great Castle Bombing</h1>
7896
Note: most of these games have limited functionality due to Roblox updates / outdated code
7997
</p>
8098
</div>
81-
<div class = "canvas-cover showcase-cover">
99+
<div class = "canvas-cover secondary-cover">
82100
<h1 class = "cover-header">Javascript</h1>
83-
<div class = "project-showcase-container">
84-
<div class = "project-showcase-card">
85-
<h1 class = "showcase-card-title">Three.js Plane Game</h1>
86-
<a href = "https://ace-aviation.frederikdavidso.repl.co/">
101+
<div class = "showcase-container">
102+
<div class = "showcase-card">
103+
<h1 class = "card-title">Three.js Plane Game</h1>
104+
<a href = "https://ace-aviation.frederikdavidso.repl.co/" target = "_blank" rel = "noopener noreferrer">
87105
<img src = "assets/planegame.PNG">
88106
</a>
89107
</div>
90-
<div class = "project-showcase-card">
91-
<h1 class = "showcase-card-title">Multiplayer Top Down Shooter</h1>
92-
<a href = "https://TopDownShooter.frederikdavidso.repl.co">
108+
<div class = "showcase-card">
109+
<h1 class = "card-title">Multiplayer Top Down Shooter</h1>
110+
<a href = "https://TopDownShooter.frederikdavidso.repl.co" target = "_blank" rel = "noopener noreferrer">
93111
<img src = "assets/topdownshooter.PNG">
94112
</a>
95113
</div>
96-
<div class = "project-showcase-card">
97-
<h1 class = "showcase-card-title">SAT Collision Detection With Three.js</h1>
98-
<a href = "https://www.youtube.com/watch?v=cL9GHcJ6FrU">
99-
<img src = "assets/collisionDetection.PNG">
100-
</a>
101-
</div>
114+
<a class = "link-wrap" href = "https://www.youtube.com/watch?v=cL9GHcJ6FrU" target = "_blank" rel = "noopener noreferrer">
115+
<div class = "showcase-card">
116+
<h1 class = "card-title">SAT Collision Detection With Three.js</h1>
117+
<img src = "assets/collisionDetection.PNG">
118+
</div>
119+
</a>
102120
</div>
103121
<!--https://TopDownShooter.frederikdavidso.repl.co-->
104122
</div>
@@ -108,16 +126,5 @@ <h1 class = "showcase-card-title">SAT Collision Detection With Three.js</h1>
108126
<!--JS-->
109127
<script src = "js/useful.js"></script>
110128
<script src = "js/expanding-circle-canvas-driver.js"></script>
111-
112-
<!--Rotate when scroll-->
113-
<script>
114-
const logo = document.getElementById('logo');
115-
const pageContainer = document.getElementsByClassName('page-content')[0];
116-
pageContainer.onscroll = function () {
117-
logo.style.transform = `rotate(${pageContainer.scrollTop / 2}deg)`;
118-
console.log(pageContainer);
119-
};
120-
</script>
121-
122129
</body>
123130
</html>

‎style/aboutme.css

Whitespace-only changes.

‎style/essential.css

+189-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
:root {
22
--nav-width: 20vw;
3+
--primary-color: white;
4+
--card-container-background: rgba(0, 0, 0, 0.5);
5+
--card-background: rgba(0, 0, 0, 0.788);
6+
--emphasis-color: rgba(252, 217, 61, 0.788);
7+
--mobile-nav-height: 60px;
38
}
49

510
html,
@@ -8,9 +13,13 @@ body {
813
padding: 0;
914
width: 100%;
1015
height: 100%;
11-
background-color: rgb(43, 43, 43);
16+
background-color: rgb(19, 19, 19);
17+
}
18+
19+
.wrapper {
1220
overflow: auto;
1321
}
22+
1423
.navbar {
1524
height: 100vh;
1625
width: var(--nav-width);
@@ -19,6 +28,10 @@ body {
1928
position: fixed;
2029
}
2130

31+
.mobile-navbar {
32+
display: none;
33+
}
34+
2235
.logo {
2336
transition: transform 1s;
2437
transition-timing-function: ease-out;
@@ -81,7 +94,6 @@ body {
8194
.page-content {
8295
margin-left: calc(var(--nav-width));
8396
margin-top: 0px;
84-
height: 100vh;
8597
overflow: auto;
8698
}
8799

@@ -96,5 +108,179 @@ body {
96108
.canvas-container {
97109
height: 100%;
98110
overflow: hidden;
99-
position: absolute;
111+
position: fixed;
112+
}
113+
114+
/*Scrollbar*/
115+
116+
::-webkit-scrollbar {
117+
width: 10px;
118+
}
119+
120+
::-webkit-scrollbar-track {
121+
background-color: rgb(141, 141, 141);
122+
}
123+
124+
::-webkit-scrollbar-thumb {
125+
background-color: rgb(43, 43, 43);
126+
}
127+
128+
/*=====Card display======*/
129+
130+
.canvas-cover {
131+
display: block;
132+
position: relative;
133+
z-index: 1;
134+
margin: 40px;
135+
overflow: auto;
136+
border-radius: 20px;
137+
backdrop-filter: blur(2px);
138+
font-size: 32px;
139+
font-family: 'Open Sans', sans-serif;
140+
border: 2px solid var(--primary-color);
141+
}
142+
143+
/*leading cover for page*/
144+
145+
.primary-cover {
146+
text-align: center;
147+
color: white;
148+
background-color: var(--card-container-background);
149+
}
150+
151+
/*secondary cover*/
152+
153+
.secondary-cover {
154+
color: white;
155+
background-color: var(--card-container-background);
156+
}
157+
158+
.showcase-container {
159+
display: grid;
160+
grid-template-columns: 1fr 1fr;
161+
width: 100%;
162+
}
163+
164+
.showcase-card {
165+
border: 2px solid var(--primary-color);
166+
border-radius: 16px;
167+
margin: 10px;
168+
padding: 20px;
169+
background-color: var(--card-background);
170+
transition: transform 0.25s;
171+
color: var(--primary-color);
172+
}
173+
174+
.showcase-card:hover {
175+
transform: scale(0.95);
176+
}
177+
178+
.card-title {
179+
font-size: 1em;
180+
text-align: center;
181+
border-bottom: 2px solid var(--primary-color);
182+
}
183+
184+
.showcase-card img {
185+
max-width: 100%;
186+
height: 20vw;
187+
object-fit: cover;
188+
width: 100%;
189+
border-radius: 16px;
190+
}
191+
192+
.notice {
193+
font-size: 1em;
194+
color: rgb(255, 255, 0);
195+
background-color: var(--card-background);
196+
border-radius: 16px;
197+
border: 2px solid var(--primary-color);
198+
text-align: center;
199+
margin: 20px 10px 20px 10px;
200+
}
201+
202+
.title-emphasis {
203+
color: var(--emphasis-color);
204+
border-bottom: 2px solid var(--emphasis-color);
205+
}
206+
207+
.cover-header {
208+
text-align: center;
209+
font-size: 2em;
210+
font-weight: 800;
211+
}
212+
213+
.link-in-text {
214+
text-decoration: none;
215+
color: inherit;
216+
transition: transform 0.25s, background-color 0.25s;
217+
display: inline-block;
218+
color: rgb(101, 193, 255);
219+
}
220+
221+
.link-in-text:hover {
222+
transform: scale(0.8) rotate(2deg);
223+
background-color: grey;
224+
}
225+
226+
.link-wrap {
227+
text-decoration: none;
228+
}
229+
230+
@media only screen and (max-width: 980px) {
231+
html,
232+
body {
233+
background: white linear-gradient(red, rgb(255, 255, 255)) no-repeat
234+
fixed center;
235+
background-repeat: no-repeat;
236+
background-size: cover;
237+
}
238+
.page-content {
239+
margin-top: var(--nav-width);
240+
}
241+
.mobile-navbar {
242+
z-index: 2;
243+
display: block;
244+
position: fixed;
245+
width: 100%;
246+
background-color: black;
247+
}
248+
.mobile-nav-items {
249+
margin: 0;
250+
display: flex;
251+
justify-content: space-between;
252+
list-style: none;
253+
}
254+
.mobile-nav-items li {
255+
transition: background-color 1s;
256+
}
257+
.mobile-nav-items li:hover {
258+
background-color: grey;
259+
}
260+
.mobile-nav-items a {
261+
font-family: 'Open Sans', sans-serif;
262+
font-weight: 700;
263+
color: white;
264+
text-decoration: none;
265+
text-align: center;
266+
display: flex;
267+
flex-direction: column;
268+
justify-content: center;
269+
font-size: 0.8rem;
270+
padding: 2rem;
271+
}
272+
.navbar {
273+
display: none;
274+
}
275+
.page-content {
276+
margin: var(--mobile-nav-height) 0 0 0;
277+
}
278+
.canvas-container {
279+
display: none;
280+
}
281+
.showcase-container {
282+
display: grid;
283+
grid-template-columns: 1fr;
284+
width: 100%;
285+
}
100286
}

‎style/index.css

+8-32
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,15 @@
1-
.canvas-cover{
2-
display:block;
3-
position:relative;
4-
z-index: 1;
5-
font-size: 32px;
1+
.canvas-cover {
62
margin: 25vh 10vw 0px 10vw;
73
animation-name: canvas-cover-fadeIn;
84
animation-duration: 1s;
9-
background-color: rgba(255, 255, 255, .5);
10-
border: 5px solid black;
11-
border-radius: 50px;
12-
backdrop-filter: blur(2px);
135
}
146

157
@keyframes canvas-cover-fadeIn {
16-
from {opacity: 0; transform: translateY(-50px)}
17-
to {opacity: 1;}
8+
from {
9+
opacity: 0;
10+
transform: translateY(-50px);
11+
}
12+
to {
13+
opacity: 1;
14+
}
1815
}
19-
20-
.cover-header {
21-
font-size: 2em;
22-
font-family: 'Open Sans';
23-
text-align: center;
24-
}
25-
26-
h1 {
27-
font-weight: 800;
28-
}
29-
30-
p {
31-
text-align: center;
32-
font-family: 'Open Sans';
33-
font-weight: 400;
34-
}
35-
36-
.background-canvas{
37-
width: calc(100vw - var(--nav-width));
38-
height: 100%;
39-
}

‎style/projectShowcase.css

Whitespace-only changes.

‎style/projects.css

-74
This file was deleted.

0 commit comments

Comments
 (0)
Please sign in to comment.