Optimize for smaller screens
This commit is contained in:
parent
3be4764fb0
commit
658bf29a41
3 changed files with 85 additions and 66 deletions
|
@ -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>
|
||||||
|
|
67
index.html
67
index.html
|
@ -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">
|
||||||
|
|
10
style.css
10
style.css
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue