From 91931039bc029dcd9a85cd0c2a1105232058b39b Mon Sep 17 00:00:00 2001
From: Avraham Sakal <avraham@torahanytime.com>
Date: Sun, 24 May 2026 10:18:24 -0400
Subject: [PATCH] more mobile-friendly

---
 pages/index/+Page.tsx | 27 +++++++++++++++------------
 styles.css            |  9 +++++++++
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/pages/index/+Page.tsx b/pages/index/+Page.tsx
index 8e1fe3e..3c86f3e 100644
--- a/pages/index/+Page.tsx
+++ b/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",
         }}
       >
@@ -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) => (
diff --git a/styles.css b/styles.css
index f7dfd48..2062220 100644
--- a/styles.css
+++ b/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;
+}
\ No newline at end of file