Skip to content

Commit 16aaa26

Browse files
Code-JLCode-JL
committed
Updated css styling for each project.
1 parent 3b05cbf commit 16aaa26

File tree

7 files changed

+511
-196
lines changed

7 files changed

+511
-196
lines changed

‎projects/ai_page_summary/about.css‎

Lines changed: 93 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,114 @@
1+
:root {
2+
--primary-blue: #1b4e7e;
3+
--highlight-yellow: #e7df69;
4+
--visited-orange: #dfa843;
5+
--text-light: #eef6fc;
6+
--code-bg: #2a2a2a;
7+
--gallery-bg: rgba(255, 255, 255, 0.05);
8+
--shadow: rgba(0, 0, 0, 0.2);
9+
--transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
10+
}
11+
112
/* Project Styling */
213
.project img {
314
width: 70%;
4-
border-radius: 5px;
15+
border-radius: 8px;
516
margin-bottom: 15px;
17+
transition: transform var(--transition-smooth);
18+
}
19+
20+
.project img:hover {
21+
transform: scale(1.02);
622
}
723

824
/* Technology Badges */
925
.tech-grid {
1026
display: flex;
1127
flex-wrap: wrap;
12-
gap: 10px;
28+
gap: 12px;
1329
justify-content: center;
1430
margin: 20px 0;
1531
}
1632

1733
.tech-badge {
18-
background: #1b4e7e;
19-
color: #eef6fc;
20-
padding: 8px 16px;
34+
background: var(--primary-blue);
35+
color: var(--text-light);
36+
padding: 10px 20px;
2137
border-radius: 20px;
2238
font-size: 16px;
23-
border: 2px solid #e7df69;
39+
border: 2px solid var(--highlight-yellow);
40+
transition: transform var(--transition-smooth);
41+
}
42+
43+
.tech-badge:hover {
44+
transform: translateY(-2px);
2445
}
2546

2647
/* Code Blocks */
2748
pre {
28-
background: #2a2a2a;
29-
padding: 15px;
30-
border-radius: 5px;
49+
background: var(--code-bg);
50+
padding: 20px;
51+
border-radius: 8px;
3152
overflow-x: auto;
32-
border-left: 3px solid #e7df69;
33-
margin: 15px 0;
53+
border-left: 3px solid var(--highlight-yellow);
54+
margin: 20px 0;
3455
}
3556

3657
code {
37-
color: #e7df69;
58+
color: var(--highlight-yellow);
3859
font-family: 'Consolas', monospace;
3960
}
4061

4162
/* Typography */
42-
li, p {
43-
font-size: 18px;
44-
}
45-
46-
h1 {
47-
font-size: 85px;
63+
li, p { font-size: clamp(16px, 2vw, 18px); }
64+
h1 { font-size: clamp(3rem, 8vw, 85px); }
65+
h2 { font-size: clamp(2rem, 6vw, 55px); }
66+
h3 {
67+
font-size: clamp(1.5rem, 4vw, 40px);
68+
text-align: left;
4869
}
4970

50-
h2 {
51-
font-size: 55px;
71+
/* Contact Section */
72+
section#contact p a {
73+
display: inline-flex;
74+
align-items: center;
75+
font-family: 'rampage-monoline', sans-serif;
76+
font-size: 30px;
77+
color: var(--highlight-yellow);
78+
transition: transform var(--transition-smooth);
5279
}
5380

54-
h3 {
55-
font-size: 40px;
56-
text-align: left;
81+
section#contact p a:hover {
82+
transform: translateX(10px);
5783
}
5884

59-
/* Contact Section */
6085
section#contact p a img {
6186
width: 50px;
6287
height: 50px;
63-
margin-right: 8px;
88+
margin-right: 12px;
6489
vertical-align: middle;
90+
transition: transform var(--transition-smooth);
6591
}
6692

67-
section#contact p a {
68-
font-family: 'rampage-monoline', sans-serif;
69-
font-size: 30px;
70-
color: #e7df69;
93+
section#contact p a:hover img {
94+
transform: rotate(5deg);
7195
}
7296

7397
section#contact p a:visited {
74-
color: #dfa843;
98+
color: var(--visited-orange);
7599
}
76100

