Skip to content

Commit c4e609f

Browse files
rakeshkr-coderakeshkr-code
committed
Update: Portfolio v2.0 - Complete redesign with improved structure
1 parent 5d2b2c3 commit c4e609f

File tree

8 files changed

+2061
-602
lines changed

8 files changed

+2061
-602
lines changed

‎css/.change-modal-sec.css‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
/* ========== Modal ========== */
2+
.modal {
3+
position: fixed;
4+
top: 0;
5+
left: 0;
6+
width: 100%;
7+
height: 100%;
8+
z-index: 2000;
9+
display: none;
10+
align-items: center;
11+
justify-content: center;
12+
padding: 2rem;
13+
}
14+
15+
.modal.active {
16+
display: flex;
17+
}
18+
19+
.modal-overlay {
20+
position: absolute;
21+
top: 0;
22+
left: 0;
23+
width: 100%;
24+
height: 100%;
25+
background-color: rgba(0, 0, 0, 0.9);
26+
backdrop-filter: blur(5px);
27+
}
28+
29+
.modal-content {
30+
position: relative;
31+
background-color: var(--color-card-bg);
32+
border-radius: var(--border-radius);
33+
max-width: 900px;
34+
width: 100%;
35+
max-height: 85vh; /* Reduced from 90vh to show scroll hint */
36+
overflow-y: auto;
37+
z-index: 2001;
38+
border: 1px solid var(--color-primary);
39+
animation: modalFadeIn 0.3s ease;
40+
41+
/* Custom scrollbar */
42+
scrollbar-width: thin;
43+
scrollbar-color: var(--color-primary) var(--color-bg);
44+
}
45+
46+
/* Webkit scrollbar styling */
47+
.modal-content::-webkit-scrollbar {
48+
width: 8px;
49+
}
50+
51+
.modal-content::-webkit-scrollbar-track {
52+
background: var(--color-bg);
53+
}
54+
55+
.modal-content::-webkit-scrollbar-thumb {
56+
background: var(--color-primary);
57+
border-radius: 4px;
58+
}
59+
60+
.modal-content::-webkit-scrollbar-thumb:hover {
61+
background: var(--color-primary-dark);
62+
}
63+
64+
.modal-close {
65+
position: sticky; /* Changed from absolute to sticky */
66+
top: 1rem;
67+
right: 1rem;
68+
float: right; /* Added to position on right */
69+
width: 40px;
70+
height: 40px;
71+
background-color: rgba(0, 0, 0, 0.8);
72+
border: 1px solid var(--color-primary);
73+
border-radius: 50%;
74+
color: var(--color-text);
75+
font-size: 1.5rem;
76+
cursor: pointer;
77+
display: flex;
78+
align-items: center;
79+
justify-content: center;
80+
transition: var(--transition);
81+
z-index: 2002;
82+
margin-bottom: 1rem;
83+
}
84+
85+
.modal-close:hover {
86+
background-color: var(--color-primary);
87+
color: var(--color-bg);
88+
}
89+
90+
.modal-body {
91+
padding: 2rem;
92+
padding-top: 0; /* Remove top padding since close button handles it */
93+
}
94+
95+
.modal-image {
96+
width: 100%;
97+
max-height: 300px; /* Constrained height - was auto before */
98+
object-fit: cover; /* Ensures image covers the area nicely */
99+
border-radius: var(--border-radius);
100+
margin-bottom: 1.5rem;
101+
display: block;
102+
}
103+
104+
.modal-title {
105+
font-size: 2rem;
106+
font-weight: 700;
107+
margin-bottom: 1rem;
108+
color: var(--color-primary);
109+
}
110+
111+
.modal-description {
112+
font-size: 1.1rem;
113+
line-height: 1.8;
114+
margin-bottom: 2rem;
115+
opacity: 0.9;
116+
}
117+
118+
.modal-section-title {
119+
font-size: 1.3rem;
120+
font-weight: 600;
121+
margin-bottom: 1rem;
122+
margin-top: 1.5rem; /* Added spacing */
123+
color: var(--color-primary);
124+
}
125+
126+
.modal-tech-list {
127+
display: flex;
128+
flex-wrap: wrap;
129+
gap: 0.75rem;
130+
margin-bottom: 2rem;
131+
}
132+
133+
.modal-tech-item {
134+
padding: 0.6rem 1.2rem;
135+
background-color: var(--color-bg);
136+
border: 1px solid var(--color-border);
137+
border-radius: 20px;
138+
font-size: 0.95rem;
139+
}
140+
141+
.modal-links {
142+
display: flex;
143+
gap: 1rem;
144+
flex-wrap: wrap;
145+
margin-bottom: 1rem; /* Added bottom margin */
146+
}
147+
148+
.modal-link {
149+
display: inline-flex;
150+
align-items: center;
151+
gap: 0.5rem;
152+
padding: 0.75rem 1.5rem;
153+
background-color: var(--color-primary);
154+
color: var(--color-bg);
155+
text-decoration: none;
156+
border-radius: var(--border-radius);
157+
font-weight: 600;
158+
transition: var(--transition);
159+
}
160+
161+
.modal-link:hover {
162+
background-color: var(--color-primary-dark);
163+
transform: translateY(-2px);
164+
}
165+
166+
/* Add scroll hint indicator */
167+
.modal-content::after {
168+
content: '';
169+
position: sticky;
170+
bottom: 0;
171+
left: 0;
172+
right: 0;
173+
height: 40px;
174+
background: linear-gradient(to top, var(--color-card-bg) 0%, transparent 100%);
175+
pointer-events: none;
176+
display: block;
177+
}
178+
179+
/* Responsive adjustments for modal */
180+
@media (max-width: 768px) {
181+
.modal {
182+
padding: 1rem;
183+
}
184+
185+
.modal-content {
186+
max-height: 90vh;
187+
}
188+
189+
.modal-body {
190+
padding: 1.5rem;
191+
}
192+
193+
.modal-image {
194+
max-height: 200px; /* Smaller on mobile */
195+
}
196+
197+
.modal-title {
198+
font-size: 1.5rem;
199+
}
200+
201+
.modal-description {
202+
font-size: 1rem;
203+
}
204+
}
205+
206+
@media (max-width: 480px) {
207+
.modal-content {
208+
max-height: 95vh;
209+
}
210+
211+
.modal-body {
212+
padding: 1rem;
213+
}
214+
215+
.modal-image {
216+
max-height: 180px;
217+
}
218+
}

0 commit comments

Comments
 (0)