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 Link from 'next/link';
import Photo from '../components/Photo'
import Image from 'next/image';
export default function Hobbies() {
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">
<h2 className="text-5xl font-bold mt-2">Donate</h2>
<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>
</div>
</div>
<div className="col-span-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="grid gap-4 content-center">
<div>
<h3 className='text-2xl font-bold my-2'>OpenCollective</h3>
<p className="text-base">
<div className="bg-[#353535] rounded-xl content-center text-center p-4">
<div className="flex place-content-center">
<Image
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>
</p>
</div>
</div>
<div className="grid gap-4 content-center">
<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>
<p className="text-base">
SCB: 433-1383337
</p>
</div>
<div className="grid gap-4 content-center">
<div>
<h3 className='text-2xl font-bold my-2'>Monero</h3>
<div className="bg-[#353535] rounded-xl content-center text-center p-4">
<div className="flex place-content-center">
<Image
className="h-auto max-w-full rounded-xl"
src="/icons/monero.png"
width={0}
height={0}
sizes="50vw"
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">
<code>
<pre className="break-all text-wrap">
467eMkLCwdxBEWsgtY5akKU6gEaN4V39T9sddoKhLv487c8HJ7SqaDSVhTCtVanhyihavuG8Fe3CkYFCAkzdJfChKBH4KYB
</code>
</pre>
</p>
</div>
</div>

View File

@ -7,30 +7,30 @@ import ContactButton from './components/ContactButton';
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/iot/raspberrypi.jpg', href: '/projects', alt: 'Raspberry Pi' },
{ 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/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/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/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/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/hardware/hdd.jpg', href: '/projects', alt: 'Storage Server'},
{ src: '/images/photos/software/bkk-raindar.png', href: '/projects', alt: 'Bangkok Rain Radar'},
{ src: '/images/photos/events/the-command-center.jpg', href: '/projects', alt: 'True Digital Park' },
{ src: '/images/photos/hardware/server_rack.jpg', href: '/projects', alt: 'WinsCloud'},
{ src: '/images/photos/software/livyatan.png', href: '/projects', alt: 'Livyatan'},
{ 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="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">
<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">
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>
@ -18,7 +18,7 @@ export default function Projects() {
<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.
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>
@ -86,7 +86,7 @@ export default function Projects() {
<div className="col-span-3">
<h3 className='text-lg font-bold'>Virtualization</h3>
<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>
</div>
@ -210,12 +210,12 @@ export default function Projects() {
<div className="grid grid-cols-2 gap-6">
<div className="grid gap-4 content-center">
<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 className="grid gap-4 content-center">
<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>

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