hersel/hersel.it
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rebuild Themes and More

Browse Source
This commit is contained in:
Blulupo
2025-04-27 21:35:00 +02:00
parent 6bc664bbe3
commit 3a68af1f68
11 changed files with 452 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
templates/content/about.html Normal file
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>

7
templates/content/link.html
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>

52
templates/content/links.html Normal file
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>

130
templates/content/project.html Normal file
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>

10
templates/content/skills.html
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>

35
templates/head.html
View File

@@ -1,26 +1,13 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hersel Giannella - PortFolio</title>
<meta name="title" content="Hersel Giannella | Analista Programmatore | Python Developer | Linux SysAdmin">
<meta name="description" content="Hersel Giannella | Analista Programmatore | Python Developer | Linux SysAdmin">
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
</head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio - Sistemista Windows/Linux e Sviluppatore Web</title>
<!-- Bootstrap 5.3 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Animate.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.hersel.it/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
</head>

60
templates/index.html
View File

@@ -1,17 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<html lang="it">
{% include "head.html" %}
<body>
<div class="black-hole-container">
<div class="black-hole"></div>
<div class="content">
<h1 id="name">Hersel Giannella</h1>
<p id="subtitle">Analista Programmatore / Linux SysAdmin</p>
{% include "content/skills.html" %}
{% include "content/link.html" %}
<body data-bs-spy="scroll" data-bs-target="#navbar">
<!-- Navbar -->
{% include "navbar.html" %}
</div>
</div>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
<!-- Hero Section -->
<section id="home" class="hero-section">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 animate__animated animate__fadeInLeft">
<h1 class="display-4 fw-bold mb-4">Sistemista/Sviluppatore Web</h1>
<p class="lead mb-4">Trasformo infrastrutture complesse in soluzioni web innovative ed efficienti</p>
<div class="d-flex gap-3">
<a href="#links" class="btn btn-primary btn-lg">I Miei Profili</a>
<a href="#projects" class="btn btn-outline-light btn-lg">Vedi Progetti</a>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center animate__animated animate__fadeInRight">
<div class="text-center">
<img src="{{ url_for('static', filename='img/personal.png') }}" alt="Profile" class="img-fluid rounded-circle shadow" style="max-width: 350px;">
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
{% include "content/about.html" %}
<!-- End About Section -->
<!-- Projects Section -->
{% include "content/project.html" %}
<!-- End Projects Section -->
<!-- Links Section -->
{% include "content/links.html" %}
<!-- End Link Section -->
<!-- Back to Top Button -->
<button id="back-to-top" class="btn btn-primary rounded-circle p-3">
<i class="fas fa-arrow-up"></i>
</button>
<!-- Bootstrap 5.3 JS Bundle with Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>
</html>

24
templates/navbar.html Normal file
View File

@@ -0,0 +1,24 @@
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark bg-transparent fixed-top">
<div class="container">
<a class="navbar-brand fw-bold" href="#">Hersel Giannella</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Chi Sono</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Progetti</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#links">Link</a>
</li>
</ul>
</div>
</div>
</nav>