aboutsummaryrefslogtreecommitdiff
path: root/source/about/src
diff options
context:
space:
mode:
Diffstat (limited to 'source/about/src')
-rw-r--r--source/about/src/app/globals.css101
-rw-r--r--source/about/src/app/layout.js39
-rw-r--r--source/about/src/app/mentoring/page.js64
-rw-r--r--source/about/src/app/page.js179
4 files changed, 383 insertions, 0 deletions
diff --git a/source/about/src/app/globals.css b/source/about/src/app/globals.css
new file mode 100644
index 0000000..404fef7
--- /dev/null
+++ b/source/about/src/app/globals.css
@@ -0,0 +1,101 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* set default font */
+html {
+ font-family: "Monaspace Neon";
+ font-feature-settings: "calt", "ss01", "ss02", "ss03", "ss04", "ss05", "ss06",
+ "ss07", "ss08", "ss09", "liga";
+}
+
+/* hide scrollbar */
+::-webkit-scrollbar {
+ display: none;
+}
+
+/* make text pan :3 */
+pan {
+ background: linear-gradient(
+ 45deg,
+ #ff1b8d 33%,
+ #ffd800 33%,
+ #ffd800 66%,
+ #21b1ff 66%
+ );
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+/* RAVE!!! */
+.rave {
+ background: red;
+ animation: raveBackgroundAnimation 1s linear infinite;
+}
+
+@keyframes raveBackgroundAnimation {
+ 0% {
+ background-color: red;
+ }
+ 16.666% {
+ background-color: orange;
+ }
+ 33.333% {
+ background-color: yellow;
+ }
+ 50% {
+ background-color: green;
+ }
+ 66.666% {
+ background-color: blue;
+ }
+ 83.333% {
+ background-color: indigo;
+ }
+ 100% {
+ background-color: violet;
+ }
+}
+
+.rave > * {
+ background: black;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ animation: raveBackgroundTextAnimation 1s linear infinite;
+}
+
+@keyframes raveBackgroundTextAnimation {
+ 0% {
+ background-color: black;
+ }
+ 16.666% {
+ background-color: black;
+ }
+ 33.333% {
+ background-color: black;
+ }
+ 50% {
+ background-color: white;
+ }
+ 66.666% {
+ background-color: white;
+ }
+ 83.333% {
+ background-color: white;
+ }
+ 100% {
+ background-color: black;
+ }
+}
+
+/* page fade in */
+body {
+ opacity: 0;
+ animation: fadeIn 1s ease-in-out forwards;
+}
+
+@keyframes fadeIn {
+ to {
+ opacity: 1;
+ }
+}
diff --git a/source/about/src/app/layout.js b/source/about/src/app/layout.js
new file mode 100644
index 0000000..532ed42
--- /dev/null
+++ b/source/about/src/app/layout.js
@@ -0,0 +1,39 @@
+// get those fonts!
+import "@fontsource/monaspace-neon";
+import "@fontsource/monaspace-krypton";
+import "@fontsource/monaspace-radon";
+import "@fontsource/monaspace-argon";
+import "@fontsource/monaspace-xenon";
+
+// always import global styles last
+import "./globals.css";
+
+import Script from "next/script";
+
+export const metadata = {
+ title: "zuedev's space",
+ description: "Hello, World! I'm zuedev.",
+ icons: {
+ icon: "/avatar.png",
+ },
+};
+
+export const viewport = {
+ width: "device-width",
+ initialScale: 1,
+ maximumScale: 1,
+ userScalable: false,
+};
+
+export default ({ children }) => {
+ return (
+ <html lang="en" className="bg-black text-white">
+ <body>
+ <header></header>
+ <main>{children}</main>
+ <footer></footer>
+ <Script src="/tabAnimation.js" />
+ </body>
+ </html>
+ );
+};
diff --git a/source/about/src/app/mentoring/page.js b/source/about/src/app/mentoring/page.js
new file mode 100644
index 0000000..1a7e265
--- /dev/null
+++ b/source/about/src/app/mentoring/page.js
@@ -0,0 +1,64 @@
+"use client";
+
+export default () => {
+ return (
+ <>
+ <div className="p-4 text-2xl space-y-4">
+ <section className="text-6xl font-bold">
+ <h1>What can I teach you?</h1>
+ </section>
+
+ <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+ {[
+ // {
+ // title: "Basics of X language",
+ // description:
+ // "From JavaScript to Python, I can help you get started with the basics of a language.",
+ // classes: "bg-gradient-to-r from-cyan-500 to-blue-500",
+ // bgImage: "https://placehold.co/500/lime/white",
+ // url: "/mentoring/basics",
+ // },
+ // {
+ // title: "Basics of X language",
+ // description:
+ // "From JavaScript to Python, I can help you get started with the basics of a language.",
+ // classes: "bg-gradient-to-br from-blue-500 to-cyan-500",
+ // url: "/mentoring/basics",
+ // },
+ {
+ title: "Web Basics",
+ description:
+ "Learn HTML, CSS & JavaScript to Create Stunning Websites!",
+ classes: "bg-gradient-to-br from-blue-500 to-cyan-500 text-black",
+ bgImage:
+ "https://public-files.gumroad.com/xocc3smd5lmeq7ahiz1o8pggx9z4",
+ url: "https://zuedev.gumroad.com/l/web-basics?layout=profile",
+ },
+ {
+ title: "Python Fundamentals",
+ description:
+ "Master the Basics of Python & Kickstart Your Coding Journey!",
+ classes: "bg-gradient-to-br from-blue-500 to-cyan-500 text-black",
+ bgImage:
+ "https://public-files.gumroad.com/jjfjnqk9jqfdqidfmzyfqnaht1d2",
+ url: "https://zuedev.gumroad.com/l/python-fundamentals?layout=profile",
+ },
+ ].map((item) => (
+ <a
+ key={item.title}
+ href={item.url}
+ className={`p-4 space-y-4 bg-cover bg-center flex flex-col justify-center items-centertransition-transform transform hover:scale-105 ${item.classes}`}
+ style={{
+ backgroundImage: item.bgImage ? `url(${item.bgImage})` : "",
+ }}
+ target="_blank"
+ >
+ <h2 className="text-4xl font-bold">{item.title}</h2>
+ <p className="text-lg">{item.description}</p>
+ </a>
+ ))}
+ </div>
+ </div>
+ </>
+ );
+};
diff --git a/source/about/src/app/page.js b/source/about/src/app/page.js
new file mode 100644
index 0000000..435918a
--- /dev/null
+++ b/source/about/src/app/page.js
@@ -0,0 +1,179 @@
+export default () => {
+ const yearsAsEngineer = new Date().getFullYear() - 2012;
+
+ return (
+ <>
+ <div className="space-y-8 p-4 text-2xl">
+ <section className="text-8xl font-bold">
+ <h1>
+ Hello, World!
+ <br />
+ I'm <pan>zuedev</pan>.
+ </h1>
+ </section>
+ <section className="border-4 border-white">
+ <h2 className="text-6xl font-bold bg-white text-black p-2">
+ Who am I? ✨
+ </h2>
+
+ <div className="space-y-4 p-4 text-justify">
+ <div className="space-y-2">
+ <h3 className="text-4xl font-bold">Formally...</h3>
+ <p>
+ I'm a software engineer and entrepreneur from the UK who thrives
+ on building things that help and entertain people.
+ </p>
+ <p>
+ If you want to learn more about me, check out my{" "}
+ <a
+ className="underline decoration-wavy text-yellow-300"
+ href="https://zue.dev/resume"
+ target="_blank"
+ >
+ resume
+ </a>
+ . In short:
+ </p>
+ <ul className="pl-4 list-disc list-inside">
+ <li>
+ Software engineer (full-stack) for more than {yearsAsEngineer}{" "}
+ years;
+ </li>
+ <li>Trusted with leadership for 9 of those years;</li>
+ <li>
+ Director of a{" "}
+ <a
+ className="underline decoration-wavy text-cyan-300"
+ href="https://unnamed.group"
+ target="_blank"
+ >
+ non-profit
+ </a>{" "}
+ since 2016;
+ </li>
+ <li>
+ Programming polyglot (JavaScript, Python, C#, and more);
+ </li>
+ <li>
+ Running Linux (Arch), Windows, and macOS on a daily basis;
+ </li>
+ <li>Been living in the Unreal Engine for ~4 years;</li>
+ <li>
+ Started{" "}
+ <a
+ className="underline decoration-wavy text-green-400"
+ href="https://zuedev.gumroad.com"
+ >
+ mentoring
+ </a>{" "}
+ the next generation of developers in 2021;
+ </li>
+ </ul>
+ </div>
+
+ <div className="space-y-2">
+ <h3 className="text-4xl font-bold">Informally...</h3>
+ <p>
+ I'm an{" "}
+ <a
+ className="underline decoration-wavy text-purple-400"
+ href="https://zue.dev/steam"
+ target="_blank"
+ >
+ avid gamer
+ </a>{" "}
+ and a hobbyist musician in my spare time. On the weekends I can
+ usually be found DM'ing games such as Dungeons & Dragons and
+ Cyberpunk RED with my friends. I'm nearly always listening to
+ music and programming something, probably working on my latest
+ game or open-source project.
+ </p>
+ </div>
+ </div>
+ </section>
+ <section className="p-4 space-y-4 border-4 bg-white text-black border-white">
+ <h2 className="text-6xl font-bold">What am I up to? 💼</h2>
+
+ <div className="text-justify space-y-4">
+ <p>
+ I'm always working on something... There's not enough time in the
+ day to do everything I want to do! Here's a few things I'm
+ currently working on:
+ </p>
+
+ <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
+ {[
+ {
+ title: "For Money 💵",
+ description: (
+ <>
+ Money makes the world go round, unfortunately... That's
+ why I founded and run both{" "}
+ <a
+ className="underline decoration-wavy text-yellow-300"
+ href="https://t1.zue.dev"
+ target="_blank"
+ >
+ Termina One
+ </a>{" "}
+ and{" "}
+ <a
+ className="underline decoration-wavy text-green-400"
+ href="https://96.zue.dev"
+ target="_blank"
+ >
+ Area96 Digital
+ </a>{" "}
+ to help build capital for my other projects.
+ </>
+ ),
+ },
+ {
+ title: "For Fun 🎉",
+ description: (
+ <>
+ What don't I do? I have a backlog of games to play, music
+ to make, and projects to work on. Right now, I'm trying to
+ get back into making mods for{" "}
+ <a
+ className="underline decoration-wavy text-red-500"
+ href="https://minecraft.net"
+ target="_blank"
+ >
+ Minecraft
+ </a>
+ .
+ </>
+ ),
+ },
+ {
+ title: "For Charity ❤️",
+ description: (
+ <>
+ I'm currently working on directing a non-profit project
+ called{" "}
+ <a
+ className="underline decoration-wavy text-pink-400"
+ href="https://unnamed.group"
+ target="_blank"
+ >
+ Unnamed Group
+ </a>{" "}
+ to help support people online who are looking for a safe
+ space to play games and socialise.
+ </>
+ ),
+ },
+ ].map((item, index) => (
+ <div key={index} className="p-4 space-y-2 bg-black text-white">
+ <h3 className="text-4xl font-bold">{item.title}</h3>
+ <p>{item.description}</p>
+ </div>
+ ))}
+ </div>
+ </div>
+ </section>
+ </div>
+ </>
+ );
+};
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-21 20:40:34 +0000