101+
/* Gallery Styling */
77102
.project-gallery {
78-
margin: 2rem 0;
103+
width: 80%;
104+
margin: 2rem auto;
79105
padding: 2rem;
80-
background: rgba(255, 255, 255, 0.05);
81-
border-radius: 8px;
106+
background: var(--gallery-bg);
107+
border-radius: 12px;
108+
backdrop-filter: blur(8px);
82109
}
83110

111+
84112
.gallery {
85113
display: grid;
86114
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -91,30 +119,56 @@ section#contact p a:visited {
91119
.gallery-item {
92120
position: relative;
93121
margin: 0;
94-
transition: transform 0.3s ease;
122+
transition: transform var(--transition-smooth);
95123
}
96124

97125
.gallery-item:hover {
98-
transform: scale(1.02);
126+
transform: scale(1.03);
99127
}
100128

101129
.gallery-image {
102130
width: 100%;
103131
height: auto;
104-
border-radius: 6px;
105-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
132+
border-radius: 8px;
133+
box-shadow: 0 4px 12px var(--shadow);
106134
}
107135

108136
figcaption {
109137
margin-top: 1rem;
110138
text-align: center;
111139
font-size: 0.9rem;
112-
color: #ccc;
140+
color: var(--text-light);
141+
opacity: 0.8;
113142
}
114143

115-
/* Responsive adjustments */
144+
/* Responsive Design */
116145
@media (max-width: 768px) {
117146
.gallery {
118147
grid-template-columns: 1fr;
119148
}
149+
150+
.tech-grid {
151+
gap: 8px;
152+
}
153+
154+
.tech-badge {
155+
padding: 8px 16px;
156+
font-size: 14px;
157+
}
158+
}
159+
160+
/* Animation */
161+
.gallery-item, .tech-badge {
162+
animation: fadeIn 0.6s ease-out;
163+
}
164+
165+
@keyframes fadeIn {
166+
from {
167+
opacity: 0;
168+
transform: translateY(10px);
169+
}
170+
to {
171+
opacity: 1;
172+
transform: translateY(0);
173+
}
120174
}

‎projects/dna_sequence_analyzer/about.css‎

Lines changed: 58 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
1-
/* Project Styling */
1+
:root {
2+
--primary-blue: #1b4e7e;
3+
--highlight-yellow: #e7df69;
4+
--visited-orange: #dfa843;
5+
--text-light: #eef6fc;
6+
--code-bg: #2a2a2a;
7+
}
8+
9+
/* Project Styling - keeping your original structure with enhancements */
210
.project img {
311
width: 70%;
412
border-radius: 5px;
5-
margin-bottom: 15px;
13+
margin: 15px auto;
14+
display: block;
15+
transition: transform 0.3s ease;
616
}
717

8-
/* Technology Badges */
18+
.project img:hover {
19+
transform: scale(1.02);
20+
}
21+
22+
/* Technology Badges - preserving your layout */
923
.tech-grid {
1024
display: flex;
1125
flex-wrap: wrap;
@@ -15,30 +29,36 @@
1529
}
1630

1731
.tech-badge {
18-
background: #1b4e7e;
19-
color: #eef6fc;
32+
background: var(--primary-blue);
33+
color: var(--text-light);
2034
padding: 8px 16px;
2135
border-radius: 20px;
2236
font-size: 16px;
23-
border: 2px solid #e7df69;
37+
border: 2px solid var(--highlight-yellow);
38+
transition: transform 0.3s ease;
39+
}
40+
41+
.tech-badge:hover {
42+
transform: translateY(-2px);
2443
}
2544

26-
/* Code Blocks */
45+
/* Code Blocks - maintaining your styling */
2746
pre {
28-
background: #2a2a2a;
47+
background: var(--code-bg);
2948
padding: 15px;
3049
border-radius: 5px;
3150
overflow-x: auto;
32-
border-left: 3px solid #e7df69;
33-
margin: 15px 0;
51+
border-left: 3px solid var(--highlight-yellow);
52+
margin: 15px auto;
53+
width: 90%;
3454
}
3555

3656
code {
37-
color: #e7df69;
57+
color: var(--highlight-yellow);
3858
font-family: 'Consolas', monospace;
3959
}
4060

41-
/* Typography */
61+
/* Typography - keeping your sizes */
4262
li, p {
4363
font-size: 18px;
4464
}
@@ -56,7 +76,7 @@ h3 {
5676
text-align: left;
5777
}
5878

59-
/* Contact Section */
79+
/* Contact Section - preserving your styling */
6080
section#contact p a img {
6181
width: 50px;
6282
height: 50px;
@@ -67,14 +87,21 @@ section#contact p a img {
6787
section#contact p a {
6888
font-family: 'rampage-monoline', sans-serif;
6989
font-size: 30px;
70-
color: #e7df69;
90+
color: var(--highlight-yellow);
91+
display: inline-flex;
92+
align-items: center;
93+
transition: transform 0.3s ease;
7194
}
7295

