Skip to content

Commit b17da9c

Browse files
Code-JLCode-JL
committed
enhanced mobile responsiveness, look. Removed redundant css
1 parent 65f6933 commit b17da9c

File tree

14 files changed

+511
-114
lines changed

14 files changed

+511
-114
lines changed

‎assets/about.css‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
padding: 20px;
66
}
77

8-
/* Typography */
9-
li, p {
10-
line-height: 1.6;
11-
margin-bottom: 20px;
12-
}
13-
148
/* Title Section */
159
.title {
1610
text-align: center;

‎assets/education.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* Base Styles */
12
section {
23
width: 50%;
34
}
@@ -20,3 +21,48 @@ section {
2021
li a {
2122
color: #e7df69;
2223
}
24+
25+
/* Mobile Responsiveness */
26+
@media screen and (max-width: 768px) {
27+
section {
28+
width: 90%;
29+
}
30+
31+
.school-header {
32+
gap: 1rem;
33+
flex-wrap: wrap;
34+
}
35+
36+
.school-header h2 {
37+
font-size: clamp(24px, 6vw, 32px);
38+
}
39+
40+
.school-crest {
41+
width: 50px;
42+
height: 50px;
43+
}
44+
45+
article {
46+
padding: 10px;
47+
}
48+
49+
li {
50+
margin-bottom: 10px;
51+
}
52+
}
53+
54+
/* Small Mobile Devices */
55+
@media screen and (max-width: 480px) {
56+
section {
57+
width: 95%;
58+
}
59+
60+
.school-header {
61+
gap: 0.8rem;
62+
}
63+
64+
.school-crest {
65+
width: 40px;
66+
height: 40px;
67+
}
68+
}

‎assets/home.css‎

Lines changed: 84 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
/* Modern Variables */
21
:root {
32
--gallery-bg: rgba(255, 255, 255, 0.1);
43
--border-color: #112c42;
54
--transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
5+
--text-light: #e7df69; /* For figcaption text color */
66
}
77

8-
/* Enhanced Hero Section */
8+
/* Hero Section */
99
#home {
1010
width: 40%;
1111
animation: fadeIn 1s ease-out;
@@ -22,18 +22,31 @@
2222
font-weight: 600;
2323
}
2424

25-
/* Modernized Gallery */
25+
/* Projects Section */
26+
#projects ul {
27+
padding: 0; /* Reset handled globally, but keeping specific for this section */
28+
margin: 20px 0;
29+
}
30+
31+
#projects li {
32+
margin-bottom: 1.5rem;
33+
padding: 15px;
34+
background: var(--gallery-bg);
35+
border-radius: 8px;
36+
backdrop-filter: blur(5px);
37+
}
38+
39+
/* Gallery Section */
2640
.gallery {
2741
display: grid;
28-
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
42+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
2943
gap: 2rem;
3044
max-width: 1200px;
3145
margin: 0 auto;
3246
padding: 2rem 0;
3347
}
3448

3549
.gallery figure {
36-
margin: 0;
3750
padding: 1.5rem;
3851
background: var(--gallery-bg);
3952
border-radius: 12px;
@@ -60,12 +73,48 @@
6073
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
6174
}
6275

76+
.gallery figcaption {
77+
margin: 10px 0;
78+
color: var(--text-light);
79+
}
80+
81+
/* Skills Section */
82+
#skills ul {
83+
padding: 0;
84+
}
85+
86+
#skills li {
87+
margin: 10px 0;
88+
padding: 8px;
89+
background: var(--gallery-bg);
90+
border-radius: 6px;
91+
}
92+
93+
/* General Sections */
94+
#education, #contact {
95+
margin: 40px 0;
96+
}
97+
98+
#contact img {
99+
width: 24px;
100+
height: 24px;
101+
vertical-align: middle;
102+
margin-right: 10px;
103+
}
104+
63105
/* Animations */
64106
@keyframes fadeIn {
65-
from { opacity: 0; transform: translateY(20px); }
66-
to { opacity: 1; transform: translateY(0); }
107+
from {
108+
opacity: 0;
109+
transform: translateY(20px);
110+
}
111+
to {
112+
opacity: 1;
113+
transform: translateY(0);
114+
}
67115
}
68116

117+
/* Media Queries */
69118
@media (min-width: 900px) {
70119
.gallery {
71120
grid-template-columns: repeat(3, 1fr);
@@ -76,4 +125,32 @@
76125
#home {
77126
width: 80%;
78127
}
128+
129+
.gallery {
130+
grid-template-columns: repeat(2, 1fr);
131+
gap: 1rem;
132+
}
133+
134+
.gallery figure {
135+
padding: 1rem;
136+
}
137+
}
138+
139+
@media (max-width: 480px) {
140+
#home {
141+
width: 95%;
142+
}
143+
144+
.gallery {
145+
grid-template-columns: 1fr;
146+
gap: 1rem;
147+
}
148+
149+
.tagline {
150+
font-size: 1rem;
151+
}
152+
153+
#projects li {
154+
padding: 10px;
155+
}
79156
}

