From 195a9cc440a65bf5427994a705f109c92582b6a5 Mon Sep 17 00:00:00 2001 From: Francesco Lorenzo D'Amico Date: Mon, 24 Aug 2026 20:46:57 +0200 Subject: [PATCH] Replace placeholder portfolio content with real storyboard content --- RazorPagesMovie/Pages/Bewerbung.cshtml | 535 ++++++++++-------- .../Pages/Shared/_BewerbungLayout.cshtml | 10 +- 2 files changed, 302 insertions(+), 243 deletions(-) diff --git a/RazorPagesMovie/Pages/Bewerbung.cshtml b/RazorPagesMovie/Pages/Bewerbung.cshtml index 49039b0..a4ee9cd 100644 --- a/RazorPagesMovie/Pages/Bewerbung.cshtml +++ b/RazorPagesMovie/Pages/Bewerbung.cshtml @@ -85,6 +85,16 @@ 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; @@ -160,14 +170,21 @@ color: #0c5adb; } - #skills .service-area { - padding: 90px 0; + #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: 210px; + min-height: 220px; + width: 100%; } #skills .techno-service-title p { @@ -215,13 +232,42 @@ 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 { @@ -273,55 +319,31 @@ margin-bottom: 12px; } - #education .single-circular-box { - margin-bottom: 20px; + #documents .documents-grid { + display: flex; + flex-wrap: wrap; } - #education .circular-btn { + #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; } - #education .circular-btn a { - cursor: pointer; - } - - .certificate-modal { - display: none; - position: fixed; - z-index: 99999; - inset: 0; - background: rgba(0,0,0,.88); - align-items: center; - justify-content: center; - padding: 30px; - } - - .certificate-modal.open { - display: flex; - } - - .certificate-modal img { - max-width: 92vw; - max-height: 86vh; - box-shadow: 0 10px 60px rgba(0,0,0,.5); - } - - .certificate-modal button { - position: absolute; - top: 22px; - right: 28px; - background: #fff; - border: 0; - border-radius: 50%; - width: 44px; - height: 44px; - font-size: 25px; - cursor: pointer; - } - #contact .contact-us-area { padding: 90px 0; } @@ -396,7 +418,6 @@ } #about .about-area, - #skills .service-area, #goals .service-area, #experience .career-details, #contact .contact-us-area { @@ -450,7 +471,7 @@ left: -24px; } - #education .single-circular-box { + #documents .single-circular-box { text-align: center; } @@ -464,13 +485,6 @@ justify-content: center; } - .certificate-modal button { - top: 12px; - right: 12px; - width: 38px; - height: 38px; - font-size: 20px; - } } @@media (max-width: 480px) { @@ -491,32 +505,36 @@
-

Portfolio & Bewerbung

+

Applikationsentwickler

FRANCESCO

LORENZO

D'AMICO

- Kurze persönliche Einleitung: Wer ich bin, worauf ich mich spezialisiere - und welchen Mehrwert ich als Applikationsentwickler mitbringe. + 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.

- KONTAKT AUFNEHMEN + PROJEKTE ANSEHEN
- - Lebenslauf (PDF) + + Kontakt aufnehmen + + + Curriculum Vitae (PDF)
- GitHub - LinkedIn - E-Mail + LinkedIn + E-Mail
- Portfolio Hero Bild + Francesco Lorenzo D'Amico
@@ -538,7 +556,7 @@
- Über mich + Über mich
@@ -548,18 +566,20 @@
Über mich

APPLIKATIONSENTWICKLUNG

-

MIT FOKUS

+

MIT NEUGIER

- Hier kommt dein persönlicher Über-mich-Text gemäss Mockup hinein. - Beschreibe kurz deinen Hintergrund, deine Arbeitsweise, Interessen - und welche Art von Projekten dich besonders motiviert. + 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.

