diff --git a/static/css/styles.css b/static/css/styles.css index 316bb3b..006e2fe 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -1,110 +1,86 @@ -/* styles.css */ +:root { + --primary-color: #0d6efd; + --secondary-color: #6c757d; + --accent-color: #ffc107; + --dark-color: #212529; + --light-color: #f8f9fa; +} + body { - margin: 0; - padding: 0; - background: radial-gradient(circle, #000000, #1a1a1a); - color: white; - font-family: 'Courier New', Courier, monospace; - overflow: hidden; - } - - .black-hole-container { + 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; - } - - .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; - } + background-color: var(--dark-color); + color: var(--light-color); +} - - - #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; - } - - #social-links .social-link:hover { - color: #000000; - background-color: #ffffff; - } - \ No newline at end of file +} + +.tech-icon:hover { + color: var(--accent-color); + transform: scale(1.2); +} + +.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; +} \ No newline at end of file diff --git a/static/img/personal.png b/static/img/personal.png new file mode 100644 index 0000000..db6ca35 Binary files /dev/null and b/static/img/personal.png differ diff --git a/static/js/main.js b/static/js/main.js index b054583..20d892f 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -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); diff --git a/templates/content/about.html b/templates/content/about.html new file mode 100644 index 0000000..47e62f6 --- /dev/null +++ b/templates/content/about.html @@ -0,0 +1,58 @@ +
+
+

Chi Sono

+
+
+

Il ponte tra sistemi e sviluppo web

+

Con oltre 7 Anni di esperienza nello sviluppo di applicazioni web con Python Flask, offro soluzioni complete end-to-end.

+

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.

+

Mi piace risolvere problemi complessi e creare soluzioni che siano robuste, scalabili e facili da mantenere.

+
+ + I Miei Profili +
+
+
+
+
+

Tecnologie che utilizzo

+
+
+ +

Linux

+
+
+ +

Windows

+
+
+ +

Python

+
+
+ +

Flask

+
+
+ +

Database

+
+
+ +

Docker

+
+
+ +

Server

+
+
+ +

Networking

+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/templates/content/link.html b/templates/content/link.html deleted file mode 100644 index 614c02c..0000000 --- a/templates/content/link.html +++ /dev/null @@ -1,7 +0,0 @@ -
- Blog - LinkedIn - GitHub - StackOverflow - CodeWars -
\ No newline at end of file diff --git a/templates/content/links.html b/templates/content/links.html new file mode 100644 index 0000000..0cfc999 --- /dev/null +++ b/templates/content/links.html @@ -0,0 +1,52 @@ + \ No newline at end of file diff --git a/templates/content/project.html b/templates/content/project.html new file mode 100644 index 0000000..d0075f4 --- /dev/null +++ b/templates/content/project.html @@ -0,0 +1,130 @@ +
+
+

I Miei Progetti

+
+ +
+
+ Progetto 1 +
+
Script di Backup Database (MariaDB/MySQL)
+

Script in Bash per sistemi Linux che permette l'automazione dei backup database

+
+
+ Bash + Linux +
+ Dettagli +
+
+
+
+ + +
+
+ Progetto 2 +
+
Personal ByteStash
+

Ho realizzato un repository personale di snippet sfruttando Bytestash, ottimizzando la gestione del codice riutilizzabile e migliorando la produttività nello sviluppo di progetti software.

+
+
+ LXC + Proxmox + Nginx + Reverse Proxy + Linux + Self-hosted +
+ Dettagli +
+
+
+
+ + +
+
+ Nextcloud Personale +
+
Nextcloud Personale
+

Installazione di Nextcloud su container LXC con database PostgreSQL e caching Redis, integrato in una rete privata con gestione IP tramite server DHCP.

+
+
+ Nextcloud + PostgreSQL + Redis + LXC + Proxmox + Rete Privata + DHCP Server +
+ Dettagli +
+
+
+
+ + +
+
+
\ No newline at end of file diff --git a/templates/content/skills.html b/templates/content/skills.html deleted file mode 100644 index 77fd702..0000000 --- a/templates/content/skills.html +++ /dev/null @@ -1,10 +0,0 @@ -
- Python - Flask - PostgreSQL - PHP - Docker - HTML - CSS - JavaScript -
\ No newline at end of file diff --git a/templates/head.html b/templates/head.html index ce523d6..b13bc6e 100644 --- a/templates/head.html +++ b/templates/head.html @@ -1,26 +1,13 @@ - - - Hersel Giannella - PortFolio - - - - - - + + + Portfolio - Sistemista Windows/Linux e Sviluppatore Web + + + + + + + - - - \ No newline at end of file + \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 9997225..48e7521 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,17 +1,51 @@ - + {% include "head.html" %} - -
-
-
-

Hersel Giannella

-

Analista Programmatore / Linux SysAdmin

- {% include "content/skills.html" %} - {% include "content/link.html" %} + + + {% include "navbar.html" %} -
-
- + +
+
+
+
+

Sistemista/Sviluppatore Web

+

Trasformo infrastrutture complesse in soluzioni web innovative ed efficienti

+
+ I Miei Profili + Vedi Progetti +
+
+
+
+ Profile +
+
+
+
+
+ + + {% include "content/about.html" %} + + + + {% include "content/project.html" %} + + + + {% include "content/links.html" %} + + + + + + + + + - + \ No newline at end of file diff --git a/templates/navbar.html b/templates/navbar.html new file mode 100644 index 0000000..37d607c --- /dev/null +++ b/templates/navbar.html @@ -0,0 +1,24 @@ + \ No newline at end of file