MohPy/springboot-simplified-wizardry
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>SpringBoot Simplified Wizardry</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>12 <style>13 .hero-gradient {14 background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);15 }16 .card-hover {17 transition: all 0.3s ease;18 }19 .card-hover:hover {20 transform: translateY(-5px);21 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);22 }23 .code-block {24 font-family: 'Courier New', monospace;25 background-color: #2d3748;26 color: #e2e8f0;27 border-radius: 0.5rem;28 padding: 1rem;29 overflow-x: auto;30 }31 </style>32</head>33<body>34 <div id="vanta-bg" class="min-h-screen flex flex-col">35 <nav class="bg-white bg-opacity-90 shadow-sm">36 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">37 <div class="flex justify-between h-16">38 <div class="flex items-center">39 <i data-feather="coffee" class="text-purple-600"></i>40 <span class="ml-2 text-xl font-bold text-gray-800">SpringBoot Wizardry</span>41 </div>42 <div class="hidden md:flex items-center space-x-8">43 <a href="#" class="text-purple-600 font-medium">Home</a>44 <a href="#tutorials" class="text-gray-600 hover:text-purple-600">Tutorials</a>45 <a href="#resources" class="text-gray-600 hover:text-purple-600">Resources</a>46 <a href="#about" class="text-gray-600 hover:text-purple-600">About</a>47 </div>48 <button class="md:hidden text-gray-600">49 <i data-feather="menu"></i>50 </button>51 </div>52 </div>53 </nav>54 55 <main class="flex-grow">56 <!-- Hero Section -->57 <section class="hero-gradient text-white py-20 px-4">58 <div class="max-w-4xl mx-auto text-center">59 <h1 class="text-4xl md:text-6xl font-bold mb-6">Master Spring Boot CRUD Like a Wizard</h1>60 <p class="text-xl md:text-2xl mb-10 opacity-90">Learn to build powerful Java applications with our step-by-step guide to Spring Boot and MySQL</p>61 <a href="#tutorials" class="bg-white text-purple-600 font-bold py-3 px-8 rounded-full shadow-lg hover:bg-gray-100 transition duration-300 inline-flex items-center">62 Start Learning <i data-feather="arrow-right" class="ml-2"></i>63 </a>64 </div>65 </section>66 67 <!-- Tutorials Section -->68 <section id="tutorials" class="py-16 px-4 bg-white">69 <div class="max-w-7xl mx-auto">70 <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Step-by-Step Tutorials</h2>71 72 <div class="grid md:grid-cols-2 gap-8">73 <!-- Part 1 -->74 <div class="bg-gray-50 rounded-xl p-6 card-hover border border-gray-200">75 <div class="flex items-center mb-4">76 <div class="bg-purple-100 text-purple-600 p-3 rounded-full mr-4">77 <i data-feather="book-open" class="w-6 h-6"></i>78 </div>79 <h3 class="text-xl font-bold text-gray-800">Part 1: Setup & Basics</h3>80 </div>81 <p class="text-gray-600 mb-4">Learn how to set up your Spring Boot project and create your first CRUD operations.</p>82 83 <div class="mb-4">84 <h4 class="font-semibold text-gray-700 mb-2">Key Steps:</h4>85 <ul class="list-disc list-inside text-gray-600 space-y-1">86 <li>Project initialization with Spring Initializr</li>87 <li>Configuring MySQL database</li>88 <li>Creating Entity classes</li>89 <li>Basic Repository setup</li>90 </ul>91 </div>92 93 <img src="http://static.photos/technology/640x360/1" alt="Spring Boot Setup" class="rounded-lg mb-4 w-full h-auto">94 95 <div class="code-block mb-4">96 <pre><code>@SpringBootApplication97public class Application {98 public static void main(String[] args) {99 SpringApplication.run(Application.class, args);100 }101}</code></pre>102 </div>103 104 <a href="#" class="text-purple-600 font-medium inline-flex items-center hover:underline">105 Read Full Tutorial <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>106 </a>107 </div>108 109 <!-- Part 2 -->110 <div class="bg-gray-50 rounded-xl p-6 card-hover border border-gray-200">111 <div class="flex items-center mb-4">112 <div class="bg-purple-100 text-purple-600 p-3 rounded-full mr-4">113 <i data-feather="database" class="w-6 h-6"></i>114 </div>115 <h3 class="text-xl font-bold text-gray-800">Part 2: Advanced CRUD</h3>116 </div>117 <p class="text-gray-600 mb-4">Dive deeper into Spring Boot CRUD operations with MySQL database integration.</p>118 119 <div class="mb-4">120 <h4 class="font-semibold text-gray-700 mb-2">Key Steps:</h4>121 <ul class="list-disc list-inside text-gray-600 space-y-1">122 <li>Implementing Service layer</li>123 <li>Creating RESTful Controllers</li>124 <li>Handling exceptions</li>125 <li>Testing with Postman</li>126 </ul>127 </div>128 129 <img src="http://static.photos/technology/640x360/2" alt="Spring Boot CRUD" class="rounded-lg mb-4 w-full h-auto">130 131 <div class="code-block mb-4">132 <pre><code>@RestController133@RequestMapping("/api/books")134public class BookController {135 136 @Autowired137 private BookService bookService;138 139 @GetMapping140 public List<Book> getAllBooks() {141 return bookService.findAll();142 }143}</code></pre>144 </div>145 146 <a href="#" class="text-purple-600 font-medium inline-flex items-center hover:underline">147 Read Full Tutorial <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>148 </a>149 </div>150 </div>151 </div>152 </section>153 154 <!-- Resources Section -->155 <section id="resources" class="py-16 px-4 bg-gray-50">156 <div class="max-w-7xl mx-auto">157 <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Essential Resources</h2>158 159 <div class="grid md:grid-cols-3 gap-6">160 <div class="bg-white rounded-xl p-6 shadow-sm card-hover">161 <div class="bg-purple-100 text-purple-600 p-3 rounded-full inline-block mb-4">162 <i data-feather="download"></i>163 </div>164 <h3 class="text-xl font-bold mb-2 text-gray-800">Spring Initializr</h3>165 <p class="text-gray-600 mb-4">Quickly bootstrap your Spring Boot project with this essential tool.</p>166 <a href="https://start.spring.io" target="_blank" class="text-purple-600 font-medium inline-flex items-center hover:underline">167 Visit Site <i data-feather="external-link" class="ml-1 w-4 h-4"></i>168 </a>169 </div>170 171 <div class="bg-white rounded-xl p-6 shadow-sm card-hover">172 <div class="bg-purple-100 text-purple-600 p-3 rounded-full inline-block mb-4">173 <i data-feather="book"></i>174 </div>175 <h3 class="text-xl font-bold mb-2 text-gray-800">Spring Documentation</h3>176 <p class="text-gray-600 mb-4">Official documentation for all things Spring and Spring Boot.</p>177 <a href="https://spring.io/projects/spring-boot" target="_blank" class="text-purple-600 font-medium inline-flex items-center hover:underline">178 View Docs <i data-feather="external-link" class="ml-1 w-4 h-4"></i>179 </a>180 </div>181 182 <div class="bg-white rounded-xl p-6 shadow-sm card-hover">183 <div class="bg-purple-100 text-purple-600 p-3 rounded-full inline-block mb-4">184 <i data-feather="github"></i>185 </div>186 <h3 class="text-xl font-bold mb-2 text-gray-800">GitHub Repository</h3>187 <p class="text-gray-600 mb-4">Complete source code for the CRUD application tutorial.</p>188 <a href="https://github.com/example/spring-boot-crud" target="_blank" class="text-purple-600 font-medium inline-flex items-center hover:underline">189 View Code <i data-feather="external-link" class="ml-1 w-4 h-4"></i>190 </a>191 </div>192 </div>193 </div>194 </section>195 196 <!-- About Section -->197 <section id="about" class="py-16 px-4 bg-white">198 <div class="max-w-4xl mx-auto">199 <div class="text-center mb-12">200 <h2 class="text-3xl font-bold text-gray-800 mb-4">About This Guide</h2>201 <p class="text-xl text-gray-600 max-w-3xl mx-auto">This comprehensive guide is designed to help Java developers quickly get started with Spring Boot and MySQL for building CRUD applications.</p>202 </div>203 204 <div class="grid md:grid-cols-2 gap-8 items-center">205 <div>206 <h3 class="text-2xl font-bold text-gray-800 mb-4">What You'll Learn</h3>207 <ul class="space-y-3 text-gray-600">208 <li class="flex items-start">209 <i data-feather="check" class="text-purple-600 mr-2 mt-1 flex-shrink-0"></i>210 <span>Fundamentals of Spring Boot architecture</span>211 </li>212 <li class="flex items-start">213 <i data-feather="check" class="text-purple-600 mr-2 mt-1 flex-shrink-0"></i>214 <span>Database configuration with MySQL</span>215 </li>216 <li class="flex items-start">217 <i data-feather="check" class="text-purple-600 mr-2 mt-1 flex-shrink-0"></i>218 <span>Implementing complete CRUD operations</span>219 </li>220 <li class="flex items-start">221 <i data-feather="check" class="text-purple-600 mr-2 mt-1 flex-shrink-0"></i>222 <span>Best practices for RESTful APIs</span>223 </li>224 <li class="flex items-start">225 <i data-feather="check" class="text-purple-600 mr-2 mt-1 flex-shrink-0"></i>226 <span>Error handling and validation techniques</span>227 </li>228 </ul>229 </div>230 <div>231 <img src="http://static.photos/workspace/640x360/3" alt="Developer workspace" class="rounded-lg shadow-md w-full h-auto">232 </div>233 </div>234 </div>235 </section>236 237 <!-- CTA Section -->238 <section class="py-16 px-4 hero-gradient text-white">239 <div class="max-w-4xl mx-auto text-center">240 <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Master Spring Boot?</h2>241 <p class="text-xl mb-8 opacity-90">Start building your own CRUD applications today with our comprehensive guide.</p>242 <div class="flex flex-col sm:flex-row justify-center gap-4">243 <a href="#tutorials" class="bg-white text-purple-600 font-bold py-3 px-8 rounded-full shadow-lg hover:bg-gray-100 transition duration-300">244 Begin Tutorial245 </a>246 <a href="#" class="bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-full hover:bg-white hover:text-purple-600 transition duration-300">247 Download Code248 </a>249 </div>250 </div>251 </section>252 </main>253 254 <footer class="bg-gray-900 text-white py-12 px-4">255 <div class="max-w-7xl mx-auto">256 <div class="grid md:grid-cols-4 gap-8">257 <div>258 <div class="flex items-center mb-4">259 <i data-feather="coffee" class="text-purple-400"></i>260 <span class="ml-2 text-xl font-bold">SpringBoot Wizardry</span>261 </div>262 <p class="text-gray-400">Making Spring Boot accessible for all developers through comprehensive tutorials and resources.</p>263 </div>264 <div>265 <h4 class="text-lg font-semibold mb-4">Tutorials</h4>266 <ul class="space-y-2">267 <li><a href="#" class="text-gray-400 hover:text-white">Getting Started</a></li>268 <li><a href="#" class="text-gray-400 hover:text-white">CRUD Operations</a></li>269 <li><a href="#" class="text-gray-400 hover:text-white">Database Integration</a></li>270 <li><a href="#" class="text-gray-400 hover:text-white">Advanced Topics</a></li>271 </ul>272 </div>273 <div>274 <h4 class="text-lg font-semibold mb-4">Resources</h4>275 <ul class="space-y-2">276 <li><a href="#" class="text-gray-400 hover:text-white">Cheat Sheets</a></li>277 <li><a href="#" class="text-gray-400 hover:text-white">Sample Code</a></li>278 <li><a href="#" class="text-gray-400 hover:text-white">Troubleshooting</a></li>279 <li><a href="#" class="text-gray-400 hover:text-white">Community</a></li>280 </ul>281 </div>282 <div>283 <h4 class="text-lg font-semibold mb-4">Connect</h4>284 <div class="flex space-x-4">285 <a href="#" class="text-gray-400 hover:text-white">286 <i data-feather="twitter"></i>287 </a>288 <a href="#" class="text-gray-400 hover:text-white">289 <i data-feather="github"></i>290 </a>291 <a href="#" class="text-gray-400 hover:text-white">292 <i data-feather="linkedin"></i>293 </a>294 <a href="#" class="text-gray-400 hover:text-white">295 <i data-feather="mail"></i>296 </a>297 </div>298 </div>299 </div>300 <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">301 <p>© 2023 SpringBoot Wizardry. All rights reserved.</p>302 </div>303 </div>304 </footer>305 </div>306 307 <script>308 // Initialize Vanta.js background309 VANTA.NET({310 el: "#vanta-bg",311 mouseControls: true,312 touchControls: true,313 gyroControls: false,314 minHeight: 200.00,315 minWidth: 200.00,316 scale: 1.00,317 scaleMobile: 1.00,318 color: 0x7c3aed,319 backgroundColor: 0xf8fafc,320 points: 10.00,321 maxDistance: 22.00,322 spacing: 17.00323 });324 </script>325 <script>326 feather.replace();327 </script>328</body>329</html>330