Skip to content

Commit 19a55e2

Browse files
Satvika1825Satvika1825
authored
Merge branch 'master' into glassy-style-update
2 parents 9b6c919 + a58256b commit 19a55e2

File tree

10 files changed

+435
-32
lines changed

10 files changed

+435
-32
lines changed

‎assets/GeneratePassword.png‎

617 KB
Loading

‎assets/business.png‎

40.7 KB
Loading

‎assets/businessman.png‎

31 KB
Loading

‎assets/businesswoman.png‎

21.7 KB
Loading

‎assets/ceo.png‎

28.6 KB
Loading

‎assets/man.png‎

31.1 KB
Loading

‎assets/woman.png‎

37.3 KB
Loading

‎index.html‎

Lines changed: 113 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
<title>CodeCanvas - Showcase Front-End Projects</title>
77
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
88
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
10+
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
911
<link rel="stylesheet" href="style.css">
1012
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
1113
</head>
@@ -97,40 +99,104 @@ <h3>No projects found</h3>
9799
</div>
98100
</section>
99101

100-
<!-- Developer Reviews Section -->
101-
<section class="reviews-section" id="reviews" style="padding: 80px 0; background-color: #f9f9f9;">
102-
<div class="container" style="max-width: 1100px; margin: 0 auto;">
103-
<h2 class="section-title" style="text-align: center; font-size: 3rem; font-weight: bold; margin-bottom: 50px;color:#4b0082;">Developer Reviews</h2>
104-
<div class="reviews-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px;">
105-
<div class="review-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
106-
<h3>Jane Doe</h3>
107-
<p style="font-style: italic;">"CodeCanvas has completely changed the way I discover front-end projects. Super intuitive!"</p>
108-
<p style="color: #777;">Frontend Developer</p>
109-
</div>
110-
<div class="review-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
111-
<h3>Raj Patel</h3>
112-
<p style="font-style: italic;">"A must-have platform for developers looking to showcase their UI/UX skills."</p>
113-
<p style="color: #777;">Open Source Contributor</p>
114-
</div>
115-
<div class="review-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
116-
<h3>Maria Gonzales</h3>
117-
<p style="font-style: italic;">"I’ve found so many cool projects to contribute to. Highly recommended!"</p>
118-
<p style="color: #777;">Full Stack Developer</p>
119-
</div>
120-
<div class="review-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
121-
<h3>Leo Kim</h3>
122-
<p style="font-style: italic;">"Love the simplicity and design. It's like Behance but for front-end developers."</p>
123-
<p style="color: #777;">UI/UX Designer</p>
124-
</div>
125-
<div class="review-card" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
126-
<h3>Sara Ahmed</h3>
127-
<p style="font-style: italic;">"Great place to get feedback on your code and build your portfolio!"</p>
128-
<p style="color: #777;">JavaScript Enthusiast</p>
129-
</div>
102+
<!-- DEVELOPER REVIEW SECTION -->
103+
104+
<!-- Developer Reviews Section -->
105+
<section class="reviews-section" id="reviews" style="cursor:auto;">
106+
<h2 class="review-section-title">
107+
Developer Reviews
108+
</h2>
109+
110+
<!-- Swiper Container -->
111+
<div class="swiper review-swiper">
112+
<div class="swiper-wrapper">
113+
114+
<!-- Slide 1 -->
115+
<div class="swiper-slide">
116+
<div class="testimonial">
117+
<img src="./assets/businesswoman.png" alt="Jane Doe" class="avatar" />
118+
<div class="testimonial-content">
119+
<h3 class="review-name">Jane Doe</h3>
120+
<p class="review-role">Frontend Developer</p>
121+
<p class="testimonial-text">
122+
“CodeCanvas has completely changed the way I discover front-end
123+
projects. Super intuitive!”
124+
</p>
125+
</div>
126+
</div>
127+
</div>
128+
129+
<!-- Slide 2 -->
130+
<div class="swiper-slide">
131+
<div class="testimonial">
132+
<img src="./assets/man.png" alt="Raj Patel" class="avatar" />
133+
<div class="testimonial-content">
134+
<h3 class="review-name">Raj Patel</h3>
135+
<p class="review-role">Open Source Contributor</p>
136+
<p class="testimonial-text">
137+
“A must-have platform for developers looking to showcase their
138+
UI/UX skills.”
139+
</p>
140+
</div>
141+
</div>
142+
</div>
143+
144+
<!-- Slide 3 -->
145+
<div class="swiper-slide">
146+
<div class="testimonial">
147+
<img src="./assets/woman.png" alt="Maria Gonzales" class="avatar" />
148+
<div class="testimonial-content">
149+
<h3 class="review-name">Maria Gonzales</h3>
150+
<p class="review-role">Full Stack Developer</p>
151+
<p class="testimonial-text">
152+
“I’ve found so many cool projects to contribute to. Highly
153+
recommended!”
154+
</p>
155+
</div>
130156
</div>
157+
</div>
158+
159+
<!-- Slide 4 -->
160+
<div class="swiper-slide">
161+
<div class="testimonial">
162+
<img src="./assets/businessman.png" alt="Leo Kim" class="avatar" />
163+
<div class="testimonial-content">
164+
<h3 class="review-name">Leo Kim</h3>
165+
<p class="review-role">UI/UX Designer</p>
166+
<p class="testimonial-text">
167+
“Love the simplicity and design. It's like Behance but for
168+
front-end developers.”
169+
</p>
170+
</div>
171+
</div>
172+
</div>
173+
174+
<!-- Slide 5 -->
175+
<div class="swiper-slide">
176+
<div class="testimonial">
177+
<img src="./assets/business.png" alt="Sara Ahmed" class="avatar" />
178+
<div class="testimonial-content">
179+
<h3 class="review-name">Sara Ahmed</h3>
180+
<p class="review-role">JavaScript Enthusiast</p>
181+
<p class="testimonial-text">
182+
“Great place to get feedback on your code and build your
183+
portfolio!”
184+
</p>
185+
</div>
186+
</div>
187+
</div>
131188
</div>
189+
190+
<div class="swiper-button-prev">
191+
<span>&larr;</span>
192+
</div>
193+
<div class="swiper-button-next">
194+
<span>&rarr;</span>
195+
</div>
196+
</div>
132197
</section>
133198

