forked from Gyanthakur/Dev_Profiles
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfaq.html
More file actions
634 lines (555 loc) · 26.1 KB
/
faq.html
File metadata and controls
634 lines (555 loc) · 26.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ - Developer Hub</title>
<link rel="shortcut icon" href="https://oyepriyansh.pages.dev/i/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GTFGBS8HG8"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script type="text/javascript" src="https://oyepriyansh.pages.dev/cdnjs/analytics/devprofiles.js"></script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</head>
<body>
<!-- Progress Bar -->
<div class="progress-bar">
<div class="bar" id="bar"></div>
</div>
<!-- Navigation -->
<header>
<nav>
<!-- Title / Logo -->
<p class="title"><a href="index.html">Dev Profiles</a></p>
<!-- Hamburger icon for mobile -->
<div class="hamburger" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
<!-- Nav links -->
<div class="nav-links" id="navLinks">
<a class="nav-link" href="index.html">
<i class="fa-solid fa-user"></i> Profile Section
</a>
<a class="nav-link" href="project.html">
<i class="fa-solid fa-list-check"></i> Projects
</a>
<a class="nav-link" href="about-us.html">
<i class="fa-solid fa-info-circle"></i> About Us
</a>
<a class="nav-link" href="contact-us.html">
<i class="fa-solid fa-address-book"></i> Contact
</a>
<!-- Dark mode button -->
<button class="dark-btn" id="icon">
<img src="/assets/dark.png" alt="Dark" style="width:24px; height:24px;">
</button>
</div>
</nav>
</header>
<!-- FAQ Section -->
<section class="faq-section">
<div class="faq-container">
<h1 class="section-title">Frequently Asked Questions</h1>
<p class="section-subtitle">Find answers to common questions about our platform</p>
<div class="faq-categories">
<div class="category active" data-category="general">General</div>
<div class="category" data-category="profile">Profile Management</div>
<div class="category" data-category="contribution">Contributing</div>
<div class="category" data-category="technical">Technical</div>
</div>
<div class="faq-content">
<!-- General FAQs -->
<div class="faq-category-content active" id="general">
<div class="faq-item">
<div class="faq-question">
<h3>What is Dev Profiles?</h3>
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
<p>Dev Profiles is a platform where developers can showcase their skills, projects, and social profiles. It's a centralized hub for developers to create and share their professional profiles with the community.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<h3>Is Dev Profiles free to use?</h3>
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
<p>Yes, Dev Profiles is completely free to use. There are no hidden fees or premium tiers. Our goal is to provide an accessible platform for all developers.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<h3>How do I get started?</h3>
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
<p>To get started, visit our GitHub repository and follow the contribution guidelines. You'll need to create a JSON file with your profile information and submit a pull request.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<h3>Can I customize my profile?</h3>
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
<p>Yes, you can customize various aspects of your profile including your bio, skills, projects, and social links. The platform supports a wide range of customization options.</p>
</div>
</div>
</div>
<!-- Profile Management FAQs -->
<div class="faq-category-content" id="profile">
<div class="faq-item">
<div class="faq-question">
<h3>How do I update my profile?</h3>
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
<p>To update your profile, you need to edit your JSON file in our GitHub repository and submit a new pull request. Once approved, your changes will be reflected on the site.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<h3>What information should I include in my profile?</h3>
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
<p>We recommend including your name, a professional photo, a brief bio, your skills, links to your projects, and your social media profiles. This helps others get a comprehensive view of your work.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<h3>Can I add multiple projects to my profile?</h3>
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
<p>Yes, you can add multiple projects to your profile. Each project can include a name, description, technologies used, and links to live demos or repositories.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<h3>How do I delete my profile?</h3>
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
<p>To delete your profile, you can submit a pull request to remove your JSON file from the repository. Alternatively, you can contact us directly for assistance.</p>
</div>
</div>
</div>
<!-- Contributing FAQs -->
<div class="faq-category-content" id="contribution">
<div class="faq-item">
<div class="faq-question">
<h3>How can I contribute to Dev Profiles?</h3>
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
<p>You can contribute by adding your profile, improving the documentation, reporting bugs, suggesting new features, or contributing code improvements. Check our GitHub repository for detailed contribution guidelines.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<h3>Do I need to be an experienced developer to contribute?</h3>
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
<p>No, developers of all experience levels are welcome to contribute. Even adding your profile helps grow our community. If you're new to open source, we have resources to help you get started.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<h3>What happens after I submit a pull request?</h3>
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
<p>After you submit a pull request, our team will review your changes. We might suggest improvements or ask for clarification. Once approved, your changes will be merged and deployed to the live site.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<h3>Can I contribute to the website's code?</h3>
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
<p>Absolutely! We welcome contributions to our codebase. Check our GitHub repository for open issues and feature requests. Make sure to follow our coding standards and guidelines.</p>
</div>
</div>
</div>
<!-- Technical FAQs -->
<div class="faq-category-content" id="technical">
<div class="faq-item">
<div class="faq-question">
<h3>What technologies does Dev Profiles use?</h3>
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
<p>Dev Profiles is built with HTML, CSS, and JavaScript. We use GitHub for version control and hosting. The site is designed to be fast, accessible, and responsive across all devices.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<h3>How is my data stored and used?</h3>
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
<p>Your profile data is stored as JSON files in our GitHub repository. We only display the information you provide in your profile. We don't sell or share your data with third parties.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<h3>Is the platform mobile-friendly?</h3>
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
<p>Yes, Dev Profiles is fully responsive and works well on all devices including smartphones, tablets, and desktops. The interface adapts to different screen sizes for optimal viewing.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<h3>How often is the site updated?</h3>
<i class="fas fa-chevron-down"></i>
</div>
<div class="faq-answer">
<p>The site is updated regularly as new profiles are added and improvements are made. We deploy changes frequently to ensure the platform remains up-to-date and secure.</p>
</div>
</div>
</div>
</div>
<div class="faq-contact">
<h3>Still have questions?</h3>
<p>If you couldn't find the answer to your question, feel free to reach out to us.</p>
<a href="contact-us.html" class="contact-btn">
<button class="add">
<i class="fa-solid fa-envelope"></i> Contact Us
</button>
</a>
</div>
</div>
</section>
<!-- Back to Top Button -->
<button id="backToTopBtn">
<i class="fas fa-arrow-up"></i>
</button>
<!-- Footer -->
<footer class="footer">
<ul class="social-icon">
<li class="social-icon__item">
<a class="social-icon__link" href="https://github.com/oyepriyansh" target="_blank">
<ion-icon name="logo-github"></ion-icon>
</a>
</li>
<li class="social-icon__item">
<a class="social-icon__link" href="https://twitter.com/oyepriyansh" target="_blank">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>
<li class="social-icon__item">
<a class="social-icon__link" href="https://www.linkedin.com/in/priyansh-choudhary/" target="_blank">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
</li>
<li class="social-icon__item">
<a class="social-icon__link" href="https://www.instagram.com/oyepriyansh/" target="_blank">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>
</ul>
<ul class="menu">
<li class="menu__item"><a class="menu__link" href="index.html">Home</a></li>
<li class="menu__item"><a class="menu__link" href="about.html">About</a></li>
<li class="menu__item"><a class="menu__link" href="contact-us.html">Contact</a></li>
<li class="menu__item"><a class="menu__link" href="faq.html">FAQ</a></li>
</ul>
<p>© <span id="dates"></span> Dev Profiles | All Rights Reserved</p>
</footer>
<script>
// Initialize AOS
AOS.init();
// FAQ functionality
document.addEventListener('DOMContentLoaded', function() {
// FAQ accordion functionality
const faqQuestions = document.querySelectorAll('.faq-question');
faqQuestions.forEach(question => {
question.addEventListener('click', () => {
const answer = question.nextElementSibling;
const icon = question.querySelector('i');
// Toggle active class on question
question.parentElement.classList.toggle('active');
// Toggle answer visibility
if (answer.style.maxHeight) {
answer.style.maxHeight = null;
icon.classList.remove('fa-chevron-up');
icon.classList.add('fa-chevron-down');
} else {
answer.style.maxHeight = answer.scrollHeight + "px";
icon.classList.remove('fa-chevron-down');
icon.classList.add('fa-chevron-up');
}
});
});
// FAQ category switching
const categories = document.querySelectorAll('.category');
const categoryContents = document.querySelectorAll('.faq-category-content');
categories.forEach(category => {
category.addEventListener('click', () => {
// Remove active class from all categories
categories.forEach(cat => cat.classList.remove('active'));
// Add active class to clicked category
category.classList.add('active');
// Hide all category contents
categoryContents.forEach(content => content.classList.remove('active'));
// Show selected category content
const categoryId = category.getAttribute('data-category');
document.getElementById(categoryId).classList.add('active');
});
});
// Progress bar functionality
window.addEventListener('scroll', () => {
const progressBar = document.getElementById('bar');
const scrollTotal = document.body.scrollHeight - window.innerHeight;
const scrollPosition = window.scrollY;
const scrollPercentage = (scrollPosition / scrollTotal) * 100;
progressBar.style.width = scrollPercentage + '%';
});
// Back to top button functionality
const backToTopBtn = document.getElementById('backToTopBtn');
window.onscroll = function() {
scrollFunction();
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
backToTopBtn.style.display = 'block';
} else {
backToTopBtn.style.display = 'none';
}
}
backToTopBtn.onclick = function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
// Dark mode functionality
const darkMode = document.querySelector('.dark-btn');
const icon = document.getElementById('icon');
const savedTheme = localStorage.getItem('theme');
const date = document.getElementById('dates');
let currentDate = new Date();
let currentYear = currentDate.getFullYear();
date.innerHTML = currentYear;
if (savedTheme === 'light') {
document.body.classList.add('light-background');
icon.style.filter = 'invert(0%)';
icon.src = '/assets/light.png';
document.querySelector('.title').classList.add('text-color');
document.querySelector('footer').classList.add('text-color');
const buttons = document.querySelectorAll('.add');
buttons.forEach((button) => {
button.classList.add('bg-color');
});
darkMode.classList.add('icon-position', 'light-background', 'icon-color');
} else {
document.body.classList.remove('light-background');
icon.style.filter = 'invert(100%)';
icon.src = '/assets/dark.png';
localStorage.setItem('theme', 'dark');
}
darkMode.addEventListener('click', () => {
document.body.classList.toggle('light-background');
if (document.body.classList.contains('light-background')) {
icon.style.filter = 'invert(0%)';
icon.src = '/assets/light.png';
localStorage.setItem('theme', 'light');
} else {
icon.style.filter = 'invert(100%)';
icon.src = '/assets/dark.png';
localStorage.setItem('theme', 'dark');
}
darkMode.classList.toggle('icon-position');
darkMode.classList.toggle('light-background');
darkMode.classList.toggle('icon-color');
document.querySelector('.title').classList.toggle('text-color');
document.querySelector('footer').classList.toggle('text-color');
const buttons = document.querySelectorAll('.add');
buttons.forEach((button) => {
button.classList.toggle('bg-color');
});
});
});
</script>
<style>
/* FAQ Specific Styles */
.faq-section {
padding: 50px 20px;
max-width: 1200px;
margin: 0 auto;
}
.faq-container {
background-color: var(--color-profile-card-bg);
border-radius: 10px;
padding: 40px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.section-title {
font-size: 2.5rem;
text-align: center;
margin-bottom: 10px;
color: var(--color-profile-border);
font-family: 'Poppins', sans-serif;
}
.section-subtitle {
text-align: center;
margin-bottom: 40px;
font-size: 1.1rem;
color: var(--color-text);
opacity: 0.8;
}
.faq-categories {
display: flex;
justify-content: center;
margin-bottom: 40px;
flex-wrap: wrap;
gap: 10px;
}
.category {
padding: 12px 24px;
background-color: var(--color-body-bg);
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
border: 2px solid transparent;
}
.category:hover {
background-color: var(--color-profile-border);
color: white;
}
.category.active {
background-color: var(--color-profile-border);
color: white;
border-color: var(--color-profile-border);
}
.faq-category-content {
display: none;
}
.faq-category-content.active {
display: block;
}
.faq-item {
margin-bottom: 15px;
border-radius: 8px;
overflow: hidden;
background-color: var(--color-body-bg);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.faq-question {
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: background-color 0.3s ease;
}
.faq-question:hover {
background-color: rgba(227, 82, 5, 0.1);
}
.faq-question h3 {
margin: 0;
font-size: 1.2rem;
font-weight: 600;
}
.faq-question i {
transition: transform 0.3s ease;
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background-color: rgba(0, 0, 0, 0.2);
}
.faq-answer p {
padding: 0 20px 20px;
margin: 0;
line-height: 1.6;
}
.faq-contact {
text-align: center;
margin-top: 50px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.faq-contact h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: var(--color-profile-border);
}
.faq-contact p {
margin-bottom: 20px;
opacity: 0.8;
}
.contact-btn {
text-decoration: none;
}
/* Light mode adjustments */
.light-background .faq-container {
background-color: #f5f5f5;
}
.light-background .section-subtitle {
color: #000;
}
.light-background .category {
background-color: #e0e0e0;
color: #000;
}
.light-background .category.active {
background-color: var(--color-profile-border);
color: white;
}
.light-background .faq-item {
background-color: #fff;
border: 1px solid #e0e0e0;
}
.light-background .faq-question:hover {
background-color: rgba(227, 82, 5, 0.05);
}
.light-background .faq-answer {
background-color: #f9f9f9;
}
.light-background .faq-answer p {
color: #333;
}
.light-background .faq-contact {
border-top: 1px solid #e0e0e0;
}
/* Responsive design */
@media (max-width: 768px) {
.faq-container {
padding: 20px;
}
.section-title {
font-size: 2rem;
}
.faq-categories {
flex-direction: column;
align-items: center;
}
.category {
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.faq-question h3 {
font-size: 1.1rem;
}
}
</style>
</body>
</html>