Changed font, name and more
This commit is contained in:
WinsDominoes
parent
5d045267f2
commit
e18e8a244c
|
|
@ -1,5 +1,4 @@
|
|||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import * as icons from 'simple-icons';
|
||||
|
||||
|
|
@ -17,17 +16,17 @@ const ContactButton: React.FC<ContactButtonProps> = ({platform, title, descripti
|
|||
let iconFile;
|
||||
|
||||
switch (platform.toLowerCase()) {
|
||||
case 'mastodon':
|
||||
buttonColor = "#6364FF";
|
||||
iconFile = icons.siMastodon.svg;
|
||||
case 'activitypub':
|
||||
buttonColor = "#F1007E";
|
||||
iconFile = icons.siActivitypub.svg;
|
||||
break;
|
||||
case 'github':
|
||||
buttonColor = "#181717";
|
||||
iconFile = icons.siGithub.svg;
|
||||
case 'git':
|
||||
buttonColor = "#FB923C";
|
||||
iconFile = icons.siForgejo.svg;
|
||||
break;
|
||||
case 'discord':
|
||||
buttonColor = "#5865F2";
|
||||
iconFile = icons.siDiscord.svg;
|
||||
case 'matrix':
|
||||
buttonColor = "#000";
|
||||
iconFile = icons.siMatrix.svg;
|
||||
break;
|
||||
case 'facebook':
|
||||
buttonColor = "#0866FF";
|
||||
|
|
@ -56,7 +55,7 @@ const ContactButton: React.FC<ContactButtonProps> = ({platform, title, descripti
|
|||
style={
|
||||
{ ['backgroundColor' as any] : buttonColor}
|
||||
}
|
||||
className="text-white font-bold rounded-lg px-4 py-2.5 shadow-lg flex flex-row gap-2 transition ease-in-out delay-150 hover:scale-110 duration-300">
|
||||
className="text-white font-bold rounded-xl px-4 py-2.5 shadow-lg flex flex-row gap-2 transition ease-in-out delay-150 hover:scale-110 duration-300">
|
||||
|
||||
<i
|
||||
className="text-white"
|
||||
|
|
|
|||
|
|
@ -14,16 +14,11 @@ const Navbar = () => {
|
|||
},
|
||||
{
|
||||
id: 2,
|
||||
text: "Education",
|
||||
link: "education"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: "Projects",
|
||||
link: "projects"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
id: 3,
|
||||
text: "Hobbies",
|
||||
link: "hobbies"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const Photo = ({src, href, alt}: any) => {
|
|||
<div className="grid content-center">
|
||||
<div className={classes}>
|
||||
<Image
|
||||
className="h-auto max-w-full rounded-lg"
|
||||
className="h-auto max-w-full rounded-xl"
|
||||
src={src}
|
||||
width={0}
|
||||
height={0}
|
||||
|
|
@ -35,7 +35,7 @@ const Photo = ({src, href, alt}: any) => {
|
|||
<div className="grid content-center">
|
||||
<div className={classes}>
|
||||
<Image
|
||||
className="h-auto max-w-full rounded-lg"
|
||||
className="h-auto max-w-full rounded-xl"
|
||||
src={src}
|
||||
width={0}
|
||||
height={0}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ const Timeline = () => {
|
|||
<p className="text-sm text-slate-600 dark:text-slate-100">{address}</p>
|
||||
<p className="text-slate-500 dark:text-slate-100">{period}</p>
|
||||
<Image
|
||||
className="h-auto max-w-full rounded-lg"
|
||||
className="h-auto max-w-full rounded-xl"
|
||||
src={image}
|
||||
width={200}
|
||||
height={200}
|
||||
|
|
|
|||
|
|
@ -1,91 +0,0 @@
|
|||
"use client"
|
||||
import Image from 'next/image';
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Link from 'next/link';
|
||||
import Timeline from '../components/Timeline'
|
||||
import Progress from '../components/ProgressBar/ProgressBar';
|
||||
import Photo from '../components/Photo'
|
||||
|
||||
export default function Education() {
|
||||
return (
|
||||
<main>
|
||||
<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">
|
||||
<div className="col-span-3 flex flex-col max-lg:items-center max-sm:items-start">
|
||||
<h2 className="text-5xl font-bold mt-2">Education</h2>
|
||||
<p className="text-base mt-4">
|
||||
I have studied in schools located in Bangkok and Chonburi.
|
||||
I have also completed several <span className='font-bold underline decoration-2 decoration-sky-500'>academic proficiency tests</span> as well as the <Link href="https://ged.com"><span className='font-bold'>General Education Development (GED) Test</span></Link>, a diploma of <span className='font-bold underline decoration-2 decoration-red-500'>high school equivalency</span>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-y-4">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold my-2">Diplomas & Reports</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="col-span-6">
|
||||
<div className="grid grid-cols-2 max-sm:flex max-sm:flex-col gap-6">
|
||||
<div className="col-span-2 flex flex-col gap-2">
|
||||
<span className="text-2xl font-bold">GED Results</span>
|
||||
<div className="col-span-2 grid grid-cols-4 max-sm:flex max-sm:flex-col gap-4">
|
||||
<span className="text-xl">Mathematics: <span className='font-bold underline decoration-2 decoration-sky-500'>176</span>/200</span>
|
||||
<span className="text-xl">Science: <span className='font-bold underline decoration-2 decoration-green-500'>172</span>/200</span>
|
||||
<span className="text-xl">English: <span className='font-bold underline decoration-2 decoration-red-500'>166</span>/200</span>
|
||||
<span className="text-xl">Social Studies: <span className='font-bold underline decoration-2 decoration-orange-500'>180</span>/200</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/diplomas/ged.png" href="https://cloud.winsdominoes.net/s/xSJPxR9oxE5Gtgx" alt="Test of General Development Education - GED Diploma" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-2 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/diplomas/ged-transcript.png" href="#" alt="Certain information has been censored for privacy - GED Transcript" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-6">
|
||||
<div className="grid grid-cols-2 max-sm:flex max-sm:flex-col gap-6">
|
||||
<div className="col-span-2 flex flex-col gap-2">
|
||||
<span className='text-2xl font-bold'>English Proficiency Tests</span>
|
||||
</div>
|
||||
<div className="grid gap-2 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/diplomas/ielts_english_test.png" href="" alt="International English Language Testing System - IELTS" dim="false"></Photo>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-2 content-center">
|
||||
<div>
|
||||
<Photo src="/images/photos/diplomas/graphical-ielts.png" href="#" alt="Graphical View - IELTS" dim="false"></Photo>
|
||||
</div>
|
||||
<div>
|
||||
<Photo src="/images/photos/diplomas/kmitl-tep.png" href="https://cloud.winsdominoes.net/s/ZtWxcEZj56bFXCZ" alt="KMITL Test of English Proficiency (KMITL-TEP)" dim="false"></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">reports</a> by clicking on the images!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 max-lg:flex max-lg:flex-col">
|
||||
<p className="text-3xl font-bold">
|
||||
Past Schools
|
||||
</p>
|
||||
<div className="col-span-4">
|
||||
<Timeline />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -2,6 +2,12 @@
|
|||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
font-family: Cantarell, system-ui, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
border: 3px solid blue;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -241,7 +241,7 @@ export default function Hobbies() {
|
|||
|
||||
<div className='flex flex-row gap-4 justify-center'>
|
||||
<Link href="https://github.com/WinsDominoesOfficial" className="">
|
||||
<button className="bg-[#0866FF] text-white font-bold rounded-lg px-4 py-2.5 shadow-lg flex flex-row gap-2 transition ease-in-out delay-150 hover:scale-110 duration-300">
|
||||
<button className="bg-[#0866FF] text-white font-bold rounded-xl px-4 py-2.5 shadow-lg flex flex-row gap-2 transition ease-in-out delay-150 hover:scale-110 duration-300">
|
||||
<svg fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className='w-7 h-7'>
|
||||
<title>Facebook</title>
|
||||
<path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,9 @@ import Footer from "./components/Footer"
|
|||
import NextNProgress from "nextjs-progressbar"
|
||||
|
||||
import type { Metadata } from 'next';
|
||||
// import { Inter } from 'next/font/google';
|
||||
import './globals.css';
|
||||
import './components.css';
|
||||
|
||||
// const inter = Inter({ subsets: ['latin'] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Thanawin Pattanaphol - ธนาวินทร์ พัฒนผล",
|
||||
description: "A hobbyist full-stack developer, high schooler, enjoyer of 60s-80s music, language nerd, a hobbyist electrician from Thailand.",
|
||||
|
|
|
|||
33
app/page.tsx
33
app/page.tsx
|
|
@ -1,7 +1,6 @@
|
|||
"use client"
|
||||
import Image from 'next/image';
|
||||
import React from "react";
|
||||
import Link from 'next/link';
|
||||
import ContactIcons from './components/ContactIcons';
|
||||
import PhotoGrid from './components/PhotoGrid';
|
||||
import ContactButton from './components/ContactButton';
|
||||
|
|
@ -41,8 +40,7 @@ export default function Home() {
|
|||
|
||||
<div className="col-span-2 grid max-lg:gap-4 max-lg:place-items-center max-sm:place-items-start">
|
||||
<div>
|
||||
<p className="text-5xl font-bold">Thanawin Pattanaphol</p>
|
||||
<p className="text-sm mt-2">ธนาวินทร์ พัฒนผล</p>
|
||||
<p className="text-5xl font-bold">Win Pattanaphol</p>
|
||||
</div>
|
||||
<p className="text-base">A <a className="font-bold underline decoration-2 decoration-indigo-500">hobbyist full-stack developer</a>, undergraduate student, enjoyer of 60s-80s music, language nerd, and a hobbyist electrician.</p>
|
||||
<ContactIcons />
|
||||
|
|
@ -54,7 +52,7 @@ export default function Home() {
|
|||
|
||||
<div className="col-span-3 mt-[-15px] flex flex-col gap-4">
|
||||
<h2 className="text-4xl font-bold">About Me</h2>
|
||||
<div className='text-lg grid grid-cols-4 max-sm:flex max-sm:flex-col'>
|
||||
<div className='text-lg grid grid-cols-3 max-sm:flex max-sm:flex-col'>
|
||||
<div>
|
||||
<span className='font-bold'>Nickname</span>: Win
|
||||
</div>
|
||||
|
|
@ -64,17 +62,14 @@ export default function Home() {
|
|||
<div>
|
||||
<span className='font-bold'>Nationality</span>: Thai 🇹🇭
|
||||
</div>
|
||||
<div>
|
||||
<span className='font-bold'>Religion</span>: Buddhism
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
My main field of work is creating <a className="font-bold">web applications</a>. I specialize in <a className="font-bold underline decoration-2 decoration-indigo-500">backend development</a> with <a className="font-bold">Node.js</a> and <a className="font-bold">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">MySQL / MariaDB</a>.
|
||||
</p>
|
||||
<p>
|
||||
My other field of work is with <a className="font-bold underline decoration-2 decoration-sky-500">server infrastructure</a>. I am currently administering the IT infrastructure (servers, networking, firewalls)
|
||||
at my father's company as well as running my own server setup, also known as a homelab.
|
||||
My other field of work is <a className="font-bold underline decoration-2 decoration-sky-500">server administration</a>. I am running my own self-hosted ecosystem as well as currently administering the IT infrastructure (servers, networking, firewalls)
|
||||
at my father's company.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -95,27 +90,27 @@ export default function Home() {
|
|||
</div>
|
||||
|
||||
<ContactButton
|
||||
platform="github"
|
||||
platform="git"
|
||||
title="Like my work?"
|
||||
description="Check them out on my GitHub!"
|
||||
href="https://github.com/WinsDominoes"
|
||||
username="@WinsDominoes"
|
||||
description="Check them out on my Git instance!"
|
||||
href="https://git.winscloud.net/winsdominoes"
|
||||
username="@winsdominoes"
|
||||
/>
|
||||
|
||||
<ContactButton
|
||||
platform="mastodon"
|
||||
platform="activitypub"
|
||||
title="See more posts?"
|
||||
description="Check updates on my Mastodon!"
|
||||
description="Check updates on my Fediverse!"
|
||||
href="https://fedi.winscloud.net/@winsdominoes"
|
||||
username="@winsdominoes"
|
||||
/>
|
||||
|
||||
<ContactButton
|
||||
platform="discord"
|
||||
platform="matrix"
|
||||
title="Get in touch?"
|
||||
description="Send me a message on Discord!"
|
||||
href="#"
|
||||
username="winsdominoes"
|
||||
description="Send me a message on Matrix!"
|
||||
href="https://matrix.to/#/@winsdominoes:matrix.winscloud.net"
|
||||
username="@winsdominoes"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -239,7 +239,7 @@ export default function Projects() {
|
|||
</div>
|
||||
|
||||
<Link href="https://discord.gg/EJBkV2SUT3" className='place-self-center'>
|
||||
<button className="bg-[#5865F2] text-white font-bold rounded-lg px-4 py-2.5 shadow-lg flex flex-row gap-2 transition ease-in-out delay-150 hover:scale-110 duration-300">
|
||||
<button className="bg-[#5865F2] text-white font-bold rounded-xl px-4 py-2.5 shadow-lg flex flex-row gap-2 transition ease-in-out delay-150 hover:scale-110 duration-300">
|
||||
<svg fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className='w-7 h-7'>
|
||||
<title>Discord</title>
|
||||
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/>
|
||||
|
|
|
|||
Binary file not shown.
Loading…
Reference in New Issue