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>Chanavee Bekaku | Software Engineer</title> 7 8 <!-- Meta tags for SEO --> 9 <meta name="description" content="Chanavee Bekaku - Software Development Manager with 15+ years of experience building scalable web, mobile, and cloud applications"> 10 <meta name="keywords" content="Software Development, Full Stack Developer, Java, JavaScript, TypeScript, PHP, Spring Boot, Vue.js"> 11 12 <!-- Favicon --> 13 <link rel="icon" type="image/png" href="portfolio/images/favicon-16x16.png"> 14 15 <!-- Google Fonts --> 16 <link rel="preconnect" href="https://fonts.googleapis.com"> 17 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 18 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet"> 19 20 <!-- Font Awesome for icons --> 21 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 22 23 <!-- Custom CSS --> 24 <link rel="stylesheet" href="portfolio/css/styles.css"> 25 26 <meta property="og:title" content="Chanavee Bekaku" /> 27 <meta property="og:description" content="Software Development Manager with 15+ years of experience building scalable web, mobile, and cloud applications" /> 28 <meta property="og:url" content="https://bekaku.github.io" /> 29 <meta property="og:image" content="https://avatars.githubusercontent.com/u/33171470?v=4" /> 30</head> 31<body> 32 <!-- Navigation --> 33 <header class="header"> 34 <div class="container"> 35 <nav class="navbar"> 36 <div class="logo"> 37 <a href="#home">CB</a> 38 </div> 39 <div class="nav-links"> 40 <ul> 41 <li><a href="#about">About</a></li> 42 <li><a href="#skills">Skills</a></li> 43 <li><a href="#projects">Projects</a></li> 44 <li><a href="#interests">Interests</a></li> 45 <li><a href="#contact">Contact</a></li> 46 </ul> 47 </div> 48 <div class="hamburger"> 49 <span class="bar"></span> 50 <span class="bar"></span> 51 <span class="bar"></span> 52 </div> 53 </nav> 54 </div> 55 </header> 56 57 <!-- Hero Section --> 58 <section id="home" class="hero"> 59 <div class="container"> 60 <div class="hero-content"> 61 <div class="hero-image"> 62 <img src="https://avatars.githubusercontent.com/u/33171470?v=4" alt="Chanavee Bekaku"> 63 </div> 64 <div class="hero-text"> 65 <h1>Chanavee Bekaku</h1> 66 <h2>Software Engineer</h2> 67 <p>Full Stack Developer with <span class="highlight">15+ years</span> of experience building scalable web, mobile, and cloud applications</p> 68 <div class="hero-cta"> 69 <a href="#projects" class="btn btn-primary">View Projects</a> 70 <a href="https://www.linkedin.com/in/bekaku/" target="_blank" class="btn btn-secondary"> 71 <i class="fab fa-linkedin"></i> LinkedIn 72 </a> 73 </div> 74 </div> 75 </div> 76 </div> 77 </section> 78 79 <!-- About Section --> 80 <section id="about" class="about"> 81 <div class="container"> 82 <h2 class="section-title">About Me</h2> 83 <div class="about-content"> 84 <div class="about-text"> 85 <p>From building backend microservices to crafting polished frontend experiences, I've worn many hats in the software world.</p> 86 <p>I currently lead engineering teams, architect systems, and drive tech-forward innovation for organizations. â helping businesses grow through code.</p> 87 <p>I believe in open-source, automation, and staying curious in a fast-moving world.</p> 88 </div> 89 </div> 90 </div> 91 </section> 92 93 <!-- Skills Section --> 94 <section id="skills" class="skills"> 95 <div class="container"> 96 <h2 class="section-title">Tech Stack</h2> 97 98 <div class="skills-category"> 99 <h3>Languages & Core Tech</h3> 100 <div class="skills-grid"> 101 <div class="skill-item"> 102 <i class="fab fa-js"></i> 103 <!--<img src="portfolio/icons/javascript.svg" alt="javascript" style="">-->
104 <span>JavaScript</span> 105 </div> 106 <div class="skill-item"> 107 <i class="fab fa-js"></i> 108 <span>TypeScript</span> 109 </div> 110 <div class="skill-item"> 111 <i class="fab fa-java"></i> 112 <span>Java</span> 113 </div> 114 <div class="skill-item"> 115 <i class="fab fa-php"></i> 116 <span>PHP</span> 117 </div> 118 <div class="skill-item"> 119 <i class="fab fa-html5"></i> 120 <span>HTML5</span> 121 </div> 122 <div class="skill-item"> 123 <i class="fab fa-css3-alt"></i> 124 <span>CSS</span> 125 </div> 126 <div class="skill-item"> 127 <i class="fab fa-sass"></i> 128 <span>Sass</span> 129 </div> 130 <div class="skill-item"> 131 <i class="fab fa-markdown"></i> 132 <span>Markdown</span> 133 </div> 134 </div> 135 </div> 136 137 <div class="skills-category"> 138 <h3>Backend</h3> 139 <div class="skills-grid"> 140 <div class="skill-item"> 141 <i class="fas fa-leaf"></i> 142 <span>Spring Boot</span> 143 </div> 144 <div class="skill-item"> 145 <i class="fas fa-cogs"></i> 146 <span>Gradle</span> 147 </div> 148 <div class="skill-item"> 149 <i class="fab fa-laravel"></i> 150 <span>Laravel</span> 151 </div> 152 <div class="skill-item"> 153 <i class="fab fa-node-js"></i> 154 <span>Node.js</span> 155 </div> 156 <div class="skill-item"> 157 <i class="fas fa-key"></i> 158 <span>JWT</span> 159 </div> 160 </div> 161 </div> 162 163 <div class="skills-category"> 164 <h3>Frontend Frameworks</h3> 165 <div class="skills-grid"> 166 <div class="skill-item"> 167 <i class="fab fa-vuejs"></i> 168 <span>Vue.js</span> 169 </div> 170 <div class="skill-item"> 171 <i class="fab fa-vuejs"></i> 172 <span>Nuxt.js</span> 173 </div> 174 <div class="skill-item"> 175 <i class="fas fa-layer-group"></i> 176 <span>Vuetify</span> 177 </div> 178 <div class="skill-item"> 179 <i class="fas fa-atom"></i> 180 <span>Quasar</span> 181 </div> 182 <div class="skill-item"> 183 <i class="fas fa-bolt"></i> 184 <span>Vite</span> 185 </div> 186 </div> 187 </div> 188 189 <div class="skills-category"> 190 <h3>Mobile Development</h3> 191 <div class="skills-grid"> 192 <div class="skill-item"> 193 <i class="fas fa-mobile-alt"></i> 194 <span>Capacitor</span> 195 </div> 196 <div class="skill-item"> 197 <i class="fas fa-mobile"></i> 198 <span>Cordova</span> 199 </div> 200 <div class="skill-item"> 201 <i class="fas fa-bolt"></i> 202 <span>Ionic</span> 203 </div> 204 <div class="skill-item"> 205 <i class="fab fa-android"></i>
206 <span>Android</span> 207 </div> 208 </div> 209 </div> 210 211 <div class="skills-category"> 212 <h3>Databases & Caching</h3> 213 <div class="skills-grid"> 214 <div class="skill-item"> 215 <i class="fas fa-database"></i> 216 <span>MySQL</span> 217 </div> 218 <div class="skill-item"> 219 <i class="fas fa-database"></i> 220 <span>PostgreSQL</span> 221 </div> 222 <div class="skill-item"> 223 <i class="fas fa-memory"></i> 224 <span>Redis</span> 225 </div> 226 </div> 227 </div> 228 229 <div class="skills-category"> 230 <h3>Messaging & Streaming</h3> 231 <div class="skills-grid"> 232 <div class="skill-item"> 233 <i class="fas fa-envelope"></i> 234 <span>RabbitMQ</span> 235 </div> 236 <div class="skill-item"> 237 <i class="fas fa-stream"></i> 238 <span>Apache Kafka</span> 239 </div> 240 </div> 241 </div> 242 243 <div class="skills-category"> 244 <h3>DevOps & Infrastructure</h3> 245 <div class="skills-grid"> 246 <div class="skill-item"> 247 <i class="fab fa-docker"></i> 248 <span>Docker</span> 249 </div> 250 <div class="skill-item"> 251 <i class="fab fa-linux"></i> 252 <span>Linux</span> 253 </div> 254 <div class="skill-item"> 255 <i class="fab fa-ubuntu"></i> 256 <span>Ubuntu</span> 257 </div> 258 <div class="skill-item"> 259 <i class="fab fa-git-alt"></i> 260 <span>Git</span> 261 </div> 262 <div class="skill-item"> 263 <i class="fab fa-npm"></i> 264 <span>NPM</span> 265 </div> 266 <div class="skill-item"> 267 <i class="fab fa-npm"></i> 268 <span>PNPM</span> 269 </div> 270 </div> 271 </div> 272 273 <div class="skills-category"> 274 <h3>Monitoring & Observability</h3> 275 <div class="skills-grid"> 276 <div class="skill-item"> 277 <i class="fas fa-chart-line"></i> 278 <span>Grafana</span> 279 </div> 280 <div class="skill-item"> 281 <i class="fas fa-fire"></i> 282 <span>Prometheus</span> 283 </div> 284 </div> 285 </div> 286 </div> 287 </section> 288 289 <!-- Projects Section --> 290 <section id="projects" class="projects"> 291 <div class="container"> 292 <h2 class="section-title">Projects</h2> 293 294 <div class="project-filters"> 295 <button class="filter-btn active" data-filter="all">All</button> 296 <button class="filter-btn" data-filter="backend">Backend</button> 297 <button class="filter-btn" data-filter="frontend">Frontend</button> 298 <button class="filter-btn" data-filter="mobile">Mobile</button> 299 </div> 300 301 <div class="projects-grid"> 302 <!-- Backend Projects --> 303 <div class="project-card" data-category="backend"> 304 <div class="project-content"> 305 <h3>Spring Boot Starter Template</h3> 306 <p>A modern and modular starter template for building robust REST APIs using Spring Boot. Designed for quick bootstrapping of secure, production-ready Java backends.</p> 307 <div class="project-tech">
308 <span class="tech-badge">Java</span> 309 <span class="tech-badge">Spring Boot</span> 310 <span class="tech-badge">Gradle</span> 311 <span class="tech-badge">MySQL</span> 312 <span class="tech-badge">Docker</span> 313 </div> 314 <div class="project-links"> 315 <a href="https://github.com/bekaku/java-spring-boot-starter" target="_blank" class="btn btn-sm"> 316 <i class="fab fa-github"></i> View Project 317 </a> 318 </div> 319 </div> 320 </div> 321 322 <div class="project-card" data-category="backend"> 323 <div class="project-content"> 324 <h3>MySQL8 Master-Slave Replication</h3> 325 <p>MySQL8 Master-Slave replication environment using Docker Compose.</p> 326 <div class="project-tech"> 327 <span class="tech-badge">MySQL</span> 328 <span class="tech-badge">Docker</span> 329 </div> 330 <div class="project-links"> 331 <a href="https://github.com/bekaku/mysql-replecation-docker" target="_blank" class="btn btn-sm"> 332 <i class="fab fa-github"></i> View Project 333 </a> 334 </div> 335 </div> 336 </div> 337 338 <div class="project-card" data-category="backend"> 339 <div class="project-content"> 340 <h3>Node.js Express MySQL Starter</h3> 341 <p>Starter Node.js, Express, Sequelize, MySQL.</p> 342 <div class="project-tech"> 343 <span class="tech-badge">Node.js</span> 344 <span class="tech-badge">Express</span> 345 </div> 346 <div class="project-links"> 347 <a href="https://github.com/bekaku/nodejs-express-mysql" target="_blank" class="btn btn-sm"> 348 <i class="fab fa-github"></i> View Project 349 </a> 350 </div> 351 </div> 352 </div> 353 354 <div class="project-card" data-category="backend"> 355 <div class="project-content"> 356 <h3>PHP WebSocket</h3> 357 <p>PHP websocket with thruway and autobahn-js</p> 358 <div class="project-tech"> 359 <span class="tech-badge">PHP</span> 360 <span class="tech-badge">JavaScript</span> 361 </div> 362 <div class="project-links"> 363 <a href="https://github.com/bekaku/php-thruway-web-socket-example" target="_blank" class="btn btn-sm"> 364 <i class="fab fa-github"></i> View Project 365 </a> 366 </div> 367 </div> 368 </div> 369 370 <div class="project-card" data-category="backend"> 371 <div class="project-content"> 372 <h3>Simple PHP REST APIs</h3> 373 <p>Simple PHP REST APIs</p> 374 <div class="project-tech"> 375 <span class="tech-badge">PHP</span> 376 <span class="tech-badge">MySQL</span> 377 </div> 378 <div class="project-links"> 379 <a href="https://github.com/bekaku/php-rest-api" target="_blank" class="btn btn-sm"> 380 <i class="fab fa-github"></i> View Project 381 </a> 382 </div> 383 </div> 384 </div> 385 386 <div class="project-card" data-category="backend"> 387 <div class="project-content"> 388 <h3>Forum Example PHP REST APIs</h3> 389 <p>Forum Example PHP REST APIs</p> 390 <div class="project-tech">
391 <span class="tech-badge">PHP</span> 392 <span class="tech-badge">MySQL</span> 393 </div> 394 <div class="project-links"> 395 <a href="https://github.com/bekaku/example-forum-rest-api-php" target="_blank" class="btn btn-sm"> 396 <i class="fab fa-github"></i> View Project 397 </a> 398 </div> 399 </div> 400 </div> 401 402 <!-- Frontend Projects --> 403 <div class="project-card" data-category="frontend"> 404 <div class="project-content"> 405 <h3>Vue JS 3 + Typescript + Quasar 2 Starter</h3> 406 <p>Vue JS 3 + Typescript + Quasar 2 Starter template + Docker</p> 407 <div class="project-tech"> 408 <span class="tech-badge">Vue.js</span> 409 <span class="tech-badge">Quasar</span> 410 <span class="tech-badge">TypeScript</span> 411 <span class="tech-badge">Docker</span> 412 </div> 413 <div class="project-links"> 414 <a href="https://bekaku.github.io/quasar-starter" target="_blank" class="btn btn-sm"> 415 <i class="fas fa-external-link-alt"></i> Demo 416 </a> 417 </div> 418 </div> 419 </div> 420 421 <div class="project-card" data-category="frontend"> 422 <div class="project-content"> 423 <h3>Nuxt 3 + Typescript + Quasar 2</h3> 424 <p>Nuxt 3 + Typescript + Quasar 2 + Docker</p> 425 <div class="project-tech"> 426 <span class="tech-badge">Vue.js</span> 427 <span class="tech-badge">Nuxt.js</span> 428 <span class="tech-badge">Quasar</span> 429 <span class="tech-badge">TypeScript</span> 430 <span class="tech-badge">Docker</span> 431 </div> 432 <div class="project-links"> 433 <a href="https://github.com/bekaku/nuxt-quasar-example-app" target="_blank" class="btn btn-sm"> 434 <i class="fab fa-github"></i> View Project 435 </a> 436 </div> 437 </div> 438 </div> 439 440 <div class="project-card" data-category="frontend"> 441 <div class="project-content"> 442 <h3>Vite + Vue js3 + TypeScript</h3> 443 <p>Starter template for Vite + Vue js3 + TypeScript project</p> 444 <div class="project-tech"> 445 <span class="tech-badge">Vue.js</span> 446 <span class="tech-badge">TypeScript</span> 447 <span class="tech-badge">Vite</span> 448 </div> 449 <div class="project-links"> 450 <a href="https://github.com/bekaku/vue3-vite-typescript" target="_blank" class="btn btn-sm"> 451 <i class="fab fa-github"></i> View Project 452 </a> 453 </div> 454 </div> 455 </div> 456 457 <div class="project-card" data-category="frontend"> 458 <div class="project-content"> 459 <h3>Vitepress Starter</h3> 460 <p>Vitepress starter</p> 461 <div class="project-tech"> 462 <span class="tech-badge">Vitepress</span> 463 </div> 464 <div class="project-links"> 465 <a href="https://github.com/bekaku/vitepress-starter" target="_blank" class="btn btn-sm"> 466 <i class="fab fa-github"></i> View Project 467 </a> 468 </div> 469 </div> 470 </div> 471 472 <div class="project-card" data-category="frontend"> 473 <div class="project-content"> 474 <h3>Vuetify Starter Template</h3> 475 <p>Vuejs, composition-api, Vuetify template</p> 476 <div class="project-tech">
477 <span class="tech-badge">Vue.js</span> 478 <span class="tech-badge">Vuetify</span> 479 </div> 480 <div class="project-links"> 481 <a href="https://github.com/bekaku/vuetify-starter-template" target="_blank" class="btn btn-sm"> 482 <i class="fab fa-github"></i> View Project 483 </a> 484 </div> 485 </div> 486 </div> 487 488 <div class="project-card" data-category="frontend"> 489 <div class="project-content"> 490 <h3>Firebase Cloud Messaging</h3> 491 <p>Vuejs send firebase cloud messaging</p> 492 <div class="project-tech"> 493 <span class="tech-badge">Vue.js</span> 494 </div> 495 <div class="project-links"> 496 <a href="https://github.com/bekaku/vuejs-send-firebase-cloud-messaging" target="_blank" class="btn btn-sm"> 497 <i class="fab fa-github"></i> View Project 498 </a> 499 </div> 500 </div> 501 </div> 502 503 <!-- Mobile Projects --> 504 <div class="project-card" data-category="mobile"> 505 <div class="project-content"> 506 <h3>Vue JS 3 + Typescript + Ionic 8</h3> 507 <p>Vue JS 3 + Typescript + Ionic 8</p> 508 <div class="project-tech"> 509 <span class="tech-badge">Vue.js</span> 510 <span class="tech-badge">Ionic</span> 511 <span class="tech-badge">TypeScript</span> 512 <span class="tech-badge">Vite</span> 513 </div> 514 <div class="project-links"> 515 <a href="https://github.com/bekaku/vue-ionic-example-app" target="_blank" class="btn btn-sm"> 516 <i class="fab fa-github"></i> View Project 517 </a> 518 </div> 519 </div> 520 </div> 521 522 <div class="project-card" data-category="mobile"> 523 <div class="project-content"> 524 <h3>Vue JS 3 + Nuxt + Ionic</h3> 525 <p>Vue JS 3 + Nuxt + Ionic</p> 526 <div class="project-tech"> 527 <span class="tech-badge">Vue.js</span> 528 <span class="tech-badge">Nuxt.js</span> 529 <span class="tech-badge">Ionic</span> 530 </div> 531 <div class="project-links"> 532 <a href="https://github.com/bekaku/nuxt-ionic" target="_blank" class="btn btn-sm"> 533 <i class="fab fa-github"></i> View Project 534 </a> 535 </div> 536 </div> 537 </div> 538 539 <div class="project-card" data-category="mobile"> 540 <div class="project-content"> 541 <h3>Android Forum Example</h3> 542 <p>Android Forum Example</p> 543 <div class="project-tech"> 544 <span class="tech-badge">Android</span> 545 <span class="tech-badge">Java</span> 546 </div> 547 <div class="project-links"> 548 <a href="https://github.com/bekaku/example-forum-android" target="_blank" class="btn btn-sm"> 549 <i class="fab fa-github"></i> View Project 550 </a> 551 </div> 552 </div> 553 </div> 554 </div> 555 </div> 556 </section> 557 558 <!-- Interests Section --> 559 <section id="interests" class="interests"> 560 <div class="container"> 561 <h2 class="section-title">What I'm Into Now</h2> 562 <div class="interests-content"> 563 <ul class="interests-list"> 564 <li> 565 <i class="fas fa-users"></i>
566 <span>Leading and mentoring dev teams with a focus on growth and agility</span> 567 </li> 568 <li> 569 <i class="fas fa-sitemap"></i> 570 <span>Architecting scalable, event-driven systems</span> 571 </li> 572 <li> 573 <i class="fas fa-rocket"></i> 574 <span>Exploring the future of frontend and backend performance</span> 575 </li> 576 <li> 577 <i class="fas fa-mobile-alt"></i> 578 <span>Building hybrid mobile apps that feel native</span> 579 </li> 580 </ul> 581 </div> 582 </div> 583 </section> 584 585 <!-- Contact Section --> 586 <section id="contact" class="contact"> 587 <div class="container"> 588 <h2 class="section-title">Let's Connect!</h2> 589 <div class="contact-content"> 590 <p>Feel free to check out my repositories, reach out for collaboration, or just say hi!</p> 591 <div class="contact-links"> 592 <a href="https://www.linkedin.com/in/bekaku/" target="_blank" class="contact-link"> 593 <i class="fab fa-linkedin"></i> 594 <span>LinkedIn</span> 595 </a> 596 <a href="mailto:[email protected]" class="contact-link"> 597 <i class="fas fa-envelope"></i> 598 <span>Email</span> 599 </a> 600 <a href="https://github.com/bekaku" target="_blank" class="contact-link"> 601 <i class="fab fa-github"></i> 602 <span>GitHub</span> 603 </a> 604 </div> 605 <div class="quote"> 606 <blockquote> 607 "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." 608 <cite>â Martin Fowler</cite> 609 </blockquote> 610 </div> 611 </div> 612 </div> 613 </section> 614 615 <!-- Footer --> 616 <footer class="footer"> 617 <div class="container"> 618 <div class="github-stats"> 619 <img src="https://github-readme-stats.vercel.app/api?username=bekaku&show_icons=true&theme=prussian" alt="Bekaku GitHub Stats"> 620 <img src="https://github-readme-streak-stats.herokuapp.com/?user=bekaku&theme=prussian" alt="Bekaku GitHub Streak"> 621 </div> 622 <div class="visitor-counter"> 623 <span>Visitor Count:</span> 624 <img src="https://visitor-badge.laobi.icu/badge?page_id=bekaku.portfolio" alt="Visitor Counter"> 625 </div> 626 <div class="copyright"> 627 <p>© 2025 Chanavee Bekaku. All rights reserved.</p> 628 </div> 629 <div class="back-to-top"> 630 <a href="#home"> 631 <i class="fas fa-arrow-up"></i> 632 </a> 633 </div> 634 </div> 635 </footer> 636 637 <!-- Custom JavaScript --> 638
638<script src="portfolio/js/main.js"></script>
638 639</body> 640</html> 641
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.