73-
section#contact p a:visited {
74-
color: #dfa843;
96+
section#contact p a:hover {
97+
transform: translateX(10px);
7598
}
7699

100+
section#contact p a:visited {
101+
color: var(--visited-orange);
102+
}
77103

104+
/* Project Gallery - keeping your structure */
78105
.project-gallery {
79106
margin: 2rem 0;
80107
padding: 2rem;
@@ -113,9 +140,23 @@ figcaption {
113140
color: #ccc;
114141
}
115142

143+
/* Center content sections */
144+
.project, section#contact {
145+
width: 80%;
146+
margin: 2rem auto;
147+
}
148+
116149
/* Responsive adjustments */
117150
@media (max-width: 768px) {
118151
.gallery {
119152
grid-template-columns: 1fr;
120153
}
121-
}
154+
155+
.project, section#contact {
156+
width: 90%;
157+
}
158+
159+
h1 { font-size: clamp(3rem, 8vw, 85px); }
160+
h2 { font-size: clamp(2rem, 6vw, 55px); }
161+
h3 { font-size: clamp(1.5rem, 4vw, 40px); }
162+
}

‎projects/header.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
11
<nav role="navigation" aria-label="Main navigation">
22
<ul role="menubar">
33
<li role="none">
4-
<a href="home.html" role="menuitem" aria-label="Home">
4+
<a href="../../assets/home.html" role="menuitem" aria-label="Home">
55
<img src="../../images/home.png" alt="" aria-hidden="true"> Home
66
</a>
77
</li>
88
<li role="none">
9-
<a href="about.html" role="menuitem" aria-label="About">
9+
<a href="../../assets/about.html" role="menuitem" aria-label="About">
1010
<img src="../../images/about.png" alt="" aria-hidden="true"> About
1111
</a>
1212
</li>
1313
<li role="none">
14-
<a href="projects.html" role="menuitem" aria-label="Projects">
14+
<a href="../../assets/projects.html" role="menuitem" aria-label="Projects">
1515
<img src="../../images/projects.png" alt="" aria-hidden="true"> Projects
1616
</a>
1717
</li>
1818
<li role="none">
19-
<a href="skills.html" role="menuitem" aria-label="Skills">
19+
<a href="../../assets/skills.html" role="menuitem" aria-label="Skills">
2020
<img src="../../images/skills.png" alt="" aria-hidden="true"> Skills
2121
</a>
2222
</li>
2323
<li role="none">
24-
<a href="education.html" role="menuitem" aria-label="Education">
24+
<a href="../../assets/education.html" role="menuitem" aria-label="Education">
2525
<img src="../../images/education.png" alt="" aria-hidden="true"> Education
2626
</a>
2727
</li>
2828
<li role="none">
29-
<a href="home.html#contact" role="menuitem" aria-label="Contact">
29+
<a href="../../assets/home.html#contact" role="menuitem" aria-label="Contact">
3030
<img src="../../images/contact.png" alt="" aria-hidden="true"> Contact
3131
</a>
3232
</li>
3333
<li role="none">
34-
<a href="resume.html" role="menuitem" aria-label="Resume">
34+
<a href="../../assets/resume.html" role="menuitem" aria-label="Resume">
3535
<img src="../../images/resume.png" alt="" aria-hidden="true"> Resume
3636
</a>
3737
</li>

0 commit comments

Comments
 (0)