diff --git a/README.md b/README.md
new file mode 100755
index 0000000..a68095d
--- /dev/null
+++ b/README.md
@@ -0,0 +1,7 @@
+# ngquyduc.vercel.app
+
+👋 Welcome to the source code of my personal site.
+
+## Say hello!
+
+Feel free to say hello over on instagram [@quyduc711](https://www.instagram.com/quyduc711/).
diff --git a/assets/icon-app.svg b/assets/icon-app.svg
new file mode 100755
index 0000000..5654e9d
--- /dev/null
+++ b/assets/icon-app.svg
@@ -0,0 +1,14 @@
+<svg width="40" height="40" viewBox="0 0 22 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M3 1C1.89543 1 1 1.89543 1 3V37C1 38.1046 1.89543 39 3 39H18.9C20.0046 39 20.9 38.1046 20.9 37V3C20.9 1.89543 20.0046 1 18.9 1H15.6631V2H6.23676V1H3Z" fill="url(#paint0_linear)"/>
+<path d="M8.50854 35.6745C8.13501 35.6745 7.83221 35.9773 7.83221 36.3508C7.83221 36.7243 8.13501 37.0271 8.50854 37.0271V35.6745ZM13.4633 37.0271C13.8368 37.0271 14.1396 36.7243 14.1396 36.3508C14.1396 35.9773 13.8368 35.6745 13.4633 35.6745V37.0271ZM0.400024 29.4141C0.400024 29.7876 0.702827 30.0904 1.07635 30.0904C1.44988 30.0904 1.75268 29.7876 1.75268 29.4141H0.400024ZM1.75268 32.387C1.75268 32.0134 1.44988 31.7106 1.07635 31.7106C0.702827 31.7106 0.400024 32.0134 0.400024 32.387H1.75268ZM20.2192 7.61303C20.2192 7.98656 20.522 8.28936 20.8955 8.28936C21.269 8.28936 21.5718 7.98656 21.5718 7.61303H20.2192ZM21.5718 10.5859C21.5718 10.2124 21.269 9.90956 20.8955 9.90956C20.522 9.90956 20.2192 10.2124 20.2192 10.5859H21.5718ZM18.48 38.6473H3.49181V40H18.48V38.6473ZM3.49181 1.35266H6.52662V0H3.49181V1.35266ZM5.8503 1.69206H7.20295V0.676328H5.8503V1.69206ZM7.49281 3.33457H14.4791V1.98191H7.49281V3.33457ZM6.52662 1.35266H15.4452V0H6.52662V1.35266ZM15.4452 1.35266H18.48V0H15.4452V1.35266ZM16.1216 1.69206V0.676328H14.7689V1.69206H16.1216ZM8.50854 37.0271H13.4633V35.6745H8.50854V37.0271ZM1.75268 29.4141V3.09179H0.400024V29.4141H1.75268ZM1.75268 36.9082V32.387H0.400024V36.9082H1.75268ZM20.2192 3.09179V7.61303H21.5718V3.09179H20.2192ZM20.2192 10.5859V36.9082H21.5718V10.5859H20.2192ZM14.4791 3.33457C15.3862 3.33457 16.1216 2.5992 16.1216 1.69206H14.7689C14.7689 1.85214 14.6392 1.98191 14.4791 1.98191V3.33457ZM3.49181 38.6473C2.53132 38.6473 1.75268 37.8687 1.75268 36.9082H0.400024C0.400024 38.6157 1.78427 40 3.49181 40V38.6473ZM18.48 40C20.1876 40 21.5718 38.6157 21.5718 36.9082H20.2192C20.2192 37.8687 19.4405 38.6473 18.48 38.6473V40ZM18.48 1.35266C19.4405 1.35266 20.2192 2.13129 20.2192 3.09179H21.5718C21.5718 1.38424 20.1876 0 18.48 0V1.35266ZM5.8503 1.69206C5.8503 2.5992 6.58567 3.33457 7.49281 3.33457V1.98191C7.33272 1.98191 7.20295 1.85214 7.20295 1.69206H5.8503ZM3.49181 0C1.78427 0 0.400024 1.38424 0.400024 3.09179H1.75268C1.75268 2.13129 2.53132 1.35266 3.49181 1.35266V0Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="2.12767" y1="1" x2="30.7018" y2="17.5237" gradientUnits="userSpaceOnUse">
+<stop offset="0.259336" stop-color="#FFDB6E"/>
+<stop offset="1" stop-color="#FFBC5E"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="1.59976" y1="8.08974e-07" x2="31.8368" y2="17.6727" gradientUnits="userSpaceOnUse">
+<stop offset="0.259336" stop-color="#FFDB6E"/>
+<stop offset="1" stop-color="#FFBC5E"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/icon-cs.svg b/assets/icon-cs.svg
new file mode 100644
index 0000000..1474c31
--- /dev/null
+++ b/assets/icon-cs.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" x="0" y="0" viewBox="0 0 609.954 609.954" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M477.711 335.388V206.162l119.197-49.605a20.951 20.951 0 0 0 0-38.682L321.234 3.261a43.035 43.035 0 0 0-32.515 0L13.046 117.946a20.952 20.952 0 0 0 0 38.682l99.454 41.355a28.669 28.669 0 0 0-.579 5.314v71.126a30.482 30.482 0 0 0 20.322 28.613v32.352c0 20.372 15.241 38.733 40.643 52.836v28.45c0 5.612-4.549 10.161-10.161 10.161H79.996c-5.117-19.817-24.17-32.737-44.474-30.159C15.219 399.256 0 416.529 0 436.996s15.219 37.74 35.522 40.319c20.304 2.579 39.357-10.342 44.474-30.159h82.729c16.835 0 30.482-13.647 30.482-30.482v-18.889a249.635 249.635 0 0 0 40.643 11.868v88.308c0 5.612-4.549 10.161-10.161 10.161h-31.925c-5.117-19.817-24.17-32.737-44.474-30.159-20.304 2.579-35.522 19.853-35.522 40.319 0 20.467 15.219 37.74 35.522 40.319s39.357-10.342 44.474-30.159h31.925c16.835 0 30.482-13.648 30.482-30.483V413.21a361.785 361.785 0 0 0 40.643 3.231v113.446c-19.817 5.117-32.737 24.17-30.159 44.474s19.853 35.522 40.319 35.522c20.467 0 37.74-15.219 40.319-35.522 2.579-20.304-10.342-39.357-30.159-44.474V416.441a361.766 361.766 0 0 0 40.643-3.231v84.751c0 16.835 13.647 30.483 30.482 30.483h31.925c5.117 19.817 24.17 32.737 44.474 30.159 20.303-2.579 35.522-19.853 35.522-40.319 0-20.467-15.219-37.741-35.522-40.319-20.304-2.579-39.357 10.342-44.474 30.159h-31.925c-5.612 0-10.161-4.549-10.161-10.161v-88.308a249.536 249.536 0 0 0 40.643-11.868v18.889c0 16.835 13.647 30.482 30.482 30.482h82.729c5.117 19.817 24.17 32.737 44.474 30.159 20.304-2.579 35.522-19.853 35.522-40.319s-15.219-37.74-35.522-40.319-39.357 10.342-44.474 30.159h-82.729c-5.612 0-10.161-4.549-10.161-10.161v-28.45c25.408-14.106 40.649-32.467 40.649-52.839zM40.796 457.318c-11.223 0-20.322-9.098-20.322-20.322s9.098-20.322 20.322-20.322 20.322 9.098 20.322 20.322-9.099 20.322-20.322 20.322zm111.769 81.286c-11.223 0-20.322-9.098-20.322-20.322 0-11.223 9.098-20.322 20.322-20.322s20.322 9.098 20.322 20.322c-.001 11.224-9.099 20.322-20.322 20.322zm304.824-40.643c11.223 0 20.322 9.098 20.322 20.322 0 11.223-9.098 20.322-20.322 20.322s-20.322-9.098-20.322-20.322c.001-11.224 9.099-20.322 20.322-20.322zm111.769-81.287c11.223 0 20.322 9.098 20.322 20.322s-9.098 20.322-20.322 20.322-20.322-9.098-20.322-20.322 9.099-20.322 20.322-20.322zM20.819 136.673 296.401 22.099a22.354 22.354 0 0 1 17.07 0l275.663 114.604v1.158l-125.303 52.064c-.152.061-.295.112-.437.183l-149.842 62.296a22.354 22.354 0 0 1-17.07 0l-97.625-40.552 91.041-39.922c5.005.583 10.04.879 15.079.884 40.542 0 71.126-17.477 71.126-40.643s-30.584-40.643-71.126-40.643c-39.241 0-69.094 16.389-70.943 38.449l-103.823 45.399a29.763 29.763 0 0 0-7.621 4.776l-101.771-42.32v-1.159zm121.585 147.911c-5.612 0-10.161-4.549-10.161-10.161v-71.126a9.946 9.946 0 0 1 1.809-5.578 9.535 9.535 0 0 1 4.298-3.709l101.862-44.565a51.054 51.054 0 0 0 18.432 14.022l-99.982 43.824a10.16 10.16 0 0 0-6.096 9.317v57.815c-.001 5.611-4.551 10.161-10.162 10.161zm111.769-152.413c0-8.281 19.793-20.322 50.804-20.322s50.804 12.041 50.804 20.322-19.793 20.322-50.804 20.322-50.804-12.041-50.804-20.322zM152.565 335.388v-32.352a30.482 30.482 0 0 0 20.322-28.613v-51.16l.193-.081 115.64 48.061a43.016 43.016 0 0 0 32.515 0l136.155-56.636v120.782c0 28.836-62.591 60.965-152.412 60.965s-152.413-32.13-152.413-60.966zm172.734 233.699c0 11.223-9.098 20.322-20.322 20.322-11.223 0-20.322-9.098-20.322-20.322s9.098-20.322 20.322-20.322c11.223 0 20.322 9.098 20.322 20.322z" fill="#ffc964" opacity="1" data-original="#000000" class=""></path></g></svg>
\ No newline at end of file
diff --git a/assets/icon-dev.svg b/assets/icon-dev.svg
new file mode 100755
index 0000000..bf61a2b
--- /dev/null
+++ b/assets/icon-dev.svg
@@ -0,0 +1,54 @@
+<svg width="40" height="32" viewBox="0 0 40 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M3 1C1.89543 1 1 1.89543 1 3V28C1 29.1046 1.89543 30 3 30H37C38.1046 30 39 29.1046 39 28V3C39 1.89543 38.1046 1 37 1H3ZM36 9H4V28H36V9Z" fill="url(#paint0_linear)"/>
+<path d="M37.6172 0.375H2.38281C1.06903 0.375 0 1.44403 0 2.75781V29.2422C0 30.556 1.06903 31.625 2.38281 31.625H37.6172C38.931 31.625 40 30.556 40 29.2422V2.75781C40 1.44403 38.931 0.375 37.6172 0.375ZM38.4375 29.2422C38.4375 29.6945 38.0695 30.0625 37.6172 30.0625H2.38281C1.93054 30.0625 1.5625 29.6945 1.5625 29.2422V2.75781C1.5625 2.30554 1.93054 1.9375 2.38281 1.9375H37.6172C38.0695 1.9375 38.4375 2.30554 38.4375 2.75781V29.2422Z" fill="url(#paint1_linear)"/>
+<path d="M14.9219 5.79156H35.0781C35.5096 5.79156 35.8594 5.44183 35.8594 5.01031C35.8594 4.5791 35.5096 4.22906 35.0781 4.22906H14.9219C14.4904 4.22906 14.1406 4.5791 14.1406 5.01031C14.1406 5.44183 14.4904 5.79156 14.9219 5.79156Z" fill="url(#paint2_linear)"/>
+<path d="M3.99231 5.3094C4.01184 5.3564 4.03595 5.40157 4.06403 5.44368C4.0921 5.48671 4.12506 5.52669 4.16107 5.56239C4.30634 5.70857 4.50775 5.79158 4.71313 5.79158C4.76471 5.79158 4.81567 5.7867 4.86633 5.77663C4.91638 5.76656 4.96552 5.7516 5.01251 5.73207C5.05951 5.71254 5.10468 5.68843 5.14679 5.66035C5.18982 5.63136 5.2298 5.5984 5.2655 5.5627C5.30243 5.52669 5.33447 5.48671 5.36316 5.44398C5.39154 5.40157 5.41565 5.3564 5.43518 5.3094C5.45471 5.2618 5.46967 5.21266 5.47974 5.16322C5.48981 5.11256 5.49438 5.06099 5.49438 5.01033C5.49438 4.95937 5.48981 4.90779 5.47974 4.85805C5.46967 4.808 5.45471 4.75856 5.43518 4.71187C5.41565 4.66426 5.39154 4.61879 5.36316 4.57668C5.33447 4.53365 5.30243 4.49397 5.2655 4.45796C5.2298 4.42195 5.18982 4.3893 5.14679 4.36092C5.10468 4.33284 5.05951 4.30873 5.01251 4.2892C4.96552 4.26967 4.91638 4.25471 4.86633 4.24464C4.76563 4.2242 4.66187 4.2242 4.56085 4.24464C4.5108 4.25471 4.46167 4.26967 4.41498 4.2892C4.36707 4.30873 4.3219 4.33284 4.27979 4.36092C4.23676 4.3893 4.19678 4.42195 4.16107 4.45796C4.12506 4.49397 4.0921 4.53365 4.06403 4.57668C4.03595 4.61879 4.01184 4.66426 3.99231 4.71187C3.97278 4.75856 3.95782 4.808 3.94775 4.85805C3.93738 4.90779 3.93188 4.95937 3.93188 5.01033C3.93188 5.06099 3.93738 5.11256 3.94775 5.16322C3.95782 5.21266 3.97278 5.2618 3.99231 5.3094Z" fill="url(#paint3_linear)"/>
+<path d="M7.11731 5.3094C7.13684 5.3564 7.16095 5.40157 7.18903 5.44368C7.2171 5.48671 7.25006 5.52669 7.28607 5.56239C7.43134 5.70857 7.63275 5.79158 7.83813 5.79158C7.88971 5.79158 7.94067 5.7867 7.99133 5.77663C8.04138 5.76656 8.09052 5.7516 8.13751 5.73207C8.18451 5.71254 8.22968 5.68843 8.27179 5.66035C8.31482 5.63136 8.3548 5.5984 8.39142 5.5627C8.42743 5.52669 8.45947 5.48671 8.48816 5.44398C8.51654 5.40157 8.54065 5.3564 8.56018 5.3094C8.57971 5.2618 8.59467 5.21266 8.60474 5.16322C8.61481 5.11256 8.61938 5.06099 8.61938 5.01033C8.61938 4.95937 8.61481 4.90779 8.60474 4.85805C8.59467 4.808 8.57971 4.75856 8.56018 4.71187C8.54065 4.66426 8.51654 4.61879 8.48816 4.57668C8.45947 4.53365 8.42743 4.49397 8.39142 4.45796C8.3548 4.42195 8.31482 4.3893 8.27179 4.36092C8.22968 4.33284 8.18451 4.30873 8.13751 4.2892C8.09052 4.26967 8.04138 4.25471 7.99133 4.24464C7.89063 4.2242 7.78687 4.2242 7.68585 4.24464C7.6358 4.25471 7.58667 4.26967 7.53998 4.2892C7.49207 4.30873 7.4469 4.33284 7.40479 4.36092C7.36176 4.3893 7.32178 4.42195 7.28607 4.45796C7.25006 4.49397 7.2171 4.53365 7.18903 4.57668C7.16095 4.61879 7.13684 4.66426 7.11731 4.71187C7.09778 4.75856 7.08282 4.808 7.07275 4.85805C7.06238 4.90779 7.05688 4.95937 7.05688 5.01033C7.05688 5.06099 7.06238 5.11256 7.07275 5.16322C7.08282 5.21266 7.09778 5.2618 7.11731 5.3094Z" fill="url(#paint4_linear)"/>
+<path d="M10.2423 5.3094C10.2618 5.3564 10.2859 5.40157 10.314 5.44368C10.3421 5.48671 10.3751 5.52669 10.4111 5.56239C10.4468 5.5984 10.4868 5.63136 10.5298 5.66005C10.5719 5.68843 10.6171 5.71254 10.665 5.73207C10.7117 5.7516 10.7608 5.76656 10.8109 5.77663C10.8609 5.7867 10.9125 5.79128 10.9631 5.79128C11.0147 5.79128 11.0657 5.7867 11.1163 5.77663C11.1664 5.76656 11.2155 5.7516 11.2625 5.73207C11.3095 5.71254 11.3547 5.68843 11.3977 5.66005C11.4398 5.63136 11.4798 5.5984 11.5164 5.56239C11.5524 5.52669 11.5845 5.48671 11.6132 5.44368C11.6415 5.40157 11.6656 5.3564 11.6852 5.3094C11.7047 5.2618 11.7197 5.21266 11.7297 5.16322C11.7398 5.11256 11.7444 5.06099 11.7444 5.01003C11.7444 4.95937 11.7398 4.90779 11.7297 4.85774C11.7197 4.80769 11.7047 4.75856 11.6852 4.71187C11.6656 4.66396 11.6415 4.61879 11.6132 4.57668C11.5845 4.53365 11.5524 4.49367 11.5164 4.45796C11.4798 4.42195 11.4398 4.38899 11.3977 4.36092C11.3547 4.33284 11.3095 4.30873 11.2625 4.2892C11.2155 4.26967 11.1664 4.25471 11.1163 4.24464C11.0156 4.2242 10.9119 4.2242 10.8109 4.24464C10.7608 4.25471 10.7117 4.26967 10.665 4.2892C10.6171 4.30873 10.5719 4.33284 10.5298 4.36092C10.4868 4.38899 10.4468 4.42195 10.4111 4.45796C10.3751 4.49367 10.3421 4.53365 10.314 4.57668C10.2859 4.61879 10.2618 4.66396 10.2423 4.71187C10.2228 4.75856 10.2078 4.80769 10.1978 4.85774C10.1874 4.90779 10.1819 4.95937 10.1819 5.01003C10.1819 5.06099 10.1874 5.11256 10.1978 5.16322C10.2078 5.21266 10.2228 5.2618 10.2423 5.3094Z" fill="url(#paint5_linear)"/>
+<path d="M22.7154 13.739C22.344 13.5192 21.8649 13.6425 21.6452 14.0139L17.0099 21.8524C16.7901 22.2238 16.9131 22.7029 17.2845 22.9223C17.4093 22.9962 17.5464 23.0316 17.6816 23.0316C17.9486 23.0316 18.2089 22.8942 18.3548 22.6477L22.9901 14.8092C23.2098 14.4378 23.0868 13.9587 22.7154 13.739Z" fill="url(#paint6_linear)"/>
+<path d="M12.9769 16.0351V15.2462C12.9769 14.8095 13.3321 14.454 13.7688 14.454H13.7798C14.2113 14.454 14.561 14.1042 14.561 13.6727C14.561 13.2415 14.2113 12.8915 13.7798 12.8915H13.7688C12.4706 12.8915 11.4144 13.948 11.4144 15.2462V16.0351C11.4144 16.3192 11.2978 16.5963 11.0946 16.795L10.0823 17.7853C9.93305 17.9312 9.84852 18.1307 9.8473 18.3395C9.84638 18.5482 9.92878 18.7487 10.0765 18.8964L11.108 19.9276C11.307 20.1263 11.4174 20.3906 11.4196 20.6719L11.4251 21.4907C11.4342 22.7801 12.4904 23.8293 13.7798 23.8293C14.2113 23.8293 14.561 23.4792 14.561 23.048C14.561 22.6165 14.2113 22.2668 13.7798 22.2668C13.3458 22.2668 12.9906 21.9137 12.9876 21.48L12.9821 20.6613C12.9772 19.9664 12.7037 19.3133 12.2127 18.8226L11.7397 18.3499L12.1874 17.9119C12.6891 17.4209 12.9769 16.737 12.9769 16.0351Z" fill="url(#paint7_linear)"/>
+<path d="M27.023 20.6857V21.4745C27.023 21.9113 26.6678 22.2668 26.2311 22.2668H26.2201C25.7886 22.2668 25.4388 22.6165 25.4388 23.048C25.4388 23.4792 25.7886 23.8293 26.2201 23.8293H26.2311C27.5293 23.8293 28.5855 22.7728 28.5855 21.4745V20.6857C28.5855 20.4016 28.7021 20.1245 28.9053 19.9258L29.9176 18.9355C30.0668 18.7896 30.1514 18.59 30.1523 18.3813C30.1535 18.1725 30.0711 17.972 29.9234 17.8243L28.8919 16.7932C28.6929 16.5945 28.5821 16.3299 28.5803 16.0488L28.5745 15.23C28.5657 13.9407 27.5095 12.8918 26.2201 12.8918C25.7886 12.8918 25.4388 13.2415 25.4388 13.673C25.4388 14.1042 25.7886 14.4543 26.2201 14.4543C26.6537 14.4543 27.0093 14.8071 27.012 15.2407L27.0178 16.0595C27.0227 16.7541 27.2958 17.4072 27.7872 17.8982L28.2602 18.3709L27.8125 18.8088C27.3108 19.2996 27.023 19.9838 27.023 20.6857Z" fill="url(#paint8_linear)"/>
+<path d="M36.0443 8.13531H3.95569C3.52417 8.13531 3.17444 8.48535 3.17444 8.91656V27.6666C3.17444 28.0981 3.52417 28.4478 3.95569 28.4478H13.2553C13.6868 28.4478 14.0366 28.0981 14.0366 27.6666C14.0366 27.2354 13.6868 26.8853 13.2553 26.8853H4.73694V9.69781H35.2631V26.8853H19.5312C19.0997 26.8853 18.75 27.2354 18.75 27.6666C18.75 28.0981 19.0997 28.4478 19.5312 28.4478H36.0443C36.4758 28.4478 36.8256 28.0981 36.8256 27.6666V8.91656C36.8256 8.48535 36.4758 8.13531 36.0443 8.13531Z" fill="url(#paint9_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="3.15333" y1="1" x2="26.6886" y2="35.0542" gradientUnits="userSpaceOnUse">
+<stop offset="0.259336" stop-color="#FFDB6E"/>
+<stop offset="1" stop-color="#FFBC5E"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="2.26667" y1="0.375001" x2="27.8327" y2="36.511" gradientUnits="userSpaceOnUse">
+<stop offset="0.259336" stop-color="#FFDB6E"/>
+<stop offset="1" stop-color="#FFBC5E"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="15.3714" y1="4.22906" x2="15.5472" y2="6.9288" gradientUnits="userSpaceOnUse">
+<stop offset="0.259336" stop-color="#FFDB6E"/>
+<stop offset="1" stop-color="#FFBC5E"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="4.02043" y1="4.22931" x2="5.36917" y2="5.71887" gradientUnits="userSpaceOnUse">
+<stop offset="0.259336" stop-color="#FFDB6E"/>
+<stop offset="1" stop-color="#FFBC5E"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="7.14543" y1="4.22931" x2="8.49417" y2="5.71887" gradientUnits="userSpaceOnUse">
+<stop offset="0.259336" stop-color="#FFDB6E"/>
+<stop offset="1" stop-color="#FFBC5E"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="10.2704" y1="4.22931" x2="11.6189" y2="5.71884" gradientUnits="userSpaceOnUse">
+<stop offset="0.259336" stop-color="#FFDB6E"/>
+<stop offset="1" stop-color="#FFBC5E"/>
+</linearGradient>
+<linearGradient id="paint6_linear" x1="17.2521" y1="13.6301" x2="25.0143" y2="19.281" gradientUnits="userSpaceOnUse">
+<stop offset="0.259336" stop-color="#FFDB6E"/>
+<stop offset="1" stop-color="#FFBC5E"/>
+</linearGradient>
+<linearGradient id="paint7_linear" x1="10.1144" y1="12.8915" x2="17.4785" y2="16.3959" gradientUnits="userSpaceOnUse">
+<stop offset="0.259336" stop-color="#FFDB6E"/>
+<stop offset="1" stop-color="#FFBC5E"/>
+</linearGradient>
+<linearGradient id="paint8_linear" x1="25.7059" y1="12.8918" x2="33.0696" y2="16.3959" gradientUnits="userSpaceOnUse">
+<stop offset="0.259336" stop-color="#FFDB6E"/>
+<stop offset="1" stop-color="#FFBC5E"/>
+</linearGradient>
+<linearGradient id="paint9_linear" x1="5.08133" y1="8.13532" x2="19.9152" y2="35.2721" gradientUnits="userSpaceOnUse">
+<stop offset="0.259336" stop-color="#FFDB6E"/>
+<stop offset="1" stop-color="#FFBC5E"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/icon-swift.svg b/assets/icon-swift.svg
new file mode 100644
index 0000000..21c1da5
--- /dev/null
+++ b/assets/icon-swift.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" x="0" y="0" viewBox="0 0 58 58" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M53.785 39.858c3.855-11.965-3.012-27.425-16.534-37.016a1 1 0 0 0-1.414 1.366c5.845 8.888 7.347 17.892 4.205 24.91-9.365-6.325-26.301-21.089-26.478-21.243a1 1 0 0 0-1.493 1.303c.264.4 4.996 7.58 10.092 13.822-3.674-2.624-7.728-5.946-14.94-11.976a1 1 0 0 0-1.495 1.287c7.144 11.727 19.036 22.601 24.897 27.586C17.115 45.95 1.709 35.99 1.55 35.886a1 1 0 0 0-1.386 1.385c2.946 4.48 6.996 7.811 12.17 11.433 6.887 4.822 13.74 6.639 19.576 6.639 6.032 0 10.977-1.941 13.743-4.513.012-.015 1.251-1.294 3.996-.49 2.188.64 5.203 3.049 6.258 4.137.254.262.634.365.985.268.353-.099.624-.382.707-.738.266-1.147.4-2.331.4-3.517a15.376 15.376 0 0 0-4.214-10.632zm2.15 11.954c-1.523-1.258-3.775-2.822-5.726-3.393-3.989-1.163-5.966.985-5.983 1.012-4.885 4.534-17.654 6.801-30.746-2.366-3.401-2.381-6.292-4.622-8.666-7.145 1.687.79 3.789 1.65 6.176 2.369 8.172 2.459 15.751 2.015 21.923-1.288a1 1 0 0 0 .168-1.65c-4.372-3.641-14.182-12.271-21.66-22.234 7.282 6.006 10.669 8.494 16.041 11.717a1.001 1.001 0 0 0 1.212-1.575c-3.44-3.341-7.503-8.644-10.521-12.828 6.188 5.225 15.818 13.146 21.745 16.988.235.153.527.198.797.129.271-.071.501-.254.632-.502 3.476-6.605 3.019-14.903-1.154-23.317 10.276 9.224 15.077 22.076 11.526 32.054a1 1 0 0 0 .243 1.05A13.417 13.417 0 0 1 56 50.488c0 .443-.022.884-.065 1.324z" fill="#ffc964" opacity="1" data-original="#000000" class=""></path></g></svg>
\ No newline at end of file
diff --git a/assets/logo.ico b/assets/logo.ico
new file mode 100644
index 0000000..1c3220e
Binary files /dev/null and b/assets/logo.ico differ
diff --git a/assets/logo.svg b/assets/logo.svg
new file mode 100755
index 0000000..bd5b7de
--- /dev/null
+++ b/assets/logo.svg
@@ -0,0 +1,10 @@
+<svg width="185" height="185" viewBox="0 0 185 185" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 92.5C0 41.4137 41.4137 0 92.5 0H135C162.614 0 185 22.3858 185 50V92.5C185 143.586 143.586 185 92.5 185V185C41.4137 185 0 143.586 0 92.5V92.5Z" fill="url(#paint0_linear_13_13)"/>
+<path d="M137.109 88.3594C137.109 88.3594 137.156 88.4766 137.25 88.7109V88.9922C137.25 89.1797 137.25 89.3672 137.25 89.5547C137.25 89.7422 137.203 89.8359 137.109 89.8359H136.828C136.828 89.9297 136.781 90.0234 136.688 90.1172C136.5 90.1172 136.336 90.2812 136.195 90.6094C136.102 90.9375 135.961 91.3594 135.773 91.875C135.305 92.625 134.859 93.6797 134.438 95.0391C134.016 96.3516 133.453 97.875 132.75 99.6094C131.391 103.078 129.82 107.414 128.039 112.617C127.852 113.367 127.617 114.023 127.336 114.586C127.102 115.148 126.891 115.828 126.703 116.625C126.328 117.188 126.023 117.844 125.789 118.594C125.555 119.297 125.297 120.07 125.016 120.914C124.828 121.477 124.547 122.133 124.172 122.883C123.844 123.586 123.539 124.383 123.258 125.273C122.883 125.836 122.555 126.492 122.273 127.242C121.992 127.945 121.641 128.719 121.219 129.562L120.234 131.602C120.047 132.07 119.789 132.492 119.461 132.867C119.133 133.242 118.875 133.594 118.688 133.922C118.5 134.109 118.312 134.297 118.125 134.484C117.984 134.672 117.82 134.859 117.633 135.047L117.352 135.609H116.93C116.93 135.703 116.883 135.797 116.789 135.891H116.508C116.414 135.891 116.367 136.078 116.367 136.453H116.086H115.945H115.664H115.453H115.172H114.75H114.609H114.188C114 136.453 113.906 136.359 113.906 136.172C113.906 135.984 113.859 135.891 113.766 135.891C113.578 135.891 113.438 135.844 113.344 135.75C113.25 135.656 113.109 135.609 112.922 135.609L112.148 134.203C112.148 134.016 112.125 133.898 112.078 133.852C112.031 133.805 111.914 133.617 111.727 133.289C111.727 133.102 111.703 132.914 111.656 132.727C111.609 132.539 111.586 132.352 111.586 132.164C111.398 132.164 111.305 131.977 111.305 131.602V131.32C111.211 131.32 111.164 131.227 111.164 131.039V130.758C111.164 130.289 111.164 130.008 111.164 129.914C111.164 129.867 111.07 129.75 110.883 129.562V129V128.719V125.555V123.797C111.07 123.234 111.164 122.625 111.164 121.969C111.164 121.266 111.211 120.633 111.305 120.07C111.492 118.898 111.609 117.797 111.656 116.766C111.703 115.688 111.82 114.586 112.008 113.461C112.383 109.148 112.969 104.812 113.766 100.453C113.953 98.25 114.188 96.0469 114.469 93.8438C114.75 91.6406 115.078 89.4375 115.453 87.2344C115.641 85.0312 115.875 82.7812 116.156 80.4844C116.484 78.1875 116.742 75.9375 116.93 73.7344C117.117 71.4375 117.281 69.1875 117.422 66.9844C117.562 64.7344 117.633 62.3672 117.633 59.8828C117.633 57.6797 117.562 55.5703 117.422 53.5547C117.281 51.5391 117.07 49.8047 116.789 48.3516C116.602 47.5078 116.391 46.7344 116.156 46.0312C115.922 45.2812 115.594 44.625 115.172 44.0625C114.609 43.2188 113.766 42.3516 112.641 41.4609H111.727C111.727 41.2734 111.703 41.1797 111.656 41.1797C111.609 41.1797 111.586 41.1328 111.586 41.0391V40.8984H111.164H110.32H109.406H108.562H107.438C107.344 40.8984 107.227 40.9922 107.086 41.1797C106.945 41.3672 106.781 41.4609 106.594 41.4609C106.312 41.4609 106.008 41.5547 105.68 41.7422H104.836C104.742 42.0234 104.625 42.1875 104.484 42.2344C104.344 42.2813 104.18 42.3984 103.992 42.5859C103.617 42.5859 103.312 42.7734 103.078 43.1484C102.984 43.1484 102.867 43.1953 102.727 43.2891C102.586 43.3828 102.422 43.4297 102.234 43.4297C101.953 43.7109 101.695 43.9688 101.461 44.2031C101.227 44.3906 100.922 44.625 100.547 44.9062C100.266 45.0938 99.9844 45.3516 99.7031 45.6797C99.4688 46.0078 99.1641 46.3359 98.7891 46.6641C97.7109 47.7422 96.6328 48.8438 95.5547 49.9688C94.5234 51.0938 93.5391 52.3828 92.6016 53.8359C91.5234 55.1953 90.5391 56.6719 89.6484 58.2656C88.8047 59.8125 87.9609 61.4062 87.1172 63.0469C86.2734 64.5 85.4062 66.0469 84.5156 67.6875C83.6719 69.2812 82.8047 70.8984 81.9141 72.5391C81.1641 73.9922 80.3906 75.5156 79.5938 77.1094C78.8438 78.6562 78.0469 80.1094 77.2031 81.4688C76.4531 83.1094 75.7031 84.6094 74.9531 85.9688C74.25 87.2812 73.5 88.6641 72.7031 90.1172C71.9531 91.4766 71.1797 92.7891 70.3828 94.0547C69.6328 95.2734 68.8828 96.4688 68.1328 97.6406C66.6797 100.406 65.3203 102.797 64.0547 104.812C63.6797 105.281 63.3516 105.82 63.0703 106.43C62.7891 106.992 62.4609 107.508 62.0859 107.977C61.8984 108.539 61.6406 109.078 61.3125 109.594C61.0312 110.062 60.7031 110.672 60.3281 111.422C59.1562 113.344 58.0781 115.125 57.0938 116.766C56.1094 118.406 55.125 119.883 54.1406 121.195C53.2969 122.836 52.5703 124.172 51.9609 125.203C51.3047 126.188 50.7422 127.078 50.2734 127.875C49.8984 128.344 49.6406 128.672 49.5 128.859C49.3125 129.047 49.125 129.281 48.9375 129.562L48.6562 129.844C48.4688 130.594 48.2812 130.594 48.0938 129.844V129V128.859C48.0938 128.766 48.1172 128.672 48.1641 128.578C48.2109 128.484 48.2344 128.344 48.2344 128.156C48.3281 128.062 48.6094 127.195 49.0781 125.555C49.4531 124.711 49.875 123.562 50.3438 122.109C50.7656 120.656 51.3047 118.922 51.9609 116.906C52.6172 115.172 53.3438 113.25 54.1406 111.141C54.9844 109.031 55.8984 106.828 56.8828 104.531C57.0703 103.781 57.3281 103.125 57.6562 102.562C57.9844 101.953 58.2422 101.25 58.4297 100.453L59.3438 98.7656C59.4375 98.2969 59.5547 97.9688 59.6953 97.7812C59.8359 97.5469 60 97.1953 60.1875 96.7266C61.125 94.1484 62.4141 91.5703 64.0547 88.9922C64.7109 87.3516 65.3438 85.8516 65.9531 84.4922C66.6094 83.1328 67.3359 81.75 68.1328 80.3438C68.8828 78.9844 69.6797 77.6016 70.5234 76.1953C71.4141 74.7422 72.2812 73.3359 73.125 71.9766C73.9688 70.5234 74.8594 69.1641 75.7969 67.8984C76.7344 66.5859 77.7188 65.25 78.75 63.8906C79.6875 62.7188 80.6719 61.5234 81.7031 60.3047C82.7344 59.0391 83.7656 57.75 84.7969 56.4375C85.875 55.3594 86.9531 54.2344 88.0312 53.0625C89.1562 51.8438 90.2344 50.6719 91.2656 49.5469C92.3438 48.1875 93.4219 46.9922 94.5 45.9609C95.625 44.8828 96.7734 43.7578 97.9453 42.5859C99.0234 41.2266 100.148 40.0547 101.32 39.0703C102.492 38.0859 103.758 37.1484 105.117 36.2578C105.211 36.2578 105.328 36.1641 105.469 35.9766C105.609 35.7891 105.773 35.6953 105.961 35.6953C106.148 35.6953 106.312 35.6484 106.453 35.5547C106.641 35.4609 106.828 35.4141 107.016 35.4141C107.203 35.0391 107.484 34.8516 107.859 34.8516C108.141 34.6641 108.516 34.5703 108.984 34.5703C109.266 34.1953 109.617 33.9844 110.039 33.9375L111.164 33.6562H111.305H111.586H112.008H113.344C114 33.6562 114.703 33.8672 115.453 34.2891C116.25 34.6641 117.023 35.1328 117.773 35.6953C118.43 36.5391 119.109 37.5938 119.812 38.8594C120.094 39.4219 120.398 40.0547 120.727 40.7578C121.055 41.4141 121.336 42.0234 121.57 42.5859C121.758 43.3359 121.945 44.0391 122.133 44.6953C122.32 45.3047 122.461 46.0547 122.555 46.9453C122.742 47.6953 122.906 48.375 123.047 48.9844C123.188 49.5469 123.305 50.2031 123.398 50.9531C123.586 52.4063 123.75 53.8828 123.891 55.3828C124.031 56.8359 124.102 58.2422 124.102 59.6016C124.195 61.0547 124.242 62.4375 124.242 63.75C124.242 65.0156 124.242 66.3281 124.242 67.6875C124.148 69.0469 124.102 70.3359 124.102 71.5547C124.102 72.7734 124.008 74.0625 123.82 75.4219C123.727 78 123.586 80.5781 123.398 83.1562C123.211 85.6875 123.023 88.1953 122.836 90.6797C122.648 92.9766 122.391 95.3203 122.062 97.7109C121.734 100.055 121.453 102.328 121.219 104.531C120.938 106.453 120.68 108.281 120.445 110.016C120.211 111.75 120 113.461 119.812 115.148C120 114.211 120.328 113.555 120.797 113.18C121.453 111.82 122.062 110.602 122.625 109.523C123.234 108.398 123.891 107.297 124.594 106.219C125.672 104.203 126.727 102.328 127.758 100.594C128.789 98.8125 129.75 97.2422 130.641 95.8828C131.484 94.2422 132.258 92.9297 132.961 91.9453C133.711 90.9141 134.367 90.0234 134.93 89.2734C135.211 89.0859 135.469 88.8984 135.703 88.7109C135.938 88.4766 136.148 88.3594 136.336 88.3594H136.688H136.828H137.109ZM115.031 122.672H114.75H115.031ZM114.75 122.672H114.609H114.75Z" fill="black" fill-opacity="0.86"/>
+<defs>
+<linearGradient id="paint0_linear_13_13" x1="0" y1="92" x2="185" y2="92" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFDB6E"/>
+<stop offset="1" stop-color="#FFBC5E"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/my-avatar.png b/assets/my-avatar.png
new file mode 100644
index 0000000..7003141
Binary files /dev/null and b/assets/my-avatar.png differ
diff --git a/index.html b/index.html
new file mode 100755
index 0000000..031f4d1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,573 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nguyen Quy Duc</title>
+
+    <!--
+    - favicon
+    -->
+    <link rel="shortcut icon" href="./assets/logo.ico" type="image/x-icon" />
+
+    <!--
+    - custom css link
+    -->
+    <link rel="stylesheet" href="./style.css" />
+
+    <!--
+    - google font link
+    -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body>
+    <!--
+    - #MAIN
+    -->
+
+    <main>
+      <!--
+      - #SIDEBAR
+      -->
+
+      <aside class="sidebar" data-sidebar>
+        <div class="sidebar-info">
+          <figure class="avatar-box">
+            <img src="./assets/my-avatar.png" alt="Nguyen Quy Duc" width="80" />
+          </figure>
+
+          <div class="info-content">
+            <h1 class="name" title="Nguyen Quy Duc">Nguyen Quy Duc</h1>
+
+            <p class="title">Software Developer</p>
+          </div>
+
+          <button class="info_more-btn" data-sidebar-btn>
+            <span>Show Contacts</span>
+
+            <ion-icon name="chevron-down"></ion-icon>
+          </button>
+        </div>
+
+        <div class="sidebar-info_more">
+          <div class="separator"></div>
+
+          <ul class="contacts-list">
+            <li class="contact-item">
+              <div class="icon-box">
+                <ion-icon name="mail-outline"></ion-icon>
+              </div>
+
+              <div class="contact-info">
+                <p class="contact-title">Email</p>
+
+                <a href="mailto:quyduc711@gmail.com" class="contact-link"
+                  >quyduc711@gmail.com</a
+                >
+              </div>
+            </li>
+
+            <li class="contact-item">
+              <div class="icon-box">
+                <ion-icon name="phone-portrait-outline"></ion-icon>
+              </div>
+
+              <div class="contact-info">
+                <p class="contact-title">Phone</p>
+
+                <a href="tel:+6597747903" class="contact-link"
+                  >(+65) 9774 7903</a
+                >
+              </div>
+            </li>
+
+            <li class="contact-item">
+              <div class="icon-box">
+                <ion-icon name="location-outline"></ion-icon>
+              </div>
+
+              <div class="contact-info">
+                <p class="contact-title">Location</p>
+
+                <address>Singapore</address>
+              </div>
+            </li>
+          </ul>
+
+          <div class="separator"></div>
+
+          <ul class="social-list">
+            <li class="social-item">
+              <a
+                href="https://www.linkedin.com/in/quyduc/"
+                class="social-link"
+                target="_blank"
+              >
+                <ion-icon name="logo-linkedin"></ion-icon>
+              </a>
+            </li>
+
+            <li class="social-item">
+              <a
+                href="https://github.com/ngquyduc"
+                class="social-link"
+                target="_blank"
+              >
+                <ion-icon name="logo-github"></ion-icon>
+              </a>
+            </li>
+
+            <li class="social-item">
+              <a
+                href="https://www.instagram.com/quyduc711/"
+                class="social-link"
+                target="_blank"
+              >
+                <ion-icon name="logo-instagram"></ion-icon>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </aside>
+
+      <!--
+      - #main-content
+      -->
+
+      <div class="main-content">
+        <!--
+        - #NAVBAR
+        -->
+
+        <nav class="navbar">
+          <ul class="navbar-list">
+            <li class="navbar-item">
+              <button class="navbar-link active" data-nav-link>About</button>
+            </li>
+
+            <li class="navbar-item">
+              <button class="navbar-link" data-nav-link>Resume</button>
+            </li>
+
+            <li class="navbar-item">
+              <button class="navbar-link" data-nav-link>Projects</button>
+            </li>
+
+            <li class="navbar-item">
+              <button class="navbar-link" data-nav-link>Contact</button>
+            </li>
+          </ul>
+        </nav>
+
+        <!--
+        - #ABOUT
+        -->
+
+        <article class="about active" data-page="about">
+          <header>
+            <h2 class="h2 article-title">About me</h2>
+          </header>
+
+          <section class="about-text">
+            <p>
+              Xin chào, my name is Duc. I am a final year student at National
+              University of Singapore, eager to begin my career as a Software
+              Developer
+            </p>
+
+            <p>
+              I'm passionate about web development, mobile applications, and
+              generative AI. I just finished my 6 month Software Engineer
+              internship at dConstruct Robotics, where I contributed to the
+              development of a point cloud surveillance system. Before that, I
+              maintained and enhanced a road inspection dashboard and built a
+              360 camera remote control app at Vebits.
+            </p>
+
+            <p>
+              I am actively seeking a full-time position as a Software Developer
+              to apply my skills and contribute effectively to a dynamic team. I
+              am eager to embark on a rewarding career path that aligns with my
+              passion.
+            </p>
+          </section>
+
+          <!--
+          - service
+          -->
+
+          <section class="service">
+            <h3 class="h3 service-title">What i'm doing</h3>
+
+            <ul class="service-list">
+              <li class="service-item">
+                <div class="service-icon-box">
+                  <img
+                    src="./assets/icon-dev.svg"
+                    alt="Web development icon"
+                    width="40"
+                  />
+                </div>
+
+                <div class="service-content-box">
+                  <h4 class="h4 service-item-title">Web development</h4>
+
+                  <p class="service-item-text">
+                    I'm building a website called Caroubuy that helps people
+                    track their Carousell favorite items.
+                  </p>
+                </div>
+              </li>
+
+              <li class="service-item">
+                <div class="service-icon-box">
+                  <img
+                    src="./assets/icon-app.svg"
+                    alt="mobile app icon"
+                    width="40"
+                  />
+                </div>
+
+                <div class="service-content-box">
+                  <h4 class="h4 service-item-title">Mobile apps</h4>
+
+                  <p class="service-item-text">
+                    At the same time, I'm working on a mobile app called Gym
+                    Friend acting as a personal trainer for gym newbies.
+                  </p>
+                </div>
+              </li>
+
+              <li class="service-item">
+                <div class="service-icon-box">
+                  <img src="./assets/icon-cs.svg" alt="cs icon" width="40" />
+                </div>
+
+                <div class="service-content-box">
+                  <h4 class="h4 service-item-title">Computer Science</h4>
+
+                  <p class="service-item-text">
+                    Besides, I'm also finishing my final year study as a
+                    undergraduate at NUS.
+                  </p>
+                </div>
+              </li>
+              <li class="service-item">
+                <div class="service-icon-box">
+                  <img
+                    src="./assets/icon-swift.svg
+                "
+                    alt="swift icon"
+                    width="40"
+                  />
+                </div>
+
+                <div class="service-content-box">
+                  <h4 class="h4 service-item-title">Learning Swift UI</h4>
+
+                  <p class="service-item-text">
+                    Recently, I pick up SwiftUI for my next internship and find
+                    it really interesting.
+                  </p>
+                </div>
+              </li>
+            </ul>
+          </section>
+        </article>
+
+        <!--
+        - #RESUME
+        -->
+
+        <article class="resume" data-page="resume">
+          <header>
+            <h2 class="h2 article-title">Resume</h2>
+          </header>
+
+          <section class="timeline">
+            <div class="title-wrapper">
+              <div class="icon-box">
+                <ion-icon name="book-outline"></ion-icon>
+              </div>
+
+              <h3 class="h3">Experience</h3>
+            </div>
+
+            <ol class="timeline-list">
+              <li class="timeline-item">
+                <h4 class="h4 timeline-item-title">
+                  Software Engineer Intern @ dConstruct Robotics
+                </h4>
+
+                <span>Jan 2024 - Present</span>
+
+                <p class="timeline-text">
+                  • Designed and built the user interface for a point cloud
+                  surveillance system using SolidJS and TailwindCSS
+                </p>
+                <p class="timeline-text">
+                  • Implemented the playback feature with caching mechanism in
+                  C++17 and used Emscripten for binding
+                </p>
+              </li>
+
+              <li class="timeline-item">
+                <h4 class="h4 timeline-item-title">
+                  Software Engineer Intern @ Vebits
+                </h4>
+
+                <span>May 2023 - Aug 2023</span>
+
+                <p class="timeline-text">
+                  <u>Full Stack Web Development</u>
+                  <i> (AngularJS, Bootstrap, Django, and MongoDB) </i>
+                </p>
+                <p class="timeline-text">
+                  • Optimized runtime performance by 50% through intricate query
+                  function enhancements and distributed database implementation
+                  for MongoDB on backend side, further refining web app’s
+                  scalability
+                </p>
+                <p class="timeline-text">
+                  • Elevated user engagement and experience by leading a
+                  redesign of web app’s frontend using Angular 13 and Bootstrap
+                  5, incorporating modern design principles for an intuitive and
+                  visually appealing interface
+                </p>
+
+                <div class="timeline-text-spacer"></div>
+
+                <p class="timeline-text">
+                  <u>Mobile Development</u>
+                  <i>
+                    (React Native, NodeJS, and Google Open Spherical Camera API)
+                  </i>
+                </p>
+                <p class="timeline-text">
+                  • Conceptualized and engineered a comprehensive mobile
+                  application from scratch, enabling remote control of Insta360
+                  and Theta X cameras with delay of less than 100 ms via
+                  integration with Google OSC API
+                </p>
+                <p class="timeline-text">
+                  • Empowered users with seamless content management by allowing
+                  capture, recording, and subsequent server-based AI processing
+                  of footages, showcasing ability for end-to-end solutions for
+                  industrial automation
+                </p>
+              </li>
+
+              <li class="timeline-item">
+                <h4 class="h4 timeline-item-title">
+                  Teaching Assistant @ NUS School of Computing
+                </h4>
+
+                <span>Aug 2022 - Dec 2023</span>
+
+                <p class="timeline-text">
+                  • Led a group of 6 Junior Teaching Assistants and provided
+                  tutorial discussions for over 100 students
+                </p>
+                <p class="timeline-text">
+                  • Delivered instruction spanning computational thinking and
+                  problem solving skills, covering topics involving algorithm
+                  design, fundamental programming constructs, basic data
+                  structures, and recursion
+                </p>
+              </li>
+            </ol>
+          </section>
+
+          <section class="timeline">
+            <div class="title-wrapper">
+              <div class="icon-box">
+                <ion-icon name="book-outline"></ion-icon>
+              </div>
+
+              <h3 class="h3">Education</h3>
+            </div>
+
+            <ol class="timeline-list">
+              <li class="timeline-item">
+                <h4 class="h4 timeline-item-title">
+                  National University of Singapore
+                </h4>
+
+                <span>2021 - Present</span>
+
+                <p class="timeline-text">
+                  • Bachelor of Computing (Hons) in Computer Science
+                </p>
+                <p class="timeline-text">
+                  • Focus area: Software Engineering and Database Systems
+                </p>
+              </li>
+
+              <li class="timeline-item">
+                <h4 class="h4 timeline-item-title">
+                  Hanoi - Amsterdam High School
+                </h4>
+
+                <span>2018 — 2021</span>
+
+                <p class="timeline-text">• Specialized in Physics</p>
+              </li>
+            </ol>
+          </section>
+        </article>
+
+        <!--
+        - #PROJECTS
+        -->
+
+        <article class="projects" data-page="projects">
+          <header>
+            <h2 class="h2 article-title">Projects</h2>
+          </header>
+
+          <section class="projects">
+            <ul class="filter-list">
+              <li class="filter-item">
+                <button class="active" data-filter-btn>All</button>
+              </li>
+
+              <li class="filter-item">
+                <button data-filter-btn>Web development</button>
+              </li>
+
+              <li class="filter-item">
+                <button data-filter-btn>Mobile applications</button>
+              </li>
+
+              <li class="filter-item">
+                <button data-filter-btn>Other</button>
+              </li>
+            </ul>
+
+            <div class="filter-select-box">
+              <button class="filter-select" data-select>
+                <div class="select-value" data-selecct-value>
+                  Select category
+                </div>
+
+                <div class="select-icon">
+                  <ion-icon name="chevron-down"></ion-icon>
+                </div>
+              </button>
+
+              <ul class="select-list">
+                <li class="select-item">
+                  <button data-select-item>All</button>
+                </li>
+
+                <li class="select-item">
+                  <button data-select-item>Web development</button>
+                </li>
+
+                <li class="select-item">
+                  <button data-select-item>Mobile applications</button>
+                </li>
+
+                <li class="select-item">
+                  <button data-select-item>Other</button>
+                </li>
+              </ul>
+            </div>
+
+            <ul class="project-list"></ul>
+          </section>
+        </article>
+
+        <!--
+        - #CONTACT
+        -->
+
+        <article class="contact" data-page="contact">
+          <header>
+            <h2 class="h2 article-title">Contact</h2>
+          </header>
+
+          <section class="mapbox" data-mapbox>
+            <figure>
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d63820.9915469189!2d103.74257807273398!3d1.2868989174047087!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31da1a5234b05815%3A0x500f7acaedaa4b0!2sQueenstown!5e0!3m2!1sen!2ssg!4v1719475772542!5m2!1sen!2ssg"
+                width="400"
+                height="300"
+                loading="lazy"
+              ></iframe>
+            </figure>
+          </section>
+
+          <section class="contact-form">
+            <h3 class="h3 form-title">Contact Form</h3>
+
+            <form
+              action="https://getform.io/f/916fd15b-fba3-4be6-9a52-b85507d3685c"
+              method="POST"
+              enctype="multipart/form-data"
+              class="form"
+              data-form
+            >
+              <div class="input-wrapper">
+                <input
+                  type="text"
+                  name="fullname"
+                  class="form-input"
+                  placeholder="Full name"
+                  required
+                  data-form-input
+                />
+
+                <input
+                  type="email"
+                  name="email"
+                  class="form-input"
+                  placeholder="Email address"
+                  required
+                  data-form-input
+                />
+              </div>
+
+              <textarea
+                name="message"
+                class="form-input"
+                placeholder="Your Message"
+                required
+                data-form-input
+              ></textarea>
+
+              <button class="form-btn" type="submit" disabled data-form-btn>
+                <ion-icon name="paper-plane"></ion-icon>
+                <span>Send Message</span>
+              </button>
+            </form>
+          </section>
+        </article>
+      </div>
+    </main>
+
+    <!--
+    - custom js link
+    -->
+    <script src="./script.js"></script>
+
+    <!--
+    - ionicon link
+    -->
+    <script
+      type="module"
+      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
+    ></script>
+    <script
+      nomodule
+      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
+    ></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
new file mode 100755
index 0000000..ccb6366
--- /dev/null
+++ b/script.js
@@ -0,0 +1,102 @@
+"use strict";
+
+// element toggle function
+const elementToggleFunc = function (elem) {
+  elem.classList.toggle("active");
+};
+
+// sidebar variables
+const sidebar = document.querySelector("[data-sidebar]");
+const sidebarBtn = document.querySelector("[data-sidebar-btn]");
+
+// sidebar toggle functionality for mobile
+sidebarBtn.addEventListener("click", function () {
+  elementToggleFunc(sidebar);
+});
+
+// custom select variables
+const select = document.querySelector("[data-select]");
+const selectItems = document.querySelectorAll("[data-select-item]");
+const selectValue = document.querySelector("[data-selecct-value]");
+const filterBtn = document.querySelectorAll("[data-filter-btn]");
+
+select.addEventListener("click", function () {
+  elementToggleFunc(this);
+});
+
+// add event in all select items
+for (let i = 0; i < selectItems.length; i++) {
+  selectItems[i].addEventListener("click", function () {
+    let selectedValue = this.innerText.toLowerCase();
+    selectValue.innerText = this.innerText;
+    elementToggleFunc(select);
+    filterFunc(selectedValue);
+  });
+}
+
+// filter variables
+const filterItems = document.querySelectorAll("[data-filter-item]");
+
+const filterFunc = function (selectedValue) {
+  for (let i = 0; i < filterItems.length; i++) {
+    if (selectedValue === "all") {
+      filterItems[i].classList.add("active");
+    } else if (selectedValue === filterItems[i].dataset.category) {
+      filterItems[i].classList.add("active");
+    } else {
+      filterItems[i].classList.remove("active");
+    }
+  }
+};
+
+// add event in all filter button items for large screen
+let lastClickedBtn = filterBtn[0];
+
+for (let i = 0; i < filterBtn.length; i++) {
+  filterBtn[i].addEventListener("click", function () {
+    let selectedValue = this.innerText.toLowerCase();
+    selectValue.innerText = this.innerText;
+    filterFunc(selectedValue);
+
+    lastClickedBtn.classList.remove("active");
+    this.classList.add("active");
+    lastClickedBtn = this;
+  });
+}
+
+// contact form variables
+const form = document.querySelector("[data-form]");
+const formInputs = document.querySelectorAll("[data-form-input]");
+const formBtn = document.querySelector("[data-form-btn]");
+
+// add event to all form input field
+for (let i = 0; i < formInputs.length; i++) {
+  formInputs[i].addEventListener("input", function () {
+    // check form validation
+    if (form.checkValidity()) {
+      formBtn.removeAttribute("disabled");
+    } else {
+      formBtn.setAttribute("disabled", "");
+    }
+  });
+}
+
+// page navigation variables
+const navigationLinks = document.querySelectorAll("[data-nav-link]");
+const pages = document.querySelectorAll("[data-page]");
+
+// add event to all nav link
+for (let i = 0; i < navigationLinks.length; i++) {
+  navigationLinks[i].addEventListener("click", function () {
+    for (let i = 0; i < pages.length; i++) {
+      if (this.innerHTML.toLowerCase() === pages[i].dataset.page) {
+        pages[i].classList.add("active");
+        navigationLinks[i].classList.add("active");
+        window.scrollTo(0, 0);
+      } else {
+        pages[i].classList.remove("active");
+        navigationLinks[i].classList.remove("active");
+      }
+    }
+  });
+}
diff --git a/style.css b/style.css
new file mode 100755
index 0000000..6c98412
--- /dev/null
+++ b/style.css
@@ -0,0 +1,1496 @@
+/*-----------------------------------*\
+  #style.css
+\*-----------------------------------*/
+
+
+/**
+ * copyright 2022 @codewithsadee
+ */
+
+
+
+
+
+/*-----------------------------------*\
+  #CUSTOM PROPERTY
+\*-----------------------------------*/
+
+:root {
+
+  /**
+   * colors
+   */
+
+  /* gradient */
+
+  --bg-gradient-onyx: linear-gradient(
+    to bottom right, 
+    hsl(240, 1%, 25%) 3%, 
+    hsl(0, 0%, 19%) 97%
+  );
+  --bg-gradient-jet: linear-gradient(
+    to bottom right, 
+    hsla(240, 1%, 18%, 0.251) 0%, 
+    hsla(240, 2%, 11%, 0) 100%
+  ), hsl(240, 2%, 13%);
+  --bg-gradient-yellow-1: linear-gradient(
+    to bottom right, 
+    hsl(45, 100%, 71%) 0%, 
+    hsla(36, 100%, 69%, 0) 50%
+  );
+  --bg-gradient-yellow-2: linear-gradient(
+    135deg, 
+    hsla(45, 100%, 71%, 0.251) 0%, 
+    hsla(35, 100%, 68%, 0) 59.86%
+  ), hsl(240, 2%, 13%);
+  --border-gradient-onyx: linear-gradient(
+    to bottom right, 
+    hsl(0, 0%, 25%) 0%, 
+    hsla(0, 0%, 25%, 0) 50%
+  );
+  --text-gradient-yellow: linear-gradient(
+    to right, 
+    hsl(45, 100%, 72%), 
+    hsl(35, 100%, 68%)
+  );
+
+  /* solid */
+
+  --jet: hsl(0, 0%, 22%);
+  --onyx: hsl(240, 1%, 17%);
+  --eerie-black-1: hsl(240, 2%, 13%);
+  --eerie-black-2: hsl(240, 2%, 12%);
+  --smoky-black: hsl(0, 0%, 7%);
+  --white-1: hsl(0, 0%, 100%);
+  --white-2: hsl(0, 0%, 98%);
+  --orange-yellow-crayola: hsl(45, 100%, 72%);
+  --vegas-gold: hsl(45, 54%, 58%);
+  --light-gray: hsl(0, 0%, 84%);
+  --light-gray-70: hsla(0, 0%, 84%, 0.7);
+  --bittersweet-shimmer: hsl(0, 43%, 51%);
+
+  /**
+   * typography
+   */
+
+  /* font-family */
+  --ff-poppins: 'Poppins', sans-serif;
+
+  /* font-size */
+  --fs-1: 24px;
+  --fs-2: 18px;
+  --fs-3: 17px;
+  --fs-4: 16px;
+  --fs-5: 15px;
+  --fs-6: 14px;
+  --fs-7: 13px;
+  --fs-8: 11px;
+
+  /* font-weight */
+  --fw-300: 300;
+  --fw-400: 400;
+  --fw-500: 500;
+  --fw-600: 600;
+
+  /**
+   * shadow
+   */
+  
+  --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
+  --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);
+  --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25);
+  --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15);
+  --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);
+
+  /**
+   * transition
+   */
+
+  --transition-1: 0.25s ease;
+  --transition-2: 0.5s ease-in-out;
+
+}
+
+
+
+
+
+/*-----------------------------------*\
+  #RESET
+\*-----------------------------------*/
+
+*, *::before, *::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+a { text-decoration: none; }
+
+li { list-style: none; }
+
+img, ion-icon, a, button, time, span { display: block; }
+
+button {
+  font: inherit;
+  background: none;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+}
+
+input, textarea {
+  display: block;
+  width: 100%;
+  background: none;
+  font: inherit;
+}
+
+::selection {
+  background: var(--orange-yellow-crayola);
+  color: var(--smoky-black);
+}
+
+:focus { outline-color: var(--orange-yellow-crayola); }
+
+html { font-family: var(--ff-poppins); }
+
+body { background: var(--smoky-black); }
+
+
+
+
+
+/*-----------------------------------*\
+  #REUSED STYLE
+\*-----------------------------------*/
+
+.sidebar,
+article {
+  background: var(--eerie-black-2);
+  border: 1px solid var(--jet);
+  border-radius: 20px;
+  padding: 15px;
+  box-shadow: var(--shadow-1);
+  z-index: 1;
+}
+
+.separator {
+  width: 100%;
+  height: 1px;
+  background: var(--jet);
+  margin: 16px 0;
+}
+
+.icon-box {
+  position: relative;
+  background: var(--border-gradient-onyx);
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  color: var(--orange-yellow-crayola);
+  box-shadow: var(--shadow-1);
+  z-index: 1;
+}
+
+.icon-box::before {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  background: var(--eerie-black-1);
+  border-radius: inherit;
+  z-index: -1;
+}
+
+.icon-box ion-icon { --ionicon-stroke-width: 35px; }
+
+article { display: none; }
+
+article.active {
+  display: block;
+  animation: fade 0.5s ease backwards;
+}
+
+@keyframes fade {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+.h2,
+.h3,
+.h4,
+.h5 {
+  color: var(--white-2);
+  text-transform: capitalize;
+}
+
+.h2 { font-size: var(--fs-1); }
+
+.h3 { font-size: var(--fs-2); }
+
+.h4 { font-size: var(--fs-4); }
+
+.h5 {
+  font-size: var(--fs-7);
+  font-weight: var(--fw-500);
+}
+
+.article-title {
+  position: relative;
+  padding-bottom: 7px;
+}
+
+.article-title::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 30px;
+  height: 3px;
+  background: var(--text-gradient-yellow);
+  border-radius: 3px;
+}
+
+.has-scrollbar::-webkit-scrollbar {
+  width: 5px; /* for vertical scrollbar */
+  height: 5px; /* for horizontal scrollbar */
+}
+
+.has-scrollbar::-webkit-scrollbar-track {
+  background: var(--onyx);
+  border-radius: 5px;
+}
+
+.has-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--orange-yellow-crayola);
+  border-radius: 5px;
+}
+
+.has-scrollbar::-webkit-scrollbar-button { width: 20px; }
+
+.content-card {
+  position: relative;
+  background: var(--border-gradient-onyx);
+  padding: 15px;
+  padding-top: 45px;
+  border-radius: 14px;
+  box-shadow: var(--shadow-2);
+  cursor: pointer;
+  z-index: 1;
+}
+
+.content-card::before {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  background: var(--bg-gradient-jet);
+  border-radius: inherit;
+  z-index: -1;
+}
+
+
+
+
+
+/*-----------------------------------*\
+  #MAIN
+\*-----------------------------------*/
+
+main {
+  margin: 15px 12px;
+  margin-bottom: 75px;
+  min-width: 259px;
+}
+
+
+
+
+
+/*-----------------------------------*\
+  #SIDEBAR
+\*-----------------------------------*/
+
+.sidebar {
+  margin-bottom: 15px;
+  max-height: 112px;
+  overflow: hidden;
+  transition: var(--transition-2);
+}
+
+.sidebar.active { max-height: 405px; }
+
+.sidebar-info {
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 15px;
+}
+
+.avatar-box {
+  background: var(--bg-gradient-onyx);
+  border-radius: 20px;
+}
+
+.info-content .name {
+  color: var(--white-2);
+  font-size: var(--fs-3);
+  font-weight: var(--fw-500);
+  letter-spacing: -0.25px;
+  margin-bottom: 10px;
+}
+
+.info-content .title {
+  color: var(--white-1);
+  background: var(--onyx);
+  font-size: var(--fs-8);
+  font-weight: var(--fw-300);
+  width: max-content;
+  padding: 3px 12px;
+  border-radius: 8px;
+}
+
+.info_more-btn {
+  position: absolute;
+  top: -15px;
+  right: -15px;
+  border-radius: 0 15px;
+  font-size: 13px;
+  color: var(--orange-yellow-crayola);
+  background: var(--border-gradient-onyx);
+  padding: 10px;
+  box-shadow: var(--shadow-2);
+  transition: var(--transition-1);
+  z-index: 1;
+}
+
+.info_more-btn::before {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  border-radius: inherit;
+  background: var(--bg-gradient-jet);
+  transition: var(--transition-1);
+  z-index: -1;
+}
+
+.info_more-btn:hover,
+.info_more-btn:focus { background: var(--bg-gradient-yellow-1); }
+
+.info_more-btn:hover::before,
+.info_more-btn:focus::before { background: var(--bg-gradient-yellow-2); }
+
+.info_more-btn span { display: none; }
+
+.sidebar-info_more {
+  opacity: 0;
+  visibility: hidden;
+  transition: var(--transition-2);
+}
+
+.sidebar.active .sidebar-info_more {
+  opacity: 1;
+  visibility: visible;
+}
+
+.contacts-list {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+
+.contact-item {
+  min-width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.contact-info {
+  max-width: calc(100% - 46px);
+  width: calc(100% - 46px);
+}
+
+.contact-title {
+  color: var(--light-gray-70);
+  font-size: var(--fs-8);
+  text-transform: uppercase;
+  margin-bottom: 2px;
+}
+
+.contact-info :is(.contact-link, time, address) {
+  color: var(--white-2);
+  font-size: var(--fs-7);
+}
+
+.contact-info address { font-style: normal; }
+
+.social-list {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 15px;
+  padding-bottom: 4px;
+  padding-left: 7px;
+}
+
+.social-item .social-link {
+  color: var(--light-gray-70);
+  font-size: 18px;
+}
+
+
+.social-item .social-link:hover { color: var(--light-gray); }
+
+
+
+
+
+/*-----------------------------------*\
+  #NAVBAR
+\*-----------------------------------*/
+
+.navbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: hsla(240, 1%, 17%, 0.75);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--jet);
+  border-radius: 12px 12px 0 0;
+  box-shadow: var(--shadow-2);
+  z-index: 5;
+}
+
+.navbar-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  padding: 0 10px;
+}
+
+.navbar-link {
+  color: var(--light-gray);
+  font-size: var(--fs-8);
+  padding: 20px 7px;
+  transition: color var(--transition-1);
+}
+
+.navbar-link:hover,
+.navbar-link:focus { color: var(--light-gray-70); }
+
+.navbar-link.active { color: var(--orange-yellow-crayola); }
+
+
+
+
+
+/*-----------------------------------*\
+  #ABOUT
+\*-----------------------------------*/
+
+.about .article-title { margin-bottom: 15px; }
+
+.about-text {
+  color: var(--light-gray);
+  font-size: var(--fs-6);
+  font-weight: var(--fw-300);
+  line-height: 1.6;
+}
+
+.about-text p { margin-bottom: 15px; }
+
+
+
+/**
+ * #service 
+ */
+
+.service { margin-bottom: 35px; }
+
+.service-title { margin-bottom: 20px; }
+
+.service-list {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
+}
+
+.service-item {
+  position: relative;
+  background: var(--border-gradient-onyx);
+  padding: 20px;
+  border-radius: 14px;
+  box-shadow: var(--shadow-2);
+  z-index: 1;
+}
+
+.service-item::before {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  background: var(--bg-gradient-jet);
+  border-radius: inherit;
+  z-index: -1;
+}
+
+.service-icon-box { margin-bottom: 10px; }
+
+.service-icon-box img { margin: auto; }
+
+.service-content-box { text-align: center; }
+
+.service-item-title { margin-bottom: 7px; }
+
+.service-item-text {
+  color: var(--light-gray);
+  font-size: var(--fs-6);
+  font-weight: var(--fw-3);
+  line-height: 1.6;
+}
+
+/**
+ * #clients 
+ */
+
+.clients { margin-bottom: 15px; }
+
+.clients-list {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 15px;
+  margin: 0 -15px;
+  padding: 25px;
+  padding-bottom: 25px;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  overscroll-behavior-inline: contain;
+  scroll-snap-type: inline mandatory;
+  scroll-padding-inline: 25px;
+}
+
+.clients-item {
+  min-width: 50%;
+  scroll-snap-align: start;
+}
+
+.clients-item img {
+  width: 100%;
+  filter: grayscale(1);
+  transition: var(--transition-1);
+}
+
+.clients-item img:hover { filter: grayscale(0); }
+
+
+
+
+
+/*-----------------------------------*\
+  #RESUME
+\*-----------------------------------*/
+
+.article-title { margin-bottom: 30px; }
+
+
+/**
+ * education and experience 
+ */
+
+.timeline { margin-bottom: 30px; }
+
+.timeline .title-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 25px;
+}
+
+.timeline-list {
+  font-size: var(--fs-6);
+  margin-left: 45px;
+}
+
+.timeline-item { position: relative; }
+
+.timeline-item:not(:last-child) { margin-bottom: 20px; }
+
+.timeline-item-title {
+  font-size: var(--fs-6);
+  line-height: 1.3;
+  margin-bottom: 7px;
+}
+
+.timeline-list span {
+  color: var(--vegas-gold);
+  font-weight: var(--fw-400);
+  line-height: 1.6;
+}
+
+.timeline-item:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  top: -25px;
+  left: -30px;
+  width: 1px;
+  height: calc(100% + 50px);
+  background: var(--jet);
+}
+
+.timeline-item::after {
+  content: "";
+  position: absolute;
+  top: 5px;
+  left: -33px;
+  height: 6px;
+  width: 6px;
+  background: var(--text-gradient-yellow);
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px var(--jet);
+}
+
+.timeline-text {
+  color: var(--light-gray);
+  font-weight: var(--fw-300);
+  line-height: 1.6;
+}
+
+.timeline-text-spacer{
+  display: block;
+  height: 15px;
+}
+
+/*-----------------------------------*\
+  #PROJECTS
+\*-----------------------------------*/
+
+.filter-list { display: none; }
+
+.filter-select-box {
+  position: relative;
+  margin-bottom: 25px;
+}
+
+.filter-select {
+  background: var(--eerie-black-2);
+  color: var(--light-gray);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid var(--jet);
+  border-radius: 14px;
+  font-size: var(--fs-6);
+  font-weight: var(--fw-300);
+}
+
+.filter-select.active .select-icon { transform: rotate(0.5turn); }
+
+.select-list {
+  background: var(--eerie-black-2);
+  position: absolute;
+  top: calc(100% + 6px);
+  width: 100%;
+  padding: 6px;
+  border: 1px solid var(--jet);
+  border-radius: 14px;
+  z-index: 2;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: 0.15s ease-in-out;
+}
+
+.filter-select.active + .select-list {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: all;
+}
+
+.select-item button {
+  background: var(--eerie-black-2);
+  color: var(--light-gray);
+  font-size: var(--fs-6);
+  font-weight: var(--fw-300);
+  text-transform: capitalize;
+  width: 100%;
+  padding: 8px 10px;
+  border-radius: 8px;
+}
+
+.select-item button:hover { --eerie-black-2: hsl(240, 2%, 20%); }
+
+.project-list {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 30px;
+  margin-bottom: 10px;
+}
+
+.project-item { display: none; }
+
+.project-item.active {
+  display: block;
+  animation: scaleUp 0.25s ease forwards;
+}
+
+@keyframes scaleUp {
+  0% { transform: scale(0.5); }
+  100% { transform: scale(1); }
+}
+
+.project-item > a { width: 100%; }
+
+.project-img {
+  position: relative;
+  width: 100%;
+  height: 200px;
+  border-radius: 16px;
+  overflow: hidden;
+  margin-bottom: 15px;
+}
+
+.project-img::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  z-index: 1;
+  transition: var(--transition-1);
+}
+
+.project-item > a:hover .project-img::before { background: hsla(0, 0%, 0%, 0.5); }
+
+.project-item-icon-box {
+  --scale: 0.8;
+
+  background: var(--jet);
+  color: var(--orange-yellow-crayola);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(var(--scale));
+  font-size: 20px;
+  padding: 18px;
+  border-radius: 12px;
+  opacity: 0;
+  z-index: 1;
+  transition: var(--transition-1);
+}
+
+.project-item > a:hover .project-item-icon-box {
+  --scale: 1;
+  opacity: 1;
+}
+
+.project-item-icon-box ion-icon { --ionicon-stroke-width: 50px; }
+
+.project-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: var(--transition-1);
+}
+
+.project-item > a:hover img { transform: scale(1.1); }
+
+.project-title,
+.project-category { margin-left: 10px; }
+
+.project-title {
+  color: var(--white-2);
+  font-size: var(--fs-5);
+  font-weight: var(--fw-400);
+  text-transform: capitalize;
+  line-height: 1.3;
+}
+
+.project-category {
+  color: var(--light-gray-70);
+  font-size: var(--fs-6);
+  font-weight: var(--fw-300);
+}
+
+
+/*-----------------------------------*\
+  #CONTACT
+\*-----------------------------------*/
+
+.mapbox {
+  position: relative;
+  height: 250px;
+  width: 100%;
+  border-radius: 16px;
+  margin-bottom: 30px;
+  border: 1px solid var(--jet);
+  overflow: hidden;
+}
+
+.mapbox figure { height: 100%; }
+
+.mapbox iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  filter: grayscale(1) invert(1);
+}
+
+.contact-form { margin-bottom: 10px; }
+
+.form-title { margin-bottom: 20px; }
+
+.input-wrapper {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 25px;
+  margin-bottom: 25px;
+}
+
+.form-input {
+  color: var(--white-2);
+  font-size: var(--fs-6);
+  font-weight: var(--fw-400);
+  padding: 13px 20px;
+  border: 1px solid var(--jet);
+  border-radius: 14px;
+  outline: none;
+}
+
+.form-input::placeholder { font-weight: var(--fw-500); }
+
+.form-input:focus { border-color: var(--orange-yellow-crayola); }
+
+textarea.form-input {
+  min-height: 100px;
+  height: 120px;
+  max-height: 200px;
+  resize: vertical;
+  margin-bottom: 25px;
+}
+
+textarea.form-input::-webkit-resizer { display: none; }
+
+.form-input:focus:invalid { border-color: var(--bittersweet-shimmer); }
+
+.form-btn {
+  position: relative;
+  width: 100%;
+  background: var(--border-gradient-onyx);
+  color: var(--orange-yellow-crayola);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  padding: 13px 20px;
+  border-radius: 14px;
+  font-size: var(--fs-6);
+  text-transform: capitalize;
+  box-shadow: var(--shadow-3);
+  z-index: 1;
+  transition: var(--transition-1);
+}
+
+.form-btn::before {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  background: var(--bg-gradient-jet);
+  border-radius: inherit;
+  z-index: -1;
+  transition: var(--transition-1);
+}
+
+.form-btn ion-icon { font-size: 16px; }
+
+.form-btn:hover { background: var(--bg-gradient-yellow-1); }
+
+.form-btn:hover::before { background: var(--bg-gradient-yellow-2); }
+
+.form-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.form-btn:disabled:hover { background: var(--border-gradient-onyx); }
+
+.form-btn:disabled:hover::before { background: var(--bg-gradient-jet); }
+
+
+
+
+
+/*-----------------------------------*\
+  #RESPONSIVE
+\*-----------------------------------*/
+
+/**
+ * responsive larger than 450px screen
+ */
+
+@media (min-width: 450px) {
+
+  /**
+   * client
+   */
+
+  .clients-item { min-width: calc(33.33% - 10px); }
+
+
+
+  /**
+   * #PROJECTS 
+   */
+
+  .project-img { height: auto; }
+
+}
+
+
+
+
+
+/**
+ * responsive larger than 580px screen
+ */
+
+@media (min-width: 580px) {
+
+  /**
+   * CUSTOM PROPERTY
+   */
+
+  :root {
+
+    /**
+     * typography
+     */
+
+    --fs-1: 32px;
+    --fs-2: 24px;
+    --fs-3: 26px;
+    --fs-4: 18px;
+    --fs-6: 15px;
+    --fs-7: 15px;
+    --fs-8: 12px;
+
+  }
+
+
+
+  /**
+   * #REUSED STYLE
+   */
+
+  .sidebar, article {
+    width: 520px;
+    margin-inline: auto;
+    padding: 30px;
+  }
+
+  .article-title {
+    font-weight: var(--fw-600);
+    padding-bottom: 15px;
+  }
+
+  .article-title::after {
+    width: 40px;
+    height: 5px;
+  }
+
+  .icon-box {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    font-size: 18px;
+  }
+
+
+
+  /**
+   * #MAIN
+   */
+
+  main {
+    margin-top: 60px;
+    margin-bottom: 100px;
+  }
+
+
+
+  /**
+   * #SIDEBAR
+   */
+
+  .sidebar {
+    max-height: 180px;
+    margin-bottom: 30px;
+  }
+
+  .sidebar.active { max-height: 584px; }
+
+  .sidebar-info { gap: 25px; }
+
+  .avatar-box { border-radius: 30px; }
+
+  .avatar-box img { width: 120px; }
+
+  .info-content .name { margin-bottom: 15px; }
+
+  .info-content .title { padding: 5px 18px; }
+
+  .info_more-btn {
+    top: -30px;
+    right: -30px;
+    padding: 10px 15px;
+  }
+
+  .info_more-btn span {
+    display: block;
+    font-size: var(--fs-8);
+  }
+
+  .info_more-btn ion-icon { display: none; }
+
+  .separator { margin: 32px 0; }
+
+  .contacts-list { gap: 20px; }
+
+  .contact-info {
+    max-width: calc(100% - 64px);
+    width: calc(100% - 64px);
+  }
+
+
+
+  /**
+   * #NAVBAR
+   */
+
+  .navbar { border-radius: 20px 20px 0 0; }
+
+  .navbar-list { gap: 20px; }
+
+  .navbar-link { --fs-8: 14px; }
+
+
+
+  /**
+   * #ABOUT
+   */
+
+  .about .article-title { margin-bottom: 20px; }
+
+  .about-text { margin-bottom: 40px; }
+
+  /* service */
+
+  .service-item {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 18px;
+    padding: 30px;
+  }
+
+  .service-icon-box {
+    margin-bottom: 0;
+    margin-top: 5px;
+  }
+
+  .service-content-box { text-align: left; }
+
+  /**
+   * #RESUME
+   */
+
+  .timeline-list { margin-left: 65px; }
+
+  .timeline-item:not(:last-child)::before { left: -40px; }
+
+  .timeline-item::after {
+    height: 8px;
+    width: 8px;
+    left: -43px;
+  }
+
+  .skills-item:not(:last-child) { margin-bottom: 25px; }
+
+
+
+  /**
+   * #PROJECTS
+   */
+
+  .project-img{ border-radius: 16px; }
+
+
+
+  /**
+   * #CONTACT
+   */
+
+  .mapbox {
+    height: 380px;
+    border-radius: 18px;
+  }
+
+  .input-wrapper {
+    gap: 30px;
+    margin-bottom: 30px;
+  }
+
+  .form-input { padding: 15px 20px; }
+
+  textarea.form-input { margin-bottom: 30px; }
+
+  .form-btn {
+    --fs-6: 16px;
+    padding: 16px 20px;
+  }
+
+  .form-btn ion-icon { font-size: 18px; }
+
+}
+
+
+
+
+
+/**
+ * responsive larger than 768px screen
+ */
+
+@media (min-width: 768px) {
+
+  /**
+   * REUSED STYLE
+   */
+
+  .sidebar, article { width: 700px; }
+
+  .has-scrollbar::-webkit-scrollbar-button { width: 100px; }
+
+
+
+  /**
+   * SIDEBAR
+   */
+
+  .contacts-list {
+    grid-template-columns: 1fr 1fr;
+    gap: 30px 15px;
+  }
+
+
+
+  /**
+   * NAVBAR
+   */
+
+  .navbar-link { --fs-8: 15px; }
+
+
+
+  /**
+   * ABOUT
+   */
+
+  /* testimonials modal */
+
+  .testimonials-modal {
+    gap: 35px;
+    max-width: 680px;
+  }
+
+  .modal-avatar-box img { width: 80px; }
+
+
+
+  /**
+   * PROJECTS
+   */
+
+  .article-title { padding-bottom: 20px; }
+
+  .filter-select-box { display: none; }
+
+  .filter-list {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 25px;
+    padding-left: 5px;
+    margin-bottom: 30px;
+  }
+
+  .filter-item button {
+    color: var(--light-gray);
+    font-size: var(--fs-5);
+    transition: var(--transition-1);
+  }
+
+  .filter-item button:hover { color: var(--light-gray-70); }
+
+  .filter-item button.active { color: var(--orange-yellow-crayola); }
+
+  /* projects  */
+
+  .project-list { grid-template-columns: 1fr 1fr; }
+
+
+
+  /**
+   * CONTACT
+   */
+
+  .input-wrapper { grid-template-columns: 1fr 1fr; }
+
+  .form-btn {
+    width: max-content;
+    margin-left: auto;
+  }
+  
+}
+
+
+
+
+
+/**
+ * responsive larger than 1024px screen
+ */
+
+@media (min-width: 1024px) {
+
+  /**
+   * CUSTOM PROPERTY
+   */
+
+  :root {
+
+    /**
+    * shadow
+    */
+
+    --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125);
+    --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125);
+    --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125);
+
+  }
+
+
+
+  /**
+   * REUSED STYLE
+   */
+
+  .sidebar, article {
+    width: 950px;
+    box-shadow: var(--shadow-5);
+  }
+
+
+
+  /**
+   * MAIN 
+   */
+
+  main { margin-bottom: 60px; }
+
+  .main-content {
+    position: relative;
+    width: max-content;
+    margin: auto;
+  }
+
+
+
+  /**
+   * NAVBAR
+   */
+
+  .navbar {
+    position: absolute;
+    bottom: auto;
+    top: 0;
+    left: auto;
+    right: 0;
+    width: max-content;
+    border-radius: 0 20px;
+    padding: 0 20px;
+    box-shadow: none;
+  }
+
+  .navbar-list {
+    gap: 30px;
+    padding: 0 20px;
+  }
+
+  .navbar-link { font-weight: var(--fw-500); }
+
+
+
+  /**
+   * ABOUT
+   */
+
+  /* service */
+
+  .service-list {
+    grid-template-columns: 1fr 1fr;
+    gap: 20px 25px;
+  }
+
+  /* testimonials */
+
+  .testimonials-item { min-width: calc(50% - 15px); }
+
+  /* clients */
+
+  .clients-item { min-width: calc(25% - 38px); }
+
+
+
+  /**
+   * PROJECTS
+   */
+
+  .project-list { grid-template-columns: repeat(3, 1fr); }
+
+}
+
+
+
+
+
+/**
+ * responsive larger than 1250px screen
+ */
+
+@media (min-width: 1250px) {
+
+  /**
+   * RESET
+   */
+
+  body::-webkit-scrollbar { width: 20px; }
+
+  body::-webkit-scrollbar-track { background: var(--smoky-black); }
+
+  body::-webkit-scrollbar-thumb {
+    border: 5px solid var(--smoky-black);
+    background: hsla(0, 0%, 100%, 0.1);
+    border-radius: 20px;
+    box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, 0.11),
+                inset -1px -1px 0 hsla(0, 0%, 100%, 0.11);
+  }
+
+  body::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, 0.15); }
+
+  body::-webkit-scrollbar-button { height: 60px; }
+
+
+
+  /**
+   * REUSED STYLE
+   */
+
+  .sidebar, article { width: auto; }
+
+  article { min-height: 100%; }
+
+
+
+  /**
+   * MAIN
+   */
+
+  main {
+    max-width: 1200px;
+    margin-inline: auto;
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
+    gap: 25px;
+  }
+
+  .main-content {
+    min-width: 75%;
+    width: 75%;
+    margin: 0;
+  }
+
+
+
+  /**
+   * SIDEBAR
+   */
+
+  .sidebar {
+    position: sticky;
+    top: 60px;
+    max-height: max-content;
+    height: 100%;
+    margin-bottom: 0;
+    padding-top: 60px;
+    z-index: 1;
+  }
+
+  .sidebar-info { flex-direction: column; }
+
+  .avatar-box img { width: 150px; }
+
+  .info-content .name {
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  .info-content .title { margin: auto; }
+
+  .info_more-btn { display: none; }
+
+  .sidebar-info_more {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .contacts-list { grid-template-columns: 1fr; }
+
+  .contact-info :is(.contact-link) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .contact-info :is(.contact-link, time, address) {
+    --fs-7: 14px;
+    font-weight: var(--fw-300);
+  }
+
+  .separator:last-of-type {
+    margin: 15px 0;
+    opacity: 0;
+  }
+
+  .social-list { justify-content: center; }
+
+
+
+  /**
+	 * RESUME
+	 */
+
+  .timeline-text { max-width: 700px; }
+
+}
\ No newline at end of file