Skip to content

Commit b0ee2e4

Browse files
SCodeGitSCodeGit
authored
Update style.css
1 parent 9bdf022 commit b0ee2e4

File tree

1 file changed

+71
-83
lines changed

1 file changed

+71
-83
lines changed

‎style.css‎

Lines changed: 71 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
/* Root theme colors */
22
:root {
3-
--royal-blue: #1a73e8;
4-
--gold: #f7c948;
5-
--dark-navy: #0b132b;
6-
--white: #ffffff;
7-
--light-gray: #f5f6fa;
8-
--text-dark: #202124;
9-
--text-light: #f9fafc;
3+
--neon-green: #00ff9f;
4+
--dark-bg: #0a0f0f;
5+
--deep-gray: #101616;
6+
--terminal-green: #00ff80;
7+
--accent-blue: #00bcd4;
8+
--accent-purple: #7b61ff;
9+
--white: #f5f5f5;
10+
--text-dark: #c9d1d9;
1011
--radius: 12px;
1112
}
1213

@@ -16,18 +17,19 @@
1617
padding: 0;
1718
box-sizing: border-box;
1819
}
20+
1921
body {
20-
font-family: 'Poppins', system-ui, -apple-system, sans-serif;
21-
background: var(--light-gray);
22+
font-family: 'Poppins', system-ui, sans-serif;
23+
background: var(--dark-bg);
2224
color: var(--text-dark);
2325
transition: background 0.4s ease, color 0.4s ease;
2426
line-height: 1.6;
2527
}
2628

