layout improvements in Skills and Experience sections

* change the grid layout in `Skills` section and add
  new layout for large screens
* limit the size of the Timeline chapters in tablet
  sized screens

src/components/Skills/Skills.css

@@ -19,7 +19,7 @@
   font-weight: 600;
   text-transform: capitalize;
   margin: 1.5rem auto 0;
-  width: 15%;
+  width: max-content;
 }
 
 .skills h2:hover + hr {
@@ -39,7 +39,7 @@
   font-weight: bold;
   font-size: 0.64rem;
   letter-spacing: 0.5;
-  margin: 0.2rem 0.7rem;
+  margin: 0.2rem 0.7rem 1rem;
   transition: all 0.2s ease-in-out;
   background-color: rgba(220, 220, 220, 0.6);
   padding: 0.5rem;
@@ -63,6 +63,19 @@
   margin: 0.4rem;
 }
 
+.skillsSetContainer {
+  max-width: 35rem;
+}
+.skillsSetContainer.miscSection {
+  max-width: 50rem;
+}
+
+@media screen and (max-width: 1119px) {
+  .skillsSetContainer.miscSection {
+    max-width: 35rem;
+  }
+}
+
 @media screen and (max-width: 940px) {
   .skills {
     padding: 0.7rem;

src/components/Skills/Skills.tsx

@@ -6,40 +6,72 @@ import Skill from "./Skill";
 import "./Skills.css";
 
 export default function Skills() {
-  const { mobileSize } = useWindowSize();
+  const { mobileSize, innerWidth } = useWindowSize();
+  const bootstrapLaptopSize = innerWidth < 1120;
 
   const skillsSets = ["frontend", "backend", "misc"] as const;
 
   return (
     <div className="skills" id="Skills">
-      <h1 data-aos="fade-right" data-aos-once="true">
+      <h1
+        data-aos={mobileSize ? "fade-right" : "fade-down"}
+        data-aos-once="true"
+      >
         {Text.headers.skills}
       </h1>
-      {skillsSets.map((skillSet, index) => (
-        <div
-          className="skillsSet"
-          data-aos={index % 2 ? "fade-right" : "fade-left"}
-          data-aos-once="true"
-          key={skillSet}
-        >
-          <h2>{Text.headers[skillSet]}</h2>
-          <hr />
-          <Row>
-            <Col>
-              {SkillsList[skillSet].map(({ id, name, color, link, img }) => (
-                <div className="skillContainer" key={id}>
-                  <Skill name={name} color={color} link={link} img={img} />
-                  {!mobileSize && (id === 3 || id === 7) && (
-                    <>
-                      <br /> <br />
-                    </>
+      <Row className={`${!mobileSize && "container"} mx-auto`}>
+        {skillsSets.map((skillSet, index) => {
+          const isMiscSection = index === 2;
+
+          const skillsListGridStyles = {
+            display: "grid",
+            gridTemplateColumns: `repeat(${
+              mobileSize ? 3 : bootstrapLaptopSize ? 4 : isMiscSection ? 6 : 4
+            }, 1fr)`,
+          };
+
+          const skillsSetAnimation =
+            !bootstrapLaptopSize && isMiscSection
+              ? "fade-down"
+              : index % 2
+                ? "fade-right"
+                : "fade-left";
+
+          return (
+            <Col
+              xs={12}
+              xl={isMiscSection ? 12 : 6}
+              key={skillSet}
+              className={`mx-auto skillsSetContainer ${
+                isMiscSection && "miscSection"
+              }`}
+            >
+              <div
+                className="skillsSet"
+                data-aos={skillsSetAnimation}
+                data-aos-once="true"
+              >
+                <h2>{Text.headers[skillSet]}</h2>
+                <hr />
+                <div style={skillsListGridStyles}>
+                  {SkillsList[skillSet].map(
+                    ({ id, name, color, link, img }) => (
+                      <div className="skillContainer" key={id}>
+                        <Skill
+                          name={name}
+                          color={color}
+                          link={link}
+                          img={img}
+                        />
+                      </div>
+                    ),
                   )}
                 </div>
-              ))}
+              </div>
             </Col>
-          </Row>
-        </div>
-      ))}
+          );
+        })}
+      </Row>
     </div>
   );
 }

src/components/Timeline/Timeline.css

@@ -95,6 +95,18 @@
   color: #b5b5b5;
 }
 
+@media screen and (min-width: 500px) and (max-width: 900px) {
+  .vertical-timeline-element-content {
+    max-width: 400px;
+  }
+}
+
+@media screen and (min-width: 900px) and (max-width: 1169px) {
+  .vertical-timeline-element-content {
+    max-width: 600px;
+  }
+}
+
 @media screen and (max-width: 940px) {
   .timeline-container {
     padding: 2rem 0 4rem;