Optimize for smaller screens

This commit is contained in:
Late Night Defender 2024-06-19 17:23:04 +07:00
parent 3be4764fb0
commit 658bf29a41
3 changed files with 85 additions and 66 deletions

View file

@ -17,7 +17,7 @@
</div> </div>
<div class="name"> <div class="name">
<h1 class="logo">Pongpeera Wongprasitthiporn</h1> <h1 class="logo">Pongpeera Wongprasitthiporn</h1>
<a class="gtk-button-pill" href="/index.html">See my real face</a> <a class="gtk-button-pill" href="/">See my real face</a>
</div> </div>
@ -26,7 +26,7 @@
Linux Linux
</a> </a>
<a class="headerbutton"> <a class="headerbutton">
Libvirt & QEMU/KVM Libvirtd
</a> </a>
<a target="_blank" rel="noopener noreferrer" href="https://podman.io/" class="headerbutton"> <a target="_blank" rel="noopener noreferrer" href="https://podman.io/" class="headerbutton">
Podman Podman
@ -37,54 +37,27 @@
<a target="_blank" rel="noopener noreferrer" href="https://www.docker.com/" class="headerbutton"> <a target="_blank" rel="noopener noreferrer" href="https://www.docker.com/" class="headerbutton">
Docker Docker
</a> </a>
<a target="_blank" rel="noopener noreferrer" href="https://flatpak.org/" class="headerbutton">
Flatpak
</a>
</div> </div>
<div class="header"> <div class="header">
<a target="_blank" rel="noopener noreferrer" href="https://www.openstreetmap.org/" class="headerbutton"> <a target="_blank" rel="noopener noreferrer" href="https://www.openstreetmap.org/" class="headerbutton">
OpenStreetMap OpenStreetMap
</a> </a>
<a target="_blank" rel="noopener noreferrer" href="https://boinc.berkeley.edu/" class="headerbutton"> <a target="_blank" rel="noopener noreferrer" href="https://boinc.berkeley.edu/" class="headerbutton">
BOINC BOINC
</a> </a>
<a target="_blank" rel="noopener noreferrer" href="https://penpot.app/" class="headerbutton">
Penpot
</a>
<a target="_blank" rel="noopener noreferrer" href="https://gitlab.com/" class="headerbutton"> <a target="_blank" rel="noopener noreferrer" href="https://gitlab.com/" class="headerbutton">
GitLab CI, Pages GitLab
</a> </a>
<a target="_blank" rel="noopener noreferrer" href="https://forgejo.org/" class="headerbutton"> <a target="_blank" rel="noopener noreferrer" href="https://forgejo.org/" class="headerbutton">
Forgejo Forgejo
</a> </a>
</div> </div>
<div class="header">
<a class="headerbutton">
On-premise hosting
</a>
<a target="_blank" rel="noopener noreferrer" href="https://aws.amazon.com/" class="headerbutton">
Amazon EC2, SES
</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.cloudflare.com/" class="headerbutton">
Cloudflare
</a>
<a target="_blank" rel="noopener noreferrer" href="https://systemd.io/" class="headerbutton">
systemd
</a>
</div>
<div class="header"> <div class="header">
<a target="_blank" rel="noopener noreferrer" href="https://woodpecker-ci.org/" class="headerbutton"> <a target="_blank" rel="noopener noreferrer" href="https://woodpecker-ci.org/" class="headerbutton">
Woodpecker/Drone CI Woodpecker/Drone CI
</a> </a>
<a target="_blank" rel="noopener noreferrer" href="https://gohugo.io/" class="headerbutton">
Hugo
</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.python.org/" class="headerbutton"> <a target="_blank" rel="noopener noreferrer" href="https://www.python.org/" class="headerbutton">
Python Python
</a> </a>
@ -98,8 +71,34 @@
<div class="header"> <div class="header">
<a class="headerbutton"> <a class="headerbutton">
Content Creation Servers
</a> </a>
<a target="_blank" rel="noopener noreferrer" href="https://aws.amazon.com/" class="headerbutton">
Amazon EC2, SES
</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.cloudflare.com/" class="headerbutton">
Cloudflare
</a>
</div>
<div class="header">
<a target="_blank" rel="noopener noreferrer" href="https://flatpak.org/" class="headerbutton">
Flatpak
</a>
<a target="_blank" rel="noopener noreferrer" href="https://penpot.app/" class="headerbutton">
Penpot
</a>
<a target="_blank" rel="noopener noreferrer" href="https://gohugo.io/" class="headerbutton">
Hugo
</a>
<a target="_blank" rel="noopener noreferrer" href="https://systemd.io/" class="headerbutton">
systemd
</a>
</div>
<div class="header">
<a class="headerbutton"> <a class="headerbutton">
Documentation Documentation
</a> </a>
@ -108,6 +107,12 @@
</a> </a>
</div> </div>
<div class="header">
<a class="headerbutton">
Content Creation
</a>
</div>
<div class="grid-container"> <div class="grid-container">
<div class="middle"> <div class="middle">
@ -225,6 +230,13 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" ><path fill="currentColor" d="m 4 0.996094 v 1 c 0 0.296875 0.125 0.558594 0.328125 0.742187 l 5.257813 5.257813 l -5.257813 5.261718 l -0.035156 0.03125 c -0.179688 0.183594 -0.292969 0.433594 -0.292969 0.707032 v 1 h 1 c 0.277344 0 0.527344 -0.109375 0.707031 -0.292969 l 0.035157 -0.03125 l 6.671874 -6.675781 l -6.671874 -6.671875 c -0.183594 -0.199219 -0.449219 -0.328125 -0.742188 -0.328125 z m 0 0"/></svg> <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" ><path fill="currentColor" d="m 4 0.996094 v 1 c 0 0.296875 0.125 0.558594 0.328125 0.742187 l 5.257813 5.257813 l -5.257813 5.261718 l -0.035156 0.03125 c -0.179688 0.183594 -0.292969 0.433594 -0.292969 0.707032 v 1 h 1 c 0.277344 0 0.527344 -0.109375 0.707031 -0.292969 l 0.035157 -0.03125 l 6.671874 -6.675781 l -6.671874 -6.671875 c -0.183594 -0.199219 -0.449219 -0.328125 -0.742188 -0.328125 z m 0 0"/></svg>
</a> </a>
<div class="separator"></div> <div class="separator"></div>
<a class="listaction" href="work-i-bitz.html">
<div style="display: flex; margin-left: 0.5cm; align-items: center;">
<p>Intern at i-bitz company limited</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px" ><path fill="currentColor" d="m 4 0.996094 v 1 c 0 0.296875 0.125 0.558594 0.328125 0.742187 l 5.257813 5.257813 l -5.257813 5.261718 l -0.035156 0.03125 c -0.179688 0.183594 -0.292969 0.433594 -0.292969 0.707032 v 1 h 1 c 0.277344 0 0.527344 -0.109375 0.707031 -0.292969 l 0.035157 -0.03125 l 6.671874 -6.675781 l -6.671874 -6.671875 c -0.183594 -0.199219 -0.449219 -0.328125 -0.742188 -0.328125 z m 0 0"/></svg>
</a>
<div class="separator"></div>
<a class="listaction" href="work-others.html"> <a class="listaction" href="work-others.html">
<div style="display: flex; margin-left: 0.5cm; align-items: center;"> <div style="display: flex; margin-left: 0.5cm; align-items: center;">
<p>Other works</p> <p>Other works</p>

