Skip to content

Commit 96fe8ff

Browse files
Code-JLCode-JL
committed
Added styling and refactored universal and header files. Fixed hexigons on projects
1 parent 05026f7 commit 96fe8ff

File tree

5 files changed

+367
-161
lines changed

5 files changed

+367
-161
lines changed

‎assets/load/header.html‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
1-
<nav>
2-
<ul>
3-
<li>
4-
<a href="home.html" aria-label="Home">
5-
<img src="../../images/home.png" alt="Home Icon"> Home
1+
<nav role="navigation" aria-label="Main navigation">
2+
<ul role="menubar">
3+
<li role="none">
4+
<a href="home.html" role="menuitem" aria-label="Home">
5+
<img src="../../images/home.png" alt="" aria-hidden="true"> Home
66
</a>
77
</li>
8-
<li>
9-
<a href="about.html" aria-label="About">
10-
<img src="../../images/about.png" alt="About Icon"> About
8+
<li role="none">
9+
<a href="about.html" role="menuitem" aria-label="About">
10+
<img src="../../images/about.png" alt="" aria-hidden="true"> About
1111
</a>
1212
</li>
13-
<li>
14-
<a href="projects.html" aria-label="Projects">
15-
<img src="../../images/projects.png" alt="Projects Icon"> Projects
13+
<li role="none">
14+
<a href="projects.html" role="menuitem" aria-label="Projects">
15+
<img src="../../images/projects.png" alt="" aria-hidden="true"> Projects
1616
</a>
1717
</li>
18-
<li>
19-
<a href="skills.html" aria-label="Skills">
20-
<img src="../../images/skills.png" alt="Skills Icon"> Skills
18+
<li role="none">
19+
<a href="skills.html" role="menuitem" aria-label="Skills">
20+
<img src="../../images/skills.png" alt="" aria-hidden="true"> Skills
2121
</a>
2222
</li>
23-
<li>
24-
<a href="education.html" aria-label="Education">
25-
<img src="../../images/education.png" alt="Education Icon"> Education
23+
<li role="none">
24+
<a href="education.html" role="menuitem" aria-label="Education">
25+
<img src="../../images/education.png" alt="" aria-hidden="true"> Education
2626
</a>
2727
</li>
28-
<li>
29-
<a href="home.html#contact" aria-label="Contact">
30-
<img src="../../images/contact.png" alt="Contact Icon"> Contact
28+
<li role="none">
29+
<a href="home.html#contact" role="menuitem" aria-label="Contact">
30+
<img src="../../images/contact.png" alt="" aria-hidden="true"> Contact
3131
</a>
3232
</li>
33-
<li>
34-
<a href="resume.html" aria-label="Resume">
35-
<img src="../../images/resume.png" alt="Resume Icon"> Resume
33+
<li role="none">
34+
<a href="resume.html" role="menuitem" aria-label="Resume">
35+
<img src="../../images/resume.png" alt="" aria-hidden="true"> Resume
3636
</a>
3737
</li>
3838
</ul>

‎assets/load/universal.css‎

Lines changed: 122 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,119 @@
1+
/* CSS Custom Properties for consistent theming */
2+
:root {
3+
--primary-color: #1e5c8f;
4+
--secondary-color: #571194;
5+
--accent-color: #e7df69;
6+
--text-light: #eef6fc;
7+
--text-dark: #001729;
8+
--gradient-start: #6daae4;
9+
--gradient-middle: #175792;
10+
--gradient-end: #571194;
11+
--nav-hover: #133653;
12+
--section-bg: rgba(65, 65, 65, 0.95);
13+
--transition-speed: 0.3s;
14+
}
15+
116
/* Fonts */
217
@font-face {
3-
font-family: 'rampage-monoline';
4-
src: url('../../fonts/rampage-monoline.woff2') format('woff2'),
5-
url('../../fonts/rampage-monoline.woff') format('woff');
6-
font-weight: normal;
7-
font-style: normal;
18+
font-family: 'rampage-monoline';
19+
src: url('../../fonts/rampage-monoline.woff2') format('woff2'),
20+
url('../../fonts/rampage-monoline.woff') format('woff');
21+
font-display: swap;
22+
font-weight: normal;
23+
font-style: normal;
824
}
925

