');background-repeat:no-repeat;background-position:center;transition:background-color .2s,transform .2s ease-out}.hljs-copy-button:hover{border-color:#ffffff44}.hljs-copy-button:active{border-color:#ffffff66}.hljs-copy-button[data-copied=true]{text-indent:0;width:auto;background-image:none}@media(prefers-reduced-motion){.hljs-copy-button{transition:none}}.hljs-copy-alert{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px} /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{font-size:62.5%;font-family:"Segoe UI","Roboto","Helvetica Neue","Arial","Noto Sans","Verdana","Trebuchet MS",-apple-system,BlinkMacSystemFont,sans-serif}body{font-size:1.35rem;line-height:1.618;max-width:144rem;margin:auto;color:#4a4a4a;padding:1.3rem 3rem}@media screen and (min-width: 992px){body{font-size:1.8rem}}h1,h2,h3,h4,h5,h6{line-height:1.1;font-family:"Segoe UI","Roboto","Helvetica Neue","Arial","Noto Sans","Verdana","Trebuchet MS",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:700;margin-top:3rem;margin-bottom:1.5rem;overflow-wrap:break-word}h1{font-size:2.35em}h2{font-size:2em}h3{font-size:1.75em}h4{font-size:1.5em}h5{font-size:1.25em}h6{font-size:1em}p{margin-top:0;margin-bottom:2.5rem}small,sub,sup{font-size:75%}hr{border-color:#34d}a{color:#34d}a:hover{color:#982c61}ul{padding-left:1.4em;margin-top:0;margin-bottom:2.5rem}li{margin-bottom:.4em}blockquote{margin-left:0;margin-right:0;padding:1em;border-left:5px solid #34d;margin-bottom:2.5rem;background-color:#f1f1f1}blockquote p{margin-bottom:0}img,video{height:auto;max-width:100%;margin-top:0;margin-bottom:2.5rem}pre{display:block;margin-bottom:2.5rem;font-size:.9em;border-radius:12px}code,kbd,samp{font-size:.9em;padding:0 .5em;background-color:#f1f1f1;white-space:pre-wrap}code:not(pre code){color:#be185d}kbd{box-sizing:border-box;color:#1f2937;box-shadow:#11182755 0px 0px 0px 1px, #11182755 0px 3px 0px 0px;font-weight:600;background-color:#f3f4f6;border-color:#e5e7eb;border-radius:6px}pre>code{padding:0;background-color:transparent;white-space:pre;font-size:1em}table{text-align:justify;width:100%;border-collapse:collapse;margin-bottom:2rem}td,th{padding:.5em;border-bottom:1px solid #f1f1f1}input{border:1px solid #4a4a4a}input:focus{border:1px solid #34d}.button,button{overflow:hidden;text-overflow:ellipsis;display:inline-block;padding:0.5em 1.25em;line-height:1;text-align:center;text-decoration:none;white-space:nowrap;background-color:#000;color:#fff;border-radius:99em;border:1px solid #000;cursor:pointer;box-sizing:border-box}.button:hover,button:hover{background-color:#982c61;color:#f9f9f9;outline:0}.button:focus-visible,button:focus-visible{outline-style:solid;outline-width:2px}pre button{padding:.25em 1.25em}input,textarea{width:100%;color:#4a4a4a;padding:0.7em;margin-bottom:1rem;background-color:#fff;border:1px solid #555;border-radius:10px;box-shadow:none;box-sizing:border-box;font-size:1em}input:focus,textarea:focus{border:1px solid #34d;outline:0}textarea{width:100%;resize:vertical}label{display:none;margin-bottom:.5rem;font-weight:600}#site-header{display:flex;border-bottom:1px solid #d2d2d2;padding:0.5em 0}#site-header nav{margin:auto}#site-header nav ul{list-style:none;display:flex;margin:0;padding:0;width:max-content;gap:2em}#site-header nav ul li{margin:0;display:block}#site-header nav ul li a{display:block;border:none;color:#4a4a4a}#site-header nav ul li a:hover{color:#555}#burger,#cross{display:none}@media screen and (max-width: 992px){#site-header{display:flex;align-items:center;justify-content:space-between}#site-header nav{position:fixed;top:-100vh;left:0;width:100vw;height:100vh;background-color:#323232;z-index:2;transition:top 0.5s ease}#site-header nav.open{top:0}#site-header nav ul{width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:center;text-align:center}#site-header nav ul li{padding:1.48em;margin:0 0.5em;border-bottom:1px solid #464646}#site-header nav ul li a{color:#fff}#site-header nav ul li a:hover{color:#555}#cross{display:block;position:absolute;top:0;right:0;padding:1.48em;margin:0 0.5em;z-index:3}#burger{display:block;margin-right:.5em}}a[aria-current="page"]{pointer-events:none;cursor:default;color:#323232;font-weight:700}@media (prefers-reduced-motion){nav{transition:none}}#site-footer{margin-top:3em;display:flex;gap:4em;border-top:1px solid #d2d2d2;padding:16.3em 0;flex-wrap:wrap}#site-footer .logo{margin-bottom:0.8em}#site-footer h2{margin-top:0}#site-footer h2:first-of-type{font-size:1.5em;font-weight:400}#site-footer h2:not(:first-of-type){font-size:0.9em;font-weight:700}#site-footer div{flex:2}#site-footer div p{margin:0;margin-top:0.5em;font-size:0.8em}#site-footer nav{flex:1}#site-footer form{flex:2;flex-basis:content;max-width:20em;position:relative}#site-footer form h2{font-size:1.5em;font-weight:400}#site-footer a{display:inline-block;color:#464646;font-size:0.9em;border-bottom:1px dotted #555}#site-footer a[aria-current="page"]{pointer-events:none;cursor:default;font-weight:normal;border-bottom:1px dashed #323232}#site-footer a:hover{color:#464646;font-weight:normal;border-bottom:1px dashed #323232}#site-footer input{display:block;width:100%}#site-footer button{display:block;margin-left:auto}#site-footer ul{list-style:none;padding:0;margin:0}@media screen and (max-width: 992px){#site-footer div,#site-footer form{flex-basis:100%}}#arrow{position:absolute;top:-45%;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 0.5s}#arrow.show{animation:dash 20s linear forwards}#arrow.reset{stroke-dashoffset:400}@keyframes dash{from{stroke-dashoffset:400}to{stroke-dashoffset:0}}.logo{font-size:3rem !important;font-weight:600 !important;color:#000 !important;display:block !important;border:none !important;text-decoration:none !important}.masthead{display:flex;text-align:center;height:60vh;background:url("https://cliffordwilliam.sirv.com/Images/hero.webp?profile=cliffordwilliam") 60% center no-repeat;background-size:contain}.masthead h1{font-weight:400;font-size:7.4vmin;margin:auto;text-decoration:underline;text-decoration-color:#b4dcb4;position:relative}.masthead img{object-fit:cover;border:1px solid #d2d2d2;border-radius:10px;margin:auto}.masthead:has(img){margin-top:3.35em;margin-bottom:2.75em;height:auto;background:none}#hero-link-button{line-height:1;position:absolute;top:110%;line-height:1;font-size:.4em;left:0}.post-card{display:flex;flex-wrap:wrap;gap:1.7em;margin-bottom:7.8em;align-items:center}.post-card .card-image{border:1px solid #ebebeb;border-radius:10px;display:block;object-fit:cover;margin-bottom:0;box-sizing:border-box;width:auto;height:auto;max-height:400px;aspect-ratio:1}.post-card p{margin-bottom:0}.post-card .card-body{flex:1 1 50vw;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}.post-card .card-body>div{display:flex;justify-content:space-between;align-items:start;margin-bottom:2.77em;flex-wrap:wrap;gap:0.55em}.post-card .card-body>div>div{line-height:1.45em;margin-right:1.1em}.post-card span{color:#555}.post-card h3{margin:0.9em 0 2.95em}.post-card h3 a{font-size:7.4vmin;color:#323232;font-weight:500;text-decoration:none}.post-card hr{margin:1.5em 0;height:0;border:none;border-top:1px solid #d2d2d2}.post-card ul{display:flex;gap:0.55em;flex-wrap:wrap;margin:0;padding:0;list-style:none}.post-card ul li{margin:0}.button.red,button.red{background-color:#ffb9b9;border:1px solid #ffb9b9;color:#000}.button.green,button.green{background-color:#b4dcb4;border:1px solid #b4dcb4;color:#000}.post-card h3 a.small-card-text{font-size:1.2em}#post-header .thin-container{margin-bottom:7em}#post-header .thin-container time{color:#555;margin-bottom:2.8em}#post-header .thin-container span{color:#555}#post-header .thin-container h1{font-size:3.34em;font-weight:400;line-height:1.3em}#post-header .thin-container hr{height:0;border:none;border-top:1px solid #d2d2d2;margin-top:3.34em;margin-bottom:1.1em}#post-header .thin-container p{margin:0}#post-header .thin-container div{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.55em}div[itemprop="articleBody"]{display:flex;flex-flow:row-reverse;gap:5em;margin-bottom:6em}@media screen and (max-width: 992px){div[itemprop="articleBody"]{display:block}}aside#toc-container{position:sticky;top:1.2em;align-self:start}@media screen and (max-width: 992px){aside#toc-container{position:static;min-width:0;max-width:none}}div#post-body{flex:1;width:1rem}@media screen and (max-width: 992px){div#post-body{width:auto}}.thin-container{max-width:100ch;margin-left:auto;margin-right:auto}#fader{position:fixed;top:0;left:0;width:100%;height:100%;z-index:4;pointer-events:none;background:#fff;animation-duration:.3s;animation-timing-function:ease-in-out}#fader.fade-out{opacity:0;animation:fade-out .3s ease-in-out forwards}#fader.fade-in{opacity:1;animation:fade-in .3s ease-in-out forwards}@keyframes fade-out{from{opacity:1}to{opacity:0}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){#fader{animation:none;display:none}#fader.fade-out{transition:none;animation:none}#fader.fade-in{transition:none;animation:none}}#toc-container{min-width:12.45em;max-width:12.45em}#toc-container h2{font-size:1em}#toc-container ul{padding-left:0;list-style:none}#toc-container li{border-left:1px solid #d2d2d2;padding:0.2em 0.8em;margin-bottom:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}#toc-container li.active{background-color:#f3f4f6;border-left-color:#323232}#toc-container li.active a{color:#1f2937}#toc-container a{font-size:0.8em;color:#6b7280;text-decoration:none}hr.hidden{width:0;transition:width 1s ease}@media (prefers-reduced-motion){hr.hidden{transition:none;width:100%}}hr.show{width:100%}#h1{width:100%;max-width:10em;text-shadow:1px 2px 4px white;text-align:left;filter:blur(5px);transform:translateY(70%);transition:transform 0.5s ease, filter 0.5s ease}#h1.show{width:100%;max-width:10em;text-shadow:1px 2px 4px white;text-align:left;filter:blur(0);transform:translateY(0)}@media (prefers-reduced-motion){#h1{width:100%;max-width:10em;text-shadow:1px 2px 4px white;text-align:left;transition:none;filter:none;transform:none}#h1.show{width:100%;max-width:10em;text-shadow:1px 2px 4px white;text-align:left;filter:none;transform:none}}#search-form{position:relative}#search-input{margin-top:1em;width:100%}#search-results{list-style:none;padding:0;display:none;z-index:1}#search-results.open{display:block}#search-results a{font-size:1.2em;color:#323232;font-weight:500;text-decoration:none}#search-results p{margin-bottom:0}#search-results hr{margin:1.5em 0;height:0;border:none;border-top:1px solid #d2d2d2}#post-navigation{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1em}#post-navigation a{padding:1em;font-size:.8em;display:flex;align-items:center;gap:.5em}#prev-button{margin-right:auto}#next-button{margin-left:auto}.hljs-ln-numbers{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:right;color:#889;border-right:1px solid #667;vertical-align:top;padding-right:5px}.hljs-ln-code{padding-left:10px}pre td{border-bottom:0}pre table{width:100% !important;table-layout:fixed;word-break:break-word;margin-bottom:0}.hljs-ln td{display:inline-block;margin-right:1em;padding-right:1em !important}pre button.hljs-copy-button{width:auto;height:auto}pre table tbody tr{display:block;width:fit-content}pre code{padding-left:0 !important}.grid-container{display:grid;grid-template-columns:repeat(3, 1fr);gap:1em}.grid-container img{width:100%;display:block;flex-basis:100%}@media screen and (max-width: 992px){.grid-container{grid-template-columns:1fr}}.margin-top{margin-top:6em} Introduction Hi, I’m Clifford William , a Full Stack Developer from Indonesia . I enjoy building software solutions and expanding my knowledge across various aspects of life, especially in programming . My expertise spans both frontend and backend technologies, and I am always eager to learn new things in the programming world.
What I Do Web Development : Building responsive and accessible websites using modern web technologies. Game Development : Currently working on a 2D game engine project that involves collision detection, raycasting, and programming complex game mechanics. Writing : I write blog posts about web development, programming, and other things I’ve learned along the way. My Mission I created this site to share my journey, collect and organize the programming knowledge I’ve gained, and help others find practical solutions to technical problems. My blog features tutorials, project highlights, and lessons learned in programming.
Technologies I Work With Programming Languages : JavaScript, Python, C++ Frontend : HTML, CSS, JavaScript, React, Vue.js, Nuxt.js, Next.js, Pinia, Redux, TypeScript Backend : Python, Django, Flask, SQL, NoSQL, NestJS, RabbitMQ, Express.js, Node.js Other Tools : Git, GitHub, Pygame, Bitbucket, AWS, Jekyll Feel free to explore my projects , read my blog , or connect with me on LinkedIn .