Rebuild Themes and More
This commit is contained in:
@@ -1,110 +1,86 @@
|
|||||||
/* styles.css */
|
:root {
|
||||||
|
--primary-color: #0d6efd;
|
||||||
|
--secondary-color: #6c757d;
|
||||||
|
--accent-color: #ffc107;
|
||||||
|
--dark-color: #212529;
|
||||||
|
--light-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
padding: 0;
|
|
||||||
background: radial-gradient(circle, #000000, #1a1a1a);
|
|
||||||
color: white;
|
|
||||||
font-family: 'Courier New', Courier, monospace;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.black-hole-container {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding: 5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-section {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
background-color: var(--dark-color);
|
||||||
color: antiquewhite;
|
color: var(--light-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.black-hole {
|
|
||||||
position: absolute;
|
|
||||||
width: 250px;
|
|
||||||
height: 250px;
|
|
||||||
background: radial-gradient(circle, rgba(0, 0, 0, 0.8), #000000);
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: 0 0 80px 40px rgba(0, 0, 0, 0.7);
|
|
||||||
animation: spin 2s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(30px);
|
|
||||||
animation: fadeIn 2s ease-in-out forwards 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#name {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
letter-spacing: 3px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #bfbfbf; /* Grigio chiaro per armonizzare con il tema */
|
|
||||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Ombra scura per contrasto */
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.tech-icon {
|
||||||
|
font-size: 3rem;
|
||||||
#subtitle {
|
margin: 1rem;
|
||||||
font-size: 1.5rem;
|
color: var(--primary-color);
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#skills .icon-link {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: #ffffff;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#skills .icon-link i {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#skills .icon-link:hover {
|
|
||||||
color: #00c1ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#social-links .social-link {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: #ffffff;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 5px 10px;
|
|
||||||
border: 1px solid #ffffff;
|
|
||||||
border-radius: 5px;
|
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
#social-links .social-link i {
|
.tech-icon:hover {
|
||||||
font-size: 1.5rem;
|
color: var(--accent-color);
|
||||||
}
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
#social-links .social-link:hover {
|
|
||||||
color: #000000;
|
.project-card {
|
||||||
background-color: #ffffff;
|
transition: transform 0.3s ease;
|
||||||
}
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar.scrolled {
|
||||||
|
background-color: rgba(33, 37, 41, 0.98) !important;
|
||||||
|
transition: background-color 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin: 0 1.5rem;
|
||||||
|
color: var(--primary-color);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon:hover {
|
||||||
|
color: var(--accent-color);
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: -10px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 50px;
|
||||||
|
height: 3px;
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#back-to-top {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 20px;
|
||||||
|
display: none;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
BIN
static/img/personal.png
Normal file
BIN
static/img/personal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
@@ -1,10 +1,53 @@
|
|||||||
const blackHole = document.querySelector('.black-hole');
|
// Navbar color change on scroll
|
||||||
|
window.addEventListener('scroll', function() {
|
||||||
|
const navbar = document.getElementById('navbar');
|
||||||
|
if (window.scrollY > 50) {
|
||||||
|
navbar.classList.add('scrolled');
|
||||||
|
} else {
|
||||||
|
navbar.classList.remove('scrolled');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
blackHole.addEventListener('mouseover', () => {
|
// Back to top button
|
||||||
blackHole.style.transform = 'scale(1.2)';
|
const backToTopButton = document.getElementById('back-to-top');
|
||||||
blackHole.style.transition = 'transform 0.2s ease';
|
|
||||||
});
|
|
||||||
|
|
||||||
blackHole.addEventListener('mouseout', () => {
|
window.addEventListener('scroll', function() {
|
||||||
blackHole.style.transform = 'scale(1)';
|
if (window.scrollY > 300) {
|
||||||
});
|
backToTopButton.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
backToTopButton.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
backToTopButton.addEventListener('click', function() {
|
||||||
|
window.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Activate animation when elements come into view
|
||||||
|
const animateOnScroll = function() {
|
||||||
|
const elements = document.querySelectorAll('.animate__animated');
|
||||||
|
|
||||||
|
elements.forEach(function(element) {
|
||||||
|
const position = element.getBoundingClientRect();
|
||||||
|
|
||||||
|
// If the element is in the viewport
|
||||||
|
if(position.top < window.innerHeight && position.bottom >= 0) {
|
||||||
|
// Get the animation class
|
||||||
|
const animationClass = Array.from(element.classList).find(className =>
|
||||||
|
className.startsWith('animate__') && className !== 'animate__animated'
|
||||||
|
);
|
||||||
|
|
||||||
|
// If it has 'animate__fadeIn' class and is not already visible
|
||||||
|
if(animationClass && !element.classList.contains('animated-in')) {
|
||||||
|
element.classList.add('animated-in');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('scroll', animateOnScroll);
|
||||||
|
// Trigger on page load
|
||||||
|
window.addEventListener('load', animateOnScroll);
|
||||||
|
|||||||
58
templates/content/about.html
Normal file
58
templates/content/about.html
Normal 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>
|
||||||
@@ -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
52
templates/content/links.html
Normal 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
130
templates/content/project.html
Normal 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>
|
||||||
@@ -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>
|
|
||||||
@@ -1,26 +1,13 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Hersel Giannella - PortFolio</title>
|
<title>Portfolio - Sistemista Windows/Linux e Sviluppatore Web</title>
|
||||||
<meta name="title" content="Hersel Giannella | Analista Programmatore | Python Developer | Linux SysAdmin">
|
<!-- Bootstrap 5.3 CSS -->
|
||||||
<meta name="description" content="Hersel Giannella | Analista Programmatore | Python Developer | Linux SysAdmin">
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
<!-- Animate.css -->
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
|
<!-- Font Awesome -->
|
||||||
</head>
|
<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 -->
|
</head>
|
||||||
<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 -->
|
|
||||||
@@ -1,17 +1,51 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="it">
|
||||||
{% include "head.html" %}
|
{% include "head.html" %}
|
||||||
<body>
|
<body data-bs-spy="scroll" data-bs-target="#navbar">
|
||||||
<div class="black-hole-container">
|
<!-- Navbar -->
|
||||||
<div class="black-hole"></div>
|
{% include "navbar.html" %}
|
||||||
<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" %}
|
|
||||||
|
|
||||||
</div>
|
<!-- Hero Section -->
|
||||||
</div>
|
<section id="home" class="hero-section">
|
||||||
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
24
templates/navbar.html
Normal file
24
templates/navbar.html
Normal 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>
|
||||||
Reference in New Issue
Block a user