-
SchwerpunktApplikationsentwicklung
+
DenkweiseProduktorientiert & zukunftsgerichtet
ArbeitsweiseStrukturiert & lösungsorientiert
-
InteresseWeb & Software
-
PortfolioProjekte ansehen
+
InteressenModerne Technologien & Trends
+
LernhaltungNeugier & praxisorientiert
@@ -569,81 +589,76 @@
-
-
-
-
-
-
-
Skills / Technologien
-

MEINE TECHNISCHEN

-

SKILLS

-

Die Bezeichnungen können später durch deine tatsächlichen Technologien ersetzt werden.

-
-
+
+
+
+
Kompetenzen
+

MEINE TECHNISCHEN SKILLS

+

Technologien und Arbeitsweisen, mit denen ich bereits gearbeitet habe.

+
-
-
-
-
-
-

Backend

Technologien / Frameworks

-
+
+
+
+
+
+
+

Backend

ASP.NET Core · Entity Framework Core · REST APIs · C# · PHP · Symfony

+
-
-
-
-
-
-

Frontend

Technologien / Frameworks

-
+
+
+
+
+
+

Frontend

React · SASS · Symfony-Twig · PHP Bootstrap

+
-
-
-
-
-
-

Datenbanken

SQL / Datenmodellierung

-
+
+
+
+
+
+

DB

MongoDB · MS SQL Server

+
-
-
-
-
-
-

Testing

Qualität / Debugging

-
+
+
+
+
+
+

Systeme

Docker · TrueNAS · Webhosting-Grundlagen

+
-
-
-
-
-
-

Git

Versionsverwaltung

-
+
+
+
+
+
+

AI

Prompting · Code-Unterstützung · Recherche

+
-
-
-
-
-
-

Tools

IDE / Dev-Workflow

-
+
+
+
+
+
+

Soft Skills

Strukturiertes Arbeiten · Lernbereitschaft · selbstständige Fehlersuche · Zuverlässigkeit

@@ -657,57 +672,72 @@
Projekte

MEINE PROJEKTE

-

Vier Projektbeispiele gemäss Mockup. Inhalt, Bilder und Links werden später ersetzt.

-
+
-
Projekt 1
+
Francesco's Recipes World
-

PROJEKT 01

Kurzbeschreibung des Projekts und der wichtigsten Funktion.

+

Francesco's Recipes World

+

Full-Stack-Rezeptverwaltung zum Erstellen, Bearbeiten und Kategorisieren von Rezepten, Zutaten und Einheiten. Die Anwendung basiert auf einer strukturierten MVC-Architektur und relationaler Datenmodellierung.

-

TECH:

Technologien

-
Projekt ansehenGitHub
+
+

TECH:

C# · ASP.NET Core MVC · Entity Framework Core · JavaScript · AJAX

+

Meine Arbeit:

Datenmodellierung, Controller- und Geschäftslogik, Razor-Views, CRUD-Funktionen sowie AJAX-Integration umgesetzt.

+
+
Projekt ansehenGitHub
-
+
-
Projekt 2
+
Realtime Chat App
-

PROJEKT 02

Kurzbeschreibung des Projekts und der wichtigsten Funktion.

+

Realtime Chat App

+

Echtzeit-Chat-Anwendung mit React-Frontend, Node.js-Backend und persistenter Datenspeicherung. Nachrichten und Räume werden über Socket.IO in Echtzeit synchronisiert.

-

TECH:

Technologien

-
Projekt ansehenGitHub
-
-
- -
-
-
Projekt 3
-
-

PROJEKT 03

Kurzbeschreibung des Projekts und der wichtigsten Funktion.

+
+

TECH:

React · Node.js · Express · Socket.IO · MongoDB · Docker

+

Meine Arbeit:

Frontend und Backend umgesetzt, Echtzeitkommunikation integriert, Datenhaltung angebunden und Anwendung mit Docker containerisiert.

-

TECH:

Technologien

-
Projekt ansehenGitHub
-
-
- -
-
-
-
WEITERE PROJEKTE
+
+
+
+
+
+
TrueNAS SCALE Dashboard
+
+
+
+

Homelab / Self-Hosting

+

