diff --git a/BewerbungWebseite/Pages/Index.cshtml b/BewerbungWebseite/Pages/Index.cshtml
index 4cd07ad..58afc8f 100644
--- a/BewerbungWebseite/Pages/Index.cshtml
+++ b/BewerbungWebseite/Pages/Index.cshtml
@@ -1,1513 +1,23 @@
-@page
+@page
 @model IndexModel
 @{
     ViewData["Title"] = "Bewerbung – Francesco Lorenzo D'Amico";
 }
 
+
 @section Styles {
-    <style>
-        .mean-container .mean-bar::before {
-            content: "Francesco L. D'Amico";
-            font-size: 16px;
-            top: 20px;
-            max-width: 75%;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .portfolio-section {
-            padding: 90px 0;
-        }
-
-        #about {
-            background: #fff;
-        }
-
-        #skills {
-            background: #f8f9fb;
-        }
-
-        #projects {
-            background: #fff;
-        }
-
-        #goals {
-            background: #f8f9fb;
-        }
-
-        #experience {
-            background: #fff;
-        }
-
-        #documents {
-            background: #f8f9fb;
-        }
-
-        #contact {
-            background: #fff;
-        }
-
-        .section-kicker {
-            text-transform: uppercase;
-            letter-spacing: .08em;
-            font-weight: 700;
-        }
-
-        .section-title {
-            margin-bottom: 40px;
-        }
-
-            .section-title h2 {
-                font-size: 38px;
-                margin-bottom: 8px;
-            }
-
-            .section-title p {
-                max-width: 760px;
-                margin: 0 auto;
-            }
-
-        #sticky-header.portfolio-header .container {
-            max-width: 100%;
-            padding-left: 40px;
-            padding-right: 40px;
-        }
-
-        .portfolio-header .techno_menu ul li a {
-            padding-left: 6px;
-            padding-right: 6px;
-        }
-
-        #sticky-header.portfolio-header .techno_menu ul.nav_scroll {
-            display: flex;
-            flex-wrap: nowrap;
-            justify-content: center;
-            margin-left: 0;
-        }
-
-        #sticky-header.portfolio-header .techno_menu > ul > li > a {
-            margin: 30px 8px;
-            font-size: 18px;
-            white-space: nowrap;
-        }
-
-        @@media (min-width: 1650px) {
-            #sticky-header.portfolio-header {
-                position: relative;
-            }
-
-            #sticky-header.portfolio-header .col-lg-8 {
-                position: static;
-            }
-
-            #sticky-header.portfolio-header .techno_menu {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-            }
-        }
-
-        #sticky-header.portfolio-header {
-            background: rgba(9, 12, 26, .65);
-        }
-
-        .portfolio-brand {
-            font-size: 24px;
-            font-weight: 800;
-            color: #fff;
-            display: inline-block;
-            padding: 22px 0;
-            letter-spacing: .02em;
-        }
-
-            .portfolio-brand:hover {
-                color: #fff;
-            }
-
-        .portfolio-header .header-button,
-        .portfolio-header .slider-button-text {
-            display: none;
-        }
-
-        #hero.slider-area.slider8 {
-            min-height: 650px;
-            background-color: #0b0e1a;
-            background-image: url(/images/slider/banner-a.png);
-            background-size: cover;
-            background-position: center;
-            background-repeat: no-repeat;
-        }
-
-        #hero .slider-content h1 {
-            line-height: 1.05;
-        }
-
-        #hero .slider-thumb-images {
-            margin-left: 40px;
-        }
-
-        #hero .slider-thumb-images img {
-            aspect-ratio: 1 / 1;
-            object-fit: cover;
-            clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
-        }
-
-        #hero .hero-actions {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            flex-wrap: wrap;
-            margin-top: 25px;
-        }
-
-        #hero .slider-button2 a {
-            margin-top: 0;
-        }
-
-        #hero .hero-secondary {
-            display: inline-block;
-            padding: 17px 28px;
-            border: 2px solid #fff;
-            color: #fff;
-            font-weight: 700;
-            font-size: 18px;
-        }
-
-            #hero .hero-secondary:hover {
-                background: #fff;
-                color: #111;
-            }
-
-        @@media (min-width: 992px) and (max-width: 1199px) {
-            #hero .hero-secondary {
-                padding: 13px 26px;
-                font-size: 16px;
-            }
-        }
-
-        @@media (min-width: 768px) and (max-width: 991px) {
-            #hero .hero-secondary {
-                padding: 12px 24px;
-                font-size: 16px;
-            }
-        }
-
-        @@media (min-width: 600px) and (max-width: 767px) {
-            #hero .hero-secondary {
-                padding: 13px 23px;
-                font-size: 15px;
-            }
-        }
-
-        @@media (max-width: 599px) {
-            #hero .hero-secondary {
-                padding: 12px 20px;
-                font-size: 15px;
-            }
-        }
-
-        #hero .hero-social {
-            margin-top: 25px;
-        }
-
-            #hero .hero-social a {
-                color: #fff;
-                margin-right: 18px;
-                text-decoration: underline;
-            }
-
-        #hero .slider-socail-icon2 {
-            display: none;
-        }
-
-        #about .about-area {
-            padding: 90px 0;
-            margin-top: 0;
-        }
-
-        #about .techno-about-thumb-3 {
-            margin-left: 0;
-        }
-
-        #about .about-facts {
-            margin-top: 20px;
-        }
-
-        #about .dreamit-section-title h1,
-        #about .dreamit-section-title p {
-            color: #151423;
-        }
-
-        #about .about-fact {
-            background: #f8f9fb;
-            border: 1px solid #e6e8f0;
-            padding: 18px 20px;
-            margin-bottom: 12px;
-            border-radius: 4px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-            #about .about-fact strong {
-                color: #151423;
-            }
-
-            #about .about-fact span {
-                color: #33354b;
-            }
-
-            #about .about-fact i {
-                color: #0c5adb;
-            }
-
-        #skills .skills-grid {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        #skills .skills-grid > div {
-            margin-bottom: 30px;
-            display: flex;
-        }
-
-        #skills .techno-sinlge-service-box,
-        #skills .techno-sinlge-service-box-1,
-        #skills .techno-sinlge-service-box.active {
-            min-height: 220px;
-            width: 100%;
-        }
-
-        #skills .techno-service-title p {
-            margin-bottom: 0;
-        }
-
-        #projects .project-card {
-            background: #fff;
-            height: 100%;
-            margin-bottom: 30px;
-            box-shadow: 0 8px 30px rgba(20,30,60,.08);
-            display: flex;
-            flex-direction: column;
-        }
-
-        #projects .row + .row {
-            margin-top: 30px;
-        }
-
-        #projects .portfolio-details-thumb img {
-            width: 100%;
-            height: 210px;
-            object-fit: cover;
-        }
-
-        #projects .portfolio-details-titles {
-            padding: 24px 24px 8px;
-        }
-
-        #projects .details-category {
-            padding: 0 24px;
-        }
-
-        #projects .project-actions {
-            padding: 14px 24px 24px;
-            display: flex;
-            gap: 10px;
-            flex-wrap: wrap;
-            margin-top: auto;
-        }
-
-            #projects .project-actions a {
-                display: inline-block;
-                padding: 10px 14px;
-                background: #0c5adb;
-                color: #fff;
-                font-weight: 700;
-                border-radius: 2px;
-            }
-
-                #projects .project-actions a.github {
-                    background: #171717;
-                }
-
-        #projects .details-category h4 {
-            margin-top: 12px;
-            margin-bottom: 2px;
-        }
-
-        #projects .details-category h4:first-child {
-            margin-top: 0;
-        }
-
-        #projects .project-card-expanded .portfolio-details-thumb {
-            height: 100%;
-        }
-
-            #projects .project-card-expanded .portfolio-details-thumb img {
-                height: 100%;
-                min-height: 260px;
-            }
-
-        #goals .service-area {
-            padding: 90px 0;
-        }
-
-        #goals .goals-grid {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        #goals .goals-grid > div {
-            margin-bottom: 30px;
-            display: flex;
-        }
-
-        #goals .techno-sinlge-service-box,
-        #goals .techno-sinlge-service-box-1 {
-            min-height: 220px;
-            width: 100%;
-        }
-
-        #experience .career-details {
-            padding: 90px 0;
-        }
-
-        #experience .experience-timeline {
-            position: relative;
-            padding-left: 36px;
-        }
-
-            #experience .experience-timeline:before {
-                content: "";
-                position: absolute;
-                top: 8px;
-                bottom: 8px;
-                left: 8px;
-                width: 2px;
-                background: #0c5adb;
-            }
-
-        #experience .experience-item {
-            position: relative;
-            margin-bottom: 28px;
-            padding: 26px 30px;
-            background: #fff;
-            box-shadow: 0 8px 25px rgba(20,30,60,.08);
-        }
-
-            #experience .experience-item:before {
-                content: "";
-                position: absolute;
-                left: -34px;
-                top: 31px;
-                width: 14px;
-                height: 14px;
-                border-radius: 50%;
-                background: #fff;
-                border: 3px solid #0c5adb;
-            }
-
-            #experience .experience-item h3 {
-                margin-bottom: 6px;
-            }
-
-        #experience .experience-meta {
-            color: #0c5adb;
-            font-weight: 700;
-            margin-bottom: 12px;
-        }
-
-        #experience .experience-item-extra {
-            display: none;
-        }
-
-            #experience .experience-timeline.is-expanded .experience-item-extra {
-                display: block;
-            }
-
-        #experience .experience-toggle-wrap {
-            text-align: center;
-            margin-top: 30px;
-        }
-
-        #experience .experience-toggle-btn {
-            display: inline-block;
-            padding: 14px 28px;
-            background: #0c5adb;
-            color: #fff;
-            font-weight: 700;
-            border: none;
-            border-radius: 2px;
-            cursor: pointer;
-        }
-
-        #documents .documents-grid {
-            display: flex;
-            flex-wrap: wrap;
-        }
-
-        #documents .documents-grid > div {
-            margin-bottom: 30px;
-            display: flex;
-        }
-
-        #documents .single-circular-box {
-            width: 100%;
-            min-height: 300px;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            margin-bottom: 0;
-            padding-bottom: 24px;
-        }
-
-        #documents .circular-btn {
-            position: static;
-            text-align: left;
-            margin-top: 20px;
-            clear: both;
-        }
-
-        #contact .contact-us-area {
-            padding: 90px 0;
-        }
-
-        #contact .contact-copy {
-            padding-right: 35px;
-        }
-
-        #contact .contact-links {
-            margin-top: 22px;
-            display: flex;
-            gap: 18px;
-            flex-wrap: wrap;
-        }
-
-            #contact .contact-links a {
-                font-weight: 700;
-                text-decoration: underline;
-            }
-
-        #contact .contact-visual img {
-            width: 100%;
-            max-height: 390px;
-            object-fit: contain;
-        }
-
-        #contact .contact-button {
-            margin-top: 22px;
-        }
-
-        #contact .contact-form {
-            margin-top: 10px;
-        }
-
-        #contact .contact-form button[type="submit"] {
-            display: inline-block;
-            padding: 12px 26px;
-            background: #0c5adb;
-            color: #fff;
-            font-weight: 700;
-            font-family: "Rajdhani";
-            font-size: 15px;
-            text-transform: uppercase;
-            letter-spacing: .04em;
-            border: none;
-            border-radius: 2px;
-            cursor: pointer;
-            transition: 0.3s;
-        }
-
-            #contact .contact-form button[type="submit"] i {
-                margin-left: 8px;
-            }
-
-            #contact .contact-form button[type="submit"]:hover {
-                background: #094aab;
-            }
-
-        .portfolio-footer.footer-middle {
-            padding: 0;
-            background: #0b0e1a;
-        }
-
-        .portfolio-footer .footer-bottom {
-            margin-top: 0;
-            padding: 28px 0;
-        }
-
-        .portfolio-footer .footer-bottom-content-copy p {
-            margin: 0;
-            text-align: center;
-        }
-
-        .portfolio-footer .footer-bottom .col-lg-12 {
-            text-align: center;
-        }
-
-        @@media (max-width: 991px) {
-            #hero.slider-area.slider8 {
-                min-height: auto;
-                padding: 130px 0 80px;
-            }
-
-            #hero .slider-thumb-images {
-                margin-top: 40px;
-                text-align: center;
-            }
-
-            .portfolio-brand {
-                color: #111;
-                padding: 15px 0;
-            }
-
-            #about .techno-about-thumb-box {
-                margin-bottom: 30px;
-            }
-
-            .portfolio-section {
-                padding: 60px 0;
-            }
-
-            #about .about-area,
-            #goals .service-area,
-            #experience .career-details,
-            #contact .contact-us-area {
-                padding: 60px 0;
-            }
-        }
-
-        @@media (max-width: 767px) {
-            .section-title h2,
-            .dreamit-section-title h1 {
-                font-size: 28px;
-            }
-
-            #hero.slider-area.slider8 {
-                padding: 110px 0 60px;
-                text-align: center;
-            }
-
-            #hero .hero-actions,
-            #hero .hero-social {
-                justify-content: center;
-            }
-
-            #about .about-fact {
-                flex-wrap: wrap;
-                gap: 6px;
-            }
-
-            #skills .techno-sinlge-service-box,
-            #skills .techno-sinlge-service-box-1,
-            #skills .techno-sinlge-service-box.active,
-            #goals .techno-sinlge-service-box,
-            #goals .techno-sinlge-service-box-1 {
-                min-height: 0;
-                margin-bottom: 20px;
-            }
-
-            #projects .portfolio-details-thumb img {
-                height: 180px;
-            }
-
-            #projects .project-card {
-                margin-bottom: 60px;
-            }
-
-            #projects .row + .row {
-                margin-top: 0;
-            }
-
-            #experience .experience-timeline {
-                padding-left: 26px;
-            }
-
-            #experience .experience-item {
-                padding: 20px 18px;
-            }
-
-            #experience .experience-item:before {
-                left: -24px;
-            }
-
-            #documents .single-circular-box {
-                text-align: center;
-            }
-
-            #contact .contact-copy {
-                padding-right: 0;
-                text-align: center;
-                margin-bottom: 30px;
-            }
-
-            #contact .contact-links {
-                justify-content: center;
-            }
-
-        }
-
-        @@media (max-width: 480px) {
-            #hero .slider-content h1 {
-                font-size: 32px !important;
-            }
-
-            .mean-container .mean-bar::before {
-                font-size: 14px;
-                max-width: 65%;
-            }
-        }
-    </style>
+    <partial name="_PortfolioStyles" />
 }
 