27-
/* Dark mode */
28-
body.dark {
29-
background: var(--dark-navy);
30-
color: var(--text-light);
29+
/* Optional light mode */
30+
body.light {
31+
background: #f5f6fa;
32+
color: #202124;
3133
}
3234

3335
/* Container */
@@ -45,26 +47,26 @@ body.dark {
4547
width: 44px;
4648
height: 44px;
4749
border-radius: 50%;
48-
background: var(--royal-blue);
49-
color: var(--white);
50+
background: var(--neon-green);
51+
color: var(--dark-bg);
5052
display: flex;
5153
align-items: center;
5254
justify-content: center;
5355
font-size: 1.3rem;
5456
cursor: pointer;
5557
z-index: 1000;
56-
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
58+
box-shadow: 0 0 15px var(--neon-green);
5759
}
5860
.theme-toggle:hover {
59-
background: var(--gold);
60-
color: var(--dark-navy);
61+
background: var(--accent-blue);
62+
color: var(--white);
6163
}
6264

6365
/* Hero */
6466
.hero-outer {
65-
background: linear-gradient(135deg, var(--royal-blue), var(--gold));
66-
color: var(--white);
67-
padding: 80px 0 50px;
67+
background: radial-gradient(circle at center, #001a12, #000);
68+
color: var(--neon-green);
69+
padding: 90px 0 60px;
6870
text-align: center;
6971
position: relative;
7072
overflow: hidden;
@@ -80,25 +82,22 @@ body.dark {
8082
height: 130px;
8183
border-radius: 50%;
8284
object-fit: cover;
83-
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
85+
box-shadow: 0 0 20px var(--neon-green);
8486
}
8587
.name {
86-
font-size: 2.5rem;
88+
font-size: 2.6rem;
8789
font-weight: 700;
8890
letter-spacing: 1px;
91+
text-shadow: 0 0 12px var(--neon-green);
8992
}
9093
.tagline {
9194
font-size: 1rem;
92-
color: #fefefe;
95+
color: var(--white);
9396
opacity: 0.9;
9497
margin-bottom: 1rem;
9598
}
96-
.hero-cta {
97-
display: flex;
98-
flex-wrap: wrap;
99-
justify-content: center;
100-
gap: 12px;
101-
}
99+
100+
/* Buttons */
102101
.btn {
103102
display: inline-flex;
104103
align-items: center;
@@ -112,60 +111,62 @@ body.dark {
112111
transition: all 0.3s ease;
113112
}
114113
.btn.primary {
115-
background: var(--gold);
116-
color: var(--dark-navy);
114+
background: var(--neon-green);
115+
color: var(--dark-bg);
116+
box-shadow: 0 0 10px var(--neon-green);
117117
}
118118
.btn.primary:hover {
119-
background: #ffe082;
119+
background: var(--accent-blue);
120+
color: var(--white);
121+
box-shadow: 0 0 15px var(--accent-blue);
120122
}
121123
.btn.ghost {
124+
border: 2px solid var(--neon-green);
125+
color: var(--neon-green);
122126
background: transparent;
123-
border: 2px solid var(--white);
124-
color: var(--white);
125127
}
126128
.btn.ghost:hover {
127-
background: rgba(255,255,255,0.15);
129+
background: rgba(0, 255, 159, 0.1);
130+
box-shadow: 0 0 15px var(--neon-green);
128131
}
129132

130-
/* Section styling */
133+
/* Sections */
131134
.section {
132135
padding: 60px 0;
133136
}
134137
.section h2 {
135138
font-size: 1.8rem;
136-
color: var(--royal-blue);
139+
color: var(--neon-green);
137140
margin-bottom: 20px;
138141
text-align: center;
142+
text-shadow: 0 0 12px var(--neon-green);
139143
}
140144
.section p {
141145
text-align: center;
142146
max-width: 800px;
143147
margin: 0 auto;
144148
color: var(--text-dark);
145149
}
146-
body.dark .section p {
147-
color: var(--text-light);
148-
}
149150

150-
/* Projects */
151+
/* Project Cards */
151152
.projects-grid {
152153
margin-top: 30px;
153154
display: grid;
154155
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
155156
gap: 20px;
156157
}
157158
.project-card {
158-
background: var(--white);
159+
background: var(--deep-gray);
159160
border-radius: var(--radius);
160161
overflow: hidden;
161-
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
162+
box-shadow: 0 0 15px rgba(0, 255, 159, 0.1);
162163
transition: transform 0.3s ease, box-shadow 0.3s ease;
163164
text-decoration: none;
164165
color: var(--text-dark);
165166
}
166167
.project-card:hover {
167168
transform: translateY(-6px);
168-
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
169+
box-shadow: 0 0 20px var(--neon-green);
169170
}
170171
.project-card img {
171172
width: 100%;
@@ -177,54 +178,52 @@ body.dark .section p {
177178
}
178179
.project-body h3 {
179180
margin-bottom: 8px;
180-
color: var(--royal-blue);
181+
color: var(--neon-green);
181182
}
182183

183-
/* Contact section */
184+
/* Contact */
184185
.contact-grid {
185186
display: grid;
186187
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
187188
gap: 20px;
188189
margin-top: 20px;
189190
}
190191
.contact-card {
191-
background: var(--white);
192+
background: var(--deep-gray);
192193
border-radius: var(--radius);
193194
padding: 20px;
194-
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
195-
}
196-
body.dark .contact-card {
197-
background: #1b2437;
195+
box-shadow: 0 0 10px rgba(0,255,159,0.1);
198196
}
199197
.contact-card h3 {
200-
color: var(--royal-blue);
201-
margin-bottom: 12px;
198+
color: var(--accent-blue);
202199
}
203200
.contact-card a {
204-
color: var(--royal-blue);
201+
color: var(--neon-green);
205202
text-decoration: none;
206203
}
207204
.contact-card a:hover {
208205
text-decoration: underline;
209206
}
207+
208+
/* Inputs */
210209
input, textarea {
211210
width: 100%;
212211
padding: 10px;
213212
margin-bottom: 10px;
214-
border: 1px solid #ccc;
213+
border: 1px solid var(--accent-blue);
215214
border-radius: var(--radius);
216215
font-family: inherit;
217-
}
218-
button.btn.primary {
219-
width: 100%;
216+
background: #0f1a1a;
217+
color: var(--neon-green);
220218
}
221219

222220
/* Footer */
223221
.footer {
224-
background: linear-gradient(90deg, var(--royal-blue), var(--gold));
225-
color: var(--white);
222+
background: linear-gradient(90deg, #001a12, #000);
223+
color: var(--neon-green);
226224
padding: 20px 0;
227225
margin-top: 40px;
226+
border-top: 1px solid var(--neon-green);
228227
}
229228
.footer-inner {
230229
display: flex;
@@ -234,32 +233,21 @@ button.btn.primary {
234233
gap: 12px;
235234
}
236235
.footer .dev-link {
237-
color: var(--white);
236+
color: var(--neon-green);
238237
font-weight: 700;
239238
text-decoration: none;
240239
position: relative;
241240
}
242-
.footer .dev-link::after {
243-
content: "";
244-
position: absolute;
245-
bottom: -3px;
246-
left: 0;
247-
width: 0;
248-
height: 2px;
249-
background: var(--white);
250-
transition: width 0.3s ease;
251-
}
252-
.footer .dev-link:hover::after {
253-
width: 100%;
241+
.footer .dev-link:hover {
242+
color: var(--accent-blue);
254243
}
255244
.social-links a {
256-
color: var(--white);
245+
color: var(--neon-green);
257246
margin-left: 12px;
258247
text-decoration: none;
259-
transition: opacity 0.3s ease;
260248
}
261249
.social-links a:hover {
262-
opacity: 0.8;
250+
color: var(--accent-blue);
263251
}
264252

265253
/* Back to top */
@@ -270,22 +258,22 @@ button.btn.primary {
270258
width: 46px;
271259
height: 46px;
272260
border-radius: 50%;
273-
background: var(--royal-blue);
274-
color: var(--white);
261+
background: var(--neon-green);
262+
color: var(--dark-bg);
275263
border: none;
276264
cursor: pointer;
277265
display: none;
278266
align-items: center;
279267
justify-content: center;
280268
font-size: 1.3rem;
281-
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
269+
box-shadow: 0 0 15px var(--neon-green);
282270
}
283271
#topBtn:hover {
284-
background: var(--gold);
285-
color: var(--dark-navy);
272+
background: var(--accent-blue);
273+
color: var(--white);
286274
}
287275

288-
/* Reveal animation */
276+
/* Reveal */
289277
.reveal {
290278
opacity: 0;
291279
transform: translateY(18px);

0 commit comments

Comments
 (0)