Skip to content

Commit c052bf5

Browse files
PkLavcPkLavc
committed
fix speed css
1 parent 14d9ff9 commit c052bf5

8 files changed

Lines changed: 652 additions & 194 deletions

File tree

‎404.html‎

Lines changed: 75 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
<link rel="canonical" href="https://pklavc.github.io/404.html">
2323
<link rel="icon" type="image/png" href="images/Lavc.png">
2424
<link rel="stylesheet" href="css/global.css">
25-
<link rel="stylesheet" href="css/color-blue.css">
2625
<link rel="stylesheet" href="css/index.css">
26+
<link rel="stylesheet" href="css/404.css">
2727
</head>
2828
<body>
2929
<div id="all">
@@ -42,18 +42,82 @@
4242
<span class="third-span"></span>
4343
</div>
4444
</div>
45-
<main role="main" style="min-height: calc(100vh - 110px); display: flex; align-items: center; justify-content: center; padding: 80px 20px;">
46-
<section style="max-width: 780px; width: 100%; text-align: center; color: whitesmoke;">
47-
<h1 style="font-size: 4rem; margin-bottom: 0.5rem; letter-spacing: -1px;">404</h1>
48-
<h2 style="font-size: 2rem; margin-bottom: 1rem; color: #c0c0c0; font-weight: 500;">Page Not Found</h2>
49-
<p style="font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.75rem; color: #b5b5b5;">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>
50-
<div style="display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;">
51-
<a href="index.html" style="background: var(--clr-primary); color: #000; padding: 14px 24px; border-radius: 999px; text-decoration: none; font-weight: 700;">Back to Home</a>
52-
<a href="projects.html" style="border: 1px solid var(--clr-primary); color: var(--clr-primary); padding: 14px 24px; border-radius: 999px; text-decoration: none;">View Projects</a>
45+
<main role="main" class="error-page-main">
46+
<section class="error-page-card">
47+
<h1 class="error-page-code">404</h1>
48+
<h2 class="error-page-title">Page Not Found</h2>
49+
<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>
50+
<div class="error-page-actions">
51+
<a href="index.html" class="error-page-link error-page-link-primary">Back to Home</a>
52+
<a href="projects.html" class="error-page-link error-page-link-secondary">View Projects</a>
5353
</div>
54-
<p style="margin-top: 2rem; color: #888;">If you entered the URL manually, please check the spelling and try again.</p>
54+
<p class="error-page-help">If you entered the URL manually, please check the spelling and try again.</p>
5555
</section>
5656
</main>
5757
</div>
5858
</body>
59-
</html>
59+
</html>
60+
*** Add File: d:\Projects\PkLavc.github.io\css\404.css
61+
.error-page-main {
62+
min-height: calc(100vh - 110px);
63+
display: flex;
64+
align-items: center;
65+
justify-content: center;
66+
padding: 80px 20px;
67+
}
68+
69+
.error-page-card {
70+
max-width: 780px;
71+
width: 100%;
72+
text-align: center;
73+
color: whitesmoke;
74+
}
75+
76+
.error-page-code {
77+
font-size: 4rem;
78+
margin-bottom: 0.5rem;
79+
letter-spacing: -1px;
80+
}
81+
82+
.error-page-title {
83+
font-size: 2rem;
84+
margin-bottom: 1rem;
85+
color: #c0c0c0;
86+
font-weight: 500;
87+
}
88+
89+
.error-page-description {
90+
font-size: 1.1rem;
91+
line-height: 1.8;
92+
margin-bottom: 1.75rem;
93+
color: #b5b5b5;
94+
}
95+
96+
.error-page-actions {
97+
display: flex;
98+
gap: 16px;
99+
flex-wrap: wrap;
100+
justify-content: center;
101+
}
102+
103+
.error-page-link {
104+
padding: 14px 24px;
105+
border-radius: 999px;
106+
text-decoration: none;
107+
}
108+
109+
.error-page-link-primary {
110+
background: var(--clr-primary);
111+
color: #000;
112+
font-weight: 700;
113+
}
114+
115+
.error-page-link-secondary {
116+
border: 1px solid var(--clr-primary);
117+
color: var(--clr-primary);
118+
}
119+
120+
.error-page-help {
121+
margin-top: 2rem;
122+
color: #888;
123+
}

