more mobile-friendly

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) => (

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;
+}