diff --git a/icons/latenightdef.jpg b/icons/latenightdef.jpg new file mode 100644 index 0000000..ad2df72 Binary files /dev/null and b/icons/latenightdef.jpg differ diff --git a/index.html b/index.html index 474c8a3..15f2a72 100644 --- a/index.html +++ b/index.html @@ -244,7 +244,7 @@
- latenightdef + latenightdef
@@ -254,7 +254,7 @@

Linux, BOINC and OSM nerd จากประเทศไทย

- Profile... + Profile...
diff --git a/latenightdef/profile.html b/latenightdef/profile.html new file mode 100644 index 0000000..6c07647 --- /dev/null +++ b/latenightdef/profile.html @@ -0,0 +1,248 @@ + + + + + + + + Pongpeera Wongprasitthiporn's profile + + + + +
+ + + +
+

Profile

+
+
+
+ latenightdef +
+
+

Pongpeera Wongprasitthiporn

+
+ +
+ + Linux + + + QEMU/KVM + + + Podman + + + NetworkManager + + + Flatpak + +
+ +
+ + Penpot + + + Kdenlive + + + LibreOffice + + + Krita + + + Inkscape + +
+ +
+ + + GitLab CI/CD + + + OpenStreetMap + + + BOINC + + +
+ +
+ + HTML + + + CSS + +
+ + + +
+ +
+ +

Basic information

+
+ +
+

...

+
+
+

...

+
+ + +
+

My work as a student at KMITL (2021-now)

+ +
+ +
+

...

+
+
+

...

+
+ + +
+ +

Other work

+ +
+ +
+

...

+
+
+

...

+
+ + +
+ + + +

Talks

+ +
+ +
+

...

+
+
+

...

+
+ + +
+ +

Contact

+ +
+ + +
+

Telegram

+
+ + + +
+ + +
+

Email

+
+ + + +
+ + +
+

Mastodon

+
+ + + +
+ + +
+

Codeberg

+
+ + + +
+ + +
+

GitLab

+
+ + + +
+ + +
+

GitHub

+
+ + + +
+ + +
+

Pronouns.page

+
+ + + +
+ + +
+

Facebook

+
+ + + + +
+ + +
+

Soundcloud

+
+ + + +
+ + +
+

Steam

