PageSourceSearch

https://bekaku.github.io/

html bekaku.github.io collected 2026-10-03 08:41:55 UTC 29,778 bytes, 641 lines download raw bytes

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>&copy; 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.