Rebuild Themes and More
This commit is contained in:
@@ -1,110 +1,86 @@
|
||||
/* styles.css */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: radial-gradient(circle, #000000, #1a1a1a);
|
||||
color: white;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
overflow: hidden;
|
||||
}
|
||||
:root {
|
||||
--primary-color: #0d6efd;
|
||||
--secondary-color: #6c757d;
|
||||
--accent-color: #ffc107;
|
||||
--dark-color: #212529;
|
||||
--light-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.black-hole-container {
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 5rem 0;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: antiquewhite;
|
||||
}
|
||||
background-color: var(--dark-color);
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#subtitle {
|
||||
font-size: 1.5rem;
|
||||
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;
|
||||
.tech-icon {
|
||||
font-size: 3rem;
|
||||
margin: 1rem;
|
||||
color: var(--primary-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
#social-links .social-link i {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.tech-icon:hover {
|
||||
color: var(--accent-color);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
#social-links .social-link:hover {
|
||||
color: #000000;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.project-card {
|
||||
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', () => {
|
||||
blackHole.style.transform = 'scale(1.2)';
|
||||
blackHole.style.transition = 'transform 0.2s ease';
|
||||
});
|
||||
// Back to top button
|
||||
const backToTopButton = document.getElementById('back-to-top');
|
||||
|
||||
blackHole.addEventListener('mouseout', () => {
|
||||
blackHole.style.transform = 'scale(1)';
|
||||
});
|
||||
window.addEventListener('scroll', function() {
|
||||
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>
|
||||
<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>
|
||||
@@ -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>
|
||||
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