start of services section

src/app/page.tsx

@@ -3,6 +3,7 @@ import '../scss/App.scss';
 import Navbar from '../components/layout/Navigation';
 import HeroSection from '../components/sections/HeroSection';
 import AboutSection from '../components/sections/AboutSection';
+import ServicesSection from '../components/sections/ServicesSection';
 
 function PortfolioApp() {
   const [theme, setTheme] = useState<'light' | 'dark'>('light');
@@ -16,7 +17,7 @@ function PortfolioApp() {
       <Navbar theme={theme} setTheme={setTheme} />
       <HeroSection />
       <AboutSection />
-      <h1>Aktuelles Theme: {theme} </h1>
+      <ServicesSection />
     </>
   );
 }

src/components/sections/ServicesSection.tsx

@@ -0,0 +1,64 @@
+import { Code, Laptop, Lightbulb, Palette, Rocket, ShieldCheck } from "lucide-react";
+
+export default function ServicesSection() {
+  const services = [
+    {
+      icon: <Code className="services-section__icon" />,
+      title: "Modern Framework Development",
+      description: "Building scalable, maintainable web applications using Angular and React frameworks with TypeScript and modern development practices."
+    },
+    {
+      icon: <Palette className="services-section__icon" />,
+      title: "Responsive Web Design",
+      description: "Creating mobile-first, responsive interfaces that provide optimal viewing experiences across all devices and screen sizes."
+    },
+    {
+      icon: <ShieldCheck className="services-section__icon" />,
+      title: "Cross-Browser Testing",
+      description: "Ensuring consistent functionality and appearance across all major browsers including Chrome, Firefox, Safari, and Edge."
+    },
+    {
+      icon: <Laptop className="services-section__icon" />,
+      title: "Frontend Architecture",
+      description: "Designing and implementing scalable frontend architectures with component-based development and modern tooling."
+    },
+    {
+      icon: <Lightbulb className="services-section__icon" />,
+      title: "Performance Optimization",
+      description: "Optimizing web applications for speed and efficiency through code splitting, lazy loading, and performance best practices."
+    },
+    {
+      icon: <Rocket className="services-section__icon" />,
+      title: "Testing & Quality Assurance",
+      description: "Implementing comprehensive testing strategies using Cypress for end-to-end testing and ensuring code quality."
+    }
+  ];
+
+  return (
+    <section id="services" className="services-section">
+      <div className="services-section__container">
+        <div className="services-section__header">
+          <h2 className="services-section__title">
+            Services I Offer
+          </h2>
+          <p className="services-section__subtitle">
+            Solutions tailored to your needs
+          </p>
+        </div>
+        <div className="services-section__grid">
+          {services.map((service, index) => (
+            <div key={index} className="services-section__card">
+              <div className="services-section__card-header">
+                {service.icon}
+                <h3 className="services-section__card-title">{service.title}</h3>
+              </div>
+              <div className="services-section__card-content">
+                <p className="services-section__card-description">{service.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/scss/App.scss

@@ -5,6 +5,7 @@
 @use 'topbar';
 @use 'hero-section';
 @use 'about-section';
+@use 'services-section';
 
 // Import Geist font from Google Fonts or local files
 @import url('https://fonts.googleapis.com/css2?family=Geist:wght@100;200;300;400;500;600;700;800;900&display=swap');
@@ -27,7 +28,8 @@
 }
 
 body {
-  font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    'Roboto', sans-serif;
   background-color: var(--color-background);
   color: var(--color-text);
   margin: 0; // Explicitly remove body margin
@@ -35,6 +37,7 @@ body {
 }
 
 section {
-  height: 100vh;
+  min-height: 100vh;
+  padding: 1rem 1rem;
   margin: 0; // Remove any section margins
 }

src/scss/about-section.scss

@@ -1,7 +1,6 @@
 @use 'globals';
 
 .about-section {
-  padding: 5rem 0;
   background: var(--about-background);
 
   &__container {

src/scss/hero-section.scss

@@ -18,9 +18,7 @@
 }
 
 .hero-section {
-  min-height: 100vh;
   @include flex-center;
-  padding: $spacing-xl $spacing-md;
   background: var(--hero-background);
 
   &__container {

src/scss/services-section.scss

@@ -0,0 +1,85 @@
+@use 'globals';
+@use 'variables' as *;
+@use 'mixins' as *;
+
+.services-section {
+  background: linear-gradient(135deg, #fff7ed 0%, #fee2e2 100%);
+
+  &__container {
+    max-width: 1120px;
+    margin: 0 auto;
+    padding: 0 $spacing-md;
+  }
+
+  &__header {
+    text-align: center;
+    margin-bottom: $spacing-3xl;
+  }
+
+  &__title {
+    font-size: 2.25rem;
+    font-weight: bold;
+    margin-bottom: $spacing-md;
+    background: linear-gradient(90deg, #ea580c 0%, #dc2626 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    color: transparent;
+  }
+
+  &__subtitle {
+    font-size: 1.25rem;
+    color: #6b7280;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: $spacing-xl;
+  }
+
+  &__card {
+    background: linear-gradient(135deg, #fff 0%, #f3f4f6 100%);
+    border-radius: $border-radius-lg;
+    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.07);
+    padding: $spacing-xl $spacing-lg;
+    text-align: center;
+    transition: box-shadow 0.3s;
+    border: none;
+
+    &:hover {
+      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12);
+      transform: translateY(-2px);
+    }
+  }
+
+  &__card-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: $spacing-md;
+  }
+
+  &__icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-bottom: $spacing-sm;
+    color: #ea580c;
+  }
+
+  &__card-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: $spacing-xs;
+  }
+
+  &__card-content {
+    min-height: 60px;
+  }
+
+  &__card-description {
+    font-size: 1rem;
+    color: #6b7280;
+    line-height: 1.5;
+  }
+}

src/scss/themes.scss

@@ -31,11 +31,12 @@ $light-theme: (
   stat-quaternary-label: #7c3aed,
 
   // About section colors
-  about-background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0fdfa 100%),
+  about-background:
+    linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0fdfa 100%),
   gradient-about-title: linear-gradient(90deg, #059669, #0d9488),
   about-greeting-color: #047857,
-  gradient-image-overlay: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2)),
+  gradient-image-overlay:
-  
+    linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2)),
   // Skill badge colors using visual hierarchy
   skill-badge-primary-bg: #dbeafe,
   skill-badge-primary-text: #1e40af,
@@ -50,7 +51,6 @@ $light-theme: (
   feature-card-primary-bg: linear-gradient(135deg, #dbeafe, #bfdbfe),
   feature-card-secondary-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe),
   feature-card-tertiary-bg: linear-gradient(135deg, #ccfbf1, #99f6e4),
-  
   feature-icon-primary: #2563eb,
   feature-icon-secondary: #9333ea,
   feature-icon-tertiary: #0d9488,
@@ -66,7 +66,7 @@ $light-theme: (
   // Shadow variables
   box-shadow-sm: #{$shadow-sm},
   box-shadow-md: #{$shadow-md},
-  box-shadow-lg: #{$shadow-lg}
+  box-shadow-lg: #{$shadow-lg},
 );
 
 // Dark Theme Colors
@@ -82,28 +82,37 @@ $dark-theme: (
   gradient-text: $gradient-text,
 
   // Stat colors using visual hierarchy
-  stat-primary-bg: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)),
+  stat-primary-bg:
+    linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)),
   stat-primary-value: #2563eb,
   stat-primary-label: #93c5fd,
 
-  stat-secondary-bg: linear-gradient(135deg, rgba(20, 83, 45, 0.3), rgba(22, 101, 52, 0.3)),
+  stat-secondary-bg:
+    linear-gradient(135deg, rgba(20, 83, 45, 0.3), rgba(22, 101, 52, 0.3)),
   stat-secondary-value: #16a34a,
   stat-secondary-label: #86efac,
 
-  stat-tertiary-bg: linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)),
+  stat-tertiary-bg:
+    linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)),
   stat-tertiary-value: #0d9488,
   stat-tertiary-label: #5eead4,
 
