updates

pages/about.jsx

@@ -22,7 +22,7 @@ const about = () => {
 
             <div className='w-full h-6'></div>
 
-            <article>
+            <section>
                 <h2><TextShuffler textInput="My Web Dev Stack" /></h2>
                 <ul style={ { maxWidth: "800px" } }>
                     <li>
@@ -80,9 +80,9 @@ const about = () => {
                         </span>
                     </li>
                 </ul>
-            </article>
+            </section>
 
-            <article>
+            <section>
                 <h2><TextShuffler textInput="My UI/UX Stack" /></h2>
                 <ul style={ { maxWidth: "800px" } }>
                     <li>
@@ -128,7 +128,7 @@ const about = () => {
                         </span>
                     </li>
                 </ul>
-            </article>
+            </section>
 
 
             <div className="hero-ctas-section">

pages/work.jsx

@@ -19,11 +19,11 @@ const about = () => {
                 <meta name="description" content="Some of my Work" />
             </Head>
             <h1><TextShuffler textInput="My Work" /></h1>
-            <span className='hero-sub-text' style={ { marginTop: "-30px", marginBottom: "20px", display: "block" } }>
+            <span className='hero-sub-text'>
                 <TextShuffler textInput="Some of my work ..." />
             </span>
 
-            <div className='portfolio-entries-block'>
+            <div className='portfolio-entries-block mt-4'>
                 { portfolioEntries.map(entry => <PortfolioEntry key={ entry.title } title={ entry.title } description={ entry.description } url={ entry.url } image={ entry.image } />) }
             </div>
             <div className='fixed top-0 left-0 -z-10' id='homepage-animation-wrapper'></div>

styles/tw_main.css

@@ -75,6 +75,10 @@
   margin-bottom: 0.25rem
 }
 
+.mt-4 {
+  margin-top: 1rem
+}
+
 .block {
   display: block
 }