‎about.html‎

Lines changed: 326 additions & 109 deletions
Large diffs are not rendered by default.

‎css/about.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ body {
44
line-height: 1.7;
55
font-size: 16px;
66
}
7+
8+
#about {
9+
display: block;
10+
width: 100%;
11+
overflow: hidden;
12+
}
13+
714
#about-content {
815
display: flex;
916
flex-direction: row;
@@ -32,6 +39,8 @@ body {
3239
}
3340
.skills-section {
3441
margin-top: 30px;
42+
content-visibility: auto;
43+
contain-intrinsic-size: 1px 420px;
3544
}
3645
.skills-title {
3746
font-size: 1.2rem;
@@ -115,6 +124,14 @@ body {
115124
margin-bottom: 20px;
116125
color: #ffffff;
117126
}
127+
128+
.section-heading-icon {
129+
width: 20px;
130+
height: 20px;
131+
display: inline-block;
132+
vertical-align: middle;
133+
margin-right: 8px;
134+
}
118135
.skills-grid {
119136
display: flex;
120137
flex-wrap: wrap;
@@ -133,6 +150,25 @@ body {
133150
display: flex;
134151
justify-content: center;
135152
}
153+
154+
.cursor {
155+
height: 50px;
156+
width: 50px;
157+
display: block;
158+
border-radius: 50%;
159+
border: 1px solid whitesmoke;
160+
background: transparent;
161+
pointer-events: none;
162+
position: fixed;
163+
top: 0;
164+
left: 0;
165+
z-index: 10;
166+
opacity: 0.6;
167+
transform: translate(-25px, -25px);
168+
transition: transform 0.12s ease, opacity 0.2s ease;
169+
will-change: transform;
170+
}
171+
136172
.img-border {
137173
padding: 15px;
138174
border: 2px solid var(--clr-primary);
@@ -436,6 +472,8 @@ body {
436472
width: 100%;
437473
max-width: 600px;
438474
overflow: hidden;
475+
content-visibility: auto;
476+
contain-intrinsic-size: 1px 180px;
439477
}
440478

441479
.brands-section h2,
@@ -516,6 +554,11 @@ body {
516554
display: block;
517555
}
518556

557+
.contact-item-icon {
558+
width: 42px;
559+
height: 42px;
560+
}
561+
519562
.contact-item span {
520563
font-size: 1rem;
521564
font-weight: 500;
@@ -574,4 +617,10 @@ body {
574617
.copy-btn.copied span {
575618
color: #031018 !important;
576619
-webkit-text-fill-color: #031018 !important;
620+
}
621+
622+
@media (pointer: coarse), (max-width: 768px) {
623+
.cursor {
624+
display: none;
625+
}
577626
}

‎css/global.css‎

Lines changed: 103 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
/* Global styles: Reset, Typography, Variables, Header, Footer */
2-
@import url('https://fonts.googleapis.com/css?family=Raleway:300&display=swap');
3-
@import url('https://fonts.googleapis.com/css?family=Monoton&display=swap');
4-
@import url('https://fonts.googleapis.com/css?family=Poppins:500&display=swap');
52

63
:root{
74
/* default theme variables (can be overridden by theme files like color-blue.css) */
8-
--clr-primary: #c70039;
9-
--clr-primary-variant: #9a002c;
5+
--clr-primary: #00d1ff;
6+
--clr-primary-variant: #00a8cc;
107
}
118

129
/* Reset */
@@ -40,7 +37,10 @@ input::-webkit-inner-spin-button {
4037
margin: 0;
4138
}
4239
/* Firefox number input */
43-
input[type=number] { -moz-appearance: textfield; }
40+
input[type=number] {
41+
appearance: textfield;
42+
-moz-appearance: textfield;
43+
}
4444

4545
/* Base layout */
4646
html{ background: #101010; }
@@ -110,6 +110,16 @@ body.ready .footer-minimal {
110110
align-items: center;
111111
justify-content: center;
112112
will-change: transform;
113+
visibility: hidden;
114+
pointer-events: none;
115+
transition: transform 0.24s ease, visibility 0s linear 0.24s;
116+
}
117+
118+
#navigation-content.is-open {
119+
transform: translateY(0);
120+
visibility: visible;
121+
pointer-events: auto;
122+
transition: transform 0.24s ease;
113123
}
114124

115125
#navigation-bar{ position: fixed; height: 100px; width: 100%; z-index: 9999; padding: 10px; background:transparent; overflow: hidden; }
@@ -183,6 +193,93 @@ body.ready .footer-minimal {
183193
/* small helpers */
184194
.color{ color: var(--clr-primary); transition: all .4s ease; }
185195

196+
.cv a button, button, .btn {
197+
background: var(--clr-primary) !important;
198+
color: #000 !important;
199+
}
200+
201+
.credits-trigger {
202+
background: none !important;
203+
color: var(--clr-primary-variant) !important;
204+
}
205+
206+
.lordicon-credit {
207+
color: #555;
208+
text-decoration: none;
209+
transition: color 0.3s ease;
210+
margin-left: 5px;
211+
}
212+
213+
.lordicon-credit:hover {
214+
color: var(--clr-primary, #00d1ff);
215+
}
216+
217+
.footer-minimal {
218+
padding: 30px 0;
219+
text-align: center;
220+
border-top: 1px solid rgba(255,255,255,0.05);
221+
}
222+
223+
.footer-minimal p {
224+
font-size: 13px;
225+
color: #666;
226+
}
227+
228+
.credits-trigger {
229+
background: none;
230+
border: none;
231+
padding: 0;
232+
font: inherit;
233+
color: var(--clr-primary-variant);
234+
cursor: pointer;
235+
text-decoration: underline;
236+
transition: color 0.3s;
237+
}
238+
239+
.credits-trigger:hover {
240+
color: var(--clr-primary);
241+
}
242+
243+
.credits-hidden {
244+
display: none;
245+
margin-top: 15px;
246+
animation: fadeIn 0.5s ease;
247+
}
248+
249+
.credits-grid {
250+
display: flex;
251+
justify-content: center;
252+
gap: 15px;
253+
flex-wrap: wrap;
254+
}
255+
256+
.credits-grid a {
257+
font-size: 11px;
258+
color: #444;
259+
text-decoration: none;
260+
}
261+
262+
.credits-grid a:hover {
263+
color: var(--clr-primary);
264+
}
265+
266+
.visually-hidden {
267+
position: absolute;
268+
width: 1px;
269+
height: 1px;
270+
padding: 0;
271+
margin: -1px;
272+
overflow: hidden;
273+
clip: rect(0, 0, 0, 0);
274+
white-space: nowrap;
275+
border: 0;
276+
}
277+
278+
@keyframes fadeIn {
279+
from { opacity: 0; }
280+
to { opacity: 1; }
281+
}
282+
186283
/* Particles Fallback Styles */
187284
.particles-fallback {
188285
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;

‎css/index.css‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
100%{ transform: translateX(100%); }
1616
}
1717
.color{
18-
color: #c70039;
18+
color: var(--clr-primary);
1919
transition: all .4s ease;
2020
}
2121
#about{
@@ -126,6 +126,24 @@
126126
opacity: 1;
127127
transform: scale(1.05);
128128
}
129+
130+
.main-info {
131+
margin: 0;
132+
font-weight: inherit;
133+
font-size: inherit;
134+
line-height: inherit;
135+
}
136+
137+
.social-media-icon {
138+
width: 42px;
139+
height: 42px;
140+
}
141+
142+
.contactpic-lottie {
143+
width: 35px;
144+
height: 35px;
145+
}
146+
129147
.cursor{
130148
height: 50px;
131149
width: 50px;

0 commit comments

Comments
 (0)