|
1 | | ---- |
2 | | -layout: page |
3 | | -title: Achievements |
4 | | -icon: fas fa-trophy |
5 | | -order: 4 |
6 | | ---- |
7 | | - |
8 | | -<div class="achievements-container"> |
9 | | - {% for category in site.data.achievements.categories %} |
10 | | - <section class="mb-5"> |
11 | | - <!-- Category Header --> |
12 | | - <div class="d-flex align-items-center mb-4"> |
13 | | - <i class="{{ category.icon }} me-3 text-primary" style="font-size: 1.75rem;"></i> |
14 | | - <div> |
15 | | - <h2 class="mb-1">{{ category.name }}</h2> |
16 | | - <p class="text-muted mb-0">{{ category.description }}</p> |
17 | | - </div> |
18 | | - </div> |
19 | | - |
20 | | - <!-- Badges Grid --> |
21 | | - <div class="row g-4"> |
22 | | - {% for badge in category.badges %} |
23 | | - <div class="col-lg-4 col-md-6"> |
24 | | - <div class="card h-100 border-0 shadow-sm achievement-card"> |
25 | | - <div class="card-body p-4"> |
26 | | - <!-- Badge Header --> |
27 | | - <div class="d-flex align-items-start mb-3"> |
28 | | - {% if badge.icon contains '.svg' %} |
29 | | - <img src="{{ badge.icon | relative_url }}" |
30 | | - alt="{{ badge.name }}" |
31 | | - class="achievement-icon me-3" |
32 | | - style="width: 48px; height: 48px; object-fit: contain;"> |
33 | | - {% else %} |
34 | | - <i class="{{ badge.icon }} fs-1 text-primary me-3"></i> |
35 | | - {% endif %} |
36 | | - <div class="flex-grow-1"> |
37 | | - <h5 class="card-title mb-1">{{ badge.name }}</h5> |
38 | | - {% if badge.date and site.data.achievements.settings.show_dates %} |
39 | | - <small class="text-muted">{{ badge.date }}</small> |
40 | | - {% endif %} |
41 | | - </div> |
42 | | - </div> |
43 | | - |
44 | | - <!-- Badge Description --> |
45 | | - <p class="card-text text-muted mb-3">{{ badge.description | truncate: 80 }}</p> |
46 | | - |
47 | | - <!-- Action Button --> |
48 | | - <div class="mt-auto"> |
49 | | - <button class="btn btn-outline-primary btn-sm w-100" |
50 | | - data-bs-toggle="modal" |
51 | | - data-bs-target="#modal-{{ category.id }}-{{ badge.name | slugify }}"> |
52 | | - <i class="fas fa-info-circle me-1"></i>View Details |
53 | | - </button> |
54 | | - </div> |
55 | | - </div> |
56 | | - </div> |
57 | | - </div> |
58 | | - {% endfor %} |
59 | | - </div> |
60 | | - </section> |
61 | | - {% endfor %} |
62 | | -</div> |
63 | | - |
64 | | -<!-- Achievement Detail Modals --> |
65 | | -{% for category in site.data.achievements.categories %} |
66 | | -{% for badge in category.badges %} |
67 | | -<div class="modal fade" id="modal-{{ category.id }}-{{ badge.name | slugify }}" tabindex="-1" aria-labelledby="modal-{{ category.id }}-{{ badge.name | slugify }}-label" aria-hidden="true"> |
68 | | - <div class="modal-dialog modal-lg"> |
69 | | - <div class="modal-content"> |
70 | | - <div class="modal-header"> |
71 | | - <div class="d-flex align-items-center"> |
72 | | - {% if badge.icon contains '.svg' %} |
73 | | - <img src="{{ badge.icon | relative_url }}" |
74 | | - alt="{{ badge.name }}" |
75 | | - class="me-3" |
76 | | - style="width: 48px; height: 48px; object-fit: contain;"> |
77 | | - {% else %} |
78 | | - <i class="{{ badge.icon }} fs-1 text-primary me-3"></i> |
79 | | - {% endif %} |
80 | | - <div> |
81 | | - <h4 class="modal-title mb-1" id="modal-{{ category.id }}-{{ badge.name | slugify }}-label">{{ badge.name }}</h4> |
82 | | - {% if badge.date and site.data.achievements.settings.show_dates %} |
83 | | - <small class="text-muted">{{ badge.date }}</small> |
84 | | - {% endif %} |
85 | | - </div> |
86 | | - </div> |
87 | | - <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
88 | | - </div> |
89 | | - <div class="modal-body"> |
90 | | - <p class="fs-6 mb-4">{{ badge.description }}</p> |
91 | | - |
92 | | - {% if badge.skills and site.data.achievements.settings.show_skills %} |
93 | | - <div class="mb-4"> |
94 | | - <h6 class="text-muted mb-2">Key Skills & Technologies</h6> |
95 | | - {% for skill in badge.skills %} |
96 | | - <span class="badge bg-secondary me-1 mb-1">{{ skill }}</span> |
97 | | - {% endfor %} |
98 | | - </div> |
99 | | - {% endif %} |
100 | | - |
101 | | - {% if badge.impact %} |
102 | | - <div class="mb-4"> |
103 | | - <h6 class="text-muted mb-2">Impact & Results</h6> |
104 | | - <p class="mb-0">{{ badge.impact }}</p> |
105 | | - </div> |
106 | | - {% endif %} |
107 | | - |
108 | | - {% if badge.url %} |
109 | | - <div class="text-center"> |
110 | | - <a href="{{ badge.url }}" |
111 | | - class="btn btn-primary" |
112 | | - target="_blank" |
113 | | - rel="noopener"> |
114 | | - <i class="fas fa-external-link-alt me-1"></i>Learn More |
115 | | - </a> |
116 | | - </div> |
117 | | - {% endif %} |
118 | | - </div> |
119 | | - </div> |
120 | | - </div> |
121 | | -</div> |
122 | | -{% endfor %} |
123 | | -{% endfor %} |
124 | | - |
125 | | -<script> |
126 | | -// Ensure Bootstrap modal functionality works |
127 | | -document.addEventListener('DOMContentLoaded', function() { |
128 | | - // Initialize Bootstrap modals if Bootstrap is available |
129 | | - if (typeof bootstrap !== 'undefined' && bootstrap.Modal) { |
130 | | - // Bootstrap 5 is available, modals should work automatically |
131 | | - console.log('Bootstrap 5 modals initialized'); |
132 | | - } else if (typeof $ !== 'undefined' && $.fn.modal) { |
133 | | - // Fallback to Bootstrap 4 with jQuery |
134 | | - $('.modal').modal(); |
135 | | - console.log('Bootstrap 4 modals initialized'); |
136 | | - } else { |
137 | | - // Manual modal implementation as fallback |
138 | | - console.log('Implementing custom modal functionality'); |
139 | | - |
140 | | - // Add click handlers for modal triggers |
141 | | - document.querySelectorAll('[data-bs-toggle="modal"]').forEach(function(trigger) { |
142 | | - trigger.addEventListener('click', function(e) { |
143 | | - e.preventDefault(); |
144 | | - const targetId = this.getAttribute('data-bs-target'); |
145 | | - const modal = document.querySelector(targetId); |
146 | | - |
147 | | - if (modal) { |
148 | | - modal.style.display = 'block'; |
149 | | - modal.classList.add('show'); |
150 | | - modal.setAttribute('aria-hidden', 'false'); |
151 | | - document.body.classList.add('modal-open'); |
152 | | - |
153 | | - // Create backdrop |
154 | | - const backdrop = document.createElement('div'); |
155 | | - backdrop.className = 'modal-backdrop fade show'; |
156 | | - document.body.appendChild(backdrop); |
157 | | - |
158 | | - // Close modal function |
159 | | - const closeModal = function() { |
160 | | - modal.style.display = 'none'; |
161 | | - modal.classList.remove('show'); |
162 | | - modal.setAttribute('aria-hidden', 'true'); |
163 | | - document.body.classList.remove('modal-open'); |
164 | | - backdrop.remove(); |
165 | | - }; |
166 | | - |
167 | | - // Add close handlers |
168 | | - modal.querySelectorAll('[data-bs-dismiss="modal"]').forEach(function(closeBtn) { |
169 | | - closeBtn.addEventListener('click', closeModal); |
170 | | - }); |
171 | | - |
172 | | - // Close on backdrop click |
173 | | - backdrop.addEventListener('click', closeModal); |
174 | | - |
175 | | - // Close on escape key |
176 | | - document.addEventListener('keydown', function(e) { |
177 | | - if (e.key === 'Escape') closeModal(); |
178 | | - }); |
179 | | - } |
180 | | - }); |
181 | | - }); |
182 | | - } |
183 | | -}); |
184 | | -</script> |
185 | | - |
186 | | -<style> |
187 | | -/* Achievement Cards Enhancement */ |
188 | | -.achievement-card { |
189 | | - transition: all 0.3s ease; |
190 | | - border-radius: 12px; |
191 | | - overflow: hidden; |
192 | | - height: 280px; /* Fixed height for consistent grid */ |
193 | | -} |
194 | | - |
195 | | -.achievement-card:hover { |
196 | | - transform: translateY(-4px); |
197 | | - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important; |
198 | | -} |
199 | | - |
200 | | -.achievement-card .card-body { |
201 | | - display: flex; |
202 | | - flex-direction: column; |
203 | | - height: 100%; |
204 | | -} |
205 | | - |
206 | | -.achievement-icon { |
207 | | - border-radius: 8px; |
208 | | - padding: 4px; |
209 | | - background: rgba(var(--bs-primary-rgb), 0.1); |
210 | | - flex-shrink: 0; |
211 | | -} |
212 | | - |
213 | | -/* Manual modal styles for fallback */ |
214 | | -.modal-backdrop { |
215 | | - position: fixed; |
216 | | - top: 0; |
217 | | - left: 0; |
218 | | - z-index: 1040; |
219 | | - width: 100vw; |
220 | | - height: 100vh; |
221 | | - background-color: rgba(0, 0, 0, 0.5); |
222 | | -} |
223 | | - |
224 | | -.modal { |
225 | | - position: fixed; |
226 | | - top: 0; |
227 | | - left: 0; |
228 | | - z-index: 1050; |
229 | | - width: 100%; |
230 | | - height: 100%; |
231 | | - overflow-x: hidden; |
232 | | - overflow-y: auto; |
233 | | - outline: 0; |
234 | | -} |
235 | | - |
236 | | -.modal.show { |
237 | | - display: block !important; |
238 | | -} |
239 | | - |
240 | | -.modal-dialog { |
241 | | - position: relative; |
242 | | - width: auto; |
243 | | - margin: 0.5rem; |
244 | | - pointer-events: none; |
245 | | -} |
246 | | - |
247 | | -.modal-lg { |
248 | | - max-width: 800px; |
249 | | -} |
250 | | - |
251 | | -@media (min-width: 576px) { |
252 | | - .modal-dialog { |
253 | | - max-width: 500px; |
254 | | - margin: 1.75rem auto; |
255 | | - } |
256 | | - .modal-lg { |
257 | | - max-width: 800px; |
258 | | - } |
259 | | -} |
260 | | - |
261 | | -.modal-content { |
262 | | - position: relative; |
263 | | - display: flex; |
264 | | - flex-direction: column; |
265 | | - width: 100%; |
266 | | - pointer-events: auto; |
267 | | - background-color: var(--card-bg); |
268 | | - background-clip: padding-box; |
269 | | - border: 1px solid var(--card-border-color); |
270 | | - border-radius: 0.5rem; |
271 | | - outline: 0; |
272 | | -} |
273 | | - |
274 | | -.modal-header { |
275 | | - display: flex; |
276 | | - align-items: center; |
277 | | - justify-content: space-between; |
278 | | - padding: 1rem 1rem; |
279 | | - border-bottom: 1px solid var(--card-border-color); |
280 | | - border-top-left-radius: calc(0.5rem - 1px); |
281 | | - border-top-right-radius: calc(0.5rem - 1px); |
282 | | -} |
283 | | - |
284 | | -.modal-body { |
285 | | - position: relative; |
286 | | - flex: 1 1 auto; |
287 | | - padding: 1rem; |
288 | | - color: var(--text-color) !important; |
289 | | -} |
290 | | - |
291 | | -/* Modal text styling */ |
292 | | -.modal-body p, |
293 | | -.modal-body .fs-6, |
294 | | -.modal-body .mb-0, |
295 | | -.modal-body .mb-4 { |
296 | | - color: var(--text-color) !important; |
297 | | -} |
298 | | - |
299 | | -.modal-body .mb-4 p { |
300 | | - color: var(--text-color) !important; |
301 | | -} |
302 | | - |
303 | | -.modal-body h6 { |
304 | | - color: var(--heading-color) !important; |
305 | | -} |
306 | | - |
307 | | -.modal-body h6.text-muted { |
308 | | - color: var(--text-muted-color) !important; |
309 | | -} |
310 | | - |
311 | | -.modal-title { |
312 | | - color: var(--heading-color) !important; |
313 | | -} |
314 | | - |
315 | | -.modal .text-muted { |
316 | | - color: var(--text-muted-color) !important; |
317 | | -} |
318 | | - |
319 | | -.modal .badge { |
320 | | - background-color: var(--label-color) !important; |
321 | | - color: var(--card-bg) !important; |
322 | | -} |
323 | | - |
324 | | -.modal .bg-secondary { |
325 | | - background-color: var(--label-color) !important; |
326 | | - color: var(--card-bg) !important; |
327 | | -} |
328 | | - |
329 | | -/* Dark mode specific overrides */ |
330 | | -[data-mode="dark"] .modal-body, |
331 | | -[data-mode="dark"] .modal-body p, |
332 | | -[data-mode="dark"] .modal-body .fs-6, |
333 | | -[data-mode="dark"] .modal-body .mb-0, |
334 | | -[data-mode="dark"] .modal-body .mb-4 { |
335 | | - color: var(--text-color) !important; |
336 | | -} |
337 | | - |
338 | | -.btn-close { |
339 | | - padding: 0.5rem 0.5rem; |
340 | | - margin: -0.5rem -0.5rem -0.5rem auto; |
341 | | - background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='m.235 1.419 1.419-1.419 6.346 6.346 6.346-6.346 1.419 1.419-6.346 6.346 6.346 6.346-1.419 1.419-6.346-6.346L1.654 13.764.235 12.345 6.581 6 .235 1.419z'/%3e%3c/svg%3e") center/1em auto no-repeat; |
342 | | - border: 0; |
343 | | - border-radius: 0.375rem; |
344 | | - opacity: 0.5; |
345 | | - cursor: pointer; |
346 | | -} |
347 | | - |
348 | | -.btn-close:hover { |
349 | | - opacity: 0.75; |
350 | | -} |
351 | | - |
352 | | -/* Dark mode btn-close */ |
353 | | -[data-mode="dark"] .btn-close { |
354 | | - filter: invert(1) grayscale(100%) brightness(200%); |
355 | | -} |
356 | | - |
357 | | -/* Responsive adjustments */ |
358 | | -@media (max-width: 768px) { |
359 | | - .achievement-card { |
360 | | - height: auto; |
361 | | - min-height: 260px; |
362 | | - } |
363 | | - |
364 | | - .achievement-card .d-flex { |
365 | | - flex-direction: column; |
366 | | - text-align: center; |
367 | | - } |
368 | | - |
369 | | - .achievement-icon { |
370 | | - margin-bottom: 1rem !important; |
371 | | - margin-right: 0 !important; |
372 | | - align-self: center; |
373 | | - } |
374 | | - |
375 | | - .modal-dialog { |
376 | | - margin: 1rem; |
377 | | - } |
378 | | -} |
379 | | -</style> |
0 commit comments