-  stat-quaternary-bg: linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)),
+  stat-quaternary-bg:
+    linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)),
   stat-quaternary-value: #9333ea,
   stat-quaternary-label: #c4b5fd,
 
   // About section colors
-  about-background: linear-gradient(135deg, rgba(20, 83, 45, 0.2) 0%, rgba(6, 78, 59, 0.2) 100%),
+  about-background:
+    linear-gradient(
+      135deg,
+      rgba(20, 83, 45, 0.2) 0%,
+      rgba(6, 78, 59, 0.2) 100%
+    ),
   gradient-about-title: linear-gradient(90deg, #10b981, #14b8a6),
   about-greeting-color: #34d399,
-  gradient-image-overlay: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2)),
+  gradient-image-overlay:
-  
+    linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2)),
   // Skill badge colors using visual hierarchy
   skill-badge-primary-bg: rgba(30, 58, 138, 0.3),
   skill-badge-primary-text: #93c5fd,
@@ -115,10 +124,12 @@ $dark-theme: (
   skill-badge-quaternary-text: #fdba74,
 
   // Feature card colors using visual hierarchy
-  feature-card-primary-bg: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)),
+  feature-card-primary-bg:
-  feature-card-secondary-bg: linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)),
+    linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)),
-  feature-card-tertiary-bg: linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)),
+  feature-card-secondary-bg:
-  
+    linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)),
+  feature-card-tertiary-bg:
+    linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)),
   feature-icon-primary: #3b82f6,
   feature-icon-secondary: #a855f7,
   feature-icon-tertiary: #14b8a6,
@@ -134,7 +145,7 @@ $dark-theme: (
   // Shadow variables
   box-shadow-sm: #{$shadow-sm},
   box-shadow-md: #{$shadow-md},
-  box-shadow-lg: #{$shadow-lg}
+  box-shadow-lg: #{$shadow-lg},
 );
 
 // Mixin: SCSS-Map → CSS-Variables
@@ -196,8 +207,14 @@ $dark-theme: (
   --feature-title-tertiary: #{map.get($theme, feature-title-tertiary)};
 
   --feature-description-primary: #{map.get($theme, feature-description-primary)};
-  --feature-description-secondary: #{map.get($theme, feature-description-secondary)};
+  --feature-description-secondary: #{map.get(
-  --feature-description-tertiary: #{map.get($theme, feature-description-tertiary)};
+      $theme,
+      feature-description-secondary
+    )};
+  --feature-description-tertiary: #{map.get(
+      $theme,
+      feature-description-tertiary
+    )};
 
   // Shadow variables
   --box-shadow-sm: #{map.get($theme, box-shadow-sm)} var(--box-shadow-hover);

src/scss/variables.scss

@@ -14,6 +14,7 @@ $shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 // Border radius variables
 $border-radius-sm: 0.375rem;
 $border-radius-md: 0.5rem;
+$border-radius-lg: 1rem;
 $border-radius-full: 9999px;
 
 // Spacing variables