Ziel: Aufbau einer eigenen Hosting-Umgebung, um Anwendungen und Dienste selbst zu betreiben und praktische Erfahrung mit Infrastruktur, Netzwerken und Deployment zu sammeln.

+
+
+

Hardware / System:

+

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

+ +

Services:

+

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

+ +

Sicherheit:

+

HTTPS für öffentlich erreichbare Dienste · Reverse Proxy über Nginx Proxy Manager · DNS-basierte Weiterleitung · getrennte Container und Services · Backup-Lösung mit Duplicati

+ +

Meine Arbeit:

+

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.

+ +

Gelernt:

+

Docker und Container Networking · YAML-basierte Deployments · Reverse Proxy · DNS · HTTPS · ZFS und RAIDZ1 · Self-Hosting · Deployment eigener Anwendungen · Backup-Konzept · Fehleranalyse und Troubleshooting

+
+
+
+
+
@@ -723,45 +753,48 @@
-
+
+ +
+
-

Ziel 01

Kurze Beschreibung des persönlichen oder beruflichen Ziels.

+

Praxis vertiefen

Meine bisherigen Kenntnisse in echten Projekten anwenden, Verantwortung übernehmen und mich fachlich weiterentwickeln.

-
+
-

Ziel 02

Kurze Beschreibung des persönlichen oder beruflichen Ziels.

+

Moderne Technologien einsetzen

Mit aktuellen Technologien arbeiten, neue Ansätze kennenlernen und passende Lösungen für reale Anforderungen finden.

-
+
-

Ziel 03

Kurze Beschreibung des persönlichen oder beruflichen Ziels.

+

Eigene Ideen umsetzen

Projekte weiterdenken, verbessern und aus Ideen langfristig funktionierende Lösungen entwickeln.

-
+
-

Ziel 04

Kurze Beschreibung des persönlichen oder beruflichen Ziels.

+

Als Entwickler wachsen

Meine technischen und persönlichen Fähigkeiten kontinuierlich ausbauen und Schritt für Schritt mehr Verantwortung übernehmen.

@@ -783,43 +816,31 @@
-

Position / Tätigkeit 01

-
Firma / Organisation · Zeitraum
+

Scrum

+
Schule & Praxis · laufend angewendet

Aufgaben & Verantwortlichkeiten:

-

Kurze Beschreibung der wichtigsten Aufgaben, Projekte und eingesetzten Technologien.

+

Arbeit in klar definierten Aufgaben und Etappen, regelmässige Abstimmungen im Team sowie Planung und Nachverfolgung des aktuellen Projektstands.

-

Position / Tätigkeit 02

-
Firma / Organisation · Zeitraum
+

Agile Methoden

+
Schule & Praxis · laufend angewendet

Aufgaben & Verantwortlichkeiten:

-

Kurze Beschreibung der wichtigsten Aufgaben, Projekte und eingesetzten Technologien.

+

Iterative Entwicklung von Lösungen mit regelmässigem Feedback, schrittweiser Verbesserung und flexibler Anpassung an neue Anforderungen.

-

Position / Tätigkeit 03

-
Firma / Organisation · Zeitraum
+

Git Flow

+
Schule & Praxis · laufend angewendet

Aufgaben & Verantwortlichkeiten:

-

Kurze Beschreibung der wichtigsten Aufgaben, Projekte und eingesetzten Technologien.

+

Strukturierte Versionsverwaltung mit separaten Branches für neue Funktionen und Änderungen sowie kontrolliertes Zusammenführen des Codes im Team.

- -
-

Position / Tätigkeit 04

-
Firma / Organisation · Zeitraum
-
-

Aufgaben & Verantwortlichkeiten:

-

Kurze Beschreibung der wichtigsten Aufgaben, Projekte und eingesetzten Technologien.

-
-
-
-
-
MEHR ERFAHRUNG ANZEIGEN
@@ -827,36 +848,106 @@
-
+
-
Bildung / Zertifikate
-

BILDUNG & NACHWEISE

+
Dokumente & Zertifikate
+

