v11: Everything's in one commit.

daniwasonline · Aug 28, 2022 · d0ea00c · d0ea00c
1 parent 1959d7d
commit d0ea00c
Show file tree

Hide file tree

Showing 65 changed files with 5,183 additions and 762 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/.gitignore b/.gitignore
@@ -2,26 +2,36 @@
 
 # dependencies
 /node_modules
+.yarn/
 /.pnp
 .pnp.js
 
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
 
-config.json
+# vercel
+.vercel
 
-yarn.lock
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/README.md b/README.md
@@ -1,8 +1,34 @@
-# danny.works v10
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-Version 10 of [danny.works](https://www.danny.works). Created with React and Tailwind, based on create-react-app.
+## Getting Started
 
-### How to run this project
-Simply `yarn start` and React's compiler will do all of its' auto-compilation magic for you! It will automatically open a page in your browser to `localhost:3000` and will automatically compile your code on file save.
+First, run the development server:
 
-To create a production-ready build, simply run `yarn build` and React will compile and roll-up all of your code into the `build/` directory.
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/components/Home/SocialLink.jsx b/components/Home/SocialLink.jsx
@@ -0,0 +1,31 @@
+import { Tooltip } from '@mui/material';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Link from "next/link";
+
+export default function SocialLink(props) {
+    return (
+        <>
+            {!props.tooltip ? (
+                <Link href={props.href}>
+                    <a target="_blank" rel="noreferrer noopener" className={`${props.customColour ? "" : "hover:text-gray-300"}${props.className ? " " + props.className : ""} transition ease-in-out duration-500`}>
+                        <FontAwesomeIcon icon={props.icon} />
+                    </a>
+                </Link>
+            ) : (
+                <Link href={props.href}>
+                    <a target="_blank" rel="noreferrer noopener" className={`${props.customColour ? "" : "hover:text-gray-300"}${props.className ? " " + props.className : ""} transition ease-in-out duration-500`}>
+                        <Tooltip title={props.tooltip} componentsProps={{
+                            tooltip: {
+                                sx: {
+                                    bgcolor: props.tooltipColour ? props.tooltipColour : "#7289da"
+                                }
+                            }
+                        }}>
+                            <FontAwesomeIcon icon={props.icon} />
+                        </Tooltip>
+                    </a>
+                </Link>
+            )}
+        </>
+    );
+};
diff --git a/components/Portfolio/Card.jsx b/components/Portfolio/Card.jsx
@@ -0,0 +1,73 @@
+import Image from "next/future/image";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGithub, faGitlab } from "@fortawesome/free-brands-svg-icons";
+import Link from "next/link";
+export default function Card(props) {
+    return (
+        <>
+            <div className="flex flex-row justify-between items-center gap-x-4 gap-y-4">
+                <div className="relative rounded-xl overflow-hidden">
+                    <Link href={props.href || "#"}>
+                        <a target={props.href ? "_blank" : undefined} rel={props.href ? "noreferrer noopener" : undefined}>
+                            <Image src={props.img} width="1920" height="1080" alt={props.title} className="object-cover w-full h-full text-[#92cded] z-0" style={{ backgroundPosition: "center" }} />
+                        </a>
+                    </Link>
+                    <div className="flex flex-col absolute w-full h-[50%] px-4 py-2 sm:py-4 bottom-0 left-0 justify-end items-start text-white text-xs text-left leading-4 rounded-xl z-20 bg-gradient-to-b from-transparent to-cyan-900 bg-opacity-50">
+                        <div className="flex flex-row gap-x-2 items-center">
+                            {
+                                (props.repository?.type === "github" && props.repository?.href) && (
+                                    <Link href={props.repository?.href}>
+                                        <a target="_blank" rel="noreferrer noopener" className="text-lg lg:text-2xl hover:text-gray-300 transition ease-in-out duration-500">
+                                            <FontAwesomeIcon icon={faGithub} />
+                                        </a>
+                                    </Link>
+                                )
+                            }
+                            {
+                                (props.repository?.type === "github" && !props.repository?.href) && (
+                                    <div className="text-lg lg:text-2xl hover:text-gray-300 hover:cursor-not-allowed transition ease-in-out duration-500">
+                                    <FontAwesomeIcon icon={faGithub} />
+                                </div>
+                                )
+                            }
+                            {
+                                (
+                                    (props.repository?.type === "gitlab" && props.repository?.href) && (
+                                        <Link href={props.repository?.href}>
+                                            <a target="_blank" rel="noreferrer noopener" className="text-lg lg:text-2xl text-orange-400 hover:text-orange-500 transition ease-in-out duration-500">
+                                                <FontAwesomeIcon icon={faGitlab} />
+                                            </a>
+                                        </Link>
+                                    )                                    
+                                )
+                            }
+                            {
+                                (
+                                    (props.repository?.type === "gitlab" && !props.repository?.href) && (
+                                        <div className="text-lg lg:text-2xl text-orange-400 hover:text-orange-500 hover:cursor-not-allowed transition ease-in-out duration-500">
+                                            <FontAwesomeIcon icon={faGitlab} />
+                                        </div>
+                                    )                                    
+                                )
+                            }
+                            <Link href={props.href || "#"}>
+                                <a target={props.href ? "_blank" : undefined} rel={props.href ? "noreferrer noopener" : undefined} className="font-AegixHeader text-sm lg:text-2xl text-left font-bold">
+                                    {props.title}
+                                </a>
+                            </Link>
+                        </div>
+                        {
+                                props.description && (
+                                    <>
+                                        <p className="hidden lg:inline-block font-AegixText text-md text-left font-normal">
+                                            {props.description}
+                                        </p>
+                                    </>
+                                )
+                        }
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
diff --git a/components/Root/Body.jsx b/components/Root/Body.jsx
@@ -0,0 +1,7 @@
+export default function Body(props) {
+    return (
+        <div className="sm:px-24 py-4 justify-center">
+            {props.children}
+        </div>
+    );
+};
diff --git a/components/Root/Head.jsx b/components/Root/Head.jsx
@@ -0,0 +1,97 @@
+import NextHead from 'next/head';
+import Image from "next/future/image";
+import Link from 'next/link';
+import { useEffect, useState } from "react";
+import { useRouter } from 'next/router';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
+
+const routes = [
+    { path: '/', title: 'Home' },
+    { path: '/about', title: 'About' },
+    { path: '/portfolio', title: 'Portfolio' },
+];
+
+export default function Head() {
+    const router = useRouter();
+    const [disabledNav, setDisabledNav] = useState(false);
+
+    useEffect(() => {
+        if (router.pathname === '/_error') {
+            setDisabledNav(true);
+        } else {
+            setDisabledNav(false);
+        }
+    }, [router.pathname]);
+
+    return (
+        <>
+            <NextHead>
+                <title>Danny</title>
+            </NextHead>
+            <div className="py-6 sm:py-12">
+                <div className="flex flex-col sm:flex-row py-4 rounded-2xl justify-center items-center gap-y-4 sm:justify-evenly">
+                    <Link href="/">
+                        <a className="flex flex-row items-center gap-x-4 px-4 py-2 rounded-xl">
+                            <Image alt="Avatar" className="w-10 rounded-full" height="64" width="64" src="/coffeedog.png" />
+                            <div className="flex flex-col gap-x-2">
+                                <h1 className="font-AegixHeader text-gray-100 font-bold text-xl">Hydro</h1>
+                            </div>
+                        </a>
+                    </Link>
+                    <div className="flex flex-row items-center gap-x-4 px-4 py-2 rounded-xl">
+                        {
+                            routes.map(({ path, title }) => (
+                                <div key={path}>
+                                    {
+                                        disabledNav ? (
+                                            <>
+                                                {
+                                                    path === "/" ? (
+                                                        <Link href="/">
+                                                            <a className={`
+                                                                ${router.pathname === path ? 'bg-slate-800' : 'hover:bg-slate-700'} 
+                                                                ${router.pathname === "/_error" ? "bg-slate-900 hover:bg-slate-800" : ""} 
+                                                                text-gray-100 font-AegixHeader font-bold text-lg px-4 py-2 rounded-xl
+                                                                transition ease-in-out duration-500
+                                                                hidden sm:flex flex-row items-center gap-x-2
+                                                            `}>
+                                                                <FontAwesomeIcon icon={faArrowLeft} />
+                                                                Back
+                                                            </a>
+                                                        </Link>
+                                                    ) : (
+                                                        <button className={`
+                                                            ${router.pathname === path ? 'bg-slate-800' : 'hover:bg-slate-800'} 
+                                                            ${router.pathname === "/_error" ? "hover:bg-slate-900" : ""} 
+                                                            text-gray-100 font-AegixHeader font-bold text-lg px-4 py-2 rounded-xl
+                                                            transition ease-in-out duration-500 disabled:cursor-not-allowed
+                                                            hidden
+                                                        `} disabled>
+                                                            {title}
+                                                        </button>
+                                                    )
+                                                }
+                                            </>
+                                        ) : (
+                                            <Link href={path}>
+                                                <a className={`
+                                                    ${router.pathname === path ? 'bg-slate-800' : 'hover:bg-slate-800'} 
+                                                    ${router.pathname === "/_error" ? "hover:bg-slate-900" : ""} 
+                                                    text-gray-100 font-AegixHeader font-bold text-lg px-4 py-2 rounded-xl
+                                                    transition ease-in-out duration-500
+                                                `}>
+                                                    {title}
+                                                </a>
+                                            </Link>
+                                        )
+                                    }
+                                </div>
+                            ))
+                        }
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
diff --git a/lib/projects.js b/lib/projects.js
@@ -0,0 +1,56 @@
+const opensource = [
+    {
+        title: "nextShare",
+        description: "An open-source screenshot webserver. Written in Next.js, built as the basis for hydride.space.",
+        img: "/portfolio/nextShare.png",
+        href: "https://github.com/hydrabank/nextShare",
+        repository: {
+            type: "github",
+            href: "https://github.com/hydrabank/nextShare"
+        }
+    },
+    {
+        title: "Songfish",
+        description: "A music bot for Discord. Open source with an invite-only public instance.",
+        img: "/portfolio/songfish.png",
+        href: "https://github.com/hydrabank/songfish",
+        repository: {
+            type: "github",
+            href: "https://github.com/hydrabank/songfish"
+        }
+    }
+];
+
+const closedsource = [
+    {
+        title: "Hydrabank",
+        description: "We can help you turn your idea into a reality.",
+        img: "/portfolio/hydrabank.png",
+        href: "https://hydrabank.systems",
+        repository: {
+            type: "github",
+            href: "https://github.com/hydrabank"
+        }
+    },
+    {
+        title: "hydride.space",
+        description: "An invite-only file upload service, built on top of nextShare.",
+        img: "/portfolio/hydride.png",
+        href: "https://hydride.space",
+        repository: {
+            type: "github",
+
+        }
+    },
+    {
+        title: "shooken.live",
+        description: "An old commission site that I did for one of my clients. Built with React and pure CSS.",
+        img: "/portfolio/shooken.live.png",
+        href: "https://shooken.live",
+        repository: {
+            type: "gitlab",
+        }
+    }
+];
+
+export { opensource, closedsource };
diff --git a/lib/publicEnv.js b/lib/publicEnv.js
@@ -0,0 +1,25 @@
+const env = {
+    api: "https://api.danny.works",
+    discordColourMap: {
+        online: {
+            default: "text-green-300",
+            hover: "online-hover"
+        },
+        idle: {
+            default: "text-yellow-300",
+            hover: "idle-hover"
+        },
+        dnd: {
+            default: "text-red-400",
+            hover: "dnd-hover"
+        }
+    },
+    discordStatusFriendlyMap: {
+        online: "online",
+        idle: "idle",
+        dnd: "in Do Not Disturb mode",
+        offline: "offline"
+    },
+};
+
+export default env;