added stuff
|
@ -4,13 +4,13 @@ import Link from 'next/link';
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
const Photo = ({src, href, alt, dim}: any) => {
|
const Photo = ({src, href, alt, dim}: any) => {
|
||||||
let classes;
|
let classes = "transition ease-in-out delay-150 hover:scale-105 duration-300";
|
||||||
|
|
||||||
if(!dim || dim == "true") {
|
/** if(!dim || dim == "true") {
|
||||||
classes = "transition ease-in-out delay-150 opacity-75 hover:opacity-100 hover:scale-105 duration-300"
|
classes = "transition ease-in-out delay-150 opacity-75 hover:opacity-100 hover:scale-105 duration-300"
|
||||||
} else if (dim == "false") {
|
} else if (dim == "false") {
|
||||||
classes = "transition ease-in-out delay-150 hover:scale-105 duration-300"
|
classes = "transition ease-in-out delay-150 hover:scale-105 duration-300"
|
||||||
}
|
} **/
|
||||||
|
|
||||||
if(!href || href == "#") {
|
if(!href || href == "#") {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -34,18 +34,18 @@ export default function Hobbies() {
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||||
<div className="grid col-span-3 gap-2 content-center">
|
<div className="grid col-span-3 gap-2 content-center">
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/cosplay/tasm-2-main.jpg" href="https://www.instagram.com/p/CqvbNxnyCXl" alt="The Amazing Spider-Man 2" dim="false"></Photo>
|
<Photo src="/images/photos/cosplay/tasm-2-main.jpg" href="https://www.instagram.com/p/CqvbNxnyCXl" alt="The Amazing Spider-Man 2" ></Photo>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-2 content-center max-md:hidden">
|
<div className="grid gap-2 content-center max-md:hidden">
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/cosplay/win&art.jpg" href="https://www.instagram.com/p/CzkonahrURS/?img_index=3" alt="Spider-Men" dim="false"></Photo>
|
<Photo src="/images/photos/cosplay/win&art.jpg" href="https://www.instagram.com/p/CzkonahrURS/?img_index=3" alt="Spider-Men" ></Photo>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/cosplay/win-and-art-thinking.jpg" href="https://www.instagram.com/p/CzkonahrURS/?img_index=2" alt="Thinking" dim="false"></Photo>
|
<Photo src="/images/photos/cosplay/win-and-art-thinking.jpg" href="https://www.instagram.com/p/CzkonahrURS/?img_index=2" alt="Thinking" ></Photo>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/cosplay/win-and-art-4.jpg" href="https://www.instagram.com/p/CzkonahrURS/?img_index=1" alt="Spider-Bros" dim="false"></Photo>
|
<Photo src="/images/photos/cosplay/win-and-art-4.jpg" href="https://www.instagram.com/p/CzkonahrURS/?img_index=1" alt="Spider-Bros" ></Photo>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -57,32 +57,32 @@ export default function Hobbies() {
|
||||||
<div className="grid grid-cols-3 md:grid-cols-4 gap-6">
|
<div className="grid grid-cols-3 md:grid-cols-4 gap-6">
|
||||||
<div className="grid gap-4 content-center">
|
<div className="grid gap-4 content-center">
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/cosplay/tasm-2-spider-man-2-2.jpg" href="https://www.instagram.com/p/CyiVaBoLBVR/?img_index=1" alt="TASM2 Pose" dim="false"></Photo>
|
<Photo src="/images/photos/cosplay/tasm-2-spider-man-2-2.jpg" href="https://www.instagram.com/p/CyiVaBoLBVR/?img_index=1" alt="TASM2 Pose" ></Photo>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/cosplay/hulk-asiatique.jpg" href="https://www.instagram.com/p/CrTS2T9ScLs/?img_index=1" alt="TASM2 Pose" dim="false"></Photo>
|
<Photo src="/images/photos/cosplay/hulk-asiatique.jpg" href="https://www.instagram.com/p/CrTS2T9ScLs/?img_index=1" alt="TASM2 Pose" ></Photo>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/cosplay/tasm-2-spider-man-2.jpg" href="https://www.instagram.com/p/CyiVaBoLBVR/?img_index=4" alt="Symbiote" dim="false"></Photo>
|
<Photo src="/images/photos/cosplay/tasm-2-spider-man-2.jpg" href="https://www.instagram.com/p/CyiVaBoLBVR/?img_index=4" alt="Symbiote" ></Photo>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid col-span-2 gap-4 content-center">
|
<div className="grid col-span-2 gap-4 content-center">
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/cosplay/spiderverse.jpg" href="https://www.facebook.com/WinsDominoes/posts/pfbid02aE4Hocw54B8M3g5DcyPKEfRDRZ6Do4xKnbyCsHycrbgt7n5Te7SXvceWwkFbmnNMl" alt="Spider-Verse" dim="false"></Photo>
|
<Photo src="/images/photos/cosplay/spiderverse.jpg" href="https://www.facebook.com/WinsDominoes/posts/pfbid02aE4Hocw54B8M3g5DcyPKEfRDRZ6Do4xKnbyCsHycrbgt7n5Te7SXvceWwkFbmnNMl" alt="Spider-Verse" ></Photo>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/cosplay/spiderverse-photo.jpg" href="https://www.facebook.com/WinsDominoes/posts/pfbid0ahuYTHefP9Mf8eXLeYkpi9iFKGxKpDqxKkUu7yKh78CjyfQSuofG4wsGG5QxuZ8ol" alt="Spider-Man: Into the Spider-Verse" dim="false"></Photo>
|
<Photo src="/images/photos/cosplay/spiderverse-photo.jpg" href="https://www.facebook.com/WinsDominoes/posts/pfbid0ahuYTHefP9Mf8eXLeYkpi9iFKGxKpDqxKkUu7yKh78CjyfQSuofG4wsGG5QxuZ8ol" alt="Spider-Man: Into the Spider-Verse" ></Photo>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-4 content-center max-md:hidden">
|
<div className="grid gap-4 content-center max-md:hidden">
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/cosplay/gtoqw.jpg" href="https://www.instagram.com/p/Cs7ZYrdSEaT/?img_index=1" alt="Across the Spider-Verse Fan Meet" dim="false"></Photo>
|
<Photo src="/images/photos/cosplay/gtoqw.jpg" href="https://www.instagram.com/p/Cs7ZYrdSEaT/?img_index=1" alt="Across the Spider-Verse Fan Meet" ></Photo>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/cosplay/peter-b-main.jpg" href="https://www.facebook.com/photo.php?fbid=1485878428813697&set=pb.100021746621221.-2207520000&type=3" alt="Peter B. Parker" dim="false"></Photo>
|
<Photo src="/images/photos/cosplay/peter-b-main.jpg" href="https://www.facebook.com/photo.php?fbid=1485878428813697&set=pb.100021746621221.-2207520000&type=3" alt="Peter B. Parker" ></Photo>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/cosplay/gtoqw2.jpg" href="https://www.facebook.com/photo.php?fbid=1433342307462095&set=t.100021746621221&type=3" alt="Guardians Of The Quantum World" dim="false"></Photo>
|
<Photo src="/images/photos/cosplay/gtoqw2.jpg" href="https://www.facebook.com/photo.php?fbid=1433342307462095&set=t.100021746621221&type=3" alt="Guardians Of The Quantum World" ></Photo>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -124,23 +124,23 @@ export default function Hobbies() {
|
||||||
<div className="grid grid-cols-3 gap-6">
|
<div className="grid grid-cols-3 gap-6">
|
||||||
<div className="grid gap-4 content-center">
|
<div className="grid gap-4 content-center">
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/graphic-design/attaste/attaste-background-2.jpg" href="https://www.facebook.com/attaste.rmutt/posts/pfbid0Ba9jKJybSD8VV88kQd85SB3RWhRY5GTVh7bbes3begdK4FADxbaHvaYqqqEYsV8Yl" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/graphic-design/attaste/attaste-background-2.jpg" href="https://www.facebook.com/attaste.rmutt/posts/pfbid0Ba9jKJybSD8VV88kQd85SB3RWhRY5GTVh7bbes3begdK4FADxbaHvaYqqqEYsV8Yl" alt=""></Photo>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/graphic-design/attaste/attaste-background.jpg" href="https://www.facebook.com/attaste.rmutt/posts/pfbid0Ba9jKJybSD8VV88kQd85SB3RWhRY5GTVh7bbes3begdK4FADxbaHvaYqqqEYsV8Yl" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/graphic-design/attaste/attaste-background.jpg" href="https://www.facebook.com/attaste.rmutt/posts/pfbid0Ba9jKJybSD8VV88kQd85SB3RWhRY5GTVh7bbes3begdK4FADxbaHvaYqqqEYsV8Yl" alt=""></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/graphic-design/attaste/attaste-logo.jpg" href="https://www.facebook.com/attaste.rmutt/" alt="Attaste Logo" dim="false"></Photo>
|
<Photo src="/images/photos/graphic-design/attaste/attaste-logo.jpg" href="https://www.facebook.com/attaste.rmutt/" alt="Attaste Logo" ></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/graphic-design/attaste/attaste-full-page.jpg" href="https://www.facebook.com/Fashionrmutt/posts/pfbid0GYU1Mb7iAqdJGEW38uLmf3y9LuHvXdWWk82TPw2TzaN5i4gZMmLjH1mzFK2XmFedl" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/graphic-design/attaste/attaste-full-page.jpg" href="https://www.facebook.com/Fashionrmutt/posts/pfbid0GYU1Mb7iAqdJGEW38uLmf3y9LuHvXdWWk82TPw2TzaN5i4gZMmLjH1mzFK2XmFedl" alt=""></Photo>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/graphic-design/attaste/attaste-full.jpg" href="https://www.facebook.com/Fashionrmutt/posts/pfbid0GYU1Mb7iAqdJGEW38uLmf3y9LuHvXdWWk82TPw2TzaN5i4gZMmLjH1mzFK2XmFedl" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/graphic-design/attaste/attaste-full.jpg" href="https://www.facebook.com/Fashionrmutt/posts/pfbid0GYU1Mb7iAqdJGEW38uLmf3y9LuHvXdWWk82TPw2TzaN5i4gZMmLjH1mzFK2XmFedl" alt=""></Photo>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -177,31 +177,31 @@ export default function Hobbies() {
|
||||||
<div className="grid grid-cols-3 md:grid-cols-5 gap-6">
|
<div className="grid grid-cols-3 md:grid-cols-5 gap-6">
|
||||||
<div className="grid col-span-2 content-center">
|
<div className="grid col-span-2 content-center">
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/graphic-design/supta/monday.jpg" href="https://www.facebook.com/photo?fbid=617881087113710&set=pcb.617882217113597" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/graphic-design/supta/monday.jpg" href="https://www.facebook.com/photo?fbid=617881087113710&set=pcb.617882217113597" alt=""></Photo>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid content-center">
|
<div className="grid content-center">
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/graphic-design/supta/tuesday.jpg" href="https://www.facebook.com/photo?fbid=617881563780329&set=pcb.617882217113597" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/graphic-design/supta/tuesday.jpg" href="https://www.facebook.com/photo?fbid=617881563780329&set=pcb.617882217113597" alt=""></Photo>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/graphic-design/supta/wednesday.jpg" href="https://www.facebook.com/photo?fbid=617881700446982&set=pcb.617882217113597" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/graphic-design/supta/wednesday.jpg" href="https://www.facebook.com/photo?fbid=617881700446982&set=pcb.617882217113597" alt=""></Photo>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid content-center">
|
<div className="grid content-center">
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/graphic-design/supta/thursday.jpg" href="https://www.facebook.com/photo?fbid=617881093780376&set=pcb.617882217113597" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/graphic-design/supta/thursday.jpg" href="https://www.facebook.com/photo?fbid=617881093780376&set=pcb.617882217113597" alt=""></Photo>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/graphic-design/supta/friday.jpg" href="https://www.facebook.com/photo/?fbid=617881620446990&set=pcb.617882217113597" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/graphic-design/supta/friday.jpg" href="https://www.facebook.com/photo/?fbid=617881620446990&set=pcb.617882217113597" alt=""></Photo>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid content-center">
|
<div className="grid content-center">
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/graphic-design/supta/saturday.jpg" href="https://www.facebook.com/photo/?fbid=617881097113709&set=pcb.617882217113597" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/graphic-design/supta/saturday.jpg" href="https://www.facebook.com/photo/?fbid=617881097113709&set=pcb.617882217113597" alt=""></Photo>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/graphic-design/supta/sunday.jpg" href="https://www.facebook.com/photo?fbid=617881310447021&set=pcb.617882217113597" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/graphic-design/supta/sunday.jpg" href="https://www.facebook.com/photo?fbid=617881310447021&set=pcb.617882217113597" alt=""></Photo>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -215,38 +215,38 @@ export default function Hobbies() {
|
||||||
<div className="grid grid-cols-4 max-md:flex max-md:flex-col max-md:justify-center gap-6">
|
<div className="grid grid-cols-4 max-md:flex max-md:flex-col max-md:justify-center gap-6">
|
||||||
<div className="grid col-span-2 content-center">
|
<div className="grid col-span-2 content-center">
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/language/etymology/december.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid0F5B2pYJpxFn4zTz4gRnRJiyrJk39cyBU12h3UF2CMCZZHuDX3Ucf7w5bkHCuXCLWl" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/language/etymology/december.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid0F5B2pYJpxFn4zTz4gRnRJiyrJk39cyBU12h3UF2CMCZZHuDX3Ucf7w5bkHCuXCLWl" alt=""></Photo>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid col-span-2 content-center">
|
<div className="grid col-span-2 content-center">
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/language/poetry/rain.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid0xhGCHH5ripFCLY98k9R2gLvwBVUEQC7cHj2XNAeMjdWWFzg6ytqdbs3pUmVo7sQ4l" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/language/poetry/rain.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid0xhGCHH5ripFCLY98k9R2gLvwBVUEQC7cHj2XNAeMjdWWFzg6ytqdbs3pUmVo7sQ4l" alt=""></Photo>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid col-span-4 content-center max-md:hidden">
|
<div className="grid col-span-4 content-center max-md:hidden">
|
||||||
<div className="grid grid-cols-4 gap-x-4">
|
<div className="grid grid-cols-4 gap-x-4">
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/language/poetry/megabangna.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid02bBs5rRF1HvusMHszwTFoQvX6dRoyMRfvDeJW44UAVG1V2cnTGW1heezpUnn8rXX7l" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/language/poetry/megabangna.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid02bBs5rRF1HvusMHszwTFoQvX6dRoyMRfvDeJW44UAVG1V2cnTGW1heezpUnn8rXX7l" alt=""></Photo>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/language/poetry/cosplay.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid02Rb7QKDbxU2FAttBJZ7UEitWtZ3nd9JXBMyB73eckRwqsnYbxTBvXwWFwU2SVF8BFl" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/language/poetry/cosplay.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid02Rb7QKDbxU2FAttBJZ7UEitWtZ3nd9JXBMyB73eckRwqsnYbxTBvXwWFwU2SVF8BFl" alt=""></Photo>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/language/etymology/sukhee.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid0Gx4DUbn8Y3xYiv2SctfqZpaXyNbSmosUDmVhHSt45Fk71jjDfNth9n1mpder2Howl" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/language/etymology/sukhee.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid0Gx4DUbn8Y3xYiv2SctfqZpaXyNbSmosUDmVhHSt45Fk71jjDfNth9n1mpder2Howl" alt=""></Photo>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/language/etymology/jaturmitr.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid02DQjru8LZvyStPFcvWXWXkTtVRWjAkqSYeST9p5Kw5ZLYb9zMeQyF4mBQrsGMVsTHl" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/language/etymology/jaturmitr.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid02DQjru8LZvyStPFcvWXWXkTtVRWjAkqSYeST9p5Kw5ZLYb9zMeQyF4mBQrsGMVsTHl" alt=""></Photo>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid col-span-2 content-center">
|
<div className="grid col-span-2 content-center">
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/language/poetry/bus.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid02sBVdxeKb2Q7hWnR2hPbbCohPrj4g5CMC2gbXkE9bzKuiZDXS1PewXZpaWz4DKpL2l" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/language/poetry/bus.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid02sBVdxeKb2Q7hWnR2hPbbCohPrj4g5CMC2gbXkE9bzKuiZDXS1PewXZpaWz4DKpL2l" alt=""></Photo>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid col-span-2 content-center">
|
<div className="grid col-span-2 content-center">
|
||||||
<div>
|
<div>
|
||||||
<Photo src="/images/photos/language/etymology/manusya.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid02fw5D5uXxwoKQjuSQe16Pf4eCaaH9fyM6jt3yZDgeeZZdhnSPXg7AiM1tqhtYyYyrl" alt="" dim="false"></Photo>
|
<Photo src="/images/photos/language/etymology/manusya.png" href="https://www.facebook.com/WinsDominoes/posts/pfbid02fw5D5uXxwoKQjuSQe16Pf4eCaaH9fyM6jt3yZDgeeZZdhnSPXg7AiM1tqhtYyYyrl" alt=""></Photo>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -28,7 +28,7 @@ export default function Home() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-span-3">
|
<div className="col-span-3">
|
||||||
<h2 className="text-3xl font-bold mt-2">About</h2>
|
<h2 className="text-4xl font-bold mt-2">About Me</h2>
|
||||||
<p className="text-base mt-4">
|
<p className="text-base mt-4">
|
||||||
My main field of work is creating <a className="font-bold underline decoration-2 decoration-sky-500">web applications</a>. I specialize in <a className="font-bold underline decoration-2 decoration-indigo-500">backend development</a> with <a className="font-bold underline decoration-2 decoration-pink-500">Node.js</a> and <a className="font-bold underline decoration-2 decoration-indigo-500">PHP</a>, as well as working with <a className="font-bold underline decoration-2 decoration-indigo-500">relational databases</a>,
|
My main field of work is creating <a className="font-bold underline decoration-2 decoration-sky-500">web applications</a>. I specialize in <a className="font-bold underline decoration-2 decoration-indigo-500">backend development</a> with <a className="font-bold underline decoration-2 decoration-pink-500">Node.js</a> and <a className="font-bold underline decoration-2 decoration-indigo-500">PHP</a>, as well as working with <a className="font-bold underline decoration-2 decoration-indigo-500">relational databases</a>,
|
||||||
such as <a className="font-bold underline decoration-2 decoration-pink-500">MySQL / MariaDB</a>.
|
such as <a className="font-bold underline decoration-2 decoration-pink-500">MySQL / MariaDB</a>.
|
||||||
|
|
|
@ -24,8 +24,115 @@ export default function Projects() {
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div className='mb-4'>
|
<div className='mb-4'>
|
||||||
<h2 className="text-3xl font-bold my-2">System Administration</h2>
|
<h2 className="text-4xl font-bold my-2">System Administration</h2>
|
||||||
<p className="text-base">All of 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.
|
</div>
|
||||||
|
|
||||||
|
<div className='mb-4'>
|
||||||
|
<h2 className="text-3xl font-bold my-2">Enterprise Systems</h2>
|
||||||
|
<p className="text-base">
|
||||||
|
I work as a <span className='font-bold underline decoration-2 decoration-sky-500'>part-time job</span> at my family business company, <span className='font-bold underline decoration-2 decoration-blue-500'>EMPower Engineering Co.,Ltd</span>.
|
||||||
|
I work with designing, operating and maintaining the company's <span className='font-bold underline decoration-2 decoration-indigo-500'>computer infrastructure</span> along with the company's I.T. department.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='grid grid-cols-6 gap-4'>
|
||||||
|
<div className='col-span-6'>
|
||||||
|
<h3 className='text-2xl font-bold my-2'>Hardware</h3>
|
||||||
|
<p className="text-base">
|
||||||
|
The server rack below consists of many components. Ranging from network equipment such as: <span className='font-bold underline decoration-2 decoration-purple-500'>routers and switches</span> to server equipment such as: <span className='font-bold underline decoration-2 decoration-pink-500'>storage servers and security camera servers</span>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-span-6">
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||||
|
<div className="grid gap-4 content-center">
|
||||||
|
<div>
|
||||||
|
<Photo src="/images/photos/company/main-server-rack/20231221_151039.jpg" alt="Main Server Rack"></Photo>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-4 content-center">
|
||||||
|
<div>
|
||||||
|
<Photo src="/images/photos/company/main-server-rack/20231221_132903.jpg" alt="Router Closeup"></Photo>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-4 content-center">
|
||||||
|
<div>
|
||||||
|
<Photo src="/images/photos/company/main-server-rack/20231221_133050.jpg" alt="MikroTik Cloud Router Switch"></Photo>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-4 content-center">
|
||||||
|
<div>
|
||||||
|
<Photo src="/images/photos/company/main-server-rack/20231221_132830.jpg" href="https://cloud.winsdominoes.net" alt="Server Maintenance"></Photo>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='col-span-6'>
|
||||||
|
<h3 className='text-2xl font-bold my-2'>Software</h3>
|
||||||
|
<p className="text-base">
|
||||||
|
Along with hardware, there must be... Software! These software are used for many purposes, such as <span className='font-bold underline decoration-2 decoration-yellow-500'>server monitoring</span>,
|
||||||
|
<span className='font-bold underline decoration-2 decoration-lime-500'>file storage and transfer</span>, a DNS server and so on.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='col-span-6'>
|
||||||
|
<div className="grid grid-cols-2 max-lg:flex max-lg:flex-col max-lg:justify-center gap-6">
|
||||||
|
<div className="content-center">
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<Photo src="/images/photos/company/raspberry-pi-file/20231221_151414.jpg" href="https://cloud.winsdominoes.net"></Photo>
|
||||||
|
<h5 className='text-xl font-bold'>File Transfer</h5>
|
||||||
|
<p className='text-base'>
|
||||||
|
This is a touchscreen Raspberry Pi that handles all <span className='font-bold underline decoration-2 decoration-rose-500'>CNC-related file transfers</span>, designed and installed by me and the I.T. department.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h5 className='text-lg font-bold mt-2'>Usage</h5>
|
||||||
|
<ul className="list-disc ml-4">
|
||||||
|
<li>
|
||||||
|
Engineers, sitting in the office, connects to the Pi using the <span className='font-bold underline decoration-2 decoration-rose-500'>SMB (Samba) protocol</span>.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Engineers copy the files over to the Raspberry Pi over the network.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
The <span className='font-bold underline decoration-2 decoration-sky-500'>CNC machine operators</span> copies the files straight to the CNC machine.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p className='text-base mt-2'>
|
||||||
|
This project has received <span className='font-bold underline decoration-2 decoration-green-500'>numerous positive feedbacks</span> from machine operators and are still being used in production to this day.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="content-center">
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<Photo src="/images/photos/company/main-server-rack/20231221_151027.jpg" href="https://cloud.winsdominoes.net"></Photo>
|
||||||
|
<h4 className='text-xl font-bold'>Networking</h4>
|
||||||
|
<p className='text-base'>
|
||||||
|
Raspberry Pis are also used in networking systems such as: internet speed monitoring and as a DNS server.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h5 className='text-lg font-bold mt-2'>Pi-Hole</h5>
|
||||||
|
<p className='text-base'>
|
||||||
|
Seen on the left side of the screen, <Link href="https://pi-hole.net" className='font-bold underline decoration-2 decoration-indigo-500'>Pi-Hole</Link> is used as the main DNS server, in which, the company's network traffic must go through Pi-Hole before entering the Wide Area Network.
|
||||||
|
This also provides additional DNS protection & control to the already installed firewall.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h5 className='text-lg font-bold mt-2'>Grafana Monitoring</h5>
|
||||||
|
<p className='text-base'>
|
||||||
|
The <Link href="https://github.com/geerlingguy/internet-pi/" className='font-bold underline decoration-2 decoration-indigo-500'>internet-pi</Link> set of software, consisting of Grafana and Ansible, provides the I.T. department with additional networking monitoring such as:
|
||||||
|
Connection speeds, latency, HTTP duration and much more.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='mt-10'>
|
||||||
|
<h2 className="text-3xl 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 underline decoration-2 decoration-sky-500">self-hosting</span> instances of various <span className="font-bold underline decoration-2 decoration-indigo-500">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 underline decoration-2 decoration-sky-500">self-hosting</span> instances of various <span className="font-bold underline decoration-2 decoration-indigo-500">open-source software</span> such as file storage servers, music streaming services, network monitors, and so on. </p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -228,10 +335,11 @@ export default function Projects() {
|
||||||
<div className="transition ease-in-out delay-150 hover:scale-105 duration-300">
|
<div className="transition ease-in-out delay-150 hover:scale-105 duration-300">
|
||||||
<video
|
<video
|
||||||
autoPlay
|
autoPlay
|
||||||
|
controls
|
||||||
muted
|
muted
|
||||||
loop
|
loop
|
||||||
className='rounded'
|
className='rounded'
|
||||||
src="/images/photos/school-work/robotics/lego-league/robot-movement-final.mp4">
|
src="/images/photos/school-work/robotics/lego-league/robot-movement-final.webm">
|
||||||
</video>
|
</video>
|
||||||
<span className="text-xs m-2 text-zinc-600 dark:text-zinc-400">First LEGO League Robot Test Run</span>
|
<span className="text-xs m-2 text-zinc-600 dark:text-zinc-400">First LEGO League Robot Test Run</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -286,7 +394,7 @@ export default function Projects() {
|
||||||
<h2 className="text-3xl font-bold">Science</h2>
|
<h2 className="text-3xl font-bold">Science</h2>
|
||||||
<p className="text-base">
|
<p className="text-base">
|
||||||
I participated in Rugby School Thailand's <a className="font-bold underline decoration-2 decoration-indigo-500">Senior Open Day</a>, where all academic departments get to present their syllabus and curriculum to visitors that are looking into joining the school.
|
I participated in Rugby School Thailand's <a className="font-bold underline decoration-2 decoration-indigo-500">Senior Open Day</a>, where all academic departments get to present their syllabus and curriculum to visitors that are looking into joining the school.
|
||||||
I voluntarily came to help the <a className="font-bold underline decoration-2 decoration-sky-500">Physics department</a> in presenting <a className="font-bold underline decoration-2 decoration-pink-500">IGCSE and A-Level Physics concepts</a>.
|
I volunteered to come and help the <a className="font-bold underline decoration-2 decoration-sky-500">Physics department</a> in presenting and explaining <a className="font-bold underline decoration-2 decoration-pink-500">IGCSE and A-Level Physics concepts</a>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="grid grid-cols-6 gap-4">
|
<div className="grid grid-cols-6 gap-4">
|
||||||
|
|
After Width: | Height: | Size: 2.0 MiB |
After Width: | Height: | Size: 2.6 MiB |
After Width: | Height: | Size: 2.8 MiB |
After Width: | Height: | Size: 3.4 MiB |
After Width: | Height: | Size: 3.6 MiB |
After Width: | Height: | Size: 2.6 MiB |
After Width: | Height: | Size: 2.1 MiB |
After Width: | Height: | Size: 2.1 MiB |
After Width: | Height: | Size: 3.4 MiB |
After Width: | Height: | Size: 3.5 MiB |
After Width: | Height: | Size: 2.8 MiB |
After Width: | Height: | Size: 2.8 MiB |
After Width: | Height: | Size: 2.2 MiB |
After Width: | Height: | Size: 3.7 MiB |
After Width: | Height: | Size: 3.1 MiB |
After Width: | Height: | Size: 1.2 MiB |
After Width: | Height: | Size: 1.1 MiB |
After Width: | Height: | Size: 3.1 MiB |
After Width: | Height: | Size: 3.0 MiB |
After Width: | Height: | Size: 4.0 MiB |
After Width: | Height: | Size: 3.9 MiB |
After Width: | Height: | Size: 4.0 MiB |
After Width: | Height: | Size: 3.6 MiB |
After Width: | Height: | Size: 3.0 MiB |
After Width: | Height: | Size: 3.4 MiB |