‎assets/projects.css‎

Lines changed: 119 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,55 @@
11
:root {
22
--image-border: rgba(255, 255, 255, 0.1);
33
--transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
4+
--button-bg: rgba(255, 255, 255, 0.1);
5+
--button-hover: rgba(255, 255, 255, 0.2);
46
}
57

6-
/* Project Section Styling */
8+
/* Title Section */
9+
.title {
10+
text-align: center;
11+
margin: 40px 0;
12+
}
13+
14+
.title h1 {
15+
color: var(--text-light);
16+
font-size: 2.5rem;
17+
margin-bottom: 15px;
18+
}
19+
20+
.title p {
21+
color: var(--text-light);
22+
font-size: 1.2rem;
23+
}
24+
25+
/* Project Section */
726
.project {
27+
background: var(--button-bg); /* Matches button background for consistency */
28+
border-radius: 15px;
29+
padding: 30px;
30+
margin-bottom: 40px;
31+
backdrop-filter: blur(8px);
832
transition: transform var(--transition-smooth);
33+
animation: slideIn 0.6s ease-out both;
934
}
1035

1136
.project:hover {
1237
transform: translateX(15px);
1338
}
1439

15-
/* Enhanced Image Styling */
40+
.project h2 {
41+
color: var(--highlight-color);
42+
font-size: 1.8rem;
43+
margin-bottom: 20px;
44+
}
45+
46+
.project p {
47+
color: var(--text-light);
48+
line-height: 1.6;
49+
margin: 15px 0;
50+
}
51+
52+
/* Image Styling */
1653
.project img {
1754
width: 70%;
1855
border-radius: 12px;
@@ -34,14 +71,15 @@
3471

3572
/* Project Features List */
3673
.project ul {
37-
list-style: none;
38-
padding-left: 0;
74+
padding: 0; /* Resets handled globally */
75+
margin: 20px 0;
3976
}
4077

4178
.project ul li {
4279
position: relative;
4380
padding-left: 1.5em;
4481
margin-bottom: 0.5em;
82+
color: var(--text-light);
4583
}
4684

4785
.project ul li::before {
@@ -51,12 +89,24 @@
5189
color: var(--highlight-color);
5290
}
5391

54-
/* Animation for Project Sections */
55-
.project {
56-
animation: slideIn 0.6s ease-out;
57-
animation-fill-mode: both;
92+
/* Button Styling */
93+
.button {
94+
display: inline-block;
95+
padding: 12px 24px;
96+
margin: 10px 10px 10px 0;
97+
background: var(--button-bg);
98+
color: var(--text-light);
99+
text-decoration: none;
100+
border-radius: 8px;
101+
transition: all var(--transition-smooth);
102+
}
103+
104+
.button:hover {
105+
background: var(--button-hover);
106+
transform: translateY(-2px);
58107
}
59108

109+
/* Keyframe Animation */
60110
@keyframes slideIn {
61111
from {
62112
opacity: 0;
@@ -67,3 +117,64 @@
67117
transform: translateX(0);
68118
}
69119
}
120+
121+
/* Responsive Design */
122+
@media screen and (max-width: 768px) {
123+
.project {
124+
padding: 20px;
125+
margin-bottom: 30px;
126+
}
127+
128+
.project img {
129+
width: 85%;
130+
}
131+
132+
.project h2 {
133+
font-size: 1.5rem;
134+
}
135+
136+
.title h1 {
137+
font-size: 2rem;
138+
}
139+
140+
.title p {
141+
font-size: 1.1rem;
142+
}
143+
144+
.button {
145+
display: block;
146+
text-align: center;
147+
margin: 10px 0;
148+
}
149+
}
150+
151+
@media screen and (max-width: 480px) {
152+
.project {
153+
padding: 15px;
154+
margin-bottom: 20px;
155+
}
156+
157+
.project img {
158+
width: 100%;
159+
}
160+
161+
.project h2 {
162+
font-size: 1.3rem;
163+
}
164+
165+
.title h1 {
166+
font-size: 1.8rem;
167+
}
168+
169+
.title p {
170+
font-size: 1rem;
171+
}
172+
173+
.project ul li {
174+
font-size: 0.9rem;
175+
}
176+
177+
.project p {
178+
font-size: 0.95rem;
179+
}
180+
}

0 commit comments

Comments
 (0)