diff --git a/app/components/ContactButton.tsx b/app/components/ContactButton.tsx new file mode 100644 index 0000000..64cd3b8 --- /dev/null +++ b/app/components/ContactButton.tsx @@ -0,0 +1,79 @@ +import Link from "next/link"; +import Image from "next/image"; +import React from "react"; +import * as icons from 'simple-icons'; + +interface ContactButtonProps { + platform: string; + title: string; + description: string; + href: string; + username: string; +} + +const ContactButton: React.FC = ({platform, title, description, href, username}) => { + + let buttonColor; + let iconFile; + + switch (platform.toLowerCase()) { + case 'mastodon': + buttonColor = "#6364FF"; + iconFile = icons.siMastodon.svg; + break; + case 'github': + buttonColor = "#181717"; + iconFile = icons.siGithub.svg; + break; + case 'discord': + buttonColor = "#5865F2"; + iconFile = icons.siDiscord.svg; + break; + case 'facebook': + buttonColor = "#0866FF"; + iconFile = icons.siFacebook.svg; + break; + default: + buttonColor = ""; + iconFile = ""; + break; + } + + return ( +
+
+

{ title }

+

+ { description } +

+
+ +
+ + + +
+
+ ); +}; + +export default ContactButton; \ No newline at end of file diff --git a/app/components/Photo.tsx b/app/components/Photo.tsx index eb0b1a6..6e23fd8 100755 --- a/app/components/Photo.tsx +++ b/app/components/Photo.tsx @@ -3,14 +3,8 @@ import Image from 'next/image'; import Link from 'next/link'; import React from "react"; -const Photo = ({src, href, alt, dim}: any) => { +const Photo = ({src, href, alt}: any) => { let classes = "transition ease-in-out delay-150 hover:scale-105 duration-300"; - - /** if(!dim || dim == "true") { - classes = "transition ease-in-out delay-150 opacity-75 hover:opacity-100 hover:scale-105 duration-300" - } else if (dim == "false") { - classes = "transition ease-in-out delay-150 hover:scale-105 duration-300" - } **/ if(!href || href == "#") { return ( diff --git a/app/components/PhotoGrid.tsx b/app/components/PhotoGrid.tsx new file mode 100644 index 0000000..ca90493 --- /dev/null +++ b/app/components/PhotoGrid.tsx @@ -0,0 +1,27 @@ +// components/SmallImageGrid.tsx + +import React from 'react'; +import Photo from './Photo'; +import { ImageItem } from '../types'; + +type PhotoGridProps = { + images: ImageItem[][]; +}; + +const PhotoGrid: React.FC = ({ images }) => { + return ( +
+ {images.map((item: ImageItem[], index: number) => ( +
+ {item.map((image: ImageItem, idx: number) => ( +
+ +
+ ))} +
+ ))} +
+ ); +}; + +export default PhotoGrid; diff --git a/app/page.tsx b/app/page.tsx index dd4686d..4bc55ca 100755 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,9 +1,28 @@ "use client" import Image from 'next/image'; import React from "react"; -import Photo from './components/Photo' -import ContactIcons from './components/ContactIcons'; import Link from 'next/link'; +import ContactIcons from './components/ContactIcons'; +import PhotoGrid from './components/PhotoGrid'; +import ContactButton from './components/ContactButton'; + +const frontImages = [ + [ + { src: '/images/photos/iot/raspberrypi.jpg', href: '/projects', alt: 'Raspberry Pi' }, + ], + [ + { src: '/images/photos/company/main-server-rack/20231221_151039.jpg', href: '/projects', alt: 'Office Main Rack' }, + { src: '/images/photos/hardware/homelab.jpg', href: '/projects', alt: 'Homelab' }, + ], + [ + { src: '/images/photos/robotics/robot.jpg', href: '/projects', alt: 'LEGO League'}, + { src: '/images/photos/cosplay/tasm-2-spider-man-2.jpg', href: '/hobbies', alt: 'Spider-Man 2 PS5 Event'} + ], + [ + { src: '/images/photos/hardware/hdd.jpg', href: '/projects', alt: 'Storage Server'} + ] + +]; export default function Home() { return ( @@ -33,9 +52,9 @@ export default function Home() { "I don't want to make a PDF, I'll code one instead." -
+

About Me

-
+
Nickname: Win
@@ -49,11 +68,11 @@ export default function Home() { Religion: Buddhism
-

+

My main field of work is creating web applications. I specialize in backend development with Node.js and PHP, as well as working with relational databases, such as MySQL / MariaDB.

-

+

My other field of work is with server infrastructure. 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.

@@ -61,70 +80,7 @@ export default function Home() {
-
-
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
-
- -
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
- -
- -
-
-
+

View my projects and hobbies by clicking on the images!

@@ -138,74 +94,29 @@ export default function Home() {

-
-
-

- Like my work? -

-

- Check them out on my GitHub! -

-
+ -
- - - -
-
+ -
-
-

- See more posts? -

-

- Check updates on my Mastodon! -

-
- -
- - - -
-
- -
-
-

- Get in touch? -

-

- Send me a message on Discord! -

-
- -
- - - -
-
+
diff --git a/app/types.tsx b/app/types.tsx new file mode 100644 index 0000000..541f483 --- /dev/null +++ b/app/types.tsx @@ -0,0 +1,13 @@ +export type ImageItem = { + src: string; + href: string; + alt: string; +}; + +export type ContactButtonsItem = { + platform: string; + title: string; + description: string; + href: string; + username: string; +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index ce957cf..210e2c1 100755 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,8 @@ "react": "^18", "react-dom": "^18", "react-icons": "^4.12.0", - "react-odometerjs": "^3.1.0" + "react-odometerjs": "^3.1.0", + "simple-icons": "^10.3.0" }, "devDependencies": { "@types/node": "^20", @@ -5775,6 +5776,18 @@ "simple-concat": "^1.0.0" } }, + "node_modules/simple-icons": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-10.3.0.tgz", + "integrity": "sha512-MpqALzcKXPNfVKiNkESkahmXIt0tTVnTOZAhD6q4MmL3XUroaKwy8stPwXZOfK1WoT6jqpjUfc0nopPePZvY7w==", + "engines": { + "node": ">=0.12.18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/simple-icons" + } + }, "node_modules/simple-swizzle": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", diff --git a/package.json b/package.json index 4dd0d4a..5ecf32b 100755 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ "react": "^18", "react-dom": "^18", "react-icons": "^4.12.0", - "react-odometerjs": "^3.1.0" + "react-odometerjs": "^3.1.0", + "simple-icons": "^10.3.0" }, "devDependencies": { "@types/node": "^20", diff --git a/public/icons/discord.svg b/public/icons/discord.svg new file mode 100755 index 0000000..9d7796b --- /dev/null +++ b/public/icons/discord.svg @@ -0,0 +1 @@ +Discord \ No newline at end of file diff --git a/public/icons/facebook.svg b/public/icons/facebook.svg new file mode 100755 index 0000000..f66767e --- /dev/null +++ b/public/icons/facebook.svg @@ -0,0 +1 @@ +Facebook \ No newline at end of file diff --git a/public/icons/github.svg b/public/icons/github.svg new file mode 100755 index 0000000..538ec5b --- /dev/null +++ b/public/icons/github.svg @@ -0,0 +1 @@ +GitHub \ No newline at end of file diff --git a/public/icons/mastodon.svg b/public/icons/mastodon.svg new file mode 100755 index 0000000..5e3b7e1 --- /dev/null +++ b/public/icons/mastodon.svg @@ -0,0 +1 @@ +Mastodon \ No newline at end of file