commit f7b7594521263eb0b7e27a803a5f482b62cf759f Author: Late Night Defender Date: Fri Nov 24 22:05:29 2023 +0700 Migrate from ttt-org to a dedicated repo diff --git a/README.md b/README.md new file mode 100644 index 0000000..aa4766b --- /dev/null +++ b/README.md @@ -0,0 +1,5 @@ +# My portfolio website for using with Codeberg Pages + +This is my portfolio website, listing my work and ways to contact. Written in plain HTML and CSS. + +[![Please don't upload to GitHub](https://nogithub.codeberg.page/badge.svg)](https://nogithub.codeberg.page) \ No newline at end of file diff --git a/cantarell/cantarell-bold.woff2 b/cantarell/cantarell-bold.woff2 new file mode 100644 index 0000000..6405268 Binary files /dev/null and b/cantarell/cantarell-bold.woff2 differ diff --git a/cantarell/cantarell-regular.woff2 b/cantarell/cantarell-regular.woff2 new file mode 100644 index 0000000..88cf14b Binary files /dev/null and b/cantarell/cantarell-regular.woff2 differ diff --git a/cantarell/cantarell.css b/cantarell/cantarell.css new file mode 100644 index 0000000..ae1d5bf --- /dev/null +++ b/cantarell/cantarell.css @@ -0,0 +1,15 @@ +/* cantarell-regular */ +@font-face { + font-family: Cantarell; + font-style: normal; + font-weight: 400; + src: local("Cantarell Regular"), local("Cantarell-Regular"), url(cantarell-regular.woff2) format("woff2"); +} +/* cantarell-bold */ +@font-face { + font-family: Cantarell; + font-style: normal; + font-weight: 700; + src: local("Cantarell Bold"), local("Cantarell-Bold"), url(cantarell-bold.woff2) format("woff2"); +} + diff --git a/icons/Asexual.png b/icons/Asexual.png new file mode 100644 index 0000000..593e8a8 Binary files /dev/null and b/icons/Asexual.png differ diff --git a/icons/Lesbiromantic.png b/icons/Lesbiromantic.png new file mode 100644 index 0000000..1d28fa4 Binary files /dev/null and b/icons/Lesbiromantic.png differ diff --git a/icons/Nonbinary.png b/icons/Nonbinary.png new file mode 100644 index 0000000..2ac4895 Binary files /dev/null and b/icons/Nonbinary.png differ diff --git a/icons/Transgender.png b/icons/Transgender.png new file mode 100644 index 0000000..811d4c4 Binary files /dev/null and b/icons/Transgender.png differ diff --git a/icons/pfp.jpg b/icons/pfp.jpg new file mode 100644 index 0000000..ace916a Binary files /dev/null and b/icons/pfp.jpg differ diff --git a/icons/ttt-org.png b/icons/ttt-org.png new file mode 100644 index 0000000..e5c3686 Binary files /dev/null and b/icons/ttt-org.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..d4c8ca4 --- /dev/null +++ b/index.html @@ -0,0 +1,282 @@ + + + + + + + + Pongpeera Wongprasitthiporn's profile + + + + +
+ + + +
+

Profile

+
+
+
+ latenightdef +
+
+

Pongpeera Wongprasitthiporn

+
+ +
+ + Linux + + + Libvirt & QEMU/KVM + + + Podman & Quadlet + + + Docker + + + Flatpak + + +
+ +
+ + + OpenStreetMap + + + BOINC + + + Penpot + + + GitLab CI & Pages + + + Cloudflare + +
+ +
+ + Content Creation + + + Documentation + + + Localization + +
+ +
+ + Hosting & Infrastructure + + +
+ +
+ + +
+ + + diff --git a/more-info.html b/more-info.html new file mode 100644 index 0000000..28bb0e5 --- /dev/null +++ b/more-info.html @@ -0,0 +1,66 @@ + + + + + + + + More information + + + + +
+ + + +
+

More information

+
+
+ + +
+ + +
+ + + diff --git a/more-links.html b/more-links.html new file mode 100644 index 0000000..1706604 --- /dev/null +++ b/more-links.html @@ -0,0 +1,114 @@ + + + + + + + + More links + + + + +
+ + + +
+

More links

+
+
+ + +
+ + +
+ + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..d2b91fd --- /dev/null +++ b/style.css @@ -0,0 +1,332 @@ +@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' +} + +.description { + font-size: 10pt; + margin-top: -0.3cm; + opacity: 0.5; +} + +@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; + height: 1.5cm; + } + + .listinfo { + display: grid; + grid-template-columns: 1fr 2fr; + text-decoration: none; + color: black; + align-items: center; + height: 1.5cm; + } + + .topbar { + position: fixed; + 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; + z-index: 10; + } + + + .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 { + position: fixed; + background-color: #BFD7F3; + color: black; + width: 100%; + height: 1.2cm; + top: 0px; + left: 0px; + justify-content: center; + align-items: center; + display: flex; + font-weight: bold; + text-align: center; + } +} + +@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; + height: 1.5cm; + } + + .listinfo { + display: grid; + grid-template-columns: 1fr 2fr; + text-decoration: none; + color: #ffffff; + align-items: center; + height: 1.5cm; + } + + .topbar { + position: fixed; + width: 100%; + height: 1.2cm; + top: 0px; + left: 0px; + background-color: #303030; + border: 1px solid #1f1f1f; + color: #ffffff; + z-index: 10; + } + + + + .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 { + position: fixed; + background-color: #29415E; + color: white; + width: 100%; + height: 1.2cm; + top: 0px; + left: 0px; + justify-content: center; + align-items: center; + display: flex; + font-weight: bold; + text-align: center; + } +} diff --git a/work-kmitl.html b/work-kmitl.html new file mode 100644 index 0000000..238240b --- /dev/null +++ b/work-kmitl.html @@ -0,0 +1,97 @@ + + + + + + + + Student at KMITL (2021-now) + + + + +
+ + + +
+

Student at KMITL (2021-now)

+
+
+ + +
+ + +
+ + + diff --git a/work-others.html b/work-others.html new file mode 100644 index 0000000..da026da --- /dev/null +++ b/work-others.html @@ -0,0 +1,113 @@ + + + + + + + + Other works + + + + +
+ + + +
+

Other works

+
+
+ + +
+ + +
+ + +