fixed frontpage responsive + minor changes on hobbies
This commit is contained in:
parent
c12f2e1937
commit
a050b626d1
|
@ -35,7 +35,7 @@ const Navbar = () => {
|
|||
{links.map(({ id, text, link }) => (
|
||||
<li
|
||||
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>
|
||||
</li>
|
||||
|
|
|
@ -92,25 +92,11 @@ export default function Hobbies() {
|
|||
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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="my-2">
|
||||
<h2 className="text-2xl font-bold my-2">ATTASTE - 5th Generation</h2>
|
||||
|
|
42
app/page.tsx
42
app/page.tsx
|
@ -41,7 +41,7 @@ export default function Home() {
|
|||
</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>
|
||||
<Photo src="/images/photos/iot/raspberrypi.jpg" href="/projects" alt="Raspberry Pi"></Photo>
|
||||
|
@ -56,7 +56,7 @@ export default function Home() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4">
|
||||
<div>
|
||||
<div className="mt-12">
|
||||
<Photo src="/images/photos/robotics/robot.jpg" href="/projects" alt="LEGO League"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
|
@ -70,6 +70,42 @@ export default function Home() {
|
|||
</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">
|
||||
<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>
|
||||
|
@ -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="col-span-3 justify-self-start">
|
||||
<p className="text-3xl font-bold">
|
||||
<p className="text-4xl font-bold">
|
||||
Contact
|
||||
</p>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue