zainmax/bytebard-tech-tales-tips
0
1<!DOCTYPE html>2<html lang="en" class="scroll-smooth">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>About | ByteBard</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script>11 tailwind.config = {12 darkMode: 'class',13 theme: {14 extend: {15 colors: {16 primary: {17 DEFAULT: '#3B82F6',18 50: '#EFF6FF',19 100: '#DBEAFE',20 500: '#3B82F6',21 600: '#2563EB',22 },23 secondary: {24 DEFAULT: '#10B981',25 50: '#ECFDF5',26 100: '#D1FAE5',27 500: '#10B981',28 600: '#059669',29 }30 }31 }32 }33 }34 </script>35</head>36<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-50 transition-colors duration-300">37 <custom-header></custom-header>38 39 <section class="py-16 px-4 sm:px-6 lg:px-8">40 <div class="max-w-4xl mx-auto">41 <h1 class="text-4xl font-bold mb-8 text-center">About ByteBard</h1>42 43 <div class="prose dark:prose-invert max-w-none">44 <p class="text-lg mb-6">45 ByteBard is a modern tech blog created by developers for developers. Our mission is to provide high-quality, 46 practical content that helps developers stay up-to-date with the latest technologies and best practices.47 </p>48 49 <h2 class="text-2xl font-bold mt-8 mb-4">Our Story</h2>50 <p class="mb-6">51 Founded in 2023, ByteBard started as a small passion project by a group of developers who wanted to share their knowledge 52 with the community. What began as a simple blog has grown into a comprehensive resource for developers of all levels.53 </p>54 55 <h2 class="text-2xl font-bold mt-8 mb-4">The Team</h2>56 <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">57 <div class="flex items-start space-x-4">58 <img src="http://static.photos/people/200x200/1" alt="Sarah Johnson" class="w-16 h-16 rounded-full">59 <div>60 <h3 class="font-bold">Sarah Johnson</h3>61 <p class="text-gray-600 dark:text-gray-400">Lead Developer</p>62 <p class="mt-2">Frontend specialist with a passion for React and design systems.</p>63 </div>64 </div>65 <div class="flex items-start space-x-4">66 <img src="http://static.photos/people/200x200/2" alt="Michael Chen" class="w-16 h-16 rounded-full">67 <div>68 <h3 class="font-bold">Michael Chen</h3>69 <p class="text-gray-600 dark:text-gray-400">DevOps Engineer</p>70 <p class="mt-2">Cloud infrastructure and CI/CD pipelines expert.</p>71 </div>72 </div>73 </div>74 </div>75 </div>76 </section>77 78 <custom-footer></custom-footer>79 80 <script src="components/header.js"></script>81 <script src="components/footer.js"></script>82 <script src="script.js"></script>83 <script>84 feather.replace();85 </script>86</body>87</html>