Revised homepage and donate section
This commit is contained in:
parent
32b0e82690
commit
d42071ba94
|
@ -1,6 +1,6 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import Photo from '../components/Photo'
|
import Image from 'next/image';
|
||||||
|
|
||||||
export default function Hobbies() {
|
export default function Hobbies() {
|
||||||
return (
|
return (
|
||||||
|
@ -10,34 +10,50 @@ export default function Hobbies() {
|
||||||
<div className="col-span-3 flex flex-col max-lg:items-center max-sm:items-start">
|
<div className="col-span-3 flex flex-col max-lg:items-center max-sm:items-start">
|
||||||
<h2 className="text-5xl font-bold mt-2">Donate</h2>
|
<h2 className="text-5xl font-bold mt-2">Donate</h2>
|
||||||
<p className="text-base mt-4">
|
<p className="text-base mt-4">
|
||||||
Want to help me run my WinsCloud Empire? Here are ways you can help support!
|
Like my services? Want to help me run my WinsCloud Empire? Here are ways you can help support!
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-span-6">
|
<div className="col-span-6">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
<div className="grid gap-4 content-center">
|
<div className="bg-[#353535] rounded-xl content-center text-center p-4">
|
||||||
<div>
|
<div className="flex place-content-center">
|
||||||
<h3 className='text-2xl font-bold my-2'>OpenCollective</h3>
|
<Image
|
||||||
<p className="text-base">
|
className="h-auto max-w-full rounded-xl"
|
||||||
|
src="/icons/open-collective.png"
|
||||||
|
width={0}
|
||||||
|
height={0}
|
||||||
|
sizes="50vw"
|
||||||
|
style={{ width: '100px', height: 'auto' }}
|
||||||
|
alt="Open Collective"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4">
|
||||||
|
<h3 className='text-2xl font-bold mb-2'>OpenCollective</h3>
|
||||||
|
<p className="text-base break-all">
|
||||||
<Link href="https://opencollective.com/winscloud">https://opencollective.com/winscloud</Link>
|
<Link href="https://opencollective.com/winscloud">https://opencollective.com/winscloud</Link>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-4 content-center">
|
<div className="bg-[#353535] rounded-xl content-center text-center p-4">
|
||||||
<h3 className='text-2xl font-bold my-2'>Bank Transfer <span className='font-bold underline decoration-2 decoration-red-500'>(Thai Citizens Only)</span></h3>
|
<div className="flex place-content-center">
|
||||||
<p className="text-base">
|
<Image
|
||||||
SCB: 433-1383337
|
className="h-auto max-w-full rounded-xl"
|
||||||
</p>
|
src="/icons/monero.png"
|
||||||
|
width={0}
|
||||||
|
height={0}
|
||||||
|
sizes="50vw"
|
||||||
|
style={{ width: '100px', height: 'auto' }}
|
||||||
|
alt="Monero"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-4 content-center">
|
<div className="mt-4">
|
||||||
<div>
|
<h3 className='text-2xl font-bold mb-2'>Monero</h3>
|
||||||
<h3 className='text-2xl font-bold my-2'>Monero</h3>
|
|
||||||
<p className="text-base">
|
<p className="text-base">
|
||||||
<code>
|
<pre className="break-all text-wrap">
|
||||||
467eMkLCwdxBEWsgtY5akKU6gEaN4V39T9sddoKhLv487c8HJ7SqaDSVhTCtVanhyihavuG8Fe3CkYFCAkzdJfChKBH4KYB
|
467eMkLCwdxBEWsgtY5akKU6gEaN4V39T9sddoKhLv487c8HJ7SqaDSVhTCtVanhyihavuG8Fe3CkYFCAkzdJfChKBH4KYB
|
||||||
</code>
|
</pre>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
18
app/page.tsx
18
app/page.tsx
|
@ -7,30 +7,30 @@ import ContactButton from './components/ContactButton';
|
||||||
|
|
||||||
const frontImages = [
|
const frontImages = [
|
||||||
[
|
[
|
||||||
{ src: '/images/photos/cosplay/tasm-2-asiatique.jpg', href: '/hobbies', alt: 'TASM2 Asiatique Event' },
|
{ src: '/images/photos/hardware/homelab.jpg', href: '/projects', alt: 'Homelab' },
|
||||||
{ src: '/images/photos/software/dateapp.jpg', href: '/projects', alt: 'Date Calculator' },
|
{ src: '/images/photos/software/dateapp.jpg', href: '/projects', alt: 'Date Calculator' },
|
||||||
{ src: '/images/photos/iot/raspberrypi.jpg', href: '/projects', alt: 'Raspberry Pi' },
|
|
||||||
{ src: '/images/photos/hardware/freebsd.jpg', href: '/projects', alt: 'PC running FreeBSD' },
|
{ src: '/images/photos/hardware/freebsd.jpg', href: '/projects', alt: 'PC running FreeBSD' },
|
||||||
|
{ src: '/images/photos/cosplay/tasm-2-asiatique.jpg', href: '/hobbies', alt: 'TASM2 Asiatique Event' },
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
{ src: '/images/photos/events/ai-engineering.jpg', href: '/projects', alt: 'CMKL A.I. Engineering Event' },
|
{ src: '/images/photos/events/ai-engineering.jpg', href: '/projects', alt: 'CMKL A.I. Engineering Event' },
|
||||||
{ src: '/images/photos/company/main-server-rack/20231221_151039.jpg', href: '/projects', alt: 'Office Main Rack' },
|
{ src: '/images/photos/company/main-server-rack/20231221_151039.jpg', href: '/projects', alt: 'Office Main Rack' },
|
||||||
{ src: '/images/photos/cosplay/spiderverse.jpg', href: '/hobbies', alt: 'The Spider-Verse Cosplay' },
|
{ src: '/images/photos/cosplay/spiderverse.jpg', href: '/hobbies', alt: 'The Spider-Verse Cosplay' },
|
||||||
{ src: '/images/photos/hardware/homelab.jpg', href: '/projects', alt: 'Homelab' },
|
{ src: '/images/photos/hardware/raspberry_pi.jpg', href: '/projects', alt: 'Pi the Speedtest Server' },
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
{ src: '/images/photos/hardware/dell-optiplex.jpg', href: '/projects', alt: 'Dell Optiplex Modified' },
|
{ src: '/images/photos/software/srt_app.png', href: '/projects', alt: 'SRT App' },
|
||||||
{ src: '/images/photos/robotics/robot.jpg', href: '/projects', alt: 'LEGO League'},
|
{ src: '/images/photos/robotics/robot.jpg', href: '/projects', alt: 'LEGO League'},
|
||||||
{ src: '/images/photos/software/blackboard.jpg', href: '/projects', alt: 'Blackboard of Memory'},
|
{ src: '/images/photos/software/opnsense.jpg', href: '/projects', alt: 'Home Router'},
|
||||||
{ src: '/images/photos/cosplay/tasm-2-spider-man-2.jpg', href: '/hobbies', alt: 'Spider-Man 2 PS5 Event'},
|
{ src: '/images/photos/cosplay/tasm-2-spider-man-2.jpg', href: '/hobbies', alt: 'Spider-Man 2 PS5 Event'},
|
||||||
{ src: '/images/photos/electrical/solar-panel.jpg', href: '/projects', alt: 'Off-Grid Electrical Work' },
|
{ src: '/images/photos/electrical/solar-panel.jpg', href: '/projects', alt: 'Off-Grid Electrical Work' },
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
{ src: '/images/photos/cosplay/spiderverse-photo.jpg', href: '/hobbies', alt: 'Spider-Verse Cosplay #2' },
|
{ src: '/images/photos/software/misskey_raindar.png', href: '/projects', alt: 'Bangkok Rain Radar'},
|
||||||
{ src: '/images/photos/software/winnie-http.png', href: '/projects', alt: 'Homemade webserver'},
|
{ src: '/images/photos/software/winnie-http.png', href: '/projects', alt: 'Homemade webserver'},
|
||||||
{ src: '/images/photos/hardware/hdd.jpg', href: '/projects', alt: 'Storage Server'},
|
{ src: '/images/photos/hardware/server_rack.jpg', href: '/projects', alt: 'WinsCloud'},
|
||||||
{ src: '/images/photos/software/bkk-raindar.png', href: '/projects', alt: 'Bangkok Rain Radar'},
|
{ src: '/images/photos/software/livyatan.png', href: '/projects', alt: 'Livyatan'},
|
||||||
{ src: '/images/photos/events/the-command-center.jpg', href: '/projects', alt: 'True Digital Park' },
|
{ src: '/images/photos/cosplay/spiderverse-photo.jpg', href: '/hobbies', alt: 'Spider-Verse Cosplay #2' },
|
||||||
]
|
]
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
|
@ -9,7 +9,7 @@ export default function Projects() {
|
||||||
<div className="min-w-0 mt-6 flex flex-col gap-8 max-lg:mx-4">
|
<div className="min-w-0 mt-6 flex flex-col gap-8 max-lg:mx-4">
|
||||||
<div className="grid grid-cols-3 gap-8 max-lg:flex max-lg:flex-col max-lg:justify-center">
|
<div className="grid grid-cols-3 gap-8 max-lg:flex max-lg:flex-col max-lg:justify-center">
|
||||||
<div className="col-span-3 flex flex-col max-lg:items-center max-sm:items-start">
|
<div className="col-span-3 flex flex-col max-lg:items-center max-sm:items-start">
|
||||||
<h2 className="text-5xl font-bold mt-2">Projects & Work</h2>
|
<h2 className="text-5xl font-bold mt-2">Projects</h2>
|
||||||
<p className="text-base mt-4">
|
<p className="text-base mt-4">
|
||||||
Here are the projects that I have made over the years. I mostly focus on the <a className="font-bold underline decoration-2 decoration-sky-500">web development</a> and <a className="font-bold underline decoration-2 decoration-sky-500">computer system</a> side of things, however, I have also picked up <span className="italic">embedded programming</span> and <span className="italic">electronics</span> over the past couple of months as well.
|
Here are the projects that I have made over the years. I mostly focus on the <a className="font-bold underline decoration-2 decoration-sky-500">web development</a> and <a className="font-bold underline decoration-2 decoration-sky-500">computer system</a> side of things, however, I have also picked up <span className="italic">embedded programming</span> and <span className="italic">electronics</span> over the past couple of months as well.
|
||||||
</p>
|
</p>
|
||||||
|
@ -18,7 +18,7 @@ export default function Projects() {
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-4xl font-bold my-2">Homelab System</h2>
|
<h2 className="text-4xl font-bold my-2">Homelab</h2>
|
||||||
<p className="text-base">In addition to business systems, I also have a homelab! My homelab equipment are inter-connected under the <Link href="https://winscloud.net"><span className="font-bold underline decoration-2 decoration-green-500">WinsCloud</span></Link> ecosystem.
|
<p className="text-base">In addition to business systems, I also have a homelab! My homelab equipment are inter-connected under the <Link href="https://winscloud.net"><span className="font-bold underline decoration-2 decoration-green-500">WinsCloud</span></Link> ecosystem.
|
||||||
This is where I run most of my <span className="font-bold">self-hosting</span> instances of various <span className="font-bold">open-source software</span> such as file storage servers, music streaming services, network monitors, and so on. </p>
|
This is where I run most of my <span className="font-bold">self-hosting</span> instances of various <span className="font-bold">open-source software</span> such as file storage servers, music streaming services, network monitors, and so on. </p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -86,7 +86,7 @@ export default function Projects() {
|
||||||
<div className="col-span-3">
|
<div className="col-span-3">
|
||||||
<h3 className='text-lg font-bold'>Virtualization</h3>
|
<h3 className='text-lg font-bold'>Virtualization</h3>
|
||||||
<p className='text-base'>
|
<p className='text-base'>
|
||||||
I am able to work with virtualization softwares such as: <span className='font-bold underline decoration-2 decoration-sky-500'>Proxmox, Docker and VMWare</span>.
|
I am able to work with virtualization and hypervisor softwares such as: <span className='font-bold underline decoration-2 decoration-sky-500'>Proxmox, Docker and VMWare</span>.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -210,12 +210,12 @@ export default function Projects() {
|
||||||
<div className="grid grid-cols-2 gap-6">
|
<div className="grid grid-cols-2 gap-6">
|
||||||
<div className="grid gap-4 content-center">
|
<div className="grid gap-4 content-center">
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/software/discord_raindar.png" href="https://winscloud.net" alt="Discord Version"></Photo>
|
<Photo src="/images/photos/software/discord_raindar.png" href="https://winscloud.net" alt="Rain Radar Bot - Discord Version"></Photo>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-4 content-center">
|
<div className="grid gap-4 content-center">
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/software/misskey_raindar.png" href="https://misskey.winscloud.net/@bkkraindarbot" alt="Misskey Version"></Photo>
|
<Photo src="/images/photos/software/misskey_raindar.png" href="https://misskey.winscloud.net/@bkkraindarbot" alt="Rain Radar Bot - Misskey Version"></Photo>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
Before Width: | Height: | Size: 320 KiB |
Binary file not shown.
Before Width: | Height: | Size: 199 KiB After Width: | Height: | Size: 547 KiB |
Loading…
Reference in New Issue