feat: responsive headshot

package.json

@@ -3,7 +3,7 @@
     "dev": "vike dev",
     "build": "vike build",
     "preview": "run-s build preview:wrangler",
-    "generate-pdf": "concurrently -k -s first 'pnpm vike preview' 'wait-on http://localhost:3000 && chromium --headless --no-pdf-header-footer --print-to-pdf=./assets/resume-brian-sakal.pdf --timeout=1500 http://localhost:3000'",
+    "generate-pdf": "concurrently -k -s first 'pnpm vike preview' 'wait-on http://localhost:3000 && chromium --headless --no-pdf-header-footer --print-to-pdf=./assets/resume-brian-sakal.pdf --timeout=1500 http://localhost:3000' && cp ./assets/resume-brian-sakal.pdf ./dist/client/assets/static/resume-brian-sakal.pdf",
     "lint": "eslint .",
     "preview:wrangler": "wrangler pages dev",
     "deploy:wrangler": "wrangler pages deploy",

pages/index/+Page.tsx

@@ -38,7 +38,8 @@ export default function Page() {
           display: "flex",
           flexDirection: "column",
           width: "70%",
-          padding: "1em",
+          paddingLeft: "1em",
+          paddingRight: "1em",
           position: "relative",
         }}
       >
@@ -53,7 +54,7 @@ export default function Page() {
         >
           <a
             className="floating-print-btn"
-            href="./assets/resume-brian-sakal.pdf"
+            href={/*pdfUrl*/ "assets/static/resume-brian-sakal.pdf"}
             download
           >
             {/* Print */}
@@ -88,11 +89,11 @@ function Header() {
       }}
     >
       <section>
-        <div>
+        <div css={{ display: "flex", justifyContent: "center" }}>
           <img
             src={resumeImage}
             alt="headshot"
-            css={{ width: "14em", borderRadius: "50%", objectFit: "contain" }}
+            css={{ width: "70%", borderRadius: "50%", objectFit: "contain" }}
           />
         </div>
       </section>
@@ -123,7 +124,7 @@ function MainSkills() {
     <section className="relevant-skills">
       <h3>Main Skills/Technologies</h3>
       <div>
-        <ul className="inline">
+        <ul className="inline" css={{ textAlign: "justify" }}>
           {mainSkills.map((skill) => (
             <li>{skill}</li>
           ))}
@@ -139,7 +140,7 @@ function ExposedSkills() {
     <section className="relevant-skills">
       <h3>Have Used</h3>
       <div>
-        <ul className="inline">
+        <ul className="inline" css={{ textAlign: "justify" }}>
           {exposedSkills.map((skill) => (
             <li>{skill}</li>
           ))}
@@ -153,21 +154,21 @@ function Employment() {
   const { employment } = useData<Data>();
   return (
     <section className="employment">
-      <h1>
+      <h2>
         <div className="fit-content">
           <span className="bold">Employment </span>
           <span css={{ fontWeight: 300 }} className="sm italic right">
             (Most recent)
           </span>
         </div>
-      </h1>
+      </h2>
       <div>
         <ul className="no-bullet">
           {employment.map((employment) => (
             <li>
-              <div className="space-between">
+              <div className="space-between" key={employment.title}>
                 <div>
-                  <span className="bold">{employment.title},</span>
+                  <span className="bold">{employment.title},</span>{" "}
                   <span>
                     {employment.company}, {employment.location}
                   </span>
@@ -179,7 +180,9 @@ function Employment() {
               <div>
                 <ul>
                   {employment.highlights.map((highlight) => (
-                    <li>{highlight}</li>
+                    <li key={highlight} css={{ textAlign: "justify" }}>
+                      {highlight}
+                    </li>
                   ))}
                 </ul>
               </div>
@@ -195,11 +198,11 @@ function ProjectsHobbies() {
   const { projectsHobbies } = useData<Data>();
   return (
     <section className="projects-hobbies">
-      <h1>
+      <h2>
         <div className="fit-content">
           <div className="bold">Projects/Hobbies</div>
         </div>
-      </h1>
+      </h2>
       <div>
         <ul className="no-bullet">
           {projectsHobbies.map((projectHobby) => (
@@ -238,9 +241,9 @@ function Education() {
   const { education } = useData<Data>();
   return (
     <section className="education">
-      <h1>
+      <h2>
         <span className="bold">Education</span>
-      </h1>
+      </h2>
       <div>
         <ul className="no-bullet">
           {education.map((education) => (

styles.css

@@ -100,3 +100,12 @@ a {
   font-weight: 500;
   text-decoration: none;
 }
+
+.employment > :first-child {
+  margin-block-start: 0.3em;
+}
+
+h2 {
+  margin-block-start: 0.3em;
+  margin-block-end: 0.3em;
+}