Skip to content

Commit 51a2840

Browse files
DaneshCodeDaneshCode
committed
Enhance styles for CV project
add border to cards, implement scroll progress bar, and improve print styles for better readability
1 parent ff40b91 commit 51a2840

File tree

2 files changed

+372
-19
lines changed

2 files changed

+372
-19
lines changed

‎index.html‎

Lines changed: 281 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,16 @@
2424
/>
2525
</head>
2626
<body>
27+
<!-- Scroll Progress Bar -->
28+
<div class="scroll-progress"></div>
2729
<!-- Add loader -->
2830
<div class="loader" aria-hidden="true"></div>
2931
<button
3032
class="theme-toggle"
3133
onclick="toggleTheme()"
3234
aria-label="Toggle theme"
3335
>
34-
<i class="fas fa-moon"></i>
36+
<i class="fas fa-sun"></i>
3537
</button>
3638
<!-- Page Container -->
3739
<main class="content" style="max-width: 1400px">
@@ -43,7 +45,7 @@
4345
<div class="display-container">
4446
<img src="Avatar.jpg" style="width: 100%" alt="Avatar" />
4547
<div class="container">
46-
<h3>Danesh khodadad</h3>
48+
<h3 style="color: white">Danesh khodadad</h3>
4749
</div>
4850
</div>
4951
<div class="container">
@@ -171,6 +173,268 @@ <h6 class="text-teal">
171173
<i class="fas fa-download"></i>
172174
</button>
173175
</div>
176+
177+
<!-- Projects Section -->
178+
<div class="container card">
179+
<h2>
180+
<i class="fa fa-code fa-fw margin-right icon-large text-teal"></i
181+
>Projects
182+
</h2>
183+
<div class="container">
184+
<h5 class="opacity">
185+
<b>🌟 Modern Personal Portfolio Website</b>
186+
</h5>
187+
<div class="project-links">
188+
<a
189+
href="https://github.com/DaneshCode/Portfolio-Website"
190+
class="project-link"
191+
target="_blank"
192+
>
193+
<i class="fab fa-github"></i> GitHub Repository
194+
</a>
195+
<a
196+
href="https://daneshcode.github.io/Portfolio-Website/"
197+
class="project-link"
198+
target="_blank"
199+
>
200+
<i class="fas fa-globe"></i> Live Demo
201+
</a>
202+
</div>
203+
<p>
204+
🚀 A clean, beautiful and responsive portfolio website built with
205+
HTML, CSS, and JavaScript!✨
206+
</p>
207+
</div>
208+
<hr />
209+
<div class="container">
210+
<h5 class="opacity">
211+
<b>🌟 Modern CV Website</b>
212+
</h5>
213+
<div class="project-links">
214+
<a
215+
href="https://github.com/DaneshCode/cv-website"
216+
class="project-link"
217+
target="_blank"
218+
>
219+
<i class="fab fa-github"></i> GitHub Repository
220+
</a>
221+
<a
222+
href="https://daneshcode.github.io/cv-website/"
223+
class="project-link"
224+
target="_blank"
225+
>
226+
<i class="fas fa-globe"></i> Live Demo
227+
</a>
228+
</div>
229+
<p>
230+
🚀 A sleek and responsive CV website built with HTML, CSS, and
231+
JavaScript✨
232+
</p>
233+
</div>
234+
<hr />
235+
<div class="container">
236+
<h5 class="opacity"><b>🎓 Online Course Platform</b></h5>
237+
<div class="project-links">
238+
<a
239+
href="https://github.com/DaneshCode/course-platform"
240+
class="project-link"
241+
target="_blank"
242+
>
243+
<i class="fab fa-github"></i> GitHub Repository
244+
</a>
245+
<a
246+
href="https://daneshcode.github.io/course-platform/"
247+
class="project-link"
248+
target="_blank"
249+
>
250+
<i class="fas fa-globe"></i> Live Demo
251+
</a>
252+
</div>
253+
<p>
254+
🚀A modern learning platform with an attractive and responsive
255+
user interface for delivering online courses🌟
256+
</p>
257+
</div>
258+
<hr />
259+
<div class="container">
260+
<h5 class="opacity"><b>🍽️ Golden Plate Restaurant Website</b></h5>
261+
<div class="project-links">
262+
<a
263+
href="https://github.com/DaneshCode/Restaurant-Website"
264+
class="project-link"
265+
target="_blank"
266+
>
267+
<i class="fab fa-github"></i> GitHub Repository
268+
</a>
269+
<a
270+
href="https://daneshcode.github.io/Restaurant-Website/"
271+
class="project-link"
272+
target="_blank"
273+
>
274+
<i class="fas fa-globe"></i> Live Demo
275+
</a>
276+
</div>
277+
<p>
278+
🍽️A modern, elegant restaurant website built with HTML, CSS, and
279+
JavaScript
280+
</p>
281+
</div>
282+
<hr />
283+
<div class="container">
284+
<h5 class="opacity"><b>🚀 Cloud Hosting Landing Page</b></h5>
285+
<div class="project-links">
286+
<a
287+
href="https://github.com/DaneshCode/cloud-hosting-landing"
288+
class="project-link"
289+
target="_blank"
290+
>
291+
<i class="fab fa-github"></i> GitHub Repository
292+
</a>
293+
<a
294+
href="https://daneshcode.github.io/cloud-hosting-landing/"
295+
class="project-link"
296+
target="_blank"
297+
>
298+
<i class="fas fa-globe"></i> Live Demo
299+
</a>
300+
</div>
301+
<p>
302+
🚀A modern, responsive landing page for a cloud hosting service,
303+
built with HTML5 and CSS3✨
304+
</p>
305+
</div>
306+
<hr />
307+
<div class="container">
308+
<h5 class="opacity"><b>💻 Web Calculator</b></h5>
309+
<div class="project-links">
310+
<a
311+
href="https://github.com/DaneshCode/Calculator"
312+
class="project-link"
313+
target="_blank"
314+
>
315+
<i class="fab fa-github"></i> GitHub Repository
316+
</a>
317+
<a
318+
href="https://daneshcode.github.io/Calculator/"
319+
class="project-link"
320+
target="_blank"
321+
>
322+
<i class="fas fa-globe"></i> Live Demo
323+
</a>
324+
</div>
325+
<p>
326+
This project is a simple web calculator built using HTML, CSS, and
327+
JavaScript. It allows users to perform basic arithmetic operations
328+
(addition, subtraction, multiplication, and division), view
329+
multiplication tables, check if a number is prime or composite,
330+
and convert temperatures from Fahrenheit to Celsius.
331+
</p>
332+
</div>
333+
<hr />
334+
<div class="container">
335+
<h5 class="opacity"><b>✨ Modern Visit Card 🚀</b></h5>
336+
<div class="project-links">
337+
<a
338+
href="https://github.com/DaneshCode/visit-card"
339+
class="project-link"
340+
target="_blank"
341+
>
342+
<i class="fab fa-github"></i> GitHub Repository
343+
</a>
344+
<a
345+
href="https://daneshcode.github.io/visit-card/"
346+
class="project-link"
347+
target="_blank"
348+
>
349+
<i class="fas fa-globe"></i> Live Demo
350+
</a>
351+
</div>
352+
<p>
353+
the Modern Visit Card project! 🎉 This repository features a sleek
354+
and minimalistic visit card built with HTML and CSS, perfect for
355+
showcasing your personal or professional details in style.
356+
</p>
357+
</div>
358+
<hr />
359+
<div class="container">
360+
<h5 class="opacity"><b>🏛️ Top Universities Web</b></h5>
361+
<div class="project-links">
362+
<a
363+
href="https://github.com/DaneshCode/Top-Universities-Web"
364+
class="project-link"
365+
target="_blank"
366+
>
367+
<i class="fab fa-github"></i> GitHub Repository
368+
</a>
369+
<a
370+
href="https://daneshcode.github.io/Top-Universities-Web/"
371+
class="project-link"
372+
target="_blank"
373+
>
374+
<i class="fas fa-globe"></i> Live Demo
375+
</a>
376+
</div>
377+
<p>
378+
This is my first website when I am learning HTML, CSS, and
379+
JavaScript.<br /><br />
380+
🌍 About the Project :<br />This is a simple yet informative
381+
educational website showcasing the top universities in the world.
382+
Built using HTML, CSS, and JavaScript, the website provides
383+
insights into leading universities, their rankings, and essential
384+
details.
385+
</p>
386+
</div>
387+
<hr />
388+
<div class="container">
389+
<h5 class="opacity"><b>🚀 Web Design Company 🌐</b></h5>
390+
<div class="project-links">
391+
<a
392+
href="https://github.com/DaneshCode/web-design-company"
393+
class="project-link"
394+
target="_blank"
395+
>
396+
<i class="fab fa-github"></i> GitHub Repository
397+
</a>
398+
<a
399+
href="https://daneshcode.github.io/web-design-company/"
400+
class="project-link"
401+
target="_blank"
402+
>
403+
<i class="fas fa-globe"></i> Live Demo
404+
</a>
405+
</div>
406+
<p>
407+
Web Design Company project! 🎉 <br />This project showcases a
408+
beautifully crafted website designed for a fictional web design
409+
company. Experience modern design trends with smooth animations,
410+
responsive layouts, and a clean, minimalist aesthetic. 💻✨
411+
</p>
412+
</div>
413+
<hr />
414+
<div class="container">
415+
<h5 class="opacity"><b>🎫 A4 Business Card Generator</b></h5>
416+
<div class="project-links">
417+
<a
418+
href="https://github.com/DaneshCode/Business-Card"
419+
class="project-link"
420+
target="_blank"
421+
>
422+
<i class="fab fa-github"></i> GitHub Repository
423+
</a>
424+
<a
425+
href="https://daneshcode.github.io/Business-Card/"
426+
class="project-link"
427+
target="_blank"
428+
>
429+
<i class="fas fa-globe"></i> Live Demo
430+
</a>
431+
</div>
432+
<p>
433+
A professional business card generator that creates printable
434+
cards on A4 paper format.
435+
</p>
436+
</div>
437+
</div>
174438
</div>
175439
</main>
176440

@@ -222,10 +486,13 @@ <h6 class="text-teal">
222486
// Theme handling
223487
const savedTheme = localStorage.getItem('theme') || 'dark';
224488
html.setAttribute('data-theme', savedTheme);
489+
themeToggle.className = `fas fa-${
490+
savedTheme === 'light' ? 'moon' : 'sun'
491+
}`;
225492

226493
function toggleTheme() {
227-
const newTheme =
228-
html.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
494+
const currentTheme = html.getAttribute('data-theme');
495+
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
229496
html.setAttribute('data-theme', newTheme);
230497
localStorage.setItem('theme', newTheme);
231498
themeToggle.className = `fas fa-${
@@ -259,6 +526,16 @@ <h6 class="text-teal">
259526
};
260527

261528
typeText();
529+
530+
// Scroll Progress Bar
531+
const scrollProgress = document.querySelector('.scroll-progress');
532+
533+
window.addEventListener('scroll', () => {
534+
const height =
535+
document.documentElement.scrollHeight - window.innerHeight;
536+
const scrolled = (window.scrollY / height) * 100;
537+
scrollProgress.style.width = `${scrolled}%`;
538+
});
262539
</script>
263540
</body>
264541
</html>

0 commit comments

Comments
 (0)