1026
@font-face {
11-
font-family: 'roboto';
12-
src: url('../../fonts/roboto.woff2') format('woff2'),
13-
url('../../fonts/roboto.woff') format('woff');
14-
font-weight: normal;
15-
font-style: normal;
27+
font-family: 'roboto';
28+
src: url('../../fonts/roboto.woff2') format('woff2'),
29+
url('../../fonts/roboto.woff') format('woff');
30+
font-display: swap;
31+
font-weight: normal;
32+
font-style: normal;
1633
}
1734

1835
title {
19-
font-family: 'rampage-monoline', sans-serif;
36+
font-family: 'rampage-monoline', sans-serif;
2037
}
2138

2239
/* Header */
2340
header {
24-
background: #1e5c8f; /* Deep navy blue */
25-
color: #eef6fc; /* Light text */
26-
padding: 15px 20px;
27-
position: sticky; /* Sticks to the top when scrolling */
28-
top: 0;
29-
z-index: 1000; /* Stays above other elements */
30-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
41+
background: var(--primary-color);
42+
color: var(--text-light);
43+
padding: 15px 20px;
44+
position: sticky;
45+
top: 0;
46+
z-index: 1000;
47+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
48+
backdrop-filter: blur(10px);
49+
transition: all var(--transition-speed) ease;
3150
}
3251

3352
header nav ul li a img {
34-
width: 30px;
35-
height: 30px;
36-
margin-right: 4px;
37-
vertical-align: middle;
53+
width: 30px;
54+
height: 30px;
55+
margin-right: 4px;
56+
vertical-align: middle;
3857
}
3958

4059
nav ul {
41-
list-style: none; /* Removes default list styling */
42-
padding: 0;
43-
margin: 0;
44-
display: flex;
45-
justify-content: center; /* Centers navigation items */
60+
list-style: none;
61+
padding: 0;
62+
margin: 0;
63+
display: flex;
64+
justify-content: center;
4665
}
4766

4867
nav ul li {
49-
margin-right: 15px;
68+
margin-right: 15px;
5069
}
5170

5271
nav ul li a {
53-
font-family: 'rampage-monoline', sans-serif;
54-
font-size: 30px;
55-
color: #a9d3f5; /* Lighter blue */
56-
text-decoration: none;
57-
padding: 5px 10px;
58-
border-radius: 5px;
59-
transition: background 0.3s ease, transform 0.2s ease;
72+
font-family: 'rampage-monoline', sans-serif;
73+
font-size: 30px;
74+
color: #a9d3f5;
75+
text-decoration: none;
76+
display: flex;
77+
align-items: center;
78+
padding: 8px 16px;
79+
border-radius: 8px;
80+
transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
6081
}
6182

6283
nav ul li a:hover {
63-
background: #133653; /* Slightly darker blue */
64-
transform: scale(1.05);
84+
background: var(--nav-hover);
85+
transform: translateY(-2px);
86+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
6587
}
6688

6789
/* General Styling */
6890
body {
69-
font-family: 'roboto', sans-serif;
70-
margin: 0;
71-
padding: 0;
72-
line-height: 1.6;
73-
color: #001729; /* Light blue text */
74-
background: linear-gradient(to bottom, #6daae4, #175792, #571194); /* Gradient background */
91+
font-family: 'roboto', sans-serif;
92+
margin: 0;
93+
padding: 0;
94+
line-height: 1.6;
95+
color: var(--text-dark);
96+
background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-middle), var(--gradient-end));
7597
}
7698

7799
h1, h2, h3 {
78-
font-family: 'rampage-monoline', sans-serif;
79-
color: #eef6fc; /* Light text for headings */
80-
text-align: center;
100+
font-family: 'rampage-monoline', sans-serif;
101+
color: var(--text-light);
102+
text-align: center;
81103
}
82104