199+
134200
<!-- Contact Us Section -->
135201
<section
136202
class="contact-section"
@@ -303,8 +369,24 @@ <h3>Sara Ahmed</h3>
303369
<p>Built with ❤️ for showcasing amazing front-end projects</p>
304370
</div>
305371
</footer>
372+
<button id="scrollToTopBtn" title="Go to top">↑</button>
373+
<script src="script.js"></script>
374+
<script>
375+
const toggle = document.getElementById('darkModeToggle');
376+
const body = document.body;
377+
const icon = document.getElementById('themeIcon');
378+
379+
// Load preference
380+
const savedTheme = localStorage.getItem('theme');
381+
if (savedTheme === 'dark') {
382+
body.classList.add('dark-theme');
383+
icon.textContent = '☀️'; // Sun in dark mode
384+
} else {
385+
icon.textContent = '🌙'; // Moon in light mode
386+
}
306387

307388

308389
<script src="script.js"></script>
309390
</body>
310-
</html>
391+
</html>
392+

‎script.js‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,20 @@ const sampleProjects = [
7979
previewImage: "assets/image.png",
8080
tags: ["REACT", "Tailwind CSS", "Responsive", "React-Router DOM"],
8181
},
82+
{
83+
id: 7,
84+
title: 'PassWord Generator',
85+
description: 'Enable user to create password with specified length and character (uppercase, lowercase , special character and numbers) to meet diverse securing requirements.',
86+
repoUrl: 'https://github.com/Sitaram8472/Generate-password',
87+
demoUrl: 'https://password-generator021.netlify.app/',
88+
difficulty: 'advanced',
89+
upvotes: 42,
90+
hasDemo: true,
91+
hasReadme: true,
92+
previewImage: "assets/GeneratePassword.png",
93+
tags: ['HTML', 'CSS', 'JavaScript', 'Responsive']
94+
},
95+
8296
];
8397

8498
// Store the current projects array
@@ -343,4 +357,24 @@ function validateForm() {
343357

344358
// Update icon
345359
icon.textContent = theme === 'dark' ? '☀️' : '🌙';
346-
});
360+
});
361+
362+
//Review Section JS
363+
const swiper = new Swiper(".review-swiper", {
364+
loop: true,
365+
slidesPerView: 1,
366+
spaceBetween: 20,
367+
navigation: {
368+
nextEl: ".swiper-button-next",
369+
prevEl: ".swiper-button-prev",
370+
},
371+
keyboard: {
372+
enabled: true,
373+
},
374+
mousewheel: {
375+
forceToAxis: true,
376+
},
377+
grabCursor: true,
378+
speed: 600,
379+
});
380+

0 commit comments

Comments
 (0)