Socrates94/codecaf-java-spring-delight
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>Our Projects | CodeCafé</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 <style>12 .project-card {13 transition: all 0.3s ease;14 }15 .project-card:hover {16 transform: translateY(-5px);17 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);18 }19 .tech-badge {20 transition: all 0.2s ease;21 }22 .tech-badge:hover {23 transform: scale(1.05);24 }25 </style>26</head>27<body class="bg-gray-50">28 <!-- Navigation -->29 <nav class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-lg shadow-sm">30 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">31 <div class="flex justify-between h-16">32 <div class="flex items-center">33 <div class="flex-shrink-0 flex items-center">34 <i data-feather="coffee" class="h-8 w-8 text-indigo-600"></i>35 <span class="ml-2 text-xl font-bold text-gray-900">CodeCafé</span>36 </div>37 </div>38 <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">39 <a href="index.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Home</a>40 <a href="projects.html" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-indigo-500 text-sm font-medium">Projects</a>41 <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Services</a>42 <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">About</a>43 <a href="#" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Contact</a>44 </div>45 <div class="-mr-2 flex items-center md:hidden">46 <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">47 <span class="sr-only">Open main menu</span>48 <i data-feather="menu"></i>49 </button>50 </div>51 </div>52 </div>53 </nav>54 55 <!-- Projects Header -->56 <div class="bg-indigo-700 text-white py-16">57 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">58 <h1 class="text-4xl font-extrabold tracking-tight mb-6">59 Our Java & Spring Projects60 </h1>61 <p class="text-xl mb-8 text-indigo-100 max-w-3xl mx-auto">62 Explore our portfolio of Java, Spring Boot, and PostgreSQL applications built for various industries and use cases.63 </p>64 </div>65 </div>66 67 <!-- Projects Grid -->68 <div class="py-12 bg-gray-50">69 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">70 <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">71 <!-- Project 1 -->72 <div class="project-card bg-white rounded-xl shadow-md overflow-hidden">73 <div class="h-48 overflow-hidden">74 <img src="http://static.photos/finance/1024x576/101" alt="E-Commerce Platform" class="w-full h-full object-cover">75 </div>76 <div class="p-6">77 <div class="flex items-center">78 <h3 class="text-xl font-bold text-gray-900">E-Commerce Platform</h3>79 <span class="ml-auto px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">Live</span>80 </div>81 <p class="mt-3 text-gray-600">82 High-performance e-commerce backend with Spring Boot, handling 10,000+ daily transactions.83 </p>84 <div class="mt-4 flex flex-wrap gap-2">85 <span class="tech-badge px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">Java 11</span>86 <span class="tech-badge px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">Spring Boot</span>87 <span class="tech-badge px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">PostgreSQL</span>88 <span class="tech-badge px-2 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded">Redis</span>89 </div>90 <div class="mt-4 flex justify-between items-center">91 <a href="#" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center">92 <i data-feather="external-link" class="w-4 h-4 mr-1"></i> View Demo93 </a>94 <a href="#" class="text-gray-500 hover:text-gray-700 text-sm font-medium flex items-center">95 <i data-feather="github" class="w-4 h-4 mr-1"></i> Source Code96 </a>97 </div>98 </div>99 </div>100 101 <!-- Project 2 -->102 <div class="project-card bg-white rounded-xl shadow-md overflow-hidden">103 <div class="h-48 overflow-hidden">104 <img src="http://static.photos/medical/1024x576/102" alt="Healthcare System" class="w-full h-full object-cover">105 </div>106 <div class="p-6">107 <div class="flex items-center">108 <h3 class="text-xl font-bold text-gray-900">Healthcare Management</h3>109 <span class="ml-auto px-3 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded-full">In Development</span>110 </div>111 <p class="mt-3 text-gray-600">112 HIPAA-compliant patient management system with secure data handling and reporting.113 </p>114 <div class="mt-4 flex flex-wrap gap-2">115 <span class="tech-badge px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">Java 17</span>116 <span class="tech-badge px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">Spring Security</span>117 <span class="tech-badge px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">PostgreSQL</span>118 <span class="tech-badge px-2 py-1 bg-red-100 text-red-800 text-xs font-medium rounded">Hibernate</span>119 </div>120 <div class="mt-4 flex justify-between items-center">121 <a href="#" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center">122 <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Case Study123 </a>124 <a href="#" class="text-gray-500 hover:text-gray-700 text-sm font-medium flex items-center">125 <i data-feather="github" class="w-4 h-4 mr-1"></i> Components126 </a>127 </div>128 </div>129 </div>130 131 <!-- Project 3 -->132 <div class="project-card bg-white rounded-xl shadow-md overflow-hidden">133 <div class="h-48 overflow-hidden">134 <img src="http://static.photos/education/1024x576/103" alt="Learning Platform" class="w-full h-full object-cover">135 </div>136 <div class="p-6">137 <div class="flex items-center">138 <h3 class="text-xl font-bold text-gray-900">E-Learning Platform</h3>139 <span class="ml-auto px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">Live</span>140 </div>141 <p class="mt-3 text-gray-600">142 Scalable online learning system with video processing and real-time analytics.143 </p>144 <div class="mt-4 flex flex-wrap gap-2">145 <span class="tech-badge px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">Java 11</span>146 <span class="tech-badge px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">Spring Cloud</span>147 <span class="tech-badge px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">PostgreSQL</span>148 <span class="tech-badge px-2 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded">Kafka</span>149 </div>150 <div class="mt-4 flex justify-between items-center">151 <a href="#" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center">152 <i data-feather="external-link" class="w-4 h-4 mr-1"></i> View Demo153 </a>154 <a href="#" class="text-gray-500 hover:text-gray-700 text-sm font-medium flex items-center">155 <i data-feather="github" class="w-4 h-4 mr-1"></i> Source Code156 </a>157 </div>158 </div>159 </div>160 161 <!-- Project 4 -->162 <div class="project-card bg-white rounded-xl shadow-md overflow-hidden">163 <div class="h-48 overflow-hidden">164 <img src="http://static.photos/retail/1024x576/104" alt="Inventory System" class="w-full h-full object-cover">165 </div>166 <div class="p-6">167 <div class="flex items-center">168 <h3 class="text-xl font-bold text-gray-900">Inventory Management</h3>169 <span class="ml-auto px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">Live</span>170 </div>171 <p class="mt-3 text-gray-600">172 Multi-warehouse inventory system with real-time tracking and predictive analytics.173 </p>174 <div class="mt-4 flex flex-wrap gap-2">175 <span class="tech-badge px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">Java 8</span>176 <span class="tech-badge px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">Spring Data</span>177 <span class="tech-badge px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">PostgreSQL</span>178 <span class="tech-badge px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded">Quartz</span>179 </div>180 <div class="mt-4 flex justify-between items-center">181 <a href="#" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center">182 <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Case Study183 </a>184 <a href="#" class="text-gray-500 hover:text-gray-700 text-sm font-medium flex items-center">185 <i data-feather="github" class="w-4 h-4 mr-1"></i> Components186 </a>187 </div>188 </div>189 </div>190 191 <!-- Project 5 -->192 <div class="project-card bg-white rounded-xl shadow-md overflow-hidden">193 <div class="h-48 overflow-hidden">194 <img src="http://static.photos/finance/1024x576/105" alt="Banking API" class="w-full h-full object-cover">195 </div>196 <div class="p-6">197 <div class="flex items-center">198 <h3 class="text-xl font-bold text-gray-900">Banking API Gateway</h3>199 <span class="ml-auto px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">Live</span>200 </div>201 <p class="mt-3 text-gray-600">202 Secure financial API platform with OAuth2 authentication and transaction processing.203 </p>204 <div class="mt-4 flex flex-wrap gap-2">205 <span class="tech-badge px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">Java 11</span>206 <span class="tech-badge px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">Spring Security</span>207 <span class="tech-badge px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">PostgreSQL</span>208 <span class="tech-badge px-2 py-1 bg-red-100 text-red-800 text-xs font-medium rounded">OAuth2</span>209 </div>210 <div class="mt-4 flex justify-between items-center">211 <a href="#" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center">212 <i data-feather="external-link" class="w-4 h-4 mr-1"></i> API Docs213 </a>214 <a href="#" class="text-gray-500 hover:text-gray-700 text-sm font-medium flex items-center">215 <i data-feather="github" class="w-4 h-4 mr-1"></i> SDK216 </a>217 </div>218 </div>219 </div>220 221 <!-- Project 6 -->222 <div class="project-card bg-white rounded-xl shadow-md overflow-hidden">223 <div class="h-48 overflow-hidden">224 <img src="http://static.photos/technology/1024x576/106" alt="IoT Platform" class="w-full h-full object-cover">225 </div>226 <div class="p-6">227 <div class="flex items-center">228 <h3 class="text-xl font-bold text-gray-900">IoT Data Platform</h3>229 <span class="ml-auto px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">Open Source</span>230 </div>231 <p class="mt-3 text-gray-600">232 High-throughput IoT data processing system with time-series capabilities.233 </p>234 <div class="mt-4 flex flex-wrap gap-2">235 <span class="tech-badge px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">Java 17</span>236 <span class="tech-badge px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">Spring Integration</span>237 <span class="tech-badge px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">TimescaleDB</span>238 <span class="tech-badge px-2 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded">MQTT</span>239 </div>240 <div class="mt-4 flex justify-between items-center">241 <a href="#" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center">242 <i data-feather="external-link" class="w-4 h-4 mr-1"></i> Live Demo243 </a>244 <a href="#" class="text-gray-500 hover:text-gray-700 text-sm font-medium flex items-center">245 <i data-feather="github" class="w-4 h-4 mr-1"></i> Source Code246 </a>247 </div>248 </div>249 </div>250 </div>251 252 <div class="mt-12 text-center">253 <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">254 <i data-feather="github" class="mr-2"></i> View All Projects on GitHub255 </a>256 </div>257 </div>258 </div>259 260 <!-- Footer -->261 <footer class="bg-gray-800">262 <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">263 <div class="grid grid-cols-2 gap-8 md:grid-cols-4">264 <div class="col-span-2">265 <div class="flex items-center">266 <i data-feather="coffee" class="h-8 w-8 text-indigo-400"></i>267 <span class="ml-2 text-xl font-bold text-white">CodeCafé</span>268 </div>269 <p class="mt-4 text-gray-300">270 Specializing in Java, Spring Boot, and PostgreSQL development to bring your ideas to life.271 </p>272 </div>273 <div>274 <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Solutions</h3>275 <ul class="mt-4 space-y-4">276 <li><a href="#" class="text-base text-gray-300 hover:text-white">Backend Development</a></li>277 <li><a href="#" class="text-base text-gray-300 hover:text-white">API Design</a></li>278 <li><a href="#" class="text-base text-gray-300 hover:text-white">Database Architecture</a></li>279 <li><a href="#" class="text-base text-gray-300 hover:text-white">Cloud Integration</a></li>280 </ul>281 </div>282 <div>283 <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>284 <ul class="mt-4 space-y-4">285 <li><a href="#" class="text-base text-gray-300 hover:text-white">GitHub</a></li>286 <li><a href="#" class="text-base text-gray-300 hover:text-white">LinkedIn</a></li>287 <li><a href="#" class="text-base text-gray-300 hover:text-white">Twitter</a></li>288 <li><a href="#" class="text-base text-gray-300 hover:text-white">Email</a></li>289 </ul>290 </div>291 </div>292 <div class="mt-12 border-t border-gray-700 pt-8 flex justify-between">293 <p class="text-base text-gray-400">294 © 2023 CodeCafé. All rights reserved.295 </p>296 <div class="flex space-x-6">297 <a href="#" class="text-gray-400 hover:text-gray-300">298 <i data-feather="github"></i>299 </a>300 <a href="#" class="text-gray-400 hover:text-gray-300">301 <i data-feather="twitter"></i>302 </a>303 <a href="#" class="text-gray-400 hover:text-gray-300">304 <i data-feather="linkedin"></i>305 </a>306 </div>307 </div>308 </div>309 </footer>310 311 <script>312 feather.replace();313 </script>314</body>315</html>316