Referenced Template author

README.md

@@ -74,5 +74,5 @@ This project is a fork and modification of the excellent work by **Dillion Verma
 
 ### Licensing
 
-- **Original Work (Dillion Verma):** Licensed under the [MIT license](https://github.com/dillionverma/portfolio/blob/main/LICENSE.md).
+- **Original Work [(Dillion Verma)](https://dillion.io/):** Licensed under the [MIT license](https://github.com/dillionverma/portfolio/blob/main/LICENSE.md).
 - **Current Repository (steffen/website):** Also [MIT License](https://gitea.steffenillium.de/steffen/website/src/branch/main/LICENSE).

app/page.tsx

@@ -67,59 +67,18 @@ export default function Page() {
           <Markdown>{DATA.summary}</Markdown>
         </BlurFade>
       </section>
-      <section id="projects">
+      <section id="skills" className="py-4">
-        <div className="space-y-8 w-full py-4">
+        <div className="flex min-h-0 flex-col gap-y-2">
-          <BlurFade delay={BLUR_FADE_DELAY * 11}>
-            <div className="flex flex-col items-center justify-center space-y-4 text-center">
-              <div className="space-y-2">
-                <div className="inline-block rounded-lg bg-foreground text-background px-3 py-1 text-sm">
-                  Recent Posts
-                </div>
-                <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
-                  Check out my latest work
-                </h2>
-                <p className="text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
-                  I&apos;ve worked on a variety of projects, from scientific
-                  research to managing projects. Here are a few of my latest.
-                </p>
-              </div>
-            </div>
-          </BlurFade>
-          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 max-w-[1040px] mx-auto">
-            {posts
-              .filter((post) => post.title)
-              .map((post, id) => (
-                <BlurFade
-                  key={post.title}
-                  delay={BLUR_FADE_DELAY * 12 + id * 0.05}>
-                  <ProjectCard
-                    href={post.href}
-                    key={post.title}
-                    title={post.title!}
-                    description={post.excerpt || ""}
-                    dates={post.date}
-                    tags={post.tags}
-                    image={post.image || ""}
-                    video={post.video}
-                    links={[]}
-                  />
-                </BlurFade>
-              ))}
-          </div>
-        </div>
-      </section>
-      <section id="skills" className="py-6">
-        <div className="flex min-h-0 flex-col gap-y-4">
           <BlurFade delay={BLUR_FADE_DELAY * 9}>
             <h2 className="text-xl font-bold">Skills</h2>
           </BlurFade>
-          <div className="flex flex-col gap-y-2">
+          <div className="flex flex-col gap-y-4">
             {Object.entries(DATA.skills).map(([category, skills], id) => (
               <div key={id}>
                 <BlurFade delay={BLUR_FADE_DELAY * 9.5}>
                   <h3 className="text-lg font-semibold">{category}</h3>
                 </BlurFade>
-                <div className="flex flex-wrap gap-1">
+                <div className="flex flex-wrap gap-2 py-1 mx-2">
                   {skills.map((skill, id) => (
                     <BlurFade
                       key={skill}
@@ -177,6 +136,47 @@ export default function Page() {
           ))}
         </div>
       </section>
+      <section id="projects">
+        <div className="space-y-8 w-full py-4">
+          <BlurFade delay={BLUR_FADE_DELAY * 11}>
+            <div className="flex flex-col items-center justify-center space-y-4 text-center">
+              <div className="space-y-2">
+                <div className="inline-block rounded-lg bg-foreground text-background px-3 py-1 text-sm">
+                  Recent Posts
+                </div>
+                <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
+                  Check out my latest work
+                </h2>
+                <p className="text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+                  I&apos;ve worked on a variety of projects, from scientific
+                  research to managing projects. Here are a few of my latest.
+                </p>
+              </div>
+            </div>
+          </BlurFade>
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 max-w-[1040px] mx-auto">
+            {posts
+              .filter((post) => post.title)
+              .map((post, id) => (
+                <BlurFade
+                  key={post.title}
+                  delay={BLUR_FADE_DELAY * 12 + id * 0.05}>
+                  <ProjectCard
+                    href={post.href}
+                    key={post.title}
+                    title={post.title!}
+                    description={post.excerpt || ""}
+                    dates={post.date}
+                    tags={post.tags}
+                    image={post.image || ""}
+                    video={post.video}
+                    links={[]}
+                  />
+                </BlurFade>
+              ))}
+          </div>
+        </div>
+      </section>
       <section id="contact">
         <div className="grid items-center justify-center gap-4 px-4 text-center md:px-6 w-full py-12">
           <BlurFade delay={BLUR_FADE_DELAY * 16}>