app/page.tsx

import Work from "@/components/work";

const summary = `
  I'm a 20, going on 21, year old developer who's been programming since I was 11. I started with Python and have since taken my skills to both NodeJS and Rust.
  I'm eager to make your acquaintance and put my skills to use in a collaborative environment.
`

export default function Home() {
  return (
    <main className={`flex min-h-screen ${process.env.PRODUCTION ? "w-full lg:w-1/2" : "w-full"} flex-col items-center p-2 w-full`}>
      <div id="info" className="grid grid-cols-3 grid-rows-1 h-fit gap-2 my-2 justify-between w-full">
        <div className="flex flex-col text-sm">
          <h1 className="text-sm">Delaware, USA</h1>
          <a href="mailto:coded@clicks.codes"><p>coded@clicks.codes</p></a>
        </div>
        <h1 className="text-2xl">Samuel Shuert</h1>
        <div className="flex flex-col text-sm text-right">
          <a href="https://linkedin.com/in/samuelshuert"><p className="underline">linkedin.com/in/samuelshuert</p></a>
          <a href="https://github.com/TheCodedProf"><p className="underline">github.com/TheCodedProf</p></a>
          <a href="https://git.clicks.codes/q/owner:coded"><p className="underline">git.clicks.codes/q/owner:coded</p></a>
          <a href="https://app.codecrafters.io/users/TheCodedProf"><p className="underline">app.codecrafters.io/users/TheCodedProf</p></a>
        </div>
      </div>

      <h1 className="self-start text-xl">Summary</h1>
      <hr className="w-full border-t border-t-black mb-2"/>

      <p className="text-sm mb-8 pl-4 text-left w-full">
        {summary}
      </p>

      <h1 className="self-start text-xl">Work Experience</h1>
      <hr className="w-full border-t border-t-black"/>

      <div id="experience" className="flex flex-col h-fit gap-8 my-2 w-full mb-16">

        <Work jobTitle={"Developer"} area={"Infrastructure"} projectName={"Clicks Nix"} dateFrom={"Aug 2022"} dateTo={"Current"} obsolete={false} >
          <li>
            Nix configuration for Clicks servers.
          </li>
          <li>
            Responsible for general mainenance and major updates, depends on current needs.
          </li>
          <li>
            Written in Nix
          </li>
        </Work>

        <Work jobTitle={"Developer"} area={"Backend"} projectName={"Nucleus"} dateFrom={"Sep 2020"} dateTo={"Sep 2023"} obsolete={false}>
          <li>Nucleus (Feb 2023 - Sep 2023)</li>
          <ul className="ml-8 mt-2 list-disc text-sm mb-4">
            <li>
              Discord moderation bot. Rewritten with TypeScript.
            </li>
            <li>
              I was responsible for database read/write and slash command registration.
            </li>
            <li>
              Used Node.JS (w/ TypeScript), discord.js and MongoDB
            </li>
          </ul>
          <li>Remote Server Management (RSM) Version 2 (Jan 2021 - Jan 2022)</li>
          <ul className="ml-8 mt-2 list-disc text-sm mb-4">
            <li>
              Discord moderation bot. Additional features including NSFW image detection and checking for malware.
            </li>
            <li>
              I was responsible for the guild settings flow, tesseract flow and clamav flow.
            </li>
            <li>
              Used Python, discord.py and JSON
            </li>
          </ul>
          <li>Remote Server Management (RSM) Version 1 (Sep 2020 - Jan 2021)</li>
          <ul className="ml-8 mt-2 list-disc text-sm">
            <li>
              Discord moderation bot. Featuring readable UI and extra moderation features Discord does not have like tempbans.
            </li>
            <li>
              I was responsible for the guild settings flow.
            </li>
            <li>
              Used Python, discord.py and JSON
            </li>
          </ul>
        </Work>

        <Work jobTitle={"Developer"} area={"Backend"} projectName={"Innuendo"} dateFrom={"Jul 2020"} dateTo={"Current"} obsolete={false}>
          <li>Innuendo (Dec 2023 - Current)</li>
          <ul className="ml-8 mt-2 list-disc text-sm">
            <li>
              Cardboard Against Humankind remade in Rust
            </li>
            <li>
              I&apos;m the main developer for this project, in charge of coordinating other people the main game loop code.
            </li>
            <li>
              Uses Rust, Serenity-rs + Poise, and Postgres
            </li>
          </ul>
          <li>Cardboard Against Humankind (Jul 2020 - Sep 2021)</li>
          <ul className="ml-8 mt-2 list-disc text-sm">
            <li>
              A Cards Against Humanity discord bot. Was invited to 2000+ servers and had ~400 congruent games at peak times.
            </li>
            <li>
              I was responsible for writing the game loop and discord interactions.
            </li>
            <li>
              Used Python, discord.py and JSON
            </li>
          </ul>
        </Work>

        <Work jobTitle={"Lead Developer"} area={"Full Stack"} projectName={"Infinite Stories"} dateFrom={"Oct 2021"} dateTo={"Jun 2022"} obsolete={true} >
          <li>
            Website that allowed writers to publish excerpts from their books online to get feedback
          </li>
          <li>
            I was responsible for full website design, component creation, read/write to supabase, 
          </li>
          <li>
            Used Next.JS for web development and Supabase for storage
          </li>
        </Work>
      </div>

      <h1 className="self-start text-xl">Certifications</h1>
      <hr className="w-full border-t border-t-black"/>
      
      <div id="skills" className="flex flex-col h-fit gap-2 my-2 w-full mb-16">
        <p className="text-sm"><strong>CodeCrafters: </strong>HTTP Server (Rust)</p>
      </div>

      <h1 className="self-start text-xl">Skills</h1>
      <hr className="w-full border-t border-t-black"/>
      
      <div id="skills" className="flex flex-col h-fit gap-2 my-2 w-full">
        <p className="text-sm"><strong>Languages: </strong>TypeScript, JavaScript, Rust, Nix, Python</p>
        <p className="text-sm"><strong>Tools: </strong>MongoDB, Postgres, Supabase, Next.JS, Vercel, Git, Gerrit, GitHub, Google Cloud, Cloudflare (DNS, Workers, Zero Trust, cloudflared), AWS, Nix</p>
      </div>
    </main>
  );
}