portfolio/src/app/about/page.tsx

/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */

import type { JSX } from "react";

/**
 * Renders the /about page.
 * @returns A React Component.
 */
const About = (): JSX.Element => {
  return (
    <main className="w-4/5 text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
      <h1 className="text-5xl">{`About Naomi`}</h1>
      <section>
        <p className="mb-2">
          {`Passionate technologist dedicated to building inclusive tech
          communities and empowering individuals to break into the field. With
          a rich background in community management, software engineering, and
          developer experience, I strive to create accessible pathways for
          diverse talent.`}
        </p>

        <p className="mb-2">{`My expertise spans:`}</p>
        <ul className="w-4/5 m-auto">
          <li
            className="mb-2 relative before:content-['🩵']
          before:absolute before:left-[-1em]"
          >
            <strong>{`Inclusive Community Building:`}</strong>
            {` Cultivated
            welcoming communities of 20,000 to 300K+ members across Discord,
            Slack, and GitHub, with a focus on supporting underrepresented
            groups in tech.`}
          </li>
          <li
            className="mb-2 relative before:content-['🩵']
          before:absolute before:left-[-1em]"
          >
            <strong>{`Empowering Education:`}</strong>
            {` Contributed to and
            maintained open-source curricula used by millions of aspiring
            developers globally, focusing on accessibility and engaging
            learning experiences.`}
          </li>
          <li
            className="mb-2 relative before:content-['🩵']
          before:absolute before:left-[-1em]"
          >
            <strong>{`Software Engineering for Inclusivity:`}</strong>
            {` Developed
            sophisticated bots and tools that not only streamline moderation
            and boost engagement but also promote safe, inclusive spaces for
            all community members.`}
          </li>
          <li
            className="mb-2 relative before:content-['🩵']
          before:absolute before:left-[-1em]"
          >
            <strong>{`Developer Experience (DX):`}</strong>
            {` Led initiatives to
            improve documentation, SDK support, and overall developer
            satisfaction, with an emphasis on making resources accessible to
            newcomers in the field.`}
          </li>
          <li
            className="mb-2 relative before:content-['🩵']
          before:absolute before:left-[-1em]"
          >
            <strong>{`Mentorship and Advocacy:`}</strong>
            {` Implemented programs to
            support aspiring developers, particularly those from
            under-represented backgrounds, in their journey into tech careers.`}
          </li>
        </ul>
        <p className="mb-2">
          {`Key achievements include redesigning freeCodeCamp's Responsive
          Web Design curriculum for greater accessibility, developing
          AI-powered community management tools that foster inclusive
          interactions, and creating engagement systems that significantly
          increased participation from diverse user groups.`}
        </p>

        <p className="mb-2">
          {`I'm driven by the belief that technology should be a field open
          to all. My approach combines technical expertise with a deep
          commitment to diversity, equity, and inclusion, resulting in
          solutions that not only drive engagement and innovation but also
          break down barriers to entry in tech.`}
        </p>

        <p className="mb-2">
          {`Seeking opportunities to lead transformative projects that expand
          access to tech education, foster inclusive community growth, and
          empower individuals from all backgrounds to thrive in the tech
          industry. Let's connect to discuss how I can best support your
          organisation!`}
        </p>

        <p className="mb-2">
          {`Want to get to know Naomi better? Check out her `}
          <a
            className="underline"
            href="https://loan.nhcarrigan.com"
            rel="noopener noreferrer"
            target="_blank"
          >
            {`Life of a Naomi game`}
          </a>
          {`!`}
        </p>
      </section>
    </main>
  );
};

export default About;