83105
/* Section Styling */
84106
section {
85-
padding: 40px 20px;
86-
margin: 20px auto;
87-
max-width: 60%; /* Centers section content */
88-
background: #414141; /* Medium blue */
89-
border-radius: 10px;
90-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
91-
color: #eef6fc;
92-
border-left: 3px solid #e7df69;
93-
transition: transform 0.3s ease;
107+
padding: 40px 20px;
108+
margin: 20px auto;
109+
max-width: 60%;
110+
background: var(--section-bg);
111+
backdrop-filter: blur(12px);
112+
border-radius: 10px;
113+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
114+
color: var(--text-light);
115+
border-left: 4px solid var(--accent-color);
116+
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
94117
}
95118

96119
section:hover {
@@ -99,51 +122,68 @@ section:hover {
99122

100123
/* Section Sizing */
101124
section.title {
102-
width: 30%;
125+
width: 30%;
103126
}
104127

105128
/* Buttons and Links */
106129
.button {
107-
display: inline-block;
108-
text-decoration: none;
109-
color: #eef6fc; /* Light blue text */
110-
background: #1b4e7e; /* Dark blue button */
111-
padding: 5px 10px;
112-
border-radius: 5px;
113-
cursor: pointer;
114-
transition: background 0.3s ease, transform 0.2s ease;
130+
display: inline-block;
131+
text-decoration: none;
132+
color: var(--text-light);
133+
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
134+
padding: 10px 20px;
135+
border-radius: 8px;
136+
cursor: pointer;
137+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
138+
transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
115139
}
116140

117141
.button:hover {
118-
background: #17456a; /* Slightly darker navy */
119-
transform: scale(1.05);
142+
transform: translateY(-2px);
143+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
120144
}
121145

122146
/* Footer */
123147
footer {
124-
text-align: center;
125-
padding: 15px 0;
126-
background: #366c99; /* Deep navy blue */
127-
color: #eef6fc;
148+
text-align: center;
149+
padding: 15px 0;
150+
background: #366c99;
151+
color: var(--text-light);
128152
}
129153

154+
/* Canvas */
130155
canvas {
131-
position: fixed;
132-
top: 0;
133-
left: 0;
156+
position: fixed;
157+
top: 0;
158+
left: 0;
134159
}
135160

136161
#bg1 {
137-
z-index: -1; /* Places canvas in the background */
138-
filter: blur(1px); /* Adds blur effect */
162+
z-index: -1;
163+
filter: blur(1px);
139164
}
140165

141-
/* Responsive Typography */
166+
/* Responsive Design */
142167
@media screen and (min-width: 500px) {
143-
h1 {
144-
font-size: 4rem;
145-
}
146-
h2 {
147-
font-size: 2rem;
148-
}
168+
h1 {
169+
font-size: 4rem;
170+
}
171+
h2 {
172+
font-size: 2rem;
173+
}
174+
}
175+
176+
@media screen and (max-width: 768px) {
177+
section {
178+
max-width: 90%;
179+
}
180+
181+
nav ul {
182+
flex-wrap: wrap;
183+
justify-content: space-around;
184+
}
185+
186+
nav ul li {
187+
margin: 5px;
188+
}
149189
}

‎assets/load/universal.js‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -167,19 +167,24 @@ let hexBokeh = {
167167

168168
// Wait for the DOM content to load and initialize HexBokeh
169169
window.addEventListener('DOMContentLoaded', () => {
170-
Object.create(hexBokeh).init({
171-
canvasSelector: '#bg1',
172-
radiusRange: [15, 80],
173-
colors: ['#571194', '#660066', '#000000', '#000099', '#193366'],
174-
pixelsPerBody: 20000,
175-
scrollVelocity: 0.01,
176-
airFriction: 0.05,
177-
opacity: 0.6
178-
});
170+
Object.create(hexBokeh).init({
171+
canvasSelector: '#bg1',
172+
radiusRange: [20, 90],
173+
colors: [
174+
'rgba(87, 17, 148, 0.6)', // Purple
175+
'rgba(30, 92, 143, 0.6)', // Blue
176+
'rgba(231, 223, 105, 0.4)', // Accent
177+
],
178+
pixelsPerBody: 25000,
179+
scrollVelocity: 0.015,
180+
airFriction: 0.04,
181+
opacity: 0.7
182+
});
179183
});
180184

181185

182186

187+
183188
// Get the text content from the element with ID "type"
184189
var string = document.getElementById("type").textContent;
185190
var array = string.split("");

0 commit comments

Comments
 (0)