-<section id="hero" class="slider-area slider8 d-flex align-items-center">
-    <div class="container">
-        <div class="row d-flex align-items-center slider">
-            <div class="col-lg-7 col-md-12 col-sm-12">
-                <div class="slider-content">
-                    <p class="section-kicker">Applikationsentwickler</p>
-                    <h1>FRANCESCO</h1>
-                    <h1>LORENZO</h1>
-                    <h1><span class="color3">D'AMICO</span></h1>
-                    <p>
-                        Ich entwickle gerne Anwendungen, bei denen aus einer Idee Schritt für Schritt eine
-                        funktionierende Lösung entsteht. Auf dieser Seite zeige ich ausgewählte Projekte,
-                        Technologien, mit denen ich bereits gearbeitet habe, und was ich bisher in der
-                        Applikationsentwicklung gelernt habe.
-                    </p>
-                    <div class="hero-actions">
-                        <div class="slider-button2">
-                            <a href="#projects">PROJEKTE ANSEHEN <i class="fas fa-check-square"></i></a>
-                        </div>
-                        <a class="hero-secondary" href="#contact">
-                            Kontakt aufnehmen
-                        </a>
-                    </div>
-                    <div class="hero-social">
-                        <a href="https://www.linkedin.com/in/francesco-d-amico-342b61356/" target="_blank" rel="noopener">LinkedIn</a>
-                        <a href="mailto:Francescodamico649@gmail.com">E-Mail</a>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-5">
-                <div class="slider-thumb-images">
-                    <img src="~/images/resource/Bewerbung_Foto.jpeg" alt="Francesco Lorenzo D'Amico">
-                </div>
-                <div class="slider-shape">
-                    <div class="shape-inner bounce-animate2">
-                        <img src="~/images/slider/shape1.png" alt="">
-                    </div>
-                    <div class="shape-inner-1 bounce-animate4">
-                        <img src="~/images/slider/shape2.png" alt="">
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-
-<section id="about">
-    <div class="about-area style-three">
-        <div class="container">
-            <div class="row align-items-center">
-                <div class="col-lg-6 col-md-6 col-sm-12">
-                    <div class="techno-about-thumb-box">
-                        <div class="techno-about-thumb-3">
-                            <img src="~/images/about/my-personal-workspace.jpg" alt="Über mich">
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-6 col-md-6 col-sm-12">
-                    <div class="row about-left">
-                        <div class="col-lg-12">
-                            <div class="dreamit-section-title style-four white">
-                                <h5>Über mich</h5>
-                                <h1>APPLIKATIONSENTWICKLUNG</h1>
-                                <h1>MIT <span class="color2">NEUGIER</span></h1>
-                                <p class="pt-text">
-                                    Mich fasziniert an der Softwareentwicklung, dass aus einer Idee Schritt für
-                                    Schritt eine funktionierende Anwendung entsteht. Dabei möchte ich nicht nur
-                                    wissen, dass etwas funktioniert, sondern auch verstehen, warum. Ich arbeite
-                                    gerne strukturiert, probiere neue Technologien aus und verbessere Lösungen
-                                    iterativ.
-                                </p>
-                            </div>
-                            <div class="about-facts">
-                                <div class="about-fact"><strong>Denkweise</strong><span>Produktorientiert & zukunftsgerichtet <i class="fas fa-angle-right"></i></span></div>
-                                <div class="about-fact"><strong>Arbeitsweise</strong><span>Strukturiert & lösungsorientiert <i class="fas fa-angle-right"></i></span></div>
-                                <div class="about-fact"><strong>Interessen</strong><span>Moderne Technologien & Trends <i class="fas fa-angle-right"></i></span></div>
-                                <div class="about-fact"><strong>Lernhaltung</strong><span>Neugier & praxisorientiert <i class="fas fa-angle-right"></i></span></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-
-<section id="skills" class="portfolio-section">
-    <div class="container">
-        <div class="dreamit-section-title style-two text-center section-title">
-            <h5>Kompetenzen</h5>
-            <h1>MEINE TECHNISCHEN <span>SKILLS</span></h1>
-            <p>Technologien und Arbeitsweisen, mit denen ich bereits gearbeitet habe.</p>
-        </div>
-
-        <div class="row skills-grid">
-            <div class="col-lg-4 col-md-6 col-sm-12">
-                <div class="techno-sinlge-service-box">
-                    <div class="techno-service-box-inner">
-                        <div class="techno-service-content">
-                            <div class="techno-service-icon"><i class="flaticon-pen"></i></div>
-                            <div class="techno-service-title"><h2>Backend</h2><p>ASP.NET Core · Entity Framework Core · REST APIs · C# · PHP · Symfony</p></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-lg-4 col-md-6 col-sm-12">
-                <div class="techno-sinlge-service-box-1">
-                    <div class="techno-service-box-inner">
-                        <div class="techno-service-content">
-                            <div class="techno-service-icon"><i class="flaticon-chat"></i></div>
-                            <div class="techno-service-title"><h2>Frontend</h2><p>React · SASS · Symfony-Twig · PHP Bootstrap · razor-pages · html · css · javascript</p></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-lg-4 col-md-6 col-sm-12">
-                <div class="techno-sinlge-service-box active">
-                    <div class="techno-service-box-inner">
-                        <div class="techno-service-content">
-                            <div class="techno-service-icon"><i class="flaticon-database"></i></div>
-                            <div class="techno-service-title"><h2>DB</h2><p>MongoDB · MS SQL Server</p></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-lg-4 col-md-6 col-sm-12">
-                <div class="techno-sinlge-service-box">
-                    <div class="techno-service-box-inner">
-                        <div class="techno-service-content">
-                            <div class="techno-service-icon"><i class="flaticon-settings"></i></div>
-                            <div class="techno-service-title"><h2>Systeme</h2><p>Docker · TrueNAS · Webhosting-Grundlagen · Windows · Linux basics</p></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-lg-4 col-md-6 col-sm-12">
-                <div class="techno-sinlge-service-box-1">
-                    <div class="techno-service-box-inner">
-                        <div class="techno-service-content">
-                            <div class="techno-service-icon"><i class="flaticon-growth"></i></div>
-                            <div class="techno-service-title"><h2>AI</h2><p>Prompting · Code-Unterstützung · Recherche</p></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-lg-4 col-md-6 col-sm-12">
-                <div class="techno-sinlge-service-box">
-                    <div class="techno-service-box-inner">
-                        <div class="techno-service-content">
-                            <div class="techno-service-icon"><i class="flaticon-clock"></i></div>
-                            <div class="techno-service-title"><h2>Soft Skills</h2><p>Strukturiertes Arbeiten · Lernbereitschaft · selbstständige Fehlersuche · Zuverlässigkeit</p></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-
-<section id="projects" class="portfolio-section">
-    <div class="container">
-        <div class="dreamit-section-title style-two text-center section-title">
-            <h5>Projekte</h5>
-            <h1>MEINE <span>PROJEKTE</span></h1>
-        </div>
-
-        <div class="row">
-            <div class="col-lg-6 col-md-6">
-                <article class="project-card">
-                    <div class="portfolio-details-thumb"><img src="~/images/projects/bewerbungsseite.png" alt="Bewerbungsseite"></div>
-                    <div class="portfolio-details-titles">
-                        <h3>Bewerbungsseite</h3>
-                        <p>Meine eigene Bewerbungswebsite, entwickelt mit ASP.NET Core Razor Pages, um Lebenslauf, Projekte und Fähigkeiten in einer selbst gebauten Anwendung zu präsentieren.</p>
-                    </div>
-                    <div class="details-category">
-                        <h4>TECH:</h4><p>C# · ASP.NET Core Razor Pages · Entity Framework Core · Bootstrap · JavaScript</p>
-                        <h4>Meine Arbeit:</h4><p>Konzeption, Umsetzung und laufende Weiterentwicklung von Struktur, Styling und Inhalten sowie Deployment im eigenen Homelab.</p>
-                    </div>
-                    <div class="project-actions"><a href="https://francesco-damico.ch/" target="_blank" rel="noopener">Projekt ansehen</a><a class="github" href="https://github.com/francesco448/Bewerbungs-Portfolio" target="_blank" rel="noopener">GitHub</a></div>
-                </article>
-            </div>
-
-            <div class="col-lg-6 col-md-6">
-                <article class="project-card">
-                    <div class="portfolio-details-thumb"><img src="~/images/projects/Screenshot 2026-08-24 153904.png" alt="Francesco's Recipes World"></div>
-                    <div class="portfolio-details-titles">
-                        <h3>Francesco's Recipes World</h3>
-                        <p>Full-Stack-Rezeptverwaltung zum Erstellen, Bearbeiten und Kategorisieren von Rezepten, Zutaten und Einheiten. Die Anwendung basiert auf einer strukturierten MVC-Architektur und relationaler Datenmodellierung.</p>
-                    </div>
-                    <div class="details-category">
-                        <h4>TECH:</h4><p>C# · ASP.NET Core MVC · Entity Framework Core · JavaScript · AJAX</p>
-                        <h4>Meine Arbeit:</h4><p>Datenmodellierung, Controller- und Geschäftslogik, Razor-Views, CRUD-Funktionen sowie AJAX-Integration umgesetzt.</p>
-                    </div>
-                    <div class="project-actions"><a href="https://francescos-rezepten-tool.francesco-damico.ch/" target="_blank" rel="noopener">Projekt ansehen</a><a class="github" href="https://github.com/francesco448/Francescos.Recipes.World" target="_blank" rel="noopener">GitHub</a></div>
-                </article>
-            </div>
-        </div>
-
-        <div class="row">
-            <div class="col-lg-12">
-                <article class="project-card project-card-expanded">
-                    <div class="row align-items-stretch g-0">
-                        <div class="col-lg-5">
-                            <div class="portfolio-details-thumb"><img src="~/images/projects/Screenshot 2026-08-24 154143.png" alt="Realtime Chat App"></div>
-                        </div>
-                        <div class="col-lg-7">
-                            <div class="portfolio-details-titles">
-                                <h3>Realtime Chat App</h3>
-                                <p>Echtzeit-Chat-Anwendung mit React-Frontend, Node.js-Backend und persistenter Datenspeicherung. Nachrichten und Räume werden über Socket.IO in Echtzeit synchronisiert.</p>
-                            </div>
-                            <div class="details-category">
-                                <h4>TECH:</h4><p>React · Node.js · Express · Socket.IO · MongoDB · Docker</p>
-                                <h4>Meine Arbeit:</h4><p>Frontend und Backend umgesetzt, Echtzeitkommunikation integriert, Datenhaltung angebunden und Anwendung mit Docker containerisiert.</p>
-                            </div>
-                            <div class="project-actions"><a href="https://chatapp.francesco-damico.ch/" target="_blank" rel="noopener">Projekt ansehen</a><a class="github" href="https://github.com/francesco448/chat-app" target="_blank" rel="noopener">GitHub</a></div>
-                        </div>
-                    </div>
-                </article>
-            </div>
-        </div>
-
-        <div class="row">
-            <div class="col-lg-12">
-                <article class="project-card project-card-expanded">
-                    <div class="row align-items-stretch g-0">
-                        <div class="col-lg-5">
-                            <div class="portfolio-details-thumb"><img src="~/images/projects/Screenshot 2026-08-24 175017.png" alt="TrueNAS SCALE Dashboard"></div>
-                        </div>
-                        <div class="col-lg-7">
-                            <div class="portfolio-details-titles">
-                                <h3>Homelab / Self-Hosting</h3>
-                                <p><strong>Ziel:</strong> Aufbau einer eigenen Hosting-Umgebung, um Anwendungen und Dienste selbst zu betreiben und praktische Erfahrung mit Infrastruktur, Netzwerken und Deployment zu sammeln.</p>
-                            </div>
-                            <div class="details-category">
-                                <h4>Hardware / System:</h4>
-                                <p>TrueNAS SCALE · Intel Core i5-6600 @@ 3.30 GHz · 4 Kerne / 4 Threads · 16 GB RAM · ZFS-Speicherpool mit RAIDZ1 aus 3 HDDs · 1 Gbit Ethernet / Full Duplex</p>
-
-                                <h4>Services:</h4>
-                                <p>Nginx Proxy Manager · Duplicati · Gitea · Scrutiny · Planka sowie selbst gehostete eigene Anwendungen wie Realtime Chat App, Francesco's Recipes World und diese Bewerbungsseite</p>
-
-                                <h4>Sicherheit:</h4>
-                                <p>HTTPS für öffentlich erreichbare Dienste · Reverse Proxy über Nginx Proxy Manager · DNS-basierte Weiterleitung · getrennte Container und Services</p>
-
-                                <h4>Meine Arbeit:</h4>
-                                <p>
-                                    Planung und Einrichtung der Homelab-Umgebung, Konfiguration von TrueNAS SCALE, Aufbau des ZFS-/RAIDZ1-Speichers,
-                                    Deployment und Verwaltung von Docker-Containern über Custom Apps und YAML, Einrichtung von Nginx Proxy Manager, DNS-Routing über Subdomains der 
-                                    eigenen Domain francesco-damico.ch und HTTPS sowie Betrieb eigener Webanwendungen und Datenbanken.
-                                </p>
-
-                                <h4>Gelernt:</h4>
-                                <p>Docker und Container Networking · YAML-basierte Deployments · Reverse Proxy · DNS · HTTPS · ZFS und RAIDZ1 · Self-Hosting · Deployment eigener Anwendungen · Backup-Konzept · Fehleranalyse und Troubleshooting</p>
-                            </div>
-                        </div>
-                    </div>
-                </article>
-            </div>
-        </div>
-    </div>
-</section>
-
-<section id="goals">
-    <div class="service-area">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-12">
-                    <div class="dreamit-section-title text-center">
-                        <h5>Meine Ziele</h5>
-                        <h1>WAS ICH <span>ERREICHEN MÖCHTE</span></h1>
-                    </div>
-                </div>
-
-            </div>
-
-            <div class="row goals-grid">
-                <div class="col-lg-3 col-md-6 col-sm-12">
-                    <div class="techno-sinlge-service-box">
-                        <div class="techno-service-box-inner">
-                            <div class="techno-service-content">
-                                <div class="techno-service-icon"><i class="flaticon-growth"></i></div>
-                                <div class="techno-service-title"><h2>Praxis vertiefen</h2><p>Meine bisherigen Kenntnisse in weiteren Projekten anwenden, Verantwortung übernehmen und mich fachlich weiterentwickeln.</p></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="col-lg-3 col-md-6 col-sm-12">
-                    <div class="techno-sinlge-service-box-1">
-                        <div class="techno-service-box-inner">
-                            <div class="techno-service-content">
-                                <div class="techno-service-icon"><i class="flaticon-pen"></i></div>
-                                <div class="techno-service-title"><h2>Moderne Technologien einsetzen</h2><p>Mit aktuellen Technologien arbeiten, neue Ansätze kennenlernen und passende Lösungen für reale Anforderungen finden.</p></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="col-lg-3 col-md-6 col-sm-12">
-                    <div class="techno-sinlge-service-box active">
-                        <div class="techno-service-box-inner">
-                            <div class="techno-service-content">
-                                <div class="techno-service-icon"><i class="flaticon-chat"></i></div>
-                                <div class="techno-service-title"><h2>Eigene Ideen umsetzen</h2><p>Projekte weiterdenken, verbessern und aus Ideen langfristig funktionierende Lösungen entwickeln.</p></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="col-lg-3 col-md-6 col-sm-12">
-                    <div class="techno-sinlge-service-box-1">
-                        <div class="techno-service-box-inner">
-                            <div class="techno-service-content">
-                                <div class="techno-service-icon"><i class="flaticon-clock"></i></div>
-                                <div class="techno-service-title"><h2>Als Entwickler wachsen</h2><p>Meine technischen und persönlichen Fähigkeiten kontinuierlich ausbauen und Schritt für Schritt mehr Verantwortung übernehmen.</p></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-
-<section id="experience">
-    <div class="career-details">
-        <div class="container">
-            <div class="dreamit-section-title style-two text-center section-title">
-                <h5>Erfahrung</h5>
-                <h1>BERUFLICHE <span>ERFAHRUNG</span></h1>
-            </div>
-
-            <div class="row justify-content-center">
-                <div class="col-lg-10">
-                    <div class="experience-timeline single-details-box">
-                        <article class="experience-item">
-                            <h3>Agile Methodiken, wie Scrum</h3>
-                            <div class="experience-meta">Schule & Praxis · laufend angewendet</div>
-                            <div class="details-text">
-                                <h4>Aufgaben & Verantwortlichkeiten:</h4>
-                                <p>Arbeit in klar definierten Aufgaben und Etappen mit regelmässigen Abstimmungen im Team, iterativer Entwicklung von Lösungen mit regelmässigem Feedback sowie flexibler Anpassung an neue Anforderungen und Nachverfolgung des Projektstands.</p>
-                            </div>
-                        </article>
-
-                        <article class="experience-item">
-                            <h3>Git Flow</h3>
-                            <div class="experience-meta">Schule & Praxis · laufend angewendet</div>
-                            <div class="details-text">
-                                <h4>Aufgaben & Verantwortlichkeiten:</h4>
-                                <p>Strukturierte Versionsverwaltung mit separaten Branches für neue Funktionen und Änderungen sowie kontrolliertes Zusammenführen des Codes im Team.</p>
-                            </div>
-                        </article>
-
-                        <article class="experience-item">
-                            <h3>IPERKA</h3>
-                            <div class="experience-meta">Schule & Praxis · laufend angewendet</div>
-                            <div class="details-text">
-                                <h4>Aufgaben & Verantwortlichkeiten:</h4>
-                                <p>Strukturiertes Vorgehen bei Aufträgen nach dem Handlungszyklus Informieren, Planen, Entscheiden, Realisieren, Kontrollieren und Auswerten.</p>
-                            </div>
-                        </article>
-
-                        <article class="experience-item experience-item-extra">
-                            <h3>Ticketsystem-Arbeit</h3>
-                            <div class="experience-meta">Schule & Praxis · laufend angewendet</div>
-                            <div class="details-text">
-                                <h4>Aufgaben & Verantwortlichkeiten:</h4>
-                                <p>Erfassen, Priorisieren und Abarbeiten von Aufgaben in Ticketsystemen wie Jira zur strukturierten Nachverfolgung des Projektstands.</p>
-                            </div>
-                        </article>
-
-                        <article class="experience-item experience-item-extra">
-                            <h3>Testing & Fehleranalyse</h3>
-                            <div class="experience-meta">Schule & Praxis · laufend angewendet</div>
-                            <div class="details-text">
-                                <h4>Aufgaben & Verantwortlichkeiten:</h4>
-                                <p>Manuelles Testen von Funktionen sowie systematische Fehleranalyse und Debugging in echten Projekten zur Sicherstellung der Softwarequalität.</p>
-                            </div>
-                        </article>
-
-                        <article class="experience-item experience-item-extra">
-                            <h3>Dokumentation</h3>
-                            <div class="experience-meta">Schule · vereinzelt in Projekten</div>
-                            <div class="details-text">
-                                <h4>Aufgaben & Verantwortlichkeiten:</h4>
-                                <p>Vor allem in der Berufsschule Dokumentationen verfasst; in Projekten mit weiteren Mitarbeitenden zusätzlich Code an relevanten Stellen kommentiert, im Lehrbetrieb selbst eher selten.</p>
-                            </div>
-                        </article>
-
-                        <article class="experience-item experience-item-extra">
-                            <h3>CI/CD & Deployment</h3>
-                            <div class="experience-meta">Schule & Praxis · laufend angewendet</div>
-                            <div class="details-text">
-                                <h4>Aufgaben & Verantwortlichkeiten:</h4>
-                                <p>Containerisierung und Deployment von Anwendungen mit Docker sowie strukturierte Versionierung von Releases.</p>
-                            </div>
-                        </article>
-
-                        <article class="experience-item experience-item-extra">
-                            <h3>Datenbank-Design</h3>
-                            <div class="experience-meta">Schule & Praxis · laufend angewendet</div>
-                            <div class="details-text">
-                                <h4>Aufgaben & Verantwortlichkeiten:</h4>
-                                <p>Modellierung und Normalisierung relationaler Datenbanken in echten Projekten zur strukturierten Datenhaltung.</p>
-                            </div>
-                        </article>
-
-                        <article class="experience-item experience-item-extra">
-                            <h3>Code Reviews</h3>
-                            <div class="experience-meta">Schule & Praxis · laufend angewendet</div>
-                            <div class="details-text">
-                                <h4>Aufgaben & Verantwortlichkeiten:</h4>
-                                <p>Eigenen Code von anderen prüfen lassen, um Feedback zur Codequalität einzuholen und daraus zu lernen.</p>
-                            </div>
-                        </article>
-                    </div>
-
-                    <div class="experience-toggle-wrap">
-                        <button type="button" id="experience-toggle" class="experience-toggle-btn" aria-expanded="false">
-                            Mehr erfahren
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-
-<section id="documents" class="portfolio-section">
-    <div class="container">
-        <div class="dreamit-section-title style-two text-center section-title">
-            <h5>Dokumente & Zertifikate</h5>
-            <h1>DOKUMENTE & <span>ZERTIFIKATE</span></h1>
-        </div>
-
-        <div class="row documents-grid">
-            <div class="col-lg-6">
-                <div class="single-circular-box">
-                    <div class="circular-title">
-                        <h3>BBC-Zertifikat</h3>
-                        <p>Erfolgreich abgeschlossenes Basislehrjahr Informatik mit praxisnahen Grundlagen in Programmierung, Betriebssystemen, Datenbanken, IoT, Applikationsentwicklung, Webentwicklung Frontend/Backend, Mobile App Entwicklung und individueller Projektarbeit.</p>
-                    </div>
-                    <div class="circular-btn">
-                        <a href="~/documents/Bbc-Zertifikat.pdf" target="_blank" rel="noopener">DOKUMENT ÖFFNEN</a>
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-lg-6">
-                <div class="single-circular-box">
-                    <div class="circular-title">
-                        <h3>ÜK 106 – Kompetenznachweis</h3>
-                        <p>Vertiefung der Grundlagen im Umgang mit relationalen Datenbanken, insbesondere beim Abfragen, Bearbeiten und Pflegen von Daten sowie beim strukturierten Arbeiten mit Datenbanksystemen.</p>
-                    </div>
-                    <div class="circular-btn">
-                        <a href="~/documents/üK-106-Kompetenznachweis.pdf" target="_blank" rel="noopener">DOKUMENT ÖFFNEN</a>
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-lg-6">
-                <div class="single-circular-box">
-                    <div class="circular-title">
-                        <h3>ÜK 187 – Kompetenznachweis</h3>
-                        <p>Praktische Auseinandersetzung mit der Einrichtung und Inbetriebnahme eines ICT-Arbeitsplatzes inklusive Betriebssystem, grundlegender Systemkonfiguration und Vorbereitung für den produktiven Einsatz.</p>
-                    </div>
-                    <div class="circular-btn">
-                        <a href="~/documents/üK-187-Kompetenznachweis.pdf" target="_blank" rel="noopener">DOKUMENT ÖFFNEN</a>
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-lg-6">
-                <div class="single-circular-box">
-                    <div class="circular-title">
-                        <h3>ÜK 216 – Kompetenznachweis</h3>
-                        <p>Integration vernetzter Endgeräte in bestehende Plattformen mit Fokus auf Kommunikation, Einbindung von Geräten und Zusammenspiel verschiedener Komponenten innerhalb einer IoT-Umgebung.</p>
-                    </div>
-                    <div class="circular-btn">
-                        <a href="~/documents/üK-216-Kompetenznachweis.pdf" target="_blank" rel="noopener">DOKUMENT ÖFFNEN</a>
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-lg-6">
-                <div class="single-circular-box">
-                    <div class="circular-title">
-                        <h3>ÜK 223 – Kompetenznachweis</h3>
-                        <p>Entwicklung einer objektorientierten Anwendung für mehrere Benutzer mit Fokus auf sauberer Programmstruktur, Objektorientierung und der Umsetzung von Multi-User-Funktionalitäten.</p>
-                    </div>
-                    <div class="circular-btn">
-                        <a href="~/documents/üK-223-Kompetenznachweis.pdf" target="_blank" rel="noopener">DOKUMENT ÖFFNEN</a>
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-lg-6">
-                <div class="single-circular-box">
-                    <div class="circular-title">
-                        <h3>ÜK 295 – Kompetenznachweis</h3>
-                        <p>Umsetzung serverseitiger Applikationslogik mit Fokus auf Backend-Strukturen, Datenverarbeitung und der technischen Grundlage für funktionsfähige Webanwendungen.</p>
-                    </div>
-                    <div class="circular-btn">
-                        <a href="~/documents/üK-295-Kompetenznachweis.pdf" target="_blank" rel="noopener">DOKUMENT ÖFFNEN</a>
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-lg-6">
-                <div class="single-circular-box">
-                    <div class="circular-title">
-                        <h3>ÜK 335 – Kompetenznachweis</h3>
-                        <p>Planung und Umsetzung einer mobilen Anwendung mit Fokus auf mobile Benutzeroberflächen, Applikationslogik und die praktische Entwicklung für mobile Endgeräte.</p>
-                    </div>
-                    <div class="circular-btn">
-                        <a href="~/documents/üK-335-Kompetenznachweis.pdf" target="_blank" rel="noopener">DOKUMENT ÖFFNEN</a>
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-lg-6">
-                <div class="single-circular-box">
-                    <div class="circular-title">
-                        <h3>ÜK 294 – Kompetenznachweis</h3>
-                        <p>Entwicklung interaktiver Weboberflächen mit Fokus auf Benutzerinteraktion, strukturiertem Frontend-Aufbau und der Umsetzung funktionaler Webanwendungen.</p>
-                    </div>
-                    <div class="circular-btn">
-                        <a href="~/documents/üK-294-Kompetenznachweis.pdf" target="_blank" rel="noopener">DOKUMENT ÖFFNEN</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-
-<section id="contact">
-    <div class="contact-us-area style-two pt-100">
-        <div class="container">
-
-            <div class="row">
-                <div class="col-lg-12">
-                    <div class="dreamit-section-title style-two text-center">
-                        <h5>KONTAKT</h5>
-                        <h1>GET IN <span>TOUCH</span></h1>
-                    </div>
-                </div>
-            </div>
-
-            <div class="row">
-
-                <div class="col-lg-4 col-md-6 col-sm-12">
-                    <div class="row">
-
-                        <div class="col-lg-12">
-                            <div class="contact-us-single-box">
-                                <div class="contact-us-icon">
-                                    <i class="flaticon-suitcase"></i>
-                                </div>
-
-                                <div class="contact-us-title">
-                                    <h2>STANDORT</h2>
-                                    <p>Schweiz, Bern</p>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="col-lg-12">
-                            <div class="contact-us-single-box">
-                                <div class="contact-us-icon">
-                                    <i class="flaticon-call"></i>
-                                </div>
-
-                                <div class="contact-us-title">
-                                    <h2>TELEFON</h2>
-                                    <p>
-                                        <a href="tel:0797367355">079 736 73 55</a>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="col-lg-12">
-                            <div class="contact-us-single-box">
-                                <div class="contact-us-icon">
-                                    <i class="flaticon-communications"></i>
-                                </div>
-
-                                <div class="contact-us-title">
-                                    <h2>E-MAIL</h2>
-                                    <p>
-                                        <a href="mailto:francesco.damico@gmx.ch">
-                                            francesco.damico@gmx.ch
-                                        </a>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-
-                    </div>
-                </div>
-
-                <div class="col-lg-8 col-md-6 col-sm-12">
-                    <div class="row">
-                        <div class="col-lg-12">
-
-                            <div class="contact-form-box style-two">
-
-                                <div id="contact-form-message" class="alert" role="alert" style="display:none;"></div>
-
-                                <form method="post" id="dreamit-form" novalidate>
-
-                                    <h4>
-                                        Sie möchten mehr über meine Projekte oder meine Bewerbung erfahren? <br /> Ich freue mich über eine Nachricht.
-                                    </h4>
-
-                                    <div class="row">
-
-                                        <div class="col-lg-6 col-md-6 col-sm-12">
-                                            <div class="form-title">
-                                                <p>Name (Pflichtfeld)</p>
-                                            </div>
-
-                                            <div class="from-box">
-                                                <input
-                                                    type="text"
-                                                    name="name"
-                                                    placeholder="Name*"
-                                                    required>
-                                                <div class="invalid-feedback"></div>
-                                            </div>
-                                        </div>
-
-                                        <div class="col-lg-6 col-md-6 col-sm-12">
-                                            <div class="form-title">
-                                                <p>E-Mail (Pflichtfeld)</p>
-                                            </div>
-
-                                            <div class="from-box">
-                                                <input
-                                                    type="email"
-                                                    name="email"
-                                                    placeholder="E-Mail*"
-                                                    required>
-                                                <div class="invalid-feedback"></div>
-                                            </div>
-                                        </div>
-
-                                        <div class="col-lg-6 col-md-6 col-sm-12">
-                                            <div class="form-title">
-                                                <p>Telefon (optional)</p>
-                                            </div>
-
-                                            <div class="from-box">
-                                                <input
-                                                    type="tel"
-                                                    name="phone"
-                                                    placeholder="z. B. 079 123 45 67 oder +41 79 123 45 67">
-                                                <div class="invalid-feedback"></div>
-                                            </div>
-                                        </div>
-
-                                        <div class="col-lg-6 col-md-6 col-sm-12">
-                                            <div class="form-title">
-                                                <p>Betreff (Pflichtfeld)</p>
-                                            </div>
-
-                                            <div class="from-box">
-                                                <input
-                                                    type="text"
-                                                    name="subject"
-                                                    placeholder="Betreff*"
-                                                    required>
-                                                <div class="invalid-feedback"></div>
-                                            </div>
-                                        </div>
-
-                                        <div class="col-lg-12">
-                                            <div class="form-title">
-                                                <p>Nachricht</p>
-                                            </div>
-
-                                            <div class="from-box">
-                                                <textarea
-                                                    name="message"
-                                                    cols="30"
-                                                    rows="10"
-                                                    placeholder="Nachricht*"
-                                                    required></textarea>
-                                                <div class="invalid-feedback"></div>
-                                            </div>
-                                        </div>
-
-                                        <div class="col-lg-12">
-                                            <div class="contact-form">
-                                                <button type="submit">
-                                                    NACHRICHT SENDEN
-                                                    <i class="fas fa-check"></i>
-                                                </button>
-                                            </div>
-                                        </div>
-
-                                    </div>
-                                </form>
-
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-            </div>
-        </div>
-    </div>
-</section>
+<partial name="Sections/_Hero" model="SectionView.For(Model.PageContent.Hero, Model.EditMode)" />
+<partial name="Sections/_About" model="SectionView.For(Model.PageContent.About, Model.EditMode)" />
+<partial name="Sections/_Skills" model="SectionView.For(Model.PageContent.Skills, Model.EditMode)" />
+<partial name="Sections/_Projects" model="SectionView.For(Model.PageContent.Projects, Model.EditMode)" />
+<partial name="Sections/_Goals" model="SectionView.For(Model.PageContent.Goals, Model.EditMode)" />
+<partial name="Sections/_Experience" model="SectionView.For(Model.PageContent.Experience, Model.EditMode)" />
+<partial name="Sections/_Documents" model="SectionView.For(Model.PageContent.Documents, Model.EditMode)" />
+<partial name="Sections/_Contact" model="SectionView.For(Model.PageContent.Contact, Model.EditMode)" />
 
 @section Scripts {
-    <script>
-        (function () {
-            var form = document.getElementById("dreamit-form");
-            var messageBox = document.getElementById("contact-form-message");
-            var submitButton = form.querySelector("button[type=submit]");
-
-            function showMessage(text, isSuccess) {
-                messageBox.textContent = text;
-                messageBox.className = "alert " + (isSuccess ? "alert-success" : "alert-danger");
-                messageBox.style.display = "block";
-            }
-
-            function isValidPhone(value) {
-                if (!value) return true;
-                return /^(?:\+41|0041|0)[\s-]?\d{2}(?:[\s-]?\d{3})(?:[\s-]?\d{2}){2}$/.test(value);
-            }
-
-            function isValidEmail(value) {
-                return /^[^\s@@]+@@[^\s@@]+\.[^\s@@]+$/.test(value);
-            }
-
-            var validators = {
-                name: function (value) {
-                    return value.trim() ? "" : "Bitte geben Sie Ihren Namen ein.";
-                },
-                email: function (value) {
-                    if (!value.trim()) return "Bitte geben Sie Ihre E-Mail-Adresse ein.";
-                    return isValidEmail(value.trim()) ? "" : "Bitte geben Sie eine gültige E-Mail-Adresse ein.";
-                },
-                phone: function (value) {
-                    return isValidPhone(value.trim()) ? "" : "Bitte geben Sie eine gültige Telefonnummer ein.";
-                },
-                subject: function (value) {
-                    return value.trim() ? "" : "Bitte geben Sie einen Betreff ein.";
-                },
-                message: function (value) {
-                    return value.trim() ? "" : "Bitte geben Sie eine Nachricht ein.";
-                }
-            };
-
-            function fieldOf(name) {
-                return form.querySelector("[name=" + name + "]");
-            }
-
-            function validateField(name) {
-                var field = fieldOf(name);
-                var feedback = field.closest(".from-box").querySelector(".invalid-feedback");
-                var error = validators[name](field.value);
-
-                field.classList.toggle("is-invalid", !!error);
-                feedback.textContent = error;
-
-                return !error;
-            }
-
-            function validateAll() {
-                var allValid = true;
-                Object.keys(validators).forEach(function (name) {
-                    if (!validateField(name)) allValid = false;
-                });
-                return allValid;
-            }
-
-            Object.keys(validators).forEach(function (name) {
-                var field = fieldOf(name);
-                field.addEventListener("blur", function () { validateField(name); });
-                field.addEventListener("input", function () {
-                    if (field.classList.contains("is-invalid")) validateField(name);
-                });
-            });
-
-            form.addEventListener("submit", function (event) {
-                event.preventDefault();
-
-                if (!validateAll()) {
-                    showMessage("Bitte korrigieren Sie die markierten Felder.", false);
-                    return;
-                }
-
-                var payload = {
-                    name: fieldOf("name").value.trim(),
-                    email: fieldOf("email").value.trim(),
-                    phone: fieldOf("phone").value.trim(),
-                    subject: fieldOf("subject").value.trim(),
-                    message: fieldOf("message").value.trim()
-                };
-
-                submitButton.disabled = true;
-
-                fetch("/api/v1/contact", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify(payload)
-                })
-                    .then(function (response) {
-                        if (response.ok) {
-                            showMessage("Danke für die Nachricht! Ich melde mich so schnell wie möglich.", true);
-                            form.reset();
-                        } else {
-                            showMessage("Beim Senden ist leider ein Fehler aufgetreten. Bitte versuchen Sie es erneut", false);
-                        }
-                    })
-                    .catch(function () {
-                        showMessage("Beim Senden ist ein Fehler aufgetreten. Bitte versuche es erneut.", false);
-                    })
-                    .finally(function () {
-                        submitButton.disabled = false;
-                    });
-            });
-        })();
-
-        (function () {
-            var toggleButton = document.getElementById("experience-toggle");
-            var timeline = document.querySelector("#experience .experience-timeline");
-            var experienceSection = document.getElementById("experience");
-
-            if (!toggleButton || !timeline) return;
-
-            toggleButton.addEventListener("click", function () {
-                var isExpanded = timeline.classList.toggle("is-expanded");
-                toggleButton.textContent = isExpanded ? "Weniger anzeigen" : "Mehr erfahren";
-                toggleButton.setAttribute("aria-expanded", isExpanded ? "true" : "false");
-
-                if (!isExpanded && experienceSection) {
-                    experienceSection.scrollIntoView({ behavior: "smooth", block: "start" });
-                }
-            });
-        })();
-    </script>
+    <partial name="_PortfolioScripts" />
 }
