-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
699 lines (671 loc) · 28 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex" />
<meta name="googlebot" content="noindex" />
<meta
http-equiv="Cache-Control"
content="no-cache, no-store, must-revalidate"
/>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!-- <title>Virachai Wongsena - Online CodeCamp#8 Full stack JavaScript</title> -->
<title>Virachai's Development Journey: Resume and Project Showcase</title>
<meta
name="description"
content="This portfolio is a testament to my passion for development and showcases a collection of projects that highlight my skills and expertise."
/>
<link
rel="alternate icon"
class="js-site-favicon"
type="image/png"
href="https://github.githubassets.com/favicons/favicon.png"
/>
<link
rel="icon"
class="js-site-favicon"
type="image/svg+xml"
href="https://github.githubassets.com/favicons/favicon.svg"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./index.css" />
<link rel="stylesheet" href="./blog.css" />
<!--<link rel="stylesheet" href="https://raw.githubusercontent.com/virachai/virachai.github.io/main/node_modules/main.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://raw.githack.com/virachai/virachai.github.io/main/node_modules/main.css">-->
<!-- <script src="github_white_favicon.user.js"></script> -->
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!-- <a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a> -->
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<script src="./index.js"></script>
<script>
$("*[src^='./index.js']").attr(
"src",
"./index.js?s=" + new Date().getTime()
);
$("*[href^='./index.css']").attr(
"href",
"./index.css?s=" + new Date().getTime()
);
</script>
<a id="lab001"></a>
<div id="fixFullScr" style="display: none"></div>
<!-- <div class="alert alert-info centered-horizontally" id="infoBarMain" style="display: none;">
<a href="#" class="close" id="idClose" data-dismiss="alert" aria-label="close" title="close alert messages"><small>(9)</small> ×</a>
<strong>Info!</strong> <span>This alert box indicates a neutral informative change or action.</span>
</div> -->
<div id="root">
<nav
class="fixed-top navbar-transparent navbar navbar-expand-lg navbar-light"
id="menuToggle"
>
<a href="index.html" class="brand navbar-brand"><Virachai /></a>
<!-- <input type="checkbox">
<span class="menuToggleBar"></span>
<span class="menuToggleBar"></span>
<span class="menuToggleBar"></span> -->
<button
aria-controls="basic-navbar-nav"
type="button"
aria-label="Toggle navigation"
class="toggler navbar-toggler collapsed"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="basic-navbar-nav">
<div class="mr-auto navbar-nav">
<ul class="nav navbar-nav">
<li>
<a
href="#aboutme"
data-rb-event-key="#aboutme"
class="nav-link lead nav-link"
>About</a
>
</li>
<!-- <li><a href="#projects" data-rb-event-key="#projects" class="nav-link lead nav-link">Project</a></li>
<li class="dropdown">
<a href="#courses" data-rb-event-key="#courses" class="nav-link lead nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true" title="Total Lesson: 31">
<span class="nav-label">Courses</span>
<span class="caret"></span>
</a>
<ol type="A" class="dropdown-menu dropdown-menu-order" role="menu" aria-labelledby="dropdownMenuLink">
<li><a tabindex="-1" class="dropdown-item" href="#course001" title="HTML: HyperText Markup Language">HTML</a></li>
<li><a tabindex="-1" class="dropdown-item" href="#course002" title="An HTML form is used to collect user input.">Form</a></li>
<li><a tabindex="-1" class="dropdown-item" href="#course003" title="CSS: Cascading Style Sheet">CSS</a></li>
<li><a tabindex="-1" class="dropdown-item" href="#course004" title="Bootstrap - The most popular HTML, CSS, and JS library in the world.">Bootstrap</a></li>
<li><a tabindex="-1" class="dropdown-item" href="#course005" title="A distributed version control system">Git</a></li>
<li><a tabindex="-1" class="dropdown-item" href="#course006" title="User Experience / User interface Design">UX/UI Design</a></li>
</ol>
</li>
<li><a href="friends.html" class="nav-link lead nav-link">Friends</a></li>
<li class="dropdown">
<a href="#labs" data-rb-event-key="#labs" class="nav-link lead nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
<span class="nav-label">Labs</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuLink">
<li><a tabindex="-1" class="dropdown-item" href="#lab001" title="Create a Static Website Using HTML & CSS">Lab HTML A</a></li>
<li><a tabindex="-1" class="dropdown-item" href="#lab002" title="Practice using JavaScript HTML DOM">Lab HTML B</a></li>
<li><a tabindex="-1" class="dropdown-item" href="lab-css-a.html" title="Create a Form with CSS" target="_blank">Lab CSS A</a></li>
<li><a tabindex="-1" class="dropdown-item" href="lab-css-b.html" title="HTML Responsive Web Design (Make like Nike)" target="_blank">Lab CSS B</a></li>
<li><a tabindex="-1" class="dropdown-item" href="profile.html" title="Virachai's Profile - HTML Page" target="_blank">My Profile</a></li>
</ul>
</li>
<li><a href="profile.html" class="nav-link lead nav-link">Profile</a></li> -->
<li>
<a
href="#resume"
data-rb-event-key="#resume"
class="nav-link lead nav-link"
>Resume</a
>
</li>
<li>
<a
href="#project"
data-rb-event-key="#project"
class="nav-link lead nav-link"
>Project</a
>
</li>
<li>
<a
href="#portfolio"
data-rb-event-key="#portfolio"
class="nav-link lead nav-link"
>Portfolio</a
>
</li>
<li>
<a
href="#contact"
data-rb-event-key="#contact"
class="nav-link lead nav-link"
>Contact</a
>
</li>
<li>
<a
href="https://virachai.github.io/jekyll/"
data-rb-event-key="jekyll"
class="nav-link lead nav-link"
>Jekyll Blog</a
>
</li>
<!-- <li><a href="#skills" data-rb-event-key="#skills" class="nav-link lead nav-link">Skills</a></li> -->
</ul>
</div>
</div>
</nav>
<!-- aboutme Section -->
<div id="aboutme" class="jumbotron jumbotron-fluid m-0">
<div class="container container-fluid">
<div class="row">
<div class="col-5 d-none d-lg-block align-self-center">
<img
class="border border-secondary rounded-circle"
src="./Virachai_400x400.jpg"
alt="profile picture"
width="338"
height="338"
/>
</div>
<div class="col-lg-7">
<h2 class="display-4 mb-5 text-center">About Me</h2>
<p class="lead text-center">
My name is Virachai Wongsena. I’m a graduate of 2008 from King
Mongkut’s University of Technology North Bangkok with a degree
in Electronics Computer Technology.
</p>
<!-- <p class="lead text-center">
I have a strong foundation in Full-Stack Development, having
completed training in React and NodeJS, and earned a
certification from the Thai Programmer Association.
</p> -->
<p class="lead text-center">
Recently, I graduated from the Junior Software Developer (JSD#8)
program by Generation Thailand, where I specialized in
full-stack web development using the MERN stack (MongoDB,
Express, React, NodeJS).
</p>
<p class="lead text-center">
Additionally, I have a strong foundation in full-stack web
development, having completed training in React and NodeJS, and
earned a certification from the Thai Programmer Association.
</p>
<!-- <p class="lead text-center">
Additionally, I recently graduated from the Junior Software
Developer (JSD#8) program by Generation Thailand, where I
specialized in the MERN stack (MongoDB, Express, React, Node.js)
for full-stack web development.
</p> -->
<p class="lead text-center">
Currently, I am expanding my skills by studying data analytics,
data science, and machine learning, with the goal of advancing
into a professional developer role and continuously growing my
expertise.
</p>
</div>
</div>
<div class="row justify-content-center mt-5">
<div
class="col-6 col-md-4 d-flex justify-content-center align-items-center position-relative"
>
<img
src="https://thailand.generation.org/wp-content/uploads/2024/09/Generation_Thailand_logo_NEW-BLUE-1.png"
alt="Generation Thailand Logo"
class="img-fluid"
height="100"
style="max-height: 100px"
/>
</div>
<div
class="col-6 col-md-4 d-flex justify-content-center align-items-center position-relative"
>
<img
src="https://www.swpark.or.th/assets/images/logo.svg"
alt="SW Park Logo"
class="img-fluid"
height="100"
style="max-height: 100px"
/>
</div>
<div
class="col-6 col-md-4 d-flex justify-content-center align-items-center position-relative"
>
<img
src="https://thaiprogrammer.org/wp-content/uploads/2024/05/logo-with-title-1024x311.webp"
alt="Thai Programmer Association Logo"
class="img-fluid"
height="100"
style="max-height: 100px"
/>
</div>
</div>
</div>
</div>
<!-- /aboutme Section -->
<div
id="contact"
class="title bg-transparent bgstyle text-light min-vh-100 d-flex align-content-center align-items-center flex-wrap m-0 jumbotron jumbotron-fluid"
>
<!-- Main Section -->
<div class="text-center container">
<h1 class="display-1" style="position: relative">
<i class="arrow down classHide"></i>Virachai Wongsena
</h1>
<div class="Typist lead typist">
Passionate to build a better future with technology.
</div>
<div class="p-5">
<a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/virachai"
aria-label="virachai (Virachai Wongsena) - GitHub"
>
<i class="fab fa-github fa-3x socialicons"></i>
</a>
<a
target="_blank"
rel="noopener noreferrer"
href="https://www.facebook.com/virachai.wongsena"
aria-label="My facebook"
>
<i class="fab fa-facebook fa-3x socialicons"></i>
</a>
<a
target="_blank"
rel="noopener noreferrer"
href="https://www.instagram.com/wvirachai/"
aria-label="My instagram"
>
<i class="fab fa-instagram fa-3x socialicons"></i>
</a>
<a
target="_blank"
rel="noopener noreferrer"
href="https://www.linkedin.com/in/virachai/"
aria-label="My linkedin"
>
<i class="fab fa-linkedin fa-3x socialicons"></i>
</a>
<a
target="_blank"
rel="noopener noreferrer"
href="https://twitter.com/wvirachai"
aria-label="My twitter"
>
<i class="fab fa-twitter fa-3x socialicons"></i>
</a>
</div>
<a
class="btn btn-outline-light btn-lg"
href="#project"
role="button"
aria-label="Learn more about me"
>View My Project</a
>
<a
class="btn btn-outline-light btn-lg btnEchoHello"
href="#hello"
role="button"
aria-label="Echo Hello world"
style="display: none"
>Echo Hello world</a
>
</div>
</div>
<!-- /Main Section -->
<!-- Digital Portfolio Section -->
<div
id="portfolio"
class="jumbotron jumbotron-fluid m-0"
style="background-color: #f5b7b1 !important"
>
<div class="container">
<h2 class="display-4 pb-5 text-center">Digital Portfolio</h2>
<h4 class="text-center">
Virachai, a Thailand-based digital marketer, recently completed the
Digital Marketing & E-commerce Certificate program.
</h4>
</div>
<div class="row" style="width: 100%">
<div class="grid-container">
<!-- First Card -->
<div class="card">
<div class="u-palette-1-base u-shape"> </div>
<img
src="https://framerusercontent.com/images/5g0NNGSXMhbSutsmfrGCUefKR2g.png"
alt="Design a social media post"
/>
<h4 class="u-text-4">Design a social media post</h4>
<p class="u-text-5">
Instagram post for Drive traffic to the Nature’s Pet website
</p>
<a
href="https://www.canva.com/design/DAF1VebgIUk/744etPw8oif8CPYJXwmqeA/view"
class="btn btn-primary"
>View Work Sample</a
>
</div>
<!-- Second Card -->
<div class="card">
<div class="u-palette-2-base u-shape"> </div>
<img
src="https://lirp.cdn-website.com/md/pexels/dms3rep/multi/opt/pexels-photo-6945081-1920w.jpeg"
alt="Website: EMCTHAI.COM"
/>
<h4 class="u-text-4">Website: Energy Medical Center</h4>
<p class="u-text-5">
I am responsible for managing the website, creating content, and
optimizing SEO for www.emcthai.com
</p>
<a href="https://www.emcthai.com/" class="btn btn-primary"
>Learn More</a
>
</div>
<!-- Third Card -->
<div class="card">
<div class="u-palette-3-base u-shape"> </div>
<img
src="https://www.usbthailand.com/photo/flash-card-usb-flash-drive-capacity.jpg"
alt="Website: USBTHAILAND.COM"
/>
<h4 class="u-text-4">Website: USBTHAILAND.COM</h4>
<p class="u-text-5">
With over 10 years of experience, I fulfill the roles of web
developer, webmaster, content writer, and SEO specialist for
www.usbthailand.com
</p>
<a href="https://www.usbthailand.com/" class="btn btn-primary"
>Learn More</a
>
</div>
</div>
</div>
</div>
<!-- /Digital Portfolio Section -->
<!-- resume Section -->
<div
id="resume"
class="bg-light m-0 jumbotron jumbotron-fluid"
style="min-height: 400px"
>
<div class="container">
<h2 class="display-4 pb-5 text-center">My Resume</h2>
<p>
Driven by a passion for technology and continuous learning, I am a
recent graduate from the Generation bootcamp specializing in Junior
Software Developer (JSD). I completed intensive web development
training to solidify my technical skills. I am eager to leverage my
extensive IT support background and newfound software development
skills to deliver innovative solutions and elevate team performance.
</p>
<div class="row">
<div class="col-md-6">
<h3>Technical Skills</h3>
<ul>
<li>JavaScript, HTML, CSS, API, GIT</li>
<li>Full Stack with MERN</li>
<li>PHP, SQL, Tailwind CSS</li>
<li>Search Engine Optimization (SEO)</li>
</ul>
</div>
<div class="col-md-6">
<h3>Soft Skills</h3>
<ul>
<li>Personal Responsibility</li>
<li>Problem-solving</li>
<li>Teamwork</li>
<li>Curiosity, Persistence, and Grit</li>
</ul>
</div>
</div>
<h3>Projects</h3>
<ul>
<li>
<strong>Team Final Project JSD #8 at Generation Thailand</strong>
(September 2024 - December 2024)
<p>
Developed a full-stack e-commerce website for a toy shop,
utilizing React for the frontend, Node.js and Express.js for the
backend, and MongoDB for the database. Collaborated with a team
of 5 to plan, design, and implement the project, resulting in a
fully functional e-commerce platform. Gained hands-on experience
in building full-stack web applications, improving coding
efficiency by 30%.
</p>
<p>
<strong>Frontend:</strong>
<a href="https://dinoface.vercel.app/" target="_blank"
>Website</a
>,
<a href="https://github.com/virachai/dinoface" target="_blank"
>GitHub</a
>
</p>
<p>
<strong>Backend:</strong>
<a href="https://dinothink.vercel.app/" target="_blank"
>Website</a
>
or
<a href="https://dinocore.onrender.com/" target="_blank"
>Alternative Website</a
>,
<a href="https://github.com/virachai/dinothink" target="_blank"
>GitHub</a
>
</p>
</li>
<li>
<strong
>www.lipscode.com - Knowledge and Techniques About
Lipstick</strong
>
(February 2024 - Present, Published)
<p>
Utilized the Google Blogger platform for blog development,
creating a comprehensive resource on lipstick knowledge and
techniques. Incorporated JavaScript and CSS for frontend design,
improving the visual appeal and user experience. Implemented
custom on-page optimizations to enhance SEO performance,
increasing visibility in search engine results.
</p>
</li>
<li>
<strong
>www.1000ber.com - Auto summary of lottery news blog</strong
>
(February 2023 - Present, Published)
<p>
Built a blog using the Google Blogger platform with HTML, CSS,
and JavaScript for front-end development. Utilized Google Sheets
for data storage and Google Script for automated web crawling,
reducing manual data entry by over 90%. Integrated the Blogger
API to enable automated posting, increasing content output by
90%.
</p>
</li>
</ul>
<h3>Online Certificate</h3>
<ul>
<li>
<strong
>Full Stack JavaScript For Web Developer #8 at Software Park
CodeCamp</strong
>
(June 2021 - November 2021)
<p>
Completed Full Stack Development training (React & NodeJS).
Awarded a certificate from the Thai Programmer Association. For
reference: www.swpark.or.th/SWP-codecamp
</p>
<a
href="https://github.com/virachai/Project_codecamp_8"
target="_blank"
>Personal Project Codecamp Online:
github.com/virachai/Project_codecamp_8</a
>
</li>
</ul>
<h3>Experience</h3>
<ul>
<li>
<strong
>King Power Corporation Co., Ltd., Chon Buri - Supervisor, IT
Support</strong
>
(June 2014 - April 2024)
<p>
Created and implemented a new troubleshooting process, reducing
the average CCTV failure resolution time from approximately 10
minutes to 2 minutes, improving security operations and saving
significant time and resources. Managed a team of 10 IT support
specialists, achieving a 95% customer satisfaction rate.
Demonstrated strong systems administration, scripting, and
automation skills by building a comprehensive network monitoring
solution, integrating Zabbix with Line API for efficient
alerting, reducing downtime by 70%.
</p>
</li>
</ul>
<h3>Education</h3>
<ul>
<li>
<strong
>King Mongkut’s University of Technology North Bangkok, Bangkok
- Bachelor Degree</strong
>
(May 2006 - March 2009)
<p>
Degree: Bachelor of Industrial Technology in Electronic
Technology. Field of Specialization: Electronics Computer
Technology (G.P.A. 3.03)
</p>
</li>
</ul>
</div>
</div>
<!-- /resume Section -->
<!-- project Section -->
<div id="project" class="jumbotron jumbotron-fluid m-0">
<div class="container">
<h2 class="display-4 pb-5 text-center">My Project</h2>
</div>
<div class="row" style="width: 100%">
<div class="grid-container">
<!-- First Card -->
<div class="card">
<div class="u-palette-1-base u-shape"> </div>
<img
src="https://miro.medium.com/v2/resize:fit:300/format:webp/1*U4x0VzHWrRYZom1zFKQGIQ.png"
alt="Bellabeat Case Study with R"
/>
<h4 class="u-text-4">Google Data Analytics Capstone</h4>
<p class="u-text-5">
A Case Study of Bellabeat's Data-Driven Marketing
</p>
<a
href="https://www.kaggle.com/code/virachai/a-case-study-of-bellabeat-s-data-driven-marketing"
class="btn btn-primary"
>Learn More</a
>
</div>
<!-- Second Card -->
<div class="card">
<div class="u-palette-2-base u-shape"> </div>
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXWqa2dWi_Qy8o9IjD1uJc7JAcUh-BZKs4JXMTadPFbOvsEN7Fep8E6YgkU-gBQgmOYjUNbRE9NEt3Z95C0VB_CkSFLb0fplkR-Vmm_1SgLF-q56Vkf3M6EKhaWlgQWeKi2WebjJk2bQVTWSdQXujmdFd9pn6B6ign5tosaLxjsiUnjmyDlq_OfPZnTrU/s1600/1000ber-hero-bg.jpg"
alt="Website: 1000BER.COM"
/>
<h4 class="u-text-4">Website: 1000BER.COM</h4>
<p class="u-text-5">
using Blogspot as the platform and integrated it with Google
Sheets as the backend using Google Scripts
</p>
<a href="https://www.1000ber.com/" class="btn btn-primary"
>Learn More</a
>
</div>
<!-- Third Card -->
<div class="card">
<div class="u-palette-3-base u-shape"> </div>
<img
src="https://www.usbthailand.com/photo/flash-card-usb-flash-drive-capacity.jpg"
alt="Website: USBTHAILAND.COM"
/>
<h4 class="u-text-4">Website: USBTHAILAND.COM</h4>
<p class="u-text-5">
Wholesale website for flash drives. It has been developed using
PHP and MySQL technologies.
</p>
<a href="https://www.usbthailand.com/" class="btn btn-primary"
>Learn More</a
>
</div>
</div>
</div>
</div>
<!-- /project Section -->
<footer
class="mt-auto py-5 text-center"
style="background-color: rgb(245, 245, 245)"
>
<div class="container">
<h2 class="display-4 pb-3 text-center">Get In Touch</h2>
<p class="lead text-center pb-3">
I am currently studying data analytics, data science, and machine
learning. if you have any questions, or if you just want to say hi,
please feel free to email me at,
<a href="mailto:[email protected]">[email protected]</a> or just
click the social icon in the top section. Click here
<a href="#contact"
><i class="fa fa-arrow-up" style="color: rgb(68, 132, 206)"></i
></a>
</p>
<i class="fas fa-code"></i> with <i class="fas fa-heart"></i> by
<a
class="badge badge-dark"
rel="noopener"
href="https://github.com/virachai"
aria-label="The GitHub account of Virachai"
>Virachai Wongsena</a
>
using <i class="fab fa-html5"></i> <i class="fab fa-css3-alt"></i
> <i class="fab fa-js-square"></i>
<p><small class="text-muted">Project code is open source.</small></p>
</div>
</footer>
</div>
</body>
</html>