Rebuild Themes and More

This commit is contained in:
2025-04-27 21:35:00 +02:00
parent 6bc664bbe3
commit 3a68af1f68
11 changed files with 452 additions and 165 deletions

View File

@@ -0,0 +1,58 @@
<section id="about" class="bg-light">
<div class="container">
<h2 class="text-center section-title animate__animated animate__fadeIn">Chi Sono</h2>
<div class="row align-items-center">
<div class="col-lg-6 animate__animated animate__fadeInLeft">
<h3 class="mb-4">Il ponte tra sistemi e sviluppo web</h3>
<p class="lead">Con oltre 7 Anni di esperienza nello sviluppo di applicazioni web con Python Flask, offro soluzioni complete end-to-end.</p>
<p>La mia doppia specializzazione mi permette di comprendere a fondo l'intero ciclo di vita delle applicazioni, dall'architettura del server fino all'implementazione e al deployment.</p>
<p>Mi piace risolvere problemi complessi e creare soluzioni che siano robuste, scalabili e facili da mantenere.</p>
<div class="mt-4">
<!--<a href="#" class="btn btn-primary me-2">Scarica CV</a>-->
<a href="#links" class="btn btn-outline-secondary">I Miei Profili</a>
</div>
</div>
<div class="col-lg-6 animate__animated animate__fadeInRight">
<div class="card border-0 shadow-sm">
<div class="card-body p-4">
<h4 class="mb-4 text-primary">Tecnologie che utilizzo</h4>
<div class="d-flex flex-wrap justify-content-center">
<div class="text-center m-3">
<i class="fab fa-linux tech-icon"></i>
<p>Linux</p>
</div>
<div class="text-center m-3">
<i class="fab fa-windows tech-icon"></i>
<p>Windows</p>
</div>
<div class="text-center m-3">
<i class="fab fa-python tech-icon"></i>
<p>Python</p>
</div>
<div class="text-center m-3">
<i class="fas fa-flask tech-icon"></i>
<p>Flask</p>
</div>
<div class="text-center m-3">
<i class="fas fa-database tech-icon"></i>
<p>Database</p>
</div>
<div class="text-center m-3">
<i class="fab fa-docker tech-icon"></i>
<p>Docker</p>
</div>
<div class="text-center m-3">
<i class="fas fa-server tech-icon"></i>
<p>Server</p>
</div>
<div class="text-center m-3">
<i class="fas fa-network-wired tech-icon"></i>
<p>Networking</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -1,7 +0,0 @@
<div id="social-links" class="d-flex flex-wrap justify-content-center gap-3">
<a href="https://blog.hersel.it/" target="_blank" class="social-link"><i class="bi bi-journal-code"></i> Blog</a>
<a href="https://linkedin.com/in/hersel" target="_blank" class="social-link"><i class="bi bi-linkedin"></i> LinkedIn</a>
<a href="https://github.com/blulupo" target="_blank" class="social-link"><i class="bi bi-github"></i> GitHub</a>
<a href="https://stackoverflow.com/users/11765177/hersel-giannella" target="_blank" class="social-link"><i class="bi bi-stack-overflow"></i> StackOverflow</a>
<a href="https://www.codewars.com/users/BluLupo" target="_blank" class="social-link"><i class="bi bi-terminal"></i>CodeWars</a>
</div>

View File