View file

@ -26,7 +26,7 @@
Linux Linux
</a> </a>
<a class="headerbutton"> <a class="headerbutton">
Libvirt & QEMU/KVM Libvirtd
</a> </a>
<a target="_blank" rel="noopener noreferrer" href="https://podman.io/" class="headerbutton"> <a target="_blank" rel="noopener noreferrer" href="https://podman.io/" class="headerbutton">
Podman Podman
@ -37,25 +37,17 @@
<a target="_blank" rel="noopener noreferrer" href="https://www.docker.com/" class="headerbutton"> <a target="_blank" rel="noopener noreferrer" href="https://www.docker.com/" class="headerbutton">
Docker Docker
</a> </a>
<a target="_blank" rel="noopener noreferrer" href="https://flatpak.org/" class="headerbutton">
Flatpak
</a>
</div> </div>
<div class="header"> <div class="header">
<a target="_blank" rel="noopener noreferrer" href="https://www.openstreetmap.org/" class="headerbutton"> <a target="_blank" rel="noopener noreferrer" href="https://www.openstreetmap.org/" class="headerbutton">
OpenStreetMap OpenStreetMap
</a> </a>
<a target="_blank" rel="noopener noreferrer" href="https://boinc.berkeley.edu/" class="headerbutton"> <a target="_blank" rel="noopener noreferrer" href="https://boinc.berkeley.edu/" class="headerbutton">
BOINC BOINC
</a> </a>
<a target="_blank" rel="noopener noreferrer" href="https://penpot.app/" class="headerbutton">
Penpot
</a>
<a target="_blank" rel="noopener noreferrer" href="https://gitlab.com/" class="headerbutton"> <a target="_blank" rel="noopener noreferrer" href="https://gitlab.com/" class="headerbutton">
GitLab CI, Pages GitLab
</a> </a>
<a target="_blank" rel="noopener noreferrer" href="https://forgejo.org/" class="headerbutton"> <a target="_blank" rel="noopener noreferrer" href="https://forgejo.org/" class="headerbutton">
Forgejo Forgejo
@ -63,28 +55,9 @@
</div> </div>
<div class="header"> <div class="header">
<a class="headerbutton"> <a target="_blank" rel="noopener noreferrer" href="https://woodpecker-ci.org/" class="headerbutton">
On-premise hosting
</a>
<a target="_blank" rel="noopener noreferrer" href="https://aws.amazon.com/" class="headerbutton">
Amazon EC2, SES
</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.cloudflare.com/" class="headerbutton">
Cloudflare
</a>
<a target="_blank" rel="noopener noreferrer" href="https://systemd.io/" class="headerbutton">
systemd
</a>
</div>
<div class="header">
<a target="_blank" rel="noopenTHEORY OF COMPUTATION, 2023er noreferrer" href="https://woodpecker-ci.org/" class="headerbutton">
Woodpecker/Drone CI Woodpecker/Drone CI
</a> </a>
<a target="_blank" rel="noopener noreferrer" href="https://gohugo.io/" class="headerbutton">
Hugo
</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.python.org/" class="headerbutton"> <a target="_blank" rel="noopener noreferrer" href="https://www.python.org/" class="headerbutton">
Python Python
</a> </a>
@ -98,8 +71,34 @@
<div class="header"> <div class="header">
<a class="headerbutton"> <a class="headerbutton">
Content Creation Servers
</a> </a>
<a target="_blank" rel="noopener noreferrer" href="https://aws.amazon.com/" class="headerbutton">
Amazon EC2, SES
</a>
<a target="_blank" rel="noopener noreferrer" href="https://www.cloudflare.com/" class="headerbutton">
Cloudflare
</a>
</div>
<div class="header">
<a target="_blank" rel="noopener noreferrer" href="https://flatpak.org/" class="headerbutton">
Flatpak
</a>
<a target="_blank" rel="noopener noreferrer" href="https://penpot.app/" class="headerbutton">
Penpot
</a>
<a target="_blank" rel="noopener noreferrer" href="https://gohugo.io/" class="headerbutton">
Hugo
</a>
<a target="_blank" rel="noopener noreferrer" href="https://systemd.io/" class="headerbutton">
systemd
</a>
</div>
<div class="header">
<a class="headerbutton"> <a class="headerbutton">
Documentation Documentation
</a> </a>
@ -108,6 +107,12 @@
</a> </a>
</div> </div>
<div class="header">
<a class="headerbutton">
Content Creation
</a>
</div>
<div class="grid-container"> <div class="grid-container">
<div class="middle"> <div class="middle">

View file

@ -54,6 +54,7 @@ html *
.logo { .logo {
color: #000; color: #000;
text-align: center;
} }
.grid-container { .grid-container {
@ -95,13 +96,13 @@ html *
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
display: flex; display: flex;
font-size: 16px; font-size: 14px;
font-weight: bold; font-weight: bold;
margin: 4px 2px; margin: 4px 2px;
padding-left: 0.3cm; padding-left: 0.3cm;
padding-right: 0.3cm; padding-right: 0.3cm;
cursor: pointer; cursor: pointer;
height: 35px; min-height: 35px;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
@ -212,6 +213,7 @@ html *
.logo { .logo {
color: #fff; color: #fff;
text-align: center;
} }
body { body {
@ -257,13 +259,13 @@ html *
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
display: flex; display: flex;
font-size: 16px; font-size: 14px;
font-weight: bold; font-weight: bold;
margin: 4px 2px; margin: 4px 2px;
padding-left: 0.3cm; padding-left: 0.3cm;
padding-right: 0.3cm; padding-right: 0.3cm;
cursor: pointer; cursor: pointer;
height: 35px; min-height: 35px;
transition-duration: 0.2s; transition-duration: 0.2s;
} }