Skip to content

Commit c95712d

Browse files
PkLavcPkLavc
committed
404 fix
1 parent efba76f commit c95712d

1 file changed

Lines changed: 278 additions & 6 deletions

File tree

‎404.html‎

Lines changed: 278 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,244 @@
3636
})();
3737
</script>
3838
<link rel="icon" type="image/png" href="/images/Lavc.png">
39-
<link rel="stylesheet" href="/css/global.css">
40-
<link rel="stylesheet" href="/css/index.css">
41-
<link rel="stylesheet" href="/css/404.css">
42-
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js" defer></script>
39+
<style>
40+
:root {
41+
--clr-primary: #00d1ff;
42+
--bg: #101114;
43+
--bg-elev: #171a20;
44+
--text: #f3f7fb;
45+
--text-muted: #c7d2df;
46+
--line: rgba(0, 209, 255, 0.22);
47+
}
48+
49+
* {
50+
box-sizing: border-box;
51+
margin: 0;
52+
padding: 0;
53+
}
54+
55+
html,
56+
body {
57+
min-height: 100%;
58+
}
59+
60+
body {
61+
font-family: "Inter", "Poppins", "Segoe UI", sans-serif;
62+
background: radial-gradient(1200px 700px at 80% -10%, rgba(0, 209, 255, 0.12), transparent 60%), var(--bg);
63+
color: var(--text);
64+
overflow-x: hidden;
65+
}
66+
67+
#all {
68+
min-height: 100vh;
69+
position: relative;
70+
}
71+
72+
#navigation-content {
73+
position: fixed;
74+
inset: 0;
75+
z-index: 1000;
76+
display: flex;
77+
align-items: center;
78+
justify-content: center;
79+
flex-direction: column;
80+
background: rgba(5, 8, 12, 0.96);
81+
transform: translateY(-100%);
82+
transition: transform 0.24s ease;
83+
pointer-events: none;
84+
}
85+
86+
#navigation-content.is-open {
87+
transform: translateY(0);
88+
pointer-events: auto;
89+
}
90+
91+
.navigation-links {
92+
display: flex;
93+
flex-direction: column;
94+
gap: 16px;
95+
align-items: center;
96+
}
97+
98+
.navigation-links a {
99+
color: #e8f8ff;
100+
text-decoration: none;
101+
letter-spacing: 0.04em;
102+
font-size: clamp(1.35rem, 2.3vw, 1.9rem);
103+
opacity: 0.88;
104+
transition: opacity 0.2s ease, color 0.2s ease;
105+
}
106+
107+
.navigation-links a:hover {
108+
opacity: 1;
109+
color: var(--clr-primary);
110+
}
111+
112+
#navigation-bar {
113+
position: fixed;
114+
top: 0;
115+
left: 0;
116+
width: 100%;
117+
height: 84px;
118+
z-index: 1100;
119+
}
120+
121+
.menubar {
122+
position: absolute;
123+
top: 24px;
124+
right: 26px;
125+
cursor: pointer;
126+
padding: 8px;
127+
opacity: 0.9;
128+
}
129+
130+
.menubar span {
131+
display: block;
132+
width: 38px;
133+
height: 2px;
134+
margin: 8px 0;
135+
border-radius: 2px;
136+
background: transparent;
137+
position: relative;
138+
}
139+
140+
.menubar span::before {
141+
content: "";
142+
position: absolute;
143+
top: 0;
144+
right: 0;
145+
height: 100%;
146+
background: var(--clr-primary);
147+
border-radius: 2px;
148+
}
149+
150+
.menubar .first-span::before { width: 52%; }
151+
.menubar .second-span::before { width: 76%; }
152+
.menubar .third-span::before { width: 100%; }
153+
154+
.menubar:hover .first-span::before,
155+
.menubar:hover .second-span::before {
156+
width: 100%;
157+
}
158+
159+
.error-page-main {
160+
min-height: 100vh;
161+
display: flex;
162+
align-items: center;
163+
justify-content: center;
164+
padding: 100px 20px 40px;
165+
}
166+
167+
.error-page-card {
168+
width: min(860px, 100%);
169+
text-align: center;
170+
padding: 40px 28px;
171+
border: 1px solid var(--line);
172+
border-radius: 18px;
173+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)), var(--bg-elev);
174+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
175+
}
176+
177+
.error-page-code {
178+
font-size: clamp(3.2rem, 8vw, 5.1rem);
179+
line-height: 1;
180+
color: var(--clr-primary);
181+
margin-bottom: 10px;
182+
}
183+
184+
.error-page-title {
185+
font-size: clamp(1.6rem, 4.5vw, 2.5rem);
186+
margin-bottom: 14px;
187+
}
188+
189+
.error-page-description {
190+
font-size: clamp(1rem, 2.5vw, 1.17rem);
191+
color: var(--text-muted);
192+
line-height: 1.7;
193+
margin-bottom: 24px;
194+
}
195+
196+
.error-page-actions {
197+
display: flex;
198+
flex-wrap: wrap;
199+
gap: 12px;
200+
justify-content: center;
201+
margin-bottom: 16px;
202+
}
203+
204+
.error-page-link {
205+
display: inline-flex;
206+
align-items: center;
207+
justify-content: center;
208+
border-radius: 9px;
209+
text-decoration: none;
210+
font-weight: 600;
211+
padding: 11px 18px;
212+
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
213+
}
214+
215+
.error-page-link-primary {
216+
background: var(--clr-primary);
217+
color: #04202a;
218+
}
219+
220+
.error-page-link-secondary {
221+
border: 1px solid var(--clr-primary);
222+
color: var(--clr-primary);
223+
background: rgba(0, 209, 255, 0.08);
224+
}
225+
226+
.error-page-link:hover {
227+
transform: translateY(-1px);
228+
box-shadow: 0 8px 22px rgba(0, 209, 255, 0.18);
229+
}
230+
231+
.error-page-help {
232+
color: #99a9bb;
233+
font-size: 0.96rem;
234+
}
235+
236+
.error-page-social {
237+
display: flex;
238+
flex-wrap: wrap;
239+
justify-content: center;
240+
gap: 10px;
241+
margin: 4px 0 18px;
242+
}
243+
244+
.error-page-social-link {
245+
display: inline-flex;
246+
align-items: center;
247+
justify-content: center;
248+
min-width: 110px;
249+
padding: 9px 12px;
250+
border: 1px solid rgba(0, 209, 255, 0.45);
251+
border-radius: 8px;
252+
color: #cfefff;
253+
text-decoration: none;
254+
font-weight: 600;
255+
font-size: 0.93rem;
256+
background: rgba(0, 209, 255, 0.08);
257+
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
258+
}
259+
260+
.error-page-social-link:hover {
261+
transform: translateY(-1px);
262+
border-color: #00d1ff;
263+
box-shadow: 0 8px 20px rgba(0, 209, 255, 0.18);
264+
}
265+
266+
@media (max-width: 600px) {
267+
.error-page-card {
268+
padding: 28px 18px;
269+
}
270+
271+
.menubar {
272+
right: 14px;
273+
top: 15px;
274+
}
275+
}
276+
</style>
43277
</head>
44278
<body>
45279
<div id="all">
@@ -65,13 +299,51 @@ <h2 class="error-page-title">Page Not Found</h2>
65299
<p class="error-page-description">The page you are looking for may have been removed, had its name changed, or is temporarily unavailable. Return to the portfolio to explore systems architecture, API integration, and intelligent automation solutions.</p>
66300
<div class="error-page-actions">
67301
<a href="/index.html" class="error-page-link error-page-link-primary">Back to Home</a>
302+
<a href="/about/" class="error-page-link error-page-link-secondary">About</a>
68303
<a href="/projects/" class="error-page-link error-page-link-secondary">View Projects</a>
69304
</div>
305+
<div class="error-page-social" aria-label="Contact links">
306+
<a class="error-page-social-link" href="https://github.com/PkLavc" target="_blank" rel="noopener noreferrer">GitHub</a>
307+
<a class="error-page-social-link" href="https://www.linkedin.com/in/patrickajm/" target="_blank" rel="noopener noreferrer">LinkedIn</a>
308+
<a class="error-page-social-link" href="mailto:patrickajm@gmail.com">Email</a>
309+
</div>
70310
<p class="error-page-help">If you entered the URL manually, please check the spelling and try again.</p>
71311
</section>
72312
</main>
73313
</div>
74-
<script src="/js/jquery.min.js" defer></script>
75-
<script src="/js/index.js" defer></script>
314+
<script>
315+
(function() {
316+
var nav = document.getElementById('navigation-content');
317+
var menu = document.querySelector('.menubar');
318+
319+
if (!nav || !menu) {
320+
return;
321+
}
322+
323+
function closeMenu() {
324+
nav.classList.remove('is-open');
325+
}
326+
327+
menu.addEventListener('click', function(event) {
328+
event.preventDefault();
329+
event.stopPropagation();
330+
nav.classList.toggle('is-open');
331+
});
332+
333+
document.addEventListener('click', function(event) {
334+
if (!nav.classList.contains('is-open')) {
335+
return;
336+
}
337+
338+
if (!nav.contains(event.target) && !menu.contains(event.target)) {
339+
closeMenu();
340+
}
341+
});
342+
343+
nav.querySelectorAll('a').forEach(function(link) {
344+
link.addEventListener('click', closeMenu);
345+
});
346+
})();
347+
</script>
76348
</body>
77349
</html>

0 commit comments

Comments
 (0)