+
+ + + + +
+
+
+ + + diff --git a/latenightdef/style.css b/latenightdef/style.css new file mode 100644 index 0000000..3e9c05c --- /dev/null +++ b/latenightdef/style.css @@ -0,0 +1,310 @@ +@import url("cantarell/cantarell.css"); + +html * +{ + font-family: Cantarell, sans-serif; +} + +.header { + display: flex; + justify-content: center; + align-items: center; +} + +.name { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.pfp { + display: flex; + justify-content: center; + align-items: center; + margin-top: 3cm; +} + +.middle { + grid-area: middle; + width: 15cm; +} + +.inner-grid { + display: grid; + align-items: center; + grid-template-columns: 3cm 1fr 3cm; + grid-template-areas: + 'inner-left inner-middle inner-right' +} +@media (prefers-color-scheme: light) { + + body { + background-color: #fafafa; + } + + .logo { + color: #000; + } + + .grid-container { + display: grid; + justify-content: center; + color: #000000; + grid-template-areas: + 'left middle right' + } + + .button { + background-color: #EBEBEB; + color: black; + border: none; + border-radius: 8px; + justify-content: center; + align-items: center; + text-decoration: none; + display: flex; + font-size: 16px; + font-weight: bold; + margin: 4px 2px; + cursor: pointer; + width: 100px; + height: 35px; + transition-duration: 0.2s; + } + + .button:hover { + background-color: #E0E0E0; + } + + .headerbutton { + background-color: #EBEBEB; + color: black; + border: none; + border-radius: 8px; + justify-content: center; + align-items: center; + text-decoration: none; + display: flex; + font-size: 16px; + font-weight: bold; + margin: 4px 2px; + padding-left: 0.3cm; + padding-right: 0.3cm; + cursor: pointer; + height: 35px; + transition-duration: 0.2s; + } + + .headerbutton:hover { + background-color: #E0E0E0; + } + + .list { + border-radius: 12px 12px 12px 12px; + background-color: #ffffff; + box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13); + margin-bottom: 50px; + } + + .separator { + width: 15cm; + height: 1px; + background-color: rgba(237, 237, 237, 1); + } + + .listaction { + display: grid; + grid-template-columns: 1fr 1cm; + text-decoration: none; + color: black; + align-items: center; + } + + .topbar { + position: absolute; + width: 100%; + height: 1.2cm; + top: 0px; + left: 0px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(224, 224, 224, 1); + color: #000000; + } + + .listinfo { + display: grid; + grid-template-columns: 1fr 1fr; + text-decoration: none; + color: black; + align-items: center; + } + + .backbutton { + position: absolute; + color: black; + border-radius:10px; + justify-content: center; + align-items: center; + text-decoration: none; + display: grid; + font-size: 14px; + cursor: pointer; + margin: 0.1cm; + transition-duration: 0.2s; + width: 1cm; + height: 1cm; + } + + .backbutton:hover { + background-color: #DEDEDE; + } + + .banner { + background-color: #BFD7F3; + color: black; + width: 90%; + justify-content: center; + align-items: center; + display: flex; + font-weight: bold; + padding: 0.2cm; + border-radius:10px; + } +} + +@media (prefers-color-scheme: dark) { + + .logo { + color: #fff; + } + + body { + background-color: #222222; + } + + .grid-container { + display: grid; + justify-content: center; + color: #ffffff; + grid-template-areas: + 'left middle right' + } + + .button { + background-color: #4a4a4a; + color: #ffffff; + border: none; + border-radius: 8px; + justify-content: center; + align-items: center; + text-decoration: none; + display: flex; + font-size: 16px; + font-weight: bold; + margin: 4px 2px; + cursor: pointer; + width: 100px; + height: 35px; + transition-duration: 0.2s; + } + + .button:hover { + background-color: #595959; + } + + .headerbutton { + background-color: #4a4a4a; + color: #ffffff; + border: none; + border-radius: 8px; + justify-content: center; + align-items: center; + text-decoration: none; + display: flex; + font-size: 16px; + font-weight: bold; + margin: 4px 2px; + padding-left: 0.3cm; + padding-right: 0.3cm; + cursor: pointer; + height: 35px; + transition-duration: 0.2s; + } + + .headerbutton:hover { + background-color: #595959; + } + + .list { + border-radius: 12px 12px 12px 12px; + background-color: #363636; + box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13); + margin-bottom: 50px; + } + + .separator { + width: 15cm; + height: 1px; + background-color: #232323; + } + + .listaction { + display: grid; + grid-template-columns: 1fr 1cm; + text-decoration: none; + color: #ffffff; + align-items: center; + } + + .topbar { + position: absolute; + width: 100%; + height: 1.2cm; + top: 0px; + left: 0px; + background-color: #303030; + border: 1px solid #1f1f1f; + color: #ffffff; + } + + .listinfo { + display: grid; + grid-template-columns: 1fr 1fr; + text-decoration: none; + color: #ffffff; + align-items: center; + } + + .backbutton { + position: absolute; + color: #ffffff; + border-radius:10px; + justify-content: center; + align-items: center; + text-decoration: none; + display: grid; + font-size: 14px; + cursor: pointer; + margin: 0.1cm; + transition-duration: 0.2s; + width: 1cm; + height: 1cm; + } + + .backbutton:hover { + background-color: #3e3e3e; + } + + .banner { + background-color: #29415E; + color: white; + width: 90%; + justify-content: center; + align-items: center; + display: flex; + font-weight: bold; + padding: 0.2cm; + border-radius:10px; + } +}