fix: changed class for headshot, rearranged sections

Author: steadyfall

src/app/page.tsx

@@ -95,9 +95,9 @@ export default function Portfolio() {
         <Header />
         <main className="container mx-auto px-4 py-8 z-1">
           <About />
-          <Skills />
           <Experiences arr={experiencesArray}/>
           <Education />
+          <Skills />
           <Projects arr={projectsArray}/>
         </main>
         <Footer />

src/components/Header.tsx

@@ -14,7 +14,7 @@ const Header = () => {
                 alt="Profile"
                 width={200}
                 height={200}
-                className="rounded-lg w-40 h-40 md:w-48 md:h-48 lg:w-56 lg:h-56 object-cover"
+                className="rounded-lg size-36 md:size-48 lg:size-56 object-cover"
             />
             </div>
             <div className="flex-grow text-center md:text-left">
@@ -54,9 +54,9 @@ const Header = () => {
         <nav className="mt-8">
             <ul className="flex justify-center md:justify-start space-x-6 text-sm md:text-base">
             <li><a href="#about" className="hover:underline hover:underline-offset-4">About</a></li>
-            <li><a href="#skills" className="hover:underline hover:underline-offset-4">Skills</a></li>
             <li><a href="#experience" className="hover:underline hover:underline-offset-4">Experience</a></li>
             <li><a href="#education" className="hover:underline hover:underline-offset-4">Education</a></li>
+            <li><a href="#skills" className="hover:underline hover:underline-offset-4">Skills</a></li>
             <li><a href="#projects" className="hover:underline hover:underline-offset-4">Projects</a></li>
             {/* <li><a href="#misc" className="hover:underline">Misc.</a></li> */}
             </ul>