kingdelexx/codewizard-s-digital-grimoire
0
1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>About Me | CodeWizard's Digital Grimoire</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</head>11<body class="bg-gray-900 text-gray-100 min-h-screen">12 <custom-navbar></custom-navbar>13 14 <main class="container mx-auto px-4 py-24">15 <section class="glass p-8 md:p-12 rounded-2xl mb-16">16 <div class="flex flex-col md:flex-row gap-12 items-center">17 <div class="md:w-1/3 flex justify-center">18 <div class="relative">19 <img src="http://static.photos/technology/640x360/42" alt="Profile" class="rounded-full w-64 h-64 object-cover border-4 border-primary border-opacity-30">20 <div class="absolute -bottom-2 -right-2 bg-primary p-3 rounded-full shadow-xl">21 <i data-feather="zap" class="w-6 h-6"></i>22 </div>23 </div>24 </div>25 <div class="md:w-2/3">26 <h1 class="text-4xl md:text-5xl font-bold mb-6">About The <span class="text-primary">CodeWizard</span></h1>27 <p class="text-xl text-gray-400 mb-6">I weave digital spells with code to create powerful web applications and enchanting user experiences.</p>28 <div class="grid grid-cols-2 gap-4 mb-8">29 <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg">30 <div class="flex items-center gap-3">31 <div class="bg-primary bg-opacity-10 p-2 rounded-lg">32 <i data-feather="code" class="text-primary"></i>33 </div>34 <span class="font-medium">5+ Years Experience</span>35 </div>36 </div>37 <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg">38 <div class="flex items-center gap-3">39 <div class="bg-primary bg-opacity-10 p-2 rounded-lg">40 <i data-feather="award" class="text-primary"></i>41 </div>42 <span class="font-medium">50+ Projects</span>43 </div>44 </div>45 </div>46 <a href="#contact" class="bg-primary hover:bg-purple-700 text-white px-6 py-3 rounded-lg transition inline-flex items-center gap-2">47 Contact Me <i data-feather="send" class="w-4 h-4"></i>48 </a>49 </div>50 </div>51 </section>52 53 <section class="glass p-8 md:p-12 rounded-2xl mb-16">54 <h2 class="text-3xl font-bold mb-8">My <span class="text-primary">Journey</span></h2>55 <div class="space-y-8 relative">56 <div class="absolute left-8 top-0 bottom-0 w-0.5 bg-gray-700"></div>57 58 <div class="flex gap-6 relative">59 <div class="bg-primary rounded-full p-2 h-8 w-8 flex-shrink-0 flex items-center justify-center">60 <i data-feather="book" class="w-4 h-4"></i>61 </div>62 <div>63 <h3 class="text-xl font-bold mb-2">Computer Science Degree</h3>64 <p class="text-gray-400 mb-2">University of Technology</p>65 <p class="text-gray-500">2015 - 2019</p>66 </div>67 </div>68 69 <div class="flex gap-6 relative">70 <div class="bg-primary rounded-full p-2 h-8 w-8 flex-shrink-0 flex items-center justify-center">71 <i data-feather="briefcase" class="w-4 h-4"></i>72 </div>73 <div>74 <h3 class="text-xl font-bold mb-2">Frontend Developer</h3>75 <p class="text-gray-400 mb-2">Digital Solutions Inc.</p>76 <p class="text-gray-500">2019 - 2020</p>77 </div>78 </div>79 80 <div class="flex gap-6 relative">81 <div class="bg-primary rounded-full p-2 h-8 w-8 flex-shrink-0 flex items-center justify-center">82 <i data-feather="cpu" class="w-4 h-4"></i>83 </div>84 <div>85 <h3 class="text-xl font-bold mb-2">Fullstack Developer</h3>86 <p class="text-gray-400 mb-2">Tech Wizards LLC</p>87 <p class="text-gray-500">2020 - 2022</p>88 </div>89 </div>90 91 <div class="flex gap-6 relative">92 <div class="bg-primary rounded-full p-2 h-8 w-8 flex-shrink-0 flex items-center justify-center">93 <i data-feather="zap" class="w-4 h-4"></i>94 </div>95 <div>96 <h3 class="text-xl font-bold mb-2">Freelance Code Wizard</h3>97 <p class="text-gray-400 mb-2">Self-Employed</p>98 <p class="text-gray-500">2022 - Present</p>99 </div>100 </div>101 </div>102 </section>103 </main>104 105 <custom-footer></custom-footer>106 107 <script src="components/navbar.js"></script>108 <script src="components/footer.js"></script>109 <script src="script.js"></script>110 <script>111 feather.replace();112 </script>113</body>114</html>