winsdominoes
/
website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed frontpage responsive + minor changes on hobbies

This commit is contained in:
WinsDominoes 2023-12-22 00:15:59 +07:00
parent c12f2e1937
commit a050b626d1
3 changed files with 41 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Navbar.tsx
View File

@ -35,7 +35,7 @@ const Navbar = () => {
{links.map(({ id, text, link }) => ( {links.map(({ id, text, link }) => (
<li <li
key={id} key={id}
className="nav-links px-4 cursor-pointer capitalize font-medium text-gray-500 hover:scale-105 hover:text-black dark:hover:text-white duration-200 link-underline" className="nav-links px-4 cursor-pointer capitalize font-medium text-base text-gray-500 hover:scale-105 hover:text-black dark:hover:text-white duration-200 link-underline"
> >
<Link href={link}>{text}</Link> <Link href={link}>{text}</Link>
</li> </li>

16
app/hobbies/page.tsx
View File

@ -92,25 +92,11 @@ export default function Hobbies() {
<div> <div>
<div className='my-2'> <div className='my-2'>
<h2 className="text-3xl font-bold my-2">Graphic Design</h2> <h2 className="text-3xl font-bold my-2">Graphics Design</h2>
<p className="text-base">I make various types of work, ranging from <span className="font-bold underline decoration-2 decoration-indigo-500">infographics</span> to <span className="font-bold underline decoration-2 decoration-pink-500">fashion show</span> logos. </p> <p className="text-base">I make various types of work, ranging from <span className="font-bold underline decoration-2 decoration-indigo-500">infographics</span> to <span className="font-bold underline decoration-2 decoration-pink-500">fashion show</span> logos. </p>
</div> </div>
<div className="grid grid-cols-6 gap-4"> <div className="grid grid-cols-6 gap-4">
<div className="col-span-6">
<div className="grid grid-cols-6 max-lg:flex max-lg:flex-col gap-4">
<div className="col-span-2 flex flex-col">
<Progress text="Adobe Illustrator" progress="60" />
</div>
<div className="col-span-2 flex flex-col">
<Progress text="Krita" progress="90" />
</div>
<div className="col-span-2 flex flex-col">
<Progress text="paint.net" progress="90" />
</div>
</div>
</div>
<div className="col-span-6"> <div className="col-span-6">
<div className="my-2"> <div className="my-2">
<h2 className="text-2xl font-bold my-2">ATTASTE - 5th Generation</h2> <h2 className="text-2xl font-bold my-2">ATTASTE - 5th Generation</h2>

42
app/page.tsx
View File

@ -41,7 +41,7 @@ export default function Home() {
</div> </div>
<div> <div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-6"> <div className="grid grid-cols-4 max-sm:hidden gap-6">
<div className="grid gap-4 content-center"> <div className="grid gap-4 content-center">
<div> <div>
<Photo src="/images/photos/iot/raspberrypi.jpg" href="/projects" alt="Raspberry Pi"></Photo> <Photo src="/images/photos/iot/raspberrypi.jpg" href="/projects" alt="Raspberry Pi"></Photo>
@ -56,7 +56,7 @@ export default function Home() {
</div> </div>
</div> </div>
<div className="grid gap-4"> <div className="grid gap-4">
<div> <div className="mt-12">
<Photo src="/images/photos/robotics/robot.jpg" href="/projects" alt="LEGO League"></Photo> <Photo src="/images/photos/robotics/robot.jpg" href="/projects" alt="LEGO League"></Photo>
</div> </div>
<div> <div>
@ -70,6 +70,42 @@ export default function Home() {
</div> </div>
</div> </div>
<div className="hidden max-sm:grid max-sm:grid-cols-2 max-sm:gap-6">
<div className="grid gap-4 content-center">
<div>
<Photo src="/images/photos/iot/raspberrypi.jpg" href="/projects" alt="Raspberry Pi"></Photo>
</div>
<div>
<Photo src="/images/photos/hardware/homelab.jpg" href="/projects" alt="Homelab"></Photo>
</div>
</div>
<div className="grid gap-4">
<div>
<Photo src="/images/photos/company/main-server-rack/20231221_151039.jpg" href="/projects" alt="EMPower Enginering Co.,Ltd"></Photo>
</div>
<div>
<Photo src="/images/photos/company/main-server-rack/20231221_151039.jpg" href="/projects" alt="EMPower Enginering Co.,Ltd"></Photo>
</div>
</div>
<div className="grid gap-4">
<div>
<Photo src="/images/photos/hardware/hdd.jpg" href="/projects" alt="Storage Server"></Photo>
</div>
<div>
<Photo src="/images/photos/cosplay/tasm-2-spider-man-2.jpg" href="/hobbies" alt="Spider-Man 2 PS5 Event"></Photo>
</div>
</div>
<div className="grid gap-4 content-center">
<div>
<Photo src="/images/photos/robotics/robot.jpg" href="/projects" alt="LEGO League"></Photo>
</div>
<div>
<Photo src="/images/photos/software/tts.jpg" href="/projects" alt="Storage Server"></Photo>
</div>
</div>
</div>
<div className="flex justify-center my-4"> <div className="flex justify-center my-4">
<p className="text-lg font-bold">View my <a className="font-bold underline decoration-2 decoration-sky-500">projects</a> and <a className="font-bold underline decoration-2 decoration-pink-500">hobbies</a> by clicking on the images!</p> <p className="text-lg font-bold">View my <a className="font-bold underline decoration-2 decoration-sky-500">projects</a> and <a className="font-bold underline decoration-2 decoration-pink-500">hobbies</a> by clicking on the images!</p>
</div> </div>
@ -77,7 +113,7 @@ export default function Home() {
<div className="grid grid-cols-3 gap-4 max-md:flex max-md:flex-col justify-items-center"> <div className="grid grid-cols-3 gap-4 max-md:flex max-md:flex-col justify-items-center">
<div className="col-span-3 justify-self-start"> <div className="col-span-3 justify-self-start">
<p className="text-3xl font-bold"> <p className="text-4xl font-bold">
Contact Contact
</p> </p>
</div> </div>