DOKUMENTE & ZERTIFIKATE

-
+
-
-

Ausbildung / Zeugnis

-

Institution, Abschluss und Zeitraum. Hier kommt die kurze Beschreibung hinein.

+

BBC-Zertifikat

+

Erfolgreich abgeschlossenes Basislehrjahr Informatik mit praxisnahen Grundlagen in Programmierung, Betriebssystemen, Datenbanken, IoT, Applikationsentwicklung, Webentwicklung Frontend/Backend, Mobile App Entwicklung und individueller Projektarbeit.

- ZEUGNIS ANSEHEN + DOKUMENT ÖFFNEN
-
-

Zertifikat / Weiterbildung

-

Anbieter, Zertifikat und Datum. Hier kommt die kurze Beschreibung hinein.

+

ÜK 106 – Kompetenznachweis

+

Vertiefung der Grundlagen im Umgang mit relationalen Datenbanken, insbesondere beim Abfragen, Bearbeiten und Pflegen von Daten sowie beim strukturierten Arbeiten mit Datenbanksystemen.

- ZERTIFIKAT ANSEHEN + DOKUMENT ÖFFNEN +
+
+
+ +
+
+
+

ÜK 187 – Kompetenznachweis

+

Praktische Auseinandersetzung mit der Einrichtung und Inbetriebnahme eines ICT-Arbeitsplatzes inklusive Betriebssystem, grundlegender Systemkonfiguration und Vorbereitung für den produktiven Einsatz.

+
+
+ DOKUMENT ÖFFNEN +
+
+
+ +
+
+
+

ÜK 216 – Kompetenznachweis

+

Integration vernetzter Endgeräte in bestehende Plattformen mit Fokus auf Kommunikation, Einbindung von Geräten und Zusammenspiel verschiedener Komponenten innerhalb einer IoT-Umgebung.

+
+
+ DOKUMENT ÖFFNEN +
+
+
+ +
+
+
+

ÜK 223 – Kompetenznachweis

+

Entwicklung einer objektorientierten Anwendung für mehrere Benutzer mit Fokus auf sauberer Programmstruktur, Objektorientierung und der Umsetzung von Multi-User-Funktionalitäten.

+
+
+ DOKUMENT ÖFFNEN +
+
+
+ +
+
+
+

ÜK 295 – Kompetenznachweis

+

Umsetzung serverseitiger Applikationslogik mit Fokus auf Backend-Strukturen, Datenverarbeitung und der technischen Grundlage für funktionsfähige Webanwendungen.

+
+
+ DOKUMENT ÖFFNEN +
+
+
+ +
+
+
+

ÜK 335 – Kompetenznachweis

+

Planung und Umsetzung einer mobilen Anwendung mit Fokus auf mobile Benutzeroberflächen, Applikationslogik und die praktische Entwicklung für mobile Endgeräte.

+
+
+ DOKUMENT ÖFFNEN +
+
+
+ +
+
+
+

ÜK 294 – Kompetenznachweis

+

Entwicklung interaktiver Weboberflächen mit Fokus auf Benutzerinteraktion, strukturiertem Frontend-Aufbau und der Umsetzung funktionaler Webanwendungen.

+
+
+ DOKUMENT ÖFFNEN
@@ -864,11 +955,6 @@
- -
@@ -895,7 +981,7 @@

STANDORT

-

Schweiz

+

Schweiz, Bern

@@ -908,7 +994,7 @@

TELEFON

-

+41 XX XXX XX XX

+

079 736 73 55

@@ -922,8 +1008,8 @@

E-MAIL

- - deine-mail@example.com + + Francescodamico649@gmail.com

@@ -944,7 +1030,7 @@

- Haben Sie Fragen oder möchten Sie mit mir in Kontakt treten? Ich freue mich auf Ihre Nachricht. + Sie möchten mehr über meine Projekte oder meine Bewerbung erfahren? Ich freue mich über eine Nachricht.

@@ -1048,35 +1134,6 @@ @section Scripts {