Initial commit

Author: karol-pieciukiewicz

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

app/components/about-section.tsx

@@ -0,0 +1,16 @@
+import { personalData } from "../data/cv";
+
+export function AboutSection() {
+  return (
+    <section id="about" className="py-8 md:py-12 animate-slide-up">
+      <div className="container mx-auto px-4">
+        <h2 className="section-title">ABOUT ME</h2>
+        <div className="bg-card rounded-lg p-6 shadow-sm border border-border">
+          <p className="text-foreground leading-relaxed">
+            {personalData.about}
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}

app/components/certificates-section.tsx

@@ -0,0 +1,32 @@
+import { personalData } from "../data/cv";
+
+export function CertificatesSection() {
+  return (
+    <section id="certificates" className="py-8 md:py-12 animate-slide-up">
+      <div className="container mx-auto px-4">
+        <h2 className="section-title">CERTIFICATES</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {personalData.certificates.map((cert, index) => (
+            <div key={index} className="certificate-item">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                fill="currentColor"
+                className="bi bi-award text-primary flex-shrink-0"
+                viewBox="0 0 16 16"
+              >
+                <path d="M9.669.864 8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68zm1.196 1.193.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702z" />
+                <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1z" />
+              </svg>
+              <div>
+                <h3 className="font-medium">{cert.name}</h3>
+                <p className="text-sm text-muted-foreground">{cert.year}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

app/components/download-button.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { personalData } from "../data/cv";
+
+export function DownloadButton() {
+  const [mounted, setMounted] = useState(false);
+
+  // Avoid hydration mismatch
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  const handleDownload = () => {
+    // In a real implementation, this would generate a PDF
+    // For this example, we'll just trigger the print dialog
+    // which allows saving as PDF
+    window.print();
+  };
+
+  return (
+    <button
+      onClick={handleDownload}
+      className="flex items-center gap-2 px-3 py-2 rounded-md bg-accent text-accent-foreground hover:bg-accent/90 transition-colors"
+      title="Download CV as PDF"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        className="bi bi-download"
+        viewBox="0 0 16 16"
+      >
+        <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
+        <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z" />
+      </svg>
+      <span className="hidden sm:inline">Download PDF</span>
+    </button>
+  );
+}

app/components/education-section.tsx

@@ -0,0 +1,27 @@
+import { personalData } from "../data/cv";
+
+export function EducationSection() {
+  return (
+    <section id="education" className="py-8 md:py-12 animate-slide-up">
+      <div className="container mx-auto px-4">
+        <h2 className="section-title">EDUCATION</h2>
+        <div className="space-y-6">
+          {personalData.education.map((edu, index) => (
+            <div key={index} className="timeline-item">
+              <div className="mb-2">
+                <h3 className="text-xl font-bold text-primary">
+                  {edu.degree}
+                </h3>
+                <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 text-muted-foreground">
+                  <span className="font-medium">{edu.institution}</span>
+                  <span className="hidden sm:inline">•</span>
+                  <span>{edu.period}</span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

app/components/experience-section.tsx

@@ -0,0 +1,47 @@
+import { personalData } from "../data/cv";
+
+export function ExperienceSection() {
+  return (
+    <section id="experience" className="py-8 md:py-12 animate-slide-up">
+      <div className="container mx-auto px-4">
+        <h2 className="section-title">EXPERIENCE</h2>
+        <div className="space-y-6">
+          {personalData.experience.map((job, index) => (
+            <div key={index} className="timeline-item">
+              <div className="mb-2">
+                <h3 className="text-xl font-bold text-primary">
+                  {job.position}
+                </h3>
+                <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 text-muted-foreground">
+                  <span className="font-medium">{job.company}</span>
+                  <span className="hidden sm:inline">•</span>
+                  <span>{job.period}</span>
+                </div>
+              </div>
+              <ul className="mt-4 space-y-2">
+                {job.responsibilities.map((responsibility, idx) => (
+                  <li key={idx} className="flex items-start gap-2">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      fill="currentColor"
+                      className="bi bi-arrow-right text-primary mt-1 flex-shrink-0"
+                      viewBox="0 0 16 16"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"
+                      />
+                    </svg>
+                    <span>{responsibility}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

app/components/floating-nav.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function FloatingNav() {
+  const [activeSection, setActiveSection] = useState("about");
+  const [mounted, setMounted] = useState(false);
+
+  // Avoid hydration mismatch
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+
+    const handleScroll = () => {
+      const sections = document.querySelectorAll("section[id]");
+      let currentActiveSection = "about";
+      
+      sections.forEach((section) => {
+        const sectionTop = section.getBoundingClientRect().top;
+        if (sectionTop <= 100) {
+          currentActiveSection = section.id;
+        }
+      });
+      
+      setActiveSection(currentActiveSection);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [mounted]);
+
+  if (!mounted) {
+    return null;
+  }
+
+  const navItems = [
+    { id: "about", label: "About" },
+    { id: "skills", label: "Skills" },
+    { id: "experience", label: "Experience" },
+    { id: "education", label: "Education" },
+    { id: "certificates", label: "Certificates" },
+  ];
+
+  const scrollToSection = (id: string) => {
+    const element = document.getElementById(id);
+    if (element) {
+      window.scrollTo({
+        top: element.offsetTop - 80,
+        behavior: "smooth",
+      });
+    }
+  };
+
+  return (
+    <nav className="floating-nav">
+      {navItems.map((item) => (
+        <button
+          key={item.id}
+          onClick={() => scrollToSection(item.id)}
+          className={`nav-item text-sm ${
+            activeSection === item.id ? "active" : ""
+          }`}
+          aria-current={activeSection === item.id ? "page" : undefined}
+        >
+          {item.label}
+        </button>
+      ))}
+    </nav>
+  );
+}