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

            .portfolio-section:nth-of-type(even) {
                background: #f8f9fb;
            }

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

        .portfolio-header .techno_menu ul li a {
            padding-left: 14px;
            padding-right: 14px;
        }

        #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;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 25px;
        }

        #hero .hero-secondary {
            display: inline-block;
            padding: 16px 28px;
            border: 2px solid #fff;
            color: #fff;
            font-weight: 700;
        }

            #hero .hero-secondary:hover {
                background: #fff;
                color: #111;
            }

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

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

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

        #documents .documents-grid {
            display: flex;
            flex-wrap: wrap;
        }

        #documents .documents-grid > div {
            margin-bottom: 30px;
            display: flex;
        }

        #documents .single-circular-box {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-bottom: 0;
        }

        #documents .circular-btn {
            position: static;
            text-align: left;
            margin-top: 14px;
            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;
        }

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

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

<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</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</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/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 class="col-lg-6 col-md-6">
                <article class="project-card">
                    <div class="portfolio-details-thumb"><img src="~/images/projects/Screenshot 2026-08-24 154143.png" alt="Realtime Chat App"></div>
                    <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>
                </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 Razor Pages Movie App</p>

                                <h4>Sicherheit:</h4>
                                <p>HTTPS für öffentlich erreichbare Dienste · Reverse Proxy über Nginx Proxy Manager · DNS-basierte Weiterleitung · getrennte Container und Services · Backup-Lösung mit Duplicati</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 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 echten 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>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, regelmässige Abstimmungen im Team sowie Planung und Nachverfolgung des aktuellen Projektstands.</p>
                            </div>
                        </article>

                        <article class="experience-item">
                            <h3>Agile Methoden</h3>
                            <div class="experience-meta">Schule & Praxis · laufend angewendet</div>
                            <div class="details-text">
                                <h4>Aufgaben & Verantwortlichkeiten:</h4>
                                <p>Iterative Entwicklung von Lösungen mit regelmässigem Feedback, schrittweiser Verbesserung und flexibler Anpassung an neue Anforderungen.</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>
                    </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>079 736 73 55</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? 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>

@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 ein Fehler aufgetreten. Bitte versuche es erneut.", false);
                        }
                    })
                    .catch(function () {
                        showMessage("Beim Senden ist ein Fehler aufgetreten. Bitte versuche es erneut.", false);
                    })
                    .finally(function () {
                        submitButton.disabled = false;
                    });
            });
        })();
    </script>
}