diff --git a/BewerbungWebseite/Pages/Index.cshtml.cs b/BewerbungWebseite/Pages/Index.cshtml.cs
index 58407c6..3fbb91e 100644
--- a/BewerbungWebseite/Pages/Index.cshtml.cs
+++ b/BewerbungWebseite/Pages/Index.cshtml.cs
@@ -1,12 +1,20 @@
 using Microsoft.AspNetCore.Mvc.RazorPages;
+using BewerbungsSeite.Models.SiteContent;
+using BewerbungsSeite.Services;
 
 namespace BewerbungsSeite.Pages
 {
-    public class IndexModel : PageModel
+    public class IndexModel(IPageContentService pageContentService) : PageModel
     {
-        public void OnGet()
-        {
+        /// <summary>Der aus der Datenbank geladene Seiteninhalt.</summary>
+        public PageContent PageContent { get; private set; } = new();
 
+        /// <summary>Auf der oeffentlichen Seite nie aktiv; nur die Admin-Seite rendert im Editiermodus.</summary>
+        public bool EditMode => false;
+
+        public async Task OnGetAsync()
+        {
+            PageContent = await pageContentService.GetAsync(HttpContext.RequestAborted);
         }
     }
 }
diff --git a/BewerbungWebseite/Pages/_ViewImports.cshtml b/BewerbungWebseite/Pages/_ViewImports.cshtml
index d53df6a..bd26613 100644
--- a/BewerbungWebseite/Pages/_ViewImports.cshtml
+++ b/BewerbungWebseite/Pages/_ViewImports.cshtml
@@ -1,3 +1,4 @@
 @using BewerbungsSeite
+@using BewerbungsSeite.Models.SiteContent
 @namespace BewerbungsSeite.Pages
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers