saschabach
/
portfolio-page
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

start of services section

This commit is contained in:
Sascha 2025-08-25 17:57:39 +02:00
parent 3fbe565c17
commit c22c97b23a
8 changed files with 227 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/page.tsx
View File

@ -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 />
</>
);
}

64
src/components/sections/ServicesSection.tsx Normal file
View File

@ -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>
);
}

7
src/scss/App.scss
View File

@ -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
}

1
src/scss/about-section.scss
View File

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

2
src/scss/hero-section.scss
View File

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

85
src/scss/services-section.scss Normal file
View File

@ -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;
}
}

55
src/scss/themes.scss
View File

@ -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-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-card-primary-bg:
linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 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-tertiary: #{map.get($theme, feature-description-tertiary)};
--feature-description-secondary: #{map.get(
$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);

1
src/scss/variables.scss
View File

@ -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