Skills section added.

wzgliniecki · Jan 25, 2025 · c463fef · c463fef
1 parent d62a2ca
commit c463fef
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 13 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,22 +1,22 @@
 ---
 import { MoonStar, Sun, Linkedin, Github } from "lucide-astro";
-
-// const buttonClasses = "p-2 rounded-lg border-button border-2 shadow-boxShadow bg-button hover:bg-buttonHover active:bg-buttonActive";
-// const buttonAfterClasses = "after:content-['d'] after-absolute after-top-0 after-bottom-0 after-left-0 after-right-0 after-box-shadow-[0_0_2em_0.5em_var(--clr-button)] after-opacity-0 after-bg-[var(--clr-button)] after-z-[-1] after-transition-opacity after-duration-[100ms] after-ease-linear";
-// const buttonBeforeClasses = "before:content-['d'] before-absolute before-top-[120%] before-left-0 before-w-full before-h-full before-bg-[var(--clr-button)] before-transform before-perspective-[1em] before-rotate-x-[40deg] before-scale-y-[0.35] before-filter before-blur-[1em] before-opacity-[0.7] before-pointer-events-none";
-
-// const combinedButtonClasses = `${buttonClasses} ${buttonAfterClasses} ${buttonBeforeClasses}`;
 ---
 
-<header class="w-1/3 mx-auto mt-5 text-center sticky top-0 z-10">
-  <nav class="flex items-center justify-between h-20 px-6">
+<header class="w-1/3 mx-auto mt-5 text-center fixed top-0 left-1/2 transform -translate-x-1/2 z-10">
+    <nav class="flex items-center justify-between h-20 px-6">
     <div class="flex space-x-6 text-text dark:text-darkText">
       <button
         type="button"
         class="flex items-center justify-center p-2 rounded-lg border-black border-2 shadow-boxShadow bg-button hover:bg-buttonHover active:bg-buttonActive"
       >
         <a href="#about">ABOUT</a>
       </button>
+      <button
+      type="button"
+      class="flex items-center justify-center p-2 rounded-lg border-black border-2 shadow-boxShadow bg-button hover:bg-buttonHover active:bg-buttonActive"
+    >
+      <a href="#skills">SKILLS</a>
+    </button>
       <button
         type="button"
         class="flex items-center justify-center p-2 rounded-lg border-black border-2 shadow-boxShadow bg-button hover:bg-buttonHover active:bg-buttonActive"

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -35,8 +35,8 @@ const pageTitle = "WELCOME TO MY PORTFOLIO!";
 <MainLayout pageTitle={pageTitle}>
   <div class="min-h-screen flex items-center justify-center snap-center" id="about">
     <div class="relative inline-block text-center">
-      <h1 class="w-fit h-auto py-4 bg-gradient-to-r from-blue-500 via-teal-500 to-pink-500 bg-clip-text text-6xl font-extrabold text-transparent select-auto">
-        WOJCIECH ZGLINIECKI
+      <h1 class="text-8xl sm:text-9xl font-extrabold bg-gradient-to-r from-blue-500 via-teal-500 to-pink-500 bg-clip-text text-transparent select-auto">
+        Wojciech<br>Zgliniecki
       </h1>
 
       <h2 class="absolute bottom-0 left-0 text-2xl font-extrabold text-center text-primary neonText neonGreen transform translate-y-2">
@@ -52,7 +52,7 @@ const pageTitle = "WELCOME TO MY PORTFOLIO!";
   </div>
 
 
-  <div class="min-h-screen flex items-center justify-center snap-center"  id="about">
+  <div class="min-h-screen flex items-center justify-center snap-center"  id="skills">
       <div class="grid grid-cols-2 grid-rows-2 gap-6 p-4 h-[30vh]">
         <SkillSection stackPart={"language"} sectionTitle={"LANGUAGES"} />
         <SkillSection stackPart={"backend"} sectionTitle={"BACKEND"} />
@@ -64,9 +64,8 @@ const pageTitle = "WELCOME TO MY PORTFOLIO!";
     allProjects
       .filter((project) => project.frontmatter.isPrivate === false)
       .map((project) => {
-        const projectSlug = project.url.split("/").pop().replace(".md", "");
         return (
-          <div class="min-h-screen snap-center">
+        <div class="min-h-screen flex items-center justify-center snap-center" id={project.frontmatter.projectTitle}>
             <div class="min-h-80">
               <ProjectCard
                 projectTitle={project.frontmatter.projectTitle}