11<!DOCTYPE html>
22< html lang ="en ">
3-
43< head >
54 < meta charset ="UTF-8 ">
6- < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7- < title > pphatdev.github.oi</ title >
5+ < meta name ="viewport " content ="width=device-width,initial-scale=1 ">
6+ < title > Leat Sophat - Portfolio</ title >
7+ < meta property ="og:title " content ="Leat Sophat - Portfolio ">
8+ < meta name ="twitter:title " content ="Leat Sophat - Portfolio " />
9+ < meta property ="og:site_name " content ="Leat Sophat - Portfolio " />
10+ < meta name ="robots " content ="follow, index " />
11+ < meta name ="description " content ="Welcome to my portfolio - Thoughts from a wandering mind. I am the senior front-end developer of TurboTech, and an UI/UX designer. In my free time, I like design side projects and developing them. " />
12+ < meta property ="og:description " content ="Welcome to my portfolio - Thoughts from a wandering mind. I am the senior front-end developer of TurboTech, and an UI/UX designer. In my free time, I like design side projects and developing them. " />
13+ < meta name ="twitter:description " content ="Welcome to my portfolio - Thoughts from a wandering mind. I am the senior front-end developer of TurboTech, and an UI/UX designer. In my free time, I like design side projects and developing them. " />
14+ < meta name ="author " content ="Leat Sophat ">
15+ < link rel ="canonical " href ="https://leatsophat.me/ " />
16+ < meta property ="og:url " content ="https://leatsophat.me/ " />
17+ < meta property ="og:type " content ="website " />
18+ < meta name ="twitter:card " content ="summary_large_image " />
19+ < meta name ="twitter:site " content ="https://twitter.com/infoSophat " />
20+ < meta property ="og:image " content ="./src/images/home.webp " />
21+ < meta name ="twitter:image " content ="./src/images/home.webp " />
22+ < link rel ="apple-touch-icon " sizes ="76x76 " href ="./src/images/apple-touch-icon.png " />
23+ < link rel ="icon " type ="image/png " sizes ="32x32 " href ="./src/images/favicon-32x32.png " />
24+ < link rel ="icon " type ="image/png " sizes ="16x16 " href ="./src/images/favicon-16x16.png " />
25+ < link rel ="stylesheet " href ="https://leatsophat.me/index.css ">
26+ < link rel ="preconnect " href ="https://fonts.googleapis.com ">
27+ < link rel ="preconnect " href ="https://fonts.gstatic.com " crossorigin >
28+ < link href ="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap " rel ="stylesheet ">
29+ < link href ="https://fonts.googleapis.com/css2?family=Suwannaphum:wght@100;300;400;700;900&display=swap " rel ="stylesheet ">
30+ < link href ="https://pphatdev.github.io/fonts/style.css " rel ="stylesheet ">
31+ < meta name ="Content-Security-Policy " content ="default-src 'self'; img-src https://*; child-src 'none'; ">
32+ < meta name ="X-Content-Type-Options " content ="nosniff ">
33+ < meta name ="X-Frame-Options " content ="SAMEORIGIN ">
34+ < meta name ="X-XSS-Protection " content ="1; report=<reporting-uri> ">
35+ < link rel ="icon " href ="favicon.ico ">
36+ < script defer ="defer " src ="./src/index.js " type ="module "> </ script >
37+ < meta name ="theme-color " content ="#ffffff " />
838</ head >
39+ < body class ="dark:bg-slate-950 overflow-hidden ">
40+
41+ < div class ="area ">
42+ < ul class ="circles "> < li > </ li > < li > </ li > < li > </ li > < li > </ li > < li > </ li > < li > </ li > < li > </ li > < li > </ li > < li > </ li > < li > </ li > </ ul >
43+ </ div >
44+
45+ < header id ="header " class ="sticky top-0 z-20 w-full scroll-smooth backdrop-blur-sm dark:bg-white/5 bg-white/50 "> </ header >
46+
47+ < div data-sidebar-backdrop class ="fixed inset-0 z-50 hidden w-full h-full bg-white/70 dark:block/20 backdrop-blur-sm "> </ div >
48+ < div data-sidebar-target class ="fixed z-50 hidden w-full max-w-xs p-6 text-base font-semibold -translate-x-1/2 bg-white rounded-lg shadow-lg top-4 left-1/2 text-slate-900 dark:bg-slate-800 dark:text-slate-400 dark:highlight-white/5 ">
49+ < button type ="button " data-sidebar-toggle class ="absolute flex items-center justify-center w-8 h-8 top-5 right-5 text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300 " tabindex ="0 ">
50+ < span class ="sr-only "> Close navigation</ span >
51+ < svg viewBox ="0 0 10 10 " class ="w-2.5 h-2.5 overflow-visible " aria-hidden ="true ">
52+ < path d ="M0 0L10 10M10 0L0 10 " fill ="none " stroke ="currentColor " stroke-width ="2 " stroke-linecap ="round "> </ path >
53+ </ svg >
54+ </ button >
55+ < ul class ="space-y-6 " id ="menu "> </ ul >
56+ < div class ="mt-5 text-center ">
57+ < button data-theme-toggle class ="px-3 py-1 mx-auto mt-10 text-sm transition-colors border rounded-full sm:mt-0 border-stone-200 drop-shadow-sm text-stone-800 dark:text-white bg-white/40 dark:bg-black/20 backdrop-blur-lg hover:border-stone-300 dark:border-stone-500 dark:hover:border-stone-400 "> 🌞</ button >
58+ </ div >
59+ </ div >
60+ </ div >
61+
62+ < div class ="relative dark:bg-slate-950 snap-center h-screen min-h-[50rem] max-h-[60rem] sm:h-[calc(100vh_+8px)] ">
63+ < div class ="relative flex flex-col items-center justify-center h-screen max-h-[60rem] sm:h-[calc(100vh_+8px)] -mt-20 dark:bg-slate-950 transition-bg ">
64+ < canvas id ="canvas " class ="absolute inset-0 flex "> </ canvas >
65+ <!-- <div class="absolute inset-0 overflow-hidden dark:hidden">
66+ <div class="jumbo absolute -inset-[10px] opacity-50"></div>
67+ </div> -->
68+ < div class ="flex flex-col items-center justify-center w-full max-w-6xl px-4 pt-10 mx-auto text-center max-h-96 sm:flex-col gap-7 md:pt-0 md:items-start md:justify-between md:flex-row ">
69+ < h1 class ="md:hidden leading-[0] text-center text-[6rem] font-tacteng "> 3</ h1 >
70+ < div class ="block ">
71+ < h1 class ="relative text-4xl font-bold leading-tight text-gray-800 break-words transition-colors sm:text-left md:text-6xl font-poppins sm:flex-row dark:text-white dark:opacity-80 ">
72+ Hello I'm LEAT < span class ="font-black text-primary-600 "> Sophat</ span >
73+ </ h1 >
74+ < h1 class ="relative mt-3 text-2xl font-bold text-gray-800 break-words transition-colors sm:text-left md:text-3xl font-poppins sm:flex-row dark:text-white dark:opacity-80 ">
75+ Senior Front-end Developer
76+ </ h1 >
77+ < p class ="max-w-md py-4 mt-5 text-sm font-normal lg:max-w-xl md:text-lg sm:text-left dark:text-primary-600 text-slate-600 font-body ">
78+ Welcome to my portfolio - Thoughts from a wandering mind. I am the senior front-end developer of TurboTech, and an UI/UX designer. In my free time, I like design side projects and developing them.
79+ </ p >
80+ < div class ="flex items-center justify-center w-full gap-3 text-center sm:justify-start ">
81+ < a href ="/projects " class ="px-4 active:bg-primary py-1.5 text-xs sm:text-sm transition-colors border rounded-lg border-stone-200 drop-shadow-sm hover:bg-primary-800 text-white bg-primary-700 dark:bg-black/20 backdrop-blur-lg hover:border-stone-300 dark:border-stone-500 dark:hover:border-stone-400 ">
82+ My Works
83+ </ a >
84+ < a target ="_blank " href ="https://drive.google.com/file/d/10rCDGaZmPShEig1ffibrQaec6N8tsRfS/view?usp=sharing " class ="px-4 gap-2 active:bg-primary/10 flex items-center py-1.5 text-xs sm:text-sm transition-colors border rounded-lg border-stone-200 drop-shadow-sm text-stone-800 dark:text-white bg-white/40 dark:bg-black/20 backdrop-blur-lg hover:border-stone-300 dark:border-stone-500 dark:hover:border-stone-400 ">
85+ < span > Download CV</ span >
86+ < svg xmlns ="http://www.w3.org/2000/svg " fill ="none " viewBox ="0 0 24 24 " stroke-width ="1.5 " stroke ="currentColor " class ="w-4 h-4 ">
87+ < path stroke-linecap ="round " stroke-linejoin ="round " d ="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3 " />
88+ </ svg >
89+ < div class ="absolute inset-0 items-end h-5 overflow-hidden rounded-full translate-y-7 sm:translate-y-8 group-hover:flex ">
90+ < div class ="flex -mb-px h-[1px] w-full ">
91+ < div class ="w-full flex-none blur-sm [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)] "> </ div >
92+ < div class ="-ml-[99%] w-full flex-none blur-[1px] [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)] "> </ div >
93+ </ div >
94+ </ div >
95+ </ a >
96+ </ div >
97+ </ div >
98+ <!-- <div data-image class="relative z-10 items-center justify-center flex-shrink-0 order-first block border-2 border-dashed animate-faded dark:border-slate-900 md:order-last">
99+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 animate-spin text-black/50">
100+ <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
101+ </svg>
102+ </div> -->
103+ < div class ="relative z-10 items-center justify-center flex-shrink-0 order-first block mt-5 border-2 border-dashed animate-faded dark:border-slate-900 md:order-last ">
104+ < div class ="rounded-full box w-36 h-36 sm:w-44 md:w-64 sm:h-44 md:h-64 ">
105+ < img src ="./src/images/leat-sophat.webp " loading ="lazy " class ="py-1 rounded-full w-36 shrink-0 ring-primary h-36 sm:w-44 md:w-64 sm:h-44 md:h-64 " alt ="Leat Sophat ">
106+ </ div >
107+ </ div >
108+ </ div >
109+ < div class ="absolute flex flex-col items-center bottom-7 ">
110+ < h1 class ="hidden mb-10 text-5xl text-center md:block font-tacteng text-primary "> 2</ h1 >
111+ </ div >
112+ </ div >
113+ </ div >
9114
10- < body >
11- < svg width ="118 " height ="25 " viewBox ="0 0 118 25 " fill ="none " xmlns ="http://www.w3.org/2000/svg ">
12- < g id ="Sections ">
13- < g >
14- <!-- <path d="M0 4.9964C0 2.48772 2.03368 0.454041 4.54236 0.454041H83.6271V24.0811H4.54237C2.03369 24.0811 0 22.0474 0 19.5388V4.9964Z" fill="#F43B43" /> -->
15- < text fill ="white " xml:space ="preserve " style ="white-space: pre " font-family ="Inter " font-size ="10.9017 " font-weight ="600 " letter-spacing ="-0.104474px ">
16- < tspan x ="7.28777 " y ="16.2284 " id ="label "> Total Commit</ tspan >
17- </ text >
18- </ g >
19- < g >
20- <!-- <path d="M83.6271 0.454041H112.712C115.22 0.454041 117.254 2.48772 117.254 4.9964V19.5388C117.254 22.0474 115.22 24.0811 112.712 24.0811H83.6271V0.454041Z" fill="#290FA8" /> -->
21- < text id ="1242 " fill ="white " xml:space ="preserve " style ="white-space: pre " font-family ="Kantumruy Pro " font-size ="9.08472 " font-weight ="600 " letter-spacing ="-0.104474px ">
22- < tspan x ="90.8694 " y ="15.2622 " id ="total "> 1242</ tspan >
23- </ text >
24- </ g >
25- </ g >
115+ <!-- background pattern -->
116+ < svg class ="absolute mt-4 pointer-events-none inset-0 h-full w-full stroke-gray-300 dark:stroke-gray-800 opacity-50 [mask-image:radial-gradient(100%_100%_at_top_center,white,transparent)] " aria-hidden ="true ">
117+ < defs >
118+ < pattern id ="83fd4e5a-9d52-42fc-97b6-718e5d7ee527 " width ="200 " height ="200 " x ="50% " y ="-1 " patternUnits ="userSpaceOnUse ">
119+ < path d ="M100 200V.5M.5 .5H200 " fill ="none "> </ path >
120+ </ pattern >
121+ </ defs >
122+ < svg x ="50% " y ="-1 " class ="overflow-visible fill-gray-50 dark:fill-slate-800 ">
123+ < path d ="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M-300.5 600h201v201h-201Z " stroke-width ="0 "> </ path >
124+ </ svg >
125+ < rect width ="100% " height ="100% " stroke-width ="0 " fill ="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527) "> </ rect >
26126 </ svg >
27127
28- < script type ="module " src ="./hello-world.js "> </ script >
29128</ body >
30129</ html >
0 commit comments