Revised homepage and donate section

This commit is contained in:
Win 2024-12-15 10:41:02 +07:00
parent 32b0e82690
commit d42071ba94
7 changed files with 47 additions and 31 deletions

View File

@ -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"
</div> width={0}
<div className="grid gap-4 content-center"> height={0}
<div> sizes="50vw"
<h3 className='text-2xl font-bold my-2'>Monero</h3> style={{ width: '100px', height: 'auto' }}
alt="Monero"
/>
</div>
<div className="mt-4">
<h3 className='text-2xl font-bold mb-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>

View File

@ -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' },
] ]
]; ];

View File

@ -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>

BIN
public/icons/monero.png Normal file

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

BIN
public/images/picture.png Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 199 KiB

After

Width:  |  Height:  |  Size: 547 KiB