feat: add hero section and navigation components

- Created HeroSection component for the landing page.
- Implemented Navigation component with smooth scrolling to sections.
- Added useNavigation hook to manage active section and scroll state.
- Introduced useScrollToSection hook for smooth scrolling functionality.

feat: add projects section with project cards

- Developed ProjectCard component to display individual project details.
- Created ProjectsSection component to showcase featured projects with filtering options.
- Added sample project data for demonstration.

feat: add skills section with skill cards

- Implemented SkillCard component to display individual skills.
- Created SkillsSection component to showcase skills with category filtering.
- Added sample skills data for demonstration.

style: update global styles and add custom scrollbar

- Imported Urbanist font and set it as the default font.
- Updated body background and text colors.
- Customized scrollbar styles for better aesthetics.

feat: add shared components and constants

- Created AnimatedSection, Button, and Footer components for reusability.
- Added COLORS and GRADIENT constants for consistent theming.
- Updated index files for shared components and hooks.

chore: update dependencies and configuration

- Added framer-motion for animations.
- Updated Tailwind CSS configuration for custom animations and colors.
- Adjusted TypeScript configuration for better path resolution.

apps/web/src/App.tsx

@@ -1,14 +1,27 @@
+import { Navigation } from './features/navigation';
+import { HeroSection } from './features/hero';
+import { SkillsSection } from './features/skills';
+import { ProjectsSection } from './features/projects';
+import { ExperienceSection } from './features/experience';
+import { ContactSection } from './features/contact';
+import Footer from './shared/components/Footer';
+
 function App() {
   return (
-    <div className="min-h-screen bg-black text-white flex items-center justify-center">
-      <div className="text-center">
-        <h1 className="text-7xl font-bold mb-4 bg-gradient-to-r from-emerald-400 to-cyan-400 text-transparent bg-clip-text">
-          Mein Portfolio
-        </h1>
-        <p className="text-xl text-gray-400">
-          Full-Stack Entwickler & DevOps Enthusiast
-        </p>
+    <div className="bg-black text-white min-h-screen overflow-x-hidden">
+      {/* Background gradient decorations */}
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute top-0 left-0 w-96 h-96 bg-green-500/10 rounded-full blur-3xl opacity-50"></div>
+        <div className="absolute bottom-0 right-0 w-96 h-96 bg-emerald-500/10 rounded-full blur-3xl opacity-50"></div>
       </div>
+
+      <Navigation />
+      <HeroSection />
+      <SkillsSection />
+      <ProjectsSection />
+      <ExperienceSection />
+      <ContactSection />
+      <Footer />
     </div>
   );
 }