resume/pages/index/+Page.tsx

import { useData } from "vike-react/useData";
import type { Data } from "./+data";
import "../../styles.css";
import "./print-button.css";
import resumeImage from "../../assets/resume-image.jpg";

export default function Page() {
  return (
    <div
      css={{
        fontFamily: '"EB Garamond", serif',
        fontOpticalSizing: "auto",
        fontWeight: 400,
        fontStyle: "normal",
        fontSize: "0.85em",

        display: "flex",
        flexDirection: "row",
        justifyContent: "start",
      }}
    >
      <div
        css={{
          display: "flex",
          flexDirection: "column",
          width: "30%",
          backgroundColor: "lavender",
          padding: "1em",
          gap: "1em",
        }}
      >
        <Header />
        <MainSkills />
        <ExposedSkills />
      </div>
      <div
        css={{
          display: "flex",
          flexDirection: "column",
          width: "70%",
          padding: "1em",
          position: "relative",
        }}
      >
        <div
          css={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "center",
            width: "100%",
            position: "absolute",
          }}
        >
          <a
            className="floating-print-btn"
            href={/*pdfUrl*/ "assets/static/resume-brian-sakal.pdf"}
            download
          >
            {/* Print */}
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 640 640"
              width="24"
              height="24"
            >
              {/*Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.*/}
              <path d="M128 128C128 92.7 156.7 64 192 64L405.5 64C422.5 64 438.8 70.7 450.8 82.7L493.3 125.2C505.3 137.2 512 153.5 512 170.5L512 208L128 208L128 128zM64 320C64 284.7 92.7 256 128 256L512 256C547.3 256 576 284.7 576 320L576 416C576 433.7 561.7 448 544 448L512 448L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 448L96 448C78.3 448 64 433.7 64 416L64 320zM192 480L192 512L448 512L448 416L192 416L192 480zM520 336C520 322.7 509.3 312 496 312C482.7 312 472 322.7 472 336C472 349.3 482.7 360 496 360C509.3 360 520 349.3 520 336z" />
            </svg>
          </a>
        </div>
        <Employment />
        <ProjectsHobbies />
        <Education />
      </div>
    </div>
  );
}

function Header() {
  const { contactInfo } = useData<Data>();
  return (
    <div
      css={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <section>
        <div>
          <img
            src={resumeImage}
            alt="headshot"
            css={{ width: "14em", borderRadius: "50%", objectFit: "contain" }}
          />
        </div>
      </section>
      <section>
        <h2 css={{ marginBottom: "0.3em" }} className="lg bold">
          {contactInfo.name}
        </h2>
      </section>
      <section css={{ textAlign: "center" }}>
        <ul className="inline">
          <li>{contactInfo.phone}</li>
          <li>{contactInfo.email}</li>
        </ul>
        <ul className="inline">
          <li>{contactInfo.location}</li>
          <li>
            <a href={contactInfo.website}>{contactInfo.website}</a>
          </li>
        </ul>
      </section>
    </div>
  );
}

function MainSkills() {
  const { mainSkills } = useData<Data>();
  return (
    <section className="relevant-skills">
      <h3>Main Skills/Technologies</h3>
      <div>
        <ul className="inline">
          {mainSkills.map((skill) => (
            <li>{skill}</li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function ExposedSkills() {
  const { exposedSkills } = useData<Data>();
  return (
    <section className="relevant-skills">
      <h3>Have Used</h3>
      <div>
        <ul className="inline">
          {exposedSkills.map((skill) => (
            <li>{skill}</li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function Employment() {
  const { employment } = useData<Data>();
  return (
    <section className="employment">
      <h1>
        <div className="fit-content">
          <span className="bold">Employment </span>
          <span css={{ fontWeight: 300 }} className="sm italic right">
            (Most recent)
          </span>
        </div>
      </h1>
      <div>
        <ul className="no-bullet">
          {employment.map((employment) => (
            <li>
              <div className="space-between">
                <div>
                  <span className="bold">{employment.title},</span>
                  <span>
                    {employment.company}, {employment.location}
                  </span>
                </div>
                <div className="italic right">
                  {employment.start}-{employment.end}
                </div>
              </div>
              <div>
                <ul>
                  {employment.highlights.map((highlight) => (
                    <li>{highlight}</li>
                  ))}
                </ul>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function ProjectsHobbies() {
  const { projectsHobbies } = useData<Data>();
  return (
    <section className="projects-hobbies">
      <h1>
        <div className="fit-content">
          <div className="bold">Projects/Hobbies</div>
        </div>
      </h1>
      <div>
        <ul className="no-bullet">
          {projectsHobbies.map((projectHobby) => (
            <li>
              <div>
                <span className="bold">{projectHobby.title}</span>
                <span>
                  <ul className="inline">
                    {projectHobby.highlights.map((highlight) => (
                      <li>{highlight}</li>
                    ))}
                    {projectHobby.deployment && (
                      <li>
                        <a href={projectHobby.deployment}>
                          {projectHobby.deployment}
                        </a>
                      </li>
                    )}
                    {projectHobby.code && (
                      <li>
                        <a href={projectHobby.code}>[Code]</a>
                      </li>
                    )}
                  </ul>
                </span>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function Education() {
  const { education } = useData<Data>();
  return (
    <section className="education">
      <h1>
        <span className="bold">Education</span>
      </h1>
      <div>
        <ul className="no-bullet">
          {education.map((education) => (
            <li>
              <div className="space-between">
                <div>
                  <span className="bold">{education.title},</span>
                  <span>{education.location}</span>
                </div>
                <div className="italic right">
                  {education.start}–{education.end}
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}