New first draft

Author: Shane Williams

.env.example

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

jsconfig.json

@@ -1,5 +1,5 @@
 {
-  "name": "shawilly.dev",
+  "name": "chantalwilliams",
   "version": "0.1.0",
   "private": true,
   "type": "module",
@@ -15,16 +15,20 @@
     "start": "next start"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.5",
     "@prisma/client": "^5.14.0",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@tanstack/react-query": "^5.39.0",
     "@trpc/client": "next",
     "@trpc/react-query": "next",
     "@trpc/server": "next",
+    "framer-motion": "^11.3.2",
     "geist": "^1.3.0",
     "next": "^14.2.1",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
+    "react-icons": "^5.2.1",
+    "react-type-animation": "^3.2.0",
     "server-only": "^0.0.1",
     "superjson": "^2.2.1",
     "zod": "^3.23.3"

package-lock.json

@@ -0,0 +1,30 @@
+import { PicNic } from "@/fonts";
+import Link from "next/link";
+import { VscGithub } from "react-icons/vsc";
+
+const Footer = (): JSX.Element => {
+  return (
+    <footer className="footer z-10 border border-l-transparent border-r-transparent border-t-[#33353F] text-slate-600">
+      <div className="container flex items-center justify-between gap-4 p-12">
+        <div className="flex items-center gap-4">
+          <Link
+            href="https://shawilly.dev"
+            className="flex transform items-center transition-transform hover:scale-110 hover:text-pgreen"
+            target="_blank"
+          >
+            <p className="mr-1">
+              crafted by{"   "}
+              <span className={`${PicNic.className} mr-1 text-2xl`}>
+                shawilly
+              </span>
+            </p>
+            <VscGithub className="md-block hidden" size="1rem" />
+          </Link>
+        </div>
+        Copyright © All rights reserved.
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

package.json

@@ -0,0 +1,14 @@
+"use client";
+import { TypeAnimation } from "react-type-animation";
+
+export const IntroTyped = (): JSX.Element => {
+  return (
+    <TypeAnimation
+      sequence={[
+        "Chantal Williams is an animator specializing in 2D animation with over 5 years of experience, focusing on various styles and team training.",
+      ]}
+      wrapper="span"
+      cursor={true}
+    />
+  );
+};

public/Email200.png

@@ -0,0 +1,25 @@
+"use client";
+import { kablammo } from "@/fonts";
+import { motion } from "framer-motion";
+import { useRef } from "react";
+
+const Logo = (): JSX.Element => {
+  const constraintsRef = useRef(null);
+
+  return (
+    <>
+      <motion.div className="drag-area" ref={constraintsRef} />
+      <motion.div
+        drag
+        dragConstraints={constraintsRef}
+        className={`${kablammo.className} w-max-full h-max-[200px] z-50 flex flex-col items-start justify-start text-start font-black leading-[60px] transition-transform [font-size:_clamp(2.5em,5vw,4rem)]`}
+      >
+        Chantal
+        <br />
+        Williams
+      </motion.div>
+    </>
+  );
+};
+
+export default Logo;

public/Instagram200.png

@@ -0,0 +1,49 @@
+import { rubik300, rubik500 } from "@/fonts";
+import Link from "next/link";
+import { IntroTyped } from "./intro-typed";
+import Logo from "./logo";
+import Socials from "./socials";
+
+const Navbar = (): JSX.Element => {
+  return (
+    <div
+      className={`${rubik500.className} fixed left-0 top-0 float-left mr-[2%] grid h-full max-w-[500px] grid-rows-5 overflow-auto py-[4%] pl-[5%] pr-[3%]`}
+    >
+      <Logo />
+      <div className="pb-[60px] pr-[40px]">
+        <span className={`${rubik300.className} text-md my-12`}>
+          <IntroTyped />
+        </span>
+        <div className="mt-12 flex flex-grow flex-col items-start gap-8 pb-[60px] text-xl text-slate-700">
+          <Link
+            href="/"
+            className="transform transition-transform hover:scale-110 hover:text-porange"
+          >
+            Home
+          </Link>
+          <Link
+            href="/animation"
+            className="transform transition-transform hover:scale-110 hover:text-pyellow"
+          >
+            Animation
+          </Link>
+          <Link
+            href="/personal-work"
+            className="transform transition-transform hover:scale-110 hover:text-ppurple"
+          >
+            Personal Work
+          </Link>
+          <Link
+            href="/about"
+            className="transform transition-transform hover:scale-110 hover:text-pgreen"
+          >
+            Contact
+          </Link>
+        </div>
+        <Socials />
+      </div>
+    </div>
+  );
+};
+
+export default Navbar;

public/LinkedIn200.png

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { FaLinkedin, FaTwitch } from "react-icons/fa";
+import { TiSocialInstagram } from "react-icons/ti";
+
+export enum SOCIALS {
+  TWITCH = "https://www.twitch.tv/chantooladreams",
+  INSTAGRAM = "https://www.instagram.com/chantooladreams/",
+  CARA_APP = "https://cara.app/chantooladreams",
+  LINKEDIN = "https://ie.linkedin.com/in/chantoola-williams",
+}
+
+export const SocialIcons = {
+  [SOCIALS.CARA_APP]: () => (
+    <span className="text-2xl font-bold">
+      {" "}
+      <span className="underline">C</span>ara{" "}
+    </span>
+  ),
+  [SOCIALS.LINKEDIN]: () => <FaLinkedin size="2rem" />,
+  [SOCIALS.TWITCH]: () => <FaTwitch size="2rem" />,
+  [SOCIALS.INSTAGRAM]: () => <TiSocialInstagram size="2rem" />,
+} as const;
+
+const Socials = (): JSX.Element => {
+  return (
+    <div className="flex flex-row justify-start gap-9">
+      {Object.values(SOCIALS).map((social: SOCIALS) => (
+        <Link
+          key={social}
+          href={social}
+          className="transform transition-transform hover:scale-110 hover:text-pblue300"
+          target="_blank"
+        >
+          {SocialIcons[social]()}
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default Socials;

public/YouTube200.png

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}

public/favicon.ico

@@ -1,12 +1,10 @@
 import "@/styles/globals.css";
-
-import { GeistSans } from "geist/font/sans";
-
 import { TRPCReactProvider } from "@/trpc/react";
+import { GeistSans } from "geist/font/sans";
 
 export const metadata = {
-  title: "Create T3 App",
-  description: "Generated by create-t3-app",
+  title: "Chantal Williams",
+  description: "animator",
   icons: [{ rel: "icon", url: "/favicon.ico" }],
 };
 

public/github-icon.svg

@@ -1,65 +1,20 @@
-import Link from "next/link";
-
-import { CreatePost } from "@/app/_components/create-post";
-import { api } from "@/trpc/server";
+import Footer from "./_components/footer";
+import NavBar from "./_components/navbar";
 
 export default async function Home() {
-  const hello = await api.post.hello({ text: "from tRPC" });
-
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
-      <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
-        <h1 className="text-5xl font-extrabold tracking-tight sm:text-[5rem]">
-          Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
-        </h1>
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
-          <Link
-            className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
-            href="https://create.t3.gg/en/usage/first-steps"
-            target="_blank"
-          >
-            <h3 className="text-2xl font-bold">First Steps →</h3>
-            <div className="text-lg">
-              Just the basics - Everything you need to know to set up your
-              database and authentication.
-            </div>
-          </Link>
-          <Link
-            className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
-            href="https://create.t3.gg/en/introduction"
-            target="_blank"
-          >
-            <h3 className="text-2xl font-bold">Documentation →</h3>
-            <div className="text-lg">
-              Learn more about Create T3 App, the libraries it uses, and how to
-              deploy it.
-            </div>
-          </Link>
+    <main className="min-w-screen  grid min-h-screen grid-rows-8 items-center justify-center bg-gray-50 text-poff_black">
+      <div className="row-span-7  grid w-screen grid-flow-row-dense grid-cols-5 xl:grid-cols-3 2xl:grid-cols-8">
+        <div className="w-max-[500px] col-span-2 hidden lg:block xl:col-span-1 2xl:col-span-2">
+          <NavBar />
         </div>
-        <div className="flex flex-col items-center gap-2">
-          <p className="text-2xl text-white">
-            {hello ? hello.greeting : "Loading tRPC query..."}
-          </p>
+        <div className="col-span-5 h-[100%] w-[100%] bg-red-200 lg:col-span-3 xl:col-span-2 2xl:col-span-6">
+          hello
         </div>
-
-        <CrudShowcase />
+      </div>
+      <div className="row-span-1 mt-4 flex justify-around">
+        <Footer />
       </div>
     </main>
   );
 }
-
-async function CrudShowcase() {
-  const latestPost = await api.post.getLatest();
-
-  return (
-    <div className="w-full max-w-xs">
-      {latestPost ? (
-        <p className="truncate">Your most recent post: {latestPost.name}</p>
-      ) : (
-        <p>You have no posts yet.</p>
-      )}
-
-      <CreatePost />
-    </div>
-  );
-}

public/images/about-image.png

@@ -0,0 +1,3 @@
+export function capitalizeFirstLetter(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}