@@ -0,0 +1,52 @@
<section id="links" class="bg-light">
<div class="container">
<h2 class="text-center section-title animate__animated animate__fadeIn">I Miei Profili</h2>
<div class="row justify-content-center">
<div class="col-lg-10 text-center animate__animated animate__fadeInUp">
<div class="card border-0 shadow-sm">
<div class="card-body p-5">
<div class="d-flex flex-wrap justify-content-center mb-4">
<a href="https://linkedin.com/in/hersel" class="m-3 text-decoration-none animate__animated animate__bounceIn" style="animation-delay: 0.1s">
<div class="text-center">
<i class="fab fa-linkedin social-icon"></i>
<p class="mt-2 fs-5">LinkedIn</p>
</div>
</a>
<a href="https://github.com/blulupo" class="m-3 text-decoration-none animate__animated animate__bounceIn" style="animation-delay: 0.2s">
<div class="text-center">
<i class="fab fa-github social-icon"></i>
<p class="mt-2 fs-5">GitHub</p>
</div>
</a>
<a href="https://stackoverflow.com/users/11765177/hersel-giannella" class="m-3 text-decoration-none animate__animated animate__bounceIn" style="animation-delay: 0.3s">
<div class="text-center">
<i class="fab fa-stack-overflow social-icon"></i>
<p class="mt-2 fs-5">Stack Overflow</p>
</div>
</a>
<a href="https://www.codewars.com/users/BluLupo" class="m-3 text-decoration-none animate__animated animate__bounceIn" style="animation-delay: 0.4s">
<div class="text-center">
<i class="fas fa-code social-icon"></i>
<p class="mt-2 fs-5">CodeWars</p>
</div>
</a>
<a href="https://blog.hersel.it" class="m-3 text-decoration-none animate__animated animate__bounceIn" style="animation-delay: 0.5s">
<div class="text-center">
<i class="fas fa-blog social-icon"></i>
<p class="mt-2 fs-5">Blog</p>
</div>
</a>
<a href="mailto:info@hersel.it" class="m-3 text-decoration-none animate__animated animate__bounceIn" style="animation-delay: 0.6s">
<div class="text-center">
<i class="fas fa-envelope social-icon"></i>
<p class="mt-2 fs-5">Email</p>
</div>
</a>
</div>
<p class="lead mt-4">Scopri di più sul mio lavoro e segui i miei progetti attraverso questi canali</p>
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -0,0 +1,130 @@
<section id="projects">
<div class="container">
<h2 class="text-center section-title animate__animated animate__fadeIn">I Miei Progetti</h2>
<div class="row">
<!-- Progetto 1 -->
<div class="col-lg-4 col-md-6 mb-4 animate__animated animate__fadeInUp">
<div class="card project-card shadow-sm">
<img src="/api/placeholder/400/250" class="card-img-top" alt="Progetto 1">
<div class="card-body">
<h5 class="card-title">Script di Backup Database (MariaDB/MySQL)</h5>
<p class="card-text">Script in Bash per sistemi Linux che permette l'automazione dei backup database</p>
<div class="d-flex justify-content-between align-items-center mt-3">
<div>
<span class="badge bg-primary me-1">Bash</span>
<span class="badge bg-info me-1">Linux</span>
</div>
<a href="https://github.com/BluLupo/server-script/tree/main/db_bash_backup-main" class="btn btn-sm btn-outline-primary">Dettagli</a>
</div>
</div>
</div>
</div>
<!-- Progetto 2 -->
<div class="col-lg-4 col-md-6 mb-4 animate__animated animate__fadeInUp" style="animation-delay: 0.2s">
<div class="card project-card shadow-sm">
<img src="/api/placeholder/400/250" class="card-img-top" alt="Progetto 2">
<div class="card-body">
<h5 class="card-title">Personal ByteStash</h5>
<p class="card-text">Ho realizzato un repository personale di snippet sfruttando Bytestash, ottimizzando la gestione del codice riutilizzabile e migliorando la produttività nello sviluppo di progetti software.</p>
<div class="d-flex justify-content-between align-items-center mt-3">
<div>
<span class="badge bg-warning text-dark me-1">LXC</span>
<span class="badge bg-dark me-1">Proxmox</span>
<span class="badge bg-info me-1">Nginx</span>
<span class="badge bg-secondary me-1">Reverse Proxy</span>
<span class="badge bg-primary me-1">Linux</span>
<span class="badge bg-primary me-1">Self-hosted</span>
</div>
<a href="https://bytestash.gwserver.it/public/snippets" class="btn btn-sm btn-outline-primary">Dettagli</a>
</div>
</div>
</div>
</div>
<!-- Progetto 3 -->
<div class="col-lg-4 col-md-6 mb-4 animate__animated animate__fadeInUp" style="animation-delay: 0.4s">
<div class="card project-card shadow-sm">
<img src="/api/placeholder/400/250" class="card-img-top" alt="Nextcloud Personale">
<div class="card-body">
<h5 class="card-title">Nextcloud Personale</h5>
<p class="card-text">Installazione di Nextcloud su container LXC con database PostgreSQL e caching Redis, integrato in una rete privata con gestione IP tramite server DHCP.</p>
<div class="d-flex justify-content-between align-items-center mt-3">
<div>
<span class="badge bg-primary me-1">Nextcloud</span>
<span class="badge bg-secondary me-1">PostgreSQL</span>
<span class="badge bg-info me-1">Redis</span>
<span class="badge bg-warning text-dark me-1">LXC</span>
<span class="badge bg-dark me-1">Proxmox</span>
<span class="badge bg-success me-1">Rete Privata</span>
<span class="badge bg-secondary me-1">DHCP Server</span>
</div>
<a href="https://cloud.gwserver.it" class="btn btn-sm btn-outline-primary">Dettagli</a>
</div>
</div>
</div>
</div>
<!--
<div class="col-lg-4 col-md-6 mb-4 animate__animated animate__fadeInUp" style="animation-delay: 0.6s">
<div class="card project-card shadow-sm">
<img src="/api/placeholder/400/250" class="card-img-top" alt="Progetto 4">
<div class="card-body">
<h5 class="card-title">Gestione Configurazioni</h5>
<p class="card-text">Sistema centralizzato per la gestione delle configurazioni di server Windows/Linux con versioning e controllo accessi.</p>
<div class="d-flex justify-content-between align-items-center mt-3">
<div>
<span class="badge bg-primary me-1">Python</span>
<span class="badge bg-secondary me-1">Ansible</span>
<span class="badge bg-info me-1">PowerShell</span>
</div>
<a href="#" class="btn btn-sm btn-outline-primary">Dettagli</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 animate__animated animate__fadeInUp" style="animation-delay: 0.8s">
<div class="card project-card shadow-sm">
<img src="/api/placeholder/400/250" class="card-img-top" alt="Progetto 5">
<div class="card-body">
<h5 class="card-title">API Gateway</h5>
<p class="card-text">Gateway API realizzato con Flask per la gestione centralizzata di microservizi distribuiti su diversi server.</p>
<div class="d-flex justify-content-between align-items-center mt-3">
<div>
<span class="badge bg-primary me-1">Flask</span>
<span class="badge bg-secondary me-1">REST</span>
<span class="badge bg-info me-1">JWT</span>
</div>
<a href="#" class="btn btn-sm btn-outline-primary">Dettagli</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 animate__animated animate__fadeInUp" style="animation-delay: 1s">
<div class="card project-card shadow-sm">
<img src="/api/placeholder/400/250" class="card-img-top" alt="Progetto 6">
<div class="card-body">
<h5 class="card-title">Dashboard Analytics</h5>
<p class="card-text">Dashboard per la visualizzazione in tempo reale di dati analitici con integrazione di diversi sistemi aziendali.</p>
<div class="d-flex justify-content-between align-items-center mt-3">
<div>
<span class="badge bg-primary me-1">Python</span>
<span class="badge bg-secondary me-1">D3.js</span>
<span class="badge bg-info me-1">WebSockets</span>
</div>
<a href="#" class="btn btn-sm btn-outline-primary">Dettagli</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>-->
</div>
</div>
</section>

View File

@@ -1,10 +0,0 @@
<div id="skills" class="mb-4">
<a href="https://www.python.org" target="_blank" class="icon-link"><i class="bi bi-file-earmark-code"></i>Python</a>
<a href="https://flask.palletsprojects.com" target="_blank" class="icon-link"><i class="bi bi-cup-hot"></i>Flask</a>
<a href="https://www.postgresql.org" target="_blank" class="icon-link"><i class="bi bi-database"></i> PostgreSQL</a>
<a href="https://php.net" target="_blank" class="icon-link"><i class="bi bi-code-slash"></i> PHP</a>
<a href="https://docker.com" target="_blank" class="icon-link"><i class="bi bi-box-seam"></i> Docker</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank" class="icon-link"><i class="bi bi-file-earmark-text"></i> HTML</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank" class="icon-link"><i class="bi bi-palette"></i> CSS</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank" class="icon-link"><i class="bi bi-braces"></i> JavaScript</a>
</div>