Francesco Lorenzo D'Amico
1428 lines
58 KiB
Plaintext
1428 lines
58 KiB
Plaintext
@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;
|
||
}
|
||
|
||
#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;
|
||
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);
|
||
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;
|
||
}
|
||
|
||
.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>
|
||
}
|
||
|
||
<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>
|
||
|
||
@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>
|
||
}
|