Merge pull request #3 from BluLupo/claude/migrate-quart-flask-mariadb-011CV5dCApJ51x9myS4yDNme

Migrate portfolio to Flask with MariaDB database

.env.example

@@ -1,4 +1,12 @@
+# Flask Application Configuration
 APP_HOST=127.0.0.1
 APP_PORT=5000
 DEBUG=True
-SECRET_KEY=yoursecretkey
+SECRET_KEY=change_this_to_a_random_secret_key
+
+# MariaDB Database Configuration
+DB_HOST=localhost
+DB_PORT=3306
+DB_USER=portfolio_user
+DB_PASSWORD=portfolio_password
+DB_NAME=portfolio_db

README.md

@@ -1,94 +1,184 @@
-# Python Server - Hersel.it
+# Portfolio Dinamico - Hersel.it
 
-Questo progetto è un'applicazione web sviluppata con **Quart** e configurata per essere eseguita tramite **Hypercorn**
+Portfolio personale sviluppato con **Flask** e **MariaDB**, con gestione dinamica dei contenuti tramite API REST.
 
-## Requisiti
+## 🚀 Caratteristiche
+
+- **Framework**: Flask (migrato da Quart per semplificare l'architettura)
+- **Database**: MariaDB per la gestione dinamica dei contenuti
+- **ORM**: SQLAlchemy con Flask-SQLAlchemy
+- **API REST**: Endpoint per gestire progetti, competenze, profilo e social links
+- **Docker**: Configurazione completa con Docker Compose
+- **Responsive**: Design responsive con Bootstrap 5
+
+## 📋 Requisiti
 
 - Python 3.10 o superiore
+- MariaDB/MySQL 11.2 o superiore (o usa Docker Compose)
 - Pip (gestore dei pacchetti Python)
 
-# Installazione
+## 🔧 Installazione Locale
 
-1. Clona il repository:
+### 1. Clona il repository
 ```bash
 git clone https://github.com/BluLupo/hersel.it.git
 cd hersel.it
 ```
 
-2. Crea Ambiente Virtuale
+### 2. Crea e attiva ambiente virtuale
 ```bash
 python3 -m venv env
+source env/bin/activate  # Linux/Mac
+# oppure
+env\Scripts\activate  # Windows
 ```
 
-3. Attiva Ambiente Virtuale
+### 3. Installa le dipendenze
-    ```bash
-    source env/bin/activate
-   ```
-
-4. Installa Le Dipendenze
 ```bash
 pip install -r requirements.txt
 ```
 
-# Configurazione
+### 4. Configura le variabili d'ambiente
-Modifica il file <b>hypercorn_config.toml</b> se necessario per adattarlo al tuo ambiente
-Esempio di configurazione predefinita (hypercorn_config.toml):
-
-```toml
-    bind = "0.0.0.0:5000"
-    workers = 1
-    reload = true
-   ```
-# Avvio Applicazione
 ```bash
-    hypercorn -c hypercorn_config.toml app:app
+cp .env.example .env
+# Modifica .env con le tue credenziali del database
 ```
 
+### 5. Configura MariaDB
+Crea il database e l'utente:
+```sql
+CREATE DATABASE portfolio_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
+CREATE USER 'portfolio_user'@'localhost' IDENTIFIED BY 'portfolio_password';
+GRANT ALL PRIVILEGES ON portfolio_db.* TO 'portfolio_user'@'localhost';
+FLUSH PRIVILEGES;
+```
 
-# 🚀 Avvio dell'applicazione con Docker
+### 6. Inizializza il database
-Questa applicazione utilizza Quart come web framework asincrono e Hypercorn come ASGI server
+```bash
+python init_db.py
+```
 
-⚙️ Requisiti
+### 7. Avvia l'applicazione
+```bash
+# Modalità sviluppo
+python app.py
+
+# Modalità produzione con Gunicorn
+gunicorn -w 4 -b 0.0.0.0:5000 app:app
+```
+
+## 🐳 Installazione con Docker
+
+### Requisiti
 - Docker
 - Docker Compose
 
-# 📄 Come avviare l'applicazione
+### Avvio rapido
-1 - Crea un nuovo file docker-compose.yml nella tua macchina, con il seguente contenuto (oppure copialo direttamente da <a href="https://github.com/BluLupo/hersel.it/blob/master/docker-compose.yml">Qui</a> ):
-
-```yml
-    version: "3.9"
-
-services:
-  quartapp:
-    image: python:3.10-slim
-    container_name: quartapp
-    working_dir: /app
-    ports:
-      - "127.0.0.1:5000:5000"
-    restart: always
-    command: >
-      sh -c "
-        apt-get update &&
-        apt-get install -y git &&
-        [ -d /app/.git ] || git clone https://github.com/BluLupo/hersel.it.git /app &&
-        pip install --no-cache-dir -r requirements.txt &&
-        hypercorn -c hypercorn_config.toml app:app
-      "
-    environment:
-      - PYTHONUNBUFFERED=1
-   ```
-
-2 - Esegui il servizio con Docker Compose:
 ```bash
-    docker-compose up
+docker-compose up -d
 ```
 
-# 🔗 Accesso all'applicazione
+L'applicazione sarà disponibile su `http://localhost:5000`
-Una volta avviata, l'applicazione sarà accessibile da:
+
+Docker Compose avvierà automaticamente:
+- Container MariaDB sulla porta 3306
+- Container Flask sulla porta 5000
+- Inizializzazione automatica del database
+
+## 📁 Struttura del Progetto
+
+```
+hersel.it/
+├── app.py                      # Applicazione Flask principale
+├── config.py                   # Configurazione
+├── models.py                   # Modelli SQLAlchemy
+├── init_db.py                  # Script inizializzazione database
+├── requirements.txt            # Dipendenze Python
+├── docker-compose.yml          # Configurazione Docker
+├── .env.example               # Esempio variabili d'ambiente
+├── routes/
+│   ├── home.py                # Route homepage
+│   └── api.py                 # API REST endpoints
+├── templates/                 # Template Jinja2
+│   ├── index.html
+│   ├── head.html
+│   ├── navbar.html
+│   └── content/
+│       ├── about.html
+│       ├── project.html
+│       └── links.html
+└── static/                    # File statici (CSS, JS, immagini)
+```
+
+## 🔌 API REST Endpoints
+
+### Profile
+- `GET /api/profile` - Ottieni informazioni profilo
+- `PUT /api/profile` - Aggiorna profilo
+
+### Skills
+- `GET /api/skills` - Lista competenze
+- `POST /api/skills` - Crea competenza
+- `PUT /api/skills/<id>` - Aggiorna competenza
+- `DELETE /api/skills/<id>` - Elimina competenza
+
+### Projects
+- `GET /api/projects` - Lista progetti
+- `POST /api/projects` - Crea progetto
+- `PUT /api/projects/<id>` - Aggiorna progetto
+- `DELETE /api/projects/<id>` - Elimina progetto
+
+### Social Links
+- `GET /api/social-links` - Lista link social
+- `POST /api/social-links` - Crea link social
+- `PUT /api/social-links/<id>` - Aggiorna link social
+- `DELETE /api/social-links/<id>` - Elimina link social
+
+## 📊 Schema Database
+
+### Tabelle
+- `profile` - Informazioni personali
+- `skills` - Competenze tecnologiche
+- `projects` - Portfolio progetti
+- `project_tags` - Tag/badge progetti
+- `social_links` - Link profili social
+
+## 🔄 Migrazione da Quart a Flask
+
+Questo progetto è stato migrato da Quart (framework asincrono) a Flask (framework sincrono) per:
+- Semplificare l'architettura
+- Migliorare la compatibilità con librerie esistenti
+- Facilitare il deployment con server WSGI standard (Gunicorn)
+- Ridurre la complessità per un portfolio che non richiede operazioni async intensive
+
+## 🛠️ Sviluppo
+
+### Aggiungere un nuovo progetto via API
 ```bash
-    http://127.0.0.1:5000
+curl -X POST http://localhost:5000/api/projects \
+  -H "Content-Type: application/json" \
+  -d '{
+    "title": "Nuovo Progetto",
+    "description": "Descrizione del progetto",
+    "image_url": "img/project.webp",
+    "github_url": "https://github.com/username/repo",
+    "tags": [
+      {"name": "Python", "color_class": "bg-primary"},
+      {"name": "Flask", "color_class": "bg-info"}
+    ]
+  }'
 ```
 
+## 📝 Licenza
+
+Copyright Hersel Giannella
+
+## 🔗 Link Utili
+
+- Portfolio Live: [https://hersel.it](https://hersel.it)
+- GitHub: [https://github.com/BluLupo](https://github.com/BluLupo)
+- LinkedIn: [https://linkedin.com/in/hersel](https://linkedin.com/in/hersel)
+
 
 
 

app.py

@@ -3,31 +3,66 @@
 
 # Copyright Hersel Giannella
 
-from quart import Quart, send_from_directory
+from flask import Flask, send_from_directory
+from flask_login import LoginManager
 from config import config
+from models import db, bcrypt, User
 from routes.home import route_home
+from routes.api import route_api
+from routes.auth import route_auth
+from routes.admin import route_admin
 
-app = Quart(
+app = Flask(
     __name__,
     template_folder="templates",
     static_folder="static",
 )
 
+# Load configuration
+app.config['SECRET_KEY'] = config.SECRET_KEY
+app.config['SQLALCHEMY_DATABASE_URI'] = config.SQLALCHEMY_DATABASE_URI
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = config.SQLALCHEMY_TRACK_MODIFICATIONS
+app.config['SQLALCHEMY_ECHO'] = config.SQLALCHEMY_ECHO
+
+# File upload configuration
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16 MB max file size
+app.config['UPLOAD_FOLDER'] = 'static/img'
+app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg', 'gif', 'webp'}
+
+# Initialize extensions
+db.init_app(app)
+bcrypt.init_app(app)
+
+# Initialize Flask-Login
+login_manager = LoginManager()
+login_manager.init_app(app)
+login_manager.login_view = 'auth.login'
+login_manager.login_message = 'Per accedere a questa pagina devi effettuare il login.'
+login_manager.login_message_category = 'warning'
+
+@login_manager.user_loader
+def load_user(user_id):
+    """Load user for Flask-Login"""
+    return User.query.get(int(user_id))
+
 # favicon.ico, sitemap.xml and robots.txt
 @app.route('/favicon.ico')
-async def favicon():
+def favicon():
-    return await send_from_directory(app.static_folder, 'favicon.ico')
+    return send_from_directory(app.static_folder, 'favicon.ico')
 
 @app.route('/sitemap.xml')
-async def sitemap():
+def sitemap():
-    return await send_from_directory(app.static_folder, 'sitemap.xml')
+    return send_from_directory(app.static_folder, 'sitemap.xml')
 
 @app.route('/robots.txt')
-async def robots():
+def robots():
-    return await send_from_directory(app.static_folder, 'robots.txt')
+    return send_from_directory(app.static_folder, 'robots.txt')
 
 # BluePrint Routes
 app.register_blueprint(route_home)
+app.register_blueprint(route_api)
+app.register_blueprint(route_auth)
+app.register_blueprint(route_admin)
 
 if __name__ == '__main__':
     app.run(debug=config.DEBUG, host=config.APP_HOST, port=config.APP_PORT)

config.py

@@ -11,6 +11,21 @@ class Config(BaseSettings):
     DEBUG: bool = True
     SECRET_KEY: str = "default_secret_key"
 
+    # Database Configuration
+    DB_HOST: str = "localhost"
+    DB_PORT: int = 3306
+    DB_USER: str = "portfolio_user"
+    DB_PASSWORD: str = "portfolio_password"
+    DB_NAME: str = "portfolio_db"
+
+    @property
+    def SQLALCHEMY_DATABASE_URI(self) -> str:
+        """Construct MariaDB connection string"""
+        return f"mysql+pymysql://{self.DB_USER}:{self.DB_PASSWORD}@{self.DB_HOST}:{self.DB_PORT}/{self.DB_NAME}"
+
+    SQLALCHEMY_TRACK_MODIFICATIONS: bool = False
+    SQLALCHEMY_ECHO: bool = False  # Set to True for SQL query debugging
+
     class Config:
         env_file = ".env"
 

docker-compose.yml

@@ -1,20 +1,51 @@
 version: "3.9"
 
 services:
-  quartapp:
+  mariadb:
+    image: mariadb:11.2
+    container_name: portfolio_mariadb
+    restart: always
+    environment:
+      MYSQL_ROOT_PASSWORD: root_password_change_me
+      MYSQL_DATABASE: portfolio_db
+      MYSQL_USER: portfolio_user
+      MYSQL_PASSWORD: portfolio_password
+    volumes:
+      - mariadb_data:/var/lib/mysql
+    ports:
+      - "127.0.0.1:3306:3306"
+    healthcheck:
+      test: ["CMD", "healthcheck.sh", "--connect", "--innodb_initialized"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  flaskapp:
     image: python:3.10-slim
-    container_name: quartapp
+    container_name: portfolio_flaskapp
     working_dir: /app
     ports:
       - "127.0.0.1:5000:5000"
     restart: always
+    depends_on:
+      mariadb:
+        condition: service_healthy
     command: >
       sh -c "
         apt-get update &&
-        apt-get install -y git &&
+        apt-get install -y git default-libmysqlclient-dev build-essential pkg-config &&
         [ -d /app/.git ] || git clone https://github.com/BluLupo/hersel.it.git /app &&
         pip install --no-cache-dir -r requirements.txt &&
-        hypercorn -c hypercorn_config.toml app:app
+        python init_db.py &&
+        gunicorn -w 4 -b 0.0.0.0:5000 app:app
       "
     environment:
       - PYTHONUNBUFFERED=1
+      - DB_HOST=mariadb
+      - DB_PORT=3306
+      - DB_USER=portfolio_user
+      - DB_PASSWORD=portfolio_password
+      - DB_NAME=portfolio_db
+
+volumes:
+  mariadb_data:

init_db.py

@@ -0,0 +1,198 @@
+"""
+Database initialization script
+Populates the database with initial portfolio data and creates default admin user
+"""
+from app import app
+from models import db, User, Profile, Skill, Project, ProjectTag, SocialLink
+
+
+def init_database():
+    """Initialize database with portfolio data"""
+    with app.app_context():
+        # Drop all tables and recreate
+        print("Dropping all tables...")
+        db.drop_all()
+
+        print("Creating all tables...")
+        db.create_all()
+
+        # Create default admin user
+        print("Creating default admin user...")
+        admin = User(
+            username='admin',
+            email='admin@hersel.it'
+        )
+        admin.set_password('admin123')  # CHANGE THIS PASSWORD AFTER FIRST LOGIN!
+        db.session.add(admin)
+
+        # Create profile information
+        print("Adding profile information...")
+        profile = Profile(
+            title="Il ponte tra sistemi e sviluppo web",
+            lead_text="Con oltre 7 Anni di esperienza nello sviluppo di applicazioni web con Python Flask, offro soluzioni complete end-to-end.",
+            description_1="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.",
+            description_2="Mi piace risolvere problemi complessi e creare soluzioni che siano robuste, scalabili e facili da mantenere.",
+            years_experience=7,
+            profile_image='img/personal.webp'
+        )
+        db.session.add(profile)
+
+        # Create skills
+        print("Adding skills...")
+        skills_data = [
+            {"name": "Linux", "icon_class": "fab fa-linux", "category": "OS", "display_order": 1},
+            {"name": "Windows", "icon_class": "fab fa-windows", "category": "OS", "display_order": 2},
+            {"name": "Python", "icon_class": "fab fa-python", "category": "Language", "display_order": 3},
+            {"name": "Flask", "icon_class": "fas fa-flask", "category": "Framework", "display_order": 4},
+            {"name": "Database", "icon_class": "fas fa-database", "category": "Tool", "display_order": 5},
+            {"name": "Docker", "icon_class": "fab fa-docker", "category": "Tool", "display_order": 6},
+            {"name": "Server", "icon_class": "fas fa-server", "category": "Infrastructure", "display_order": 7},
+            {"name": "Networking", "icon_class": "fas fa-network-wired", "category": "Infrastructure", "display_order": 8},
+        ]
+
+        for skill_data in skills_data:
+            skill = Skill(**skill_data)
+            db.session.add(skill)
+
+        # Create projects
+        print("Adding projects...")
+
+        # Project 1: Database Backup Script
+        project1 = Project(
+            title="Script di Backup Database (MariaDB/MySQL)",
+            description="Script in Bash per sistemi Linux che permette l'automazione dei backup database",
+            image_url="img/bash.webp",
+            github_url="https://github.com/BluLupo/server-script/tree/main/db_bash_backup-main",
+            display_order=1,
+            animation_delay="0s"
+        )
+        db.session.add(project1)
+        db.session.flush()  # Get project1.id
+
+        # Project 1 tags
+        project1_tags = [
+            ProjectTag(project_id=project1.id, name="Bash", color_class="bg-primary", display_order=1),
+            ProjectTag(project_id=project1.id, name="Linux", color_class="bg-info", display_order=2),
+        ]
+        db.session.add_all(project1_tags)
+
+        # Project 2: ByteStash
+        project2 = Project(
+            title="Personal ByteStash",
+            description="Ho realizzato un repository personale di snippet sfruttando Bytestash, ottimizzando la gestione del codice riutilizzabile e migliorando la produttività nello sviluppo di progetti software.",
+            image_url="img/byte.webp",
+            demo_url="https://bytestash.gwserver.it/public/snippets",
+            display_order=2,
+            animation_delay="0.2s"
+        )
+        db.session.add(project2)
+        db.session.flush()
+
+        # Project 2 tags
+        project2_tags = [
+            ProjectTag(project_id=project2.id, name="LXC", color_class="bg-warning text-dark", display_order=1),
+            ProjectTag(project_id=project2.id, name="Proxmox", color_class="bg-dark", display_order=2),
+            ProjectTag(project_id=project2.id, name="Nginx", color_class="bg-info", display_order=3),
+            ProjectTag(project_id=project2.id, name="Reverse Proxy", color_class="bg-secondary", display_order=4),
+            ProjectTag(project_id=project2.id, name="Linux", color_class="bg-primary", display_order=5),
+            ProjectTag(project_id=project2.id, name="Self-hosted", color_class="bg-primary", display_order=6),
+        ]
+        db.session.add_all(project2_tags)
+
+        # Project 3: Nextcloud
+        project3 = Project(
+            title="Nextcloud Personale",
+            description="Installazione di Nextcloud su container LXC con database PostgreSQL e caching Redis, integrato in una rete privata con gestione IP tramite server DHCP.",
+            image_url="img/next.webp",
+            demo_url="https://cloud.gwserver.it",
+            display_order=3,
+            animation_delay="0.4s"
+        )
+        db.session.add(project3)
+        db.session.flush()
+
+        # Project 3 tags
+        project3_tags = [
+            ProjectTag(project_id=project3.id, name="Nextcloud", color_class="bg-primary", display_order=1),
+            ProjectTag(project_id=project3.id, name="PostgreSQL", color_class="bg-secondary", display_order=2),
+            ProjectTag(project_id=project3.id, name="Redis", color_class="bg-info", display_order=3),
+            ProjectTag(project_id=project3.id, name="LXC", color_class="bg-warning text-dark", display_order=4),
+            ProjectTag(project_id=project3.id, name="Proxmox", color_class="bg-dark", display_order=5),
+            ProjectTag(project_id=project3.id, name="Rete Privata", color_class="bg-success", display_order=6),
+            ProjectTag(project_id=project3.id, name="DHCP Server", color_class="bg-secondary", display_order=7),
+        ]
+        db.session.add_all(project3_tags)
+
+        # Create social links
+        print("Adding social links...")
+        social_links_data = [
+            {
+                "platform_name": "LinkedIn",
+                "url": "https://linkedin.com/in/hersel",
+                "icon_class": "fab fa-linkedin",
+                "display_order": 1,
+                "animation_delay": "0.1s"
+            },
+            {
+                "platform_name": "GitHub",
+                "url": "https://github.com/blulupo",
+                "icon_class": "fab fa-github",
+                "display_order": 2,
+                "animation_delay": "0.2s"
+            },
+            {
+                "platform_name": "Stack Overflow",
+                "url": "https://stackoverflow.com/users/11765177/hersel-giannella",
+                "icon_class": "fab fa-stack-overflow",
+                "display_order": 3,
+                "animation_delay": "0.3s"
+            },
+            {
+                "platform_name": "CodeWars",
+                "url": "https://www.codewars.com/users/BluLupo",
+                "icon_class": "fas fa-code",
+                "display_order": 4,
+                "animation_delay": "0.4s"
+            },
+            {
+                "platform_name": "Blog",
+                "url": "https://blog.hersel.it",
+                "icon_class": "fas fa-blog",
+                "display_order": 5,
+                "animation_delay": "0.5s"
+            },
+            {
+                "platform_name": "Email",
+                "url": "mailto:info@hersel.it",
+                "icon_class": "fas fa-envelope",
+                "display_order": 6,
+                "animation_delay": "0.6s"
+            },
+        ]
+
+        for link_data in social_links_data:
+            social_link = SocialLink(**link_data)
+            db.session.add(social_link)
+
+        # Commit all changes
+        print("Committing changes to database...")
+        db.session.commit()
+
+        print("\n✅ Database initialized successfully!")
+        print(f"   - Admin User: 1 record")
+        print(f"   - Profile: 1 record")
+        print(f"   - Skills: {len(skills_data)} records")
+        print(f"   - Projects: 3 records")
+        print(f"   - Project Tags: {len(project1_tags) + len(project2_tags) + len(project3_tags)} records")
+        print(f"   - Social Links: {len(social_links_data)} records")
+        print("\n" + "="*60)
+        print("🔐 DEFAULT ADMIN CREDENTIALS")
+        print("="*60)
+        print(f"   Username: admin")
+        print(f"   Password: admin123")
+        print(f"   ⚠️  CHANGE THIS PASSWORD IMMEDIATELY AFTER FIRST LOGIN!")
+        print("="*60)
+
+
+if __name__ == '__main__':
+    init_database()

models.py

@@ -0,0 +1,169 @@
+"""
+Database models for Portfolio Application
+Uses SQLAlchemy ORM with MariaDB
+"""
+from flask_sqlalchemy import SQLAlchemy
+from flask_login import UserMixin
+from flask_bcrypt import Bcrypt
+from datetime import datetime
+
+db = SQLAlchemy()
+bcrypt = Bcrypt()
+
+
+class User(UserMixin, db.Model):
+    """Store admin users for authentication"""
+    __tablename__ = 'users'
+
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(80), unique=True, nullable=False)
+    email = db.Column(db.String(120), unique=True, nullable=False)
+    password_hash = db.Column(db.String(255), nullable=False)
+    is_active = db.Column(db.Boolean, default=True)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    last_login = db.Column(db.DateTime)
+
+    def set_password(self, password):
+        """Hash password using bcrypt"""
+        self.password_hash = bcrypt.generate_password_hash(password).decode('utf-8')
+
+    def check_password(self, password):
+        """Verify password against hash"""
+        return bcrypt.check_password_hash(self.password_hash, password)
+
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'username': self.username,
+            'email': self.email,
+            'is_active': self.is_active,
+            'created_at': self.created_at.isoformat() if self.created_at else None,
+            'last_login': self.last_login.isoformat() if self.last_login else None
+        }
+
+
+class Profile(db.Model):
+    """Store personal profile information"""
+    __tablename__ = 'profile'
+
+    id = db.Column(db.Integer, primary_key=True)
+    title = db.Column(db.String(255), nullable=False)
+    lead_text = db.Column(db.Text, nullable=False)
+    description_1 = db.Column(db.Text)
+    description_2 = db.Column(db.Text)
+    years_experience = db.Column(db.Integer, default=7)
+    cv_url = db.Column(db.String(500))
+    profile_image = db.Column(db.String(500), default='img/personal.webp')
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'title': self.title,
+            'lead_text': self.lead_text,
+            'description_1': self.description_1,
+            'description_2': self.description_2,
+            'years_experience': self.years_experience,
+            'cv_url': self.cv_url,
+            'profile_image': self.profile_image
+        }
+
+
+class Skill(db.Model):
+    """Store technical skills/technologies"""
+    __tablename__ = 'skills'
+
+    id = db.Column(db.Integer, primary_key=True)
+    name = db.Column(db.String(100), nullable=False)
+    icon_class = db.Column(db.String(100), nullable=False)
+    category = db.Column(db.String(50))  # OS, Language, Framework, Tool, etc.
+    proficiency_level = db.Column(db.Integer)  # 1-5 (optional)
+    display_order = db.Column(db.Integer, default=0)
+    is_active = db.Column(db.Boolean, default=True)
+
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'name': self.name,
+            'icon_class': self.icon_class,
+            'category': self.category,
+            'proficiency_level': self.proficiency_level,
+            'display_order': self.display_order
+        }
+
+
+class Project(db.Model):
+    """Store portfolio projects"""
+    __tablename__ = 'projects'
+
+    id = db.Column(db.Integer, primary_key=True)
+    title = db.Column(db.String(255), nullable=False)
+    description = db.Column(db.Text, nullable=False)
+    image_url = db.Column(db.String(500))
+    demo_url = db.Column(db.String(500))
+    github_url = db.Column(db.String(500))
+    display_order = db.Column(db.Integer, default=0)
+    animation_delay = db.Column(db.String(10), default='0s')  # e.g., '0.2s'
+    is_published = db.Column(db.Boolean, default=True)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+    # Relationship
+    tags = db.relationship('ProjectTag', backref='project', lazy=True, cascade='all, delete-orphan')
+
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'title': self.title,
+            'description': self.description,
+            'image_url': self.image_url,
+            'demo_url': self.demo_url,
+            'github_url': self.github_url,
+            'display_order': self.display_order,
+            'animation_delay': self.animation_delay,
+            'is_published': self.is_published,
+            'tags': [tag.to_dict() for tag in self.tags]
+        }
+
+
+class ProjectTag(db.Model):
+    """Store tags/badges for projects"""
+    __tablename__ = 'project_tags'
+
+    id = db.Column(db.Integer, primary_key=True)
+    project_id = db.Column(db.Integer, db.ForeignKey('projects.id'), nullable=False)
+    name = db.Column(db.String(50), nullable=False)
+    color_class = db.Column(db.String(50), default='bg-primary')  # Bootstrap badge classes
+    display_order = db.Column(db.Integer, default=0)
+
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'name': self.name,
+            'color_class': self.color_class,
+            'display_order': self.display_order
+        }
+
+
+class SocialLink(db.Model):
+    """Store social media and profile links"""
+    __tablename__ = 'social_links'
+
+    id = db.Column(db.Integer, primary_key=True)
+    platform_name = db.Column(db.String(100), nullable=False)
+    url = db.Column(db.String(500), nullable=False)
+    icon_class = db.Column(db.String(100), nullable=False)
+    display_order = db.Column(db.Integer, default=0)
+    animation_delay = db.Column(db.String(10), default='0s')  # e.g., '0.1s'
+    is_active = db.Column(db.Boolean, default=True)
+
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'platform_name': self.platform_name,
+            'url': self.url,
+            'icon_class': self.icon_class,
+            'display_order': self.display_order,
+            'animation_delay': self.animation_delay
+        }

requirements.txt

@@ -1,24 +1,37 @@
-aiofiles==24.1.0
+# Core Flask Framework
-annotated-types==0.7.0
-blinker==1.9.0
-click==8.1.8
 Flask==3.1.0
-h11==0.14.0
-h2==4.1.0
-hpack==4.0.0
-Hypercorn==0.17.3
-hyperframe==6.0.1
-itsdangerous==2.2.0
 Jinja2==3.1.5
+Werkzeug==3.1.3
+click==8.1.8
+itsdangerous==2.2.0
 MarkupSafe==3.0.2
-priority==2.0.0
+blinker==1.9.0
+
+# Authentication
+Flask-Login==0.6.3
+Flask-Bcrypt==1.0.1
+bcrypt==4.2.1
+
+# Database - Flask-SQLAlchemy and MariaDB/MySQL driver
+Flask-SQLAlchemy==3.1.1
+SQLAlchemy==2.0.36
+PyMySQL==1.1.1
+cryptography==44.0.0
+
+# Configuration Management
 pydantic==2.10.4
 pydantic-settings==2.7.1
 pydantic_core==2.27.2
 python-dotenv==1.0.1
-Quart==0.20.0
+annotated-types==0.7.0
 typing_extensions==4.12.2
-Werkzeug==3.1.3
+
-wsproto==1.2.0
+# Testing
 httpx==0.27.0
+pytest==8.3.4
+
+# Documentation
 Sphinx==8.2.3
+
+# WSGI Server (Production alternative to Flask dev server)
+gunicorn==23.0.0

routes/admin.py

@@ -0,0 +1,351 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+
+# Copyright Hersel Giannella
+
+"""
+Admin dashboard routes for managing portfolio content
+"""
+
+from flask import Blueprint, render_template, request, redirect, url_for, flash, jsonify, current_app
+from flask_login import login_required, current_user
+from werkzeug.utils import secure_filename
+from models import db, Profile, Skill, Project, ProjectTag, SocialLink
+import os
+
+route_admin = Blueprint('admin', __name__, url_prefix='/admin')
+
+
+def allowed_file(filename):
+    """Check if file extension is allowed"""
+    return '.' in filename and \
+           filename.rsplit('.', 1)[1].lower() in current_app.config['ALLOWED_EXTENSIONS']
+
+
+def save_uploaded_file(file):
+    """Save uploaded file and return the relative path"""
+    if file and allowed_file(file.filename):
+        filename = secure_filename(file.filename)
+        # Add timestamp to avoid collisions
+        from datetime import datetime
+        timestamp = datetime.now().strftime('%Y%m%d_%H%M%S_')
+        filename = timestamp + filename
+
+        # Create upload folder if it doesn't exist
+        upload_folder = current_app.config['UPLOAD_FOLDER']
+        os.makedirs(upload_folder, exist_ok=True)
+
+        filepath = os.path.join(upload_folder, filename)
+        file.save(filepath)
+
+        # Return relative path from static folder
+        return f"img/{filename}"
+    return None
+
+
+@route_admin.route('/')
+@login_required
+def dashboard():
+    """Admin dashboard home"""
+    # Statistiche
+    stats = {
+        'projects': Project.query.count(),
+        'skills': Skill.query.count(),
+        'social_links': SocialLink.query.count(),
+        'published_projects': Project.query.filter_by(is_published=True).count()
+    }
+    return render_template('admin/dashboard.html', stats=stats)
+
+
+# ============================================================================
+# PROFILE MANAGEMENT
+# ============================================================================
+
+@route_admin.route('/profile')
+@login_required
+def profile_manage():
+    """Manage profile information"""
+    profile = Profile.query.first()
+    return render_template('admin/profile.html', profile=profile)
+
+
+@route_admin.route('/profile/edit', methods=['POST'])
+@login_required
+def profile_edit():
+    """Edit profile information"""
+    profile = Profile.query.first()
+    if not profile:
+        flash('Profilo non trovato.', 'danger')
+        return redirect(url_for('admin.profile_manage'))
+
+    # Handle profile image upload
+    profile_image_url = request.form.get('profile_image', profile.profile_image)
+    if 'profile_image_file' in request.files:
+        file = request.files['profile_image_file']
+        if file.filename:
+            uploaded_path = save_uploaded_file(file)
+            if uploaded_path:
+                profile_image_url = uploaded_path
+            else:
+                flash('Formato immagine non valido. Usa: png, jpg, jpeg, gif, webp', 'danger')
+                return redirect(url_for('admin.profile_manage'))
+
+    profile.title = request.form.get('title', profile.title)
+    profile.lead_text = request.form.get('lead_text', profile.lead_text)
+    profile.description_1 = request.form.get('description_1', profile.description_1)
+    profile.description_2 = request.form.get('description_2', profile.description_2)
+    profile.years_experience = int(request.form.get('years_experience', profile.years_experience))
+    profile.cv_url = request.form.get('cv_url', profile.cv_url)
+    profile.profile_image = profile_image_url
+
+    db.session.commit()
+    flash('Profilo aggiornato con successo!', 'success')
+    return redirect(url_for('admin.profile_manage'))
+
+
+# ============================================================================
+# SKILLS MANAGEMENT
+# ============================================================================
+
+@route_admin.route('/skills')
+@login_required
+def skills_manage():
+    """Manage skills"""
+    skills = Skill.query.order_by(Skill.display_order).all()
+    return render_template('admin/skills.html', skills=skills)
+
+
+@route_admin.route('/skills/add', methods=['POST'])
+@login_required
+def skill_add():
+    """Add new skill"""
+    skill = Skill(
+        name=request.form.get('name'),
+        icon_class=request.form.get('icon_class'),
+        category=request.form.get('category'),
+        display_order=int(request.form.get('display_order', 0)),
+        is_active=request.form.get('is_active') == 'on'
+    )
+    db.session.add(skill)
+    db.session.commit()
+    flash('Skill aggiunta con successo!', 'success')
+    return redirect(url_for('admin.skills_manage'))
+
+
+@route_admin.route('/skills/<int:skill_id>/edit', methods=['POST'])
+@login_required
+def skill_edit(skill_id):
+    """Edit skill"""
+    skill = Skill.query.get_or_404(skill_id)
+    skill.name = request.form.get('name', skill.name)
+    skill.icon_class = request.form.get('icon_class', skill.icon_class)
+    skill.category = request.form.get('category', skill.category)
+    skill.display_order = int(request.form.get('display_order', skill.display_order))
+    skill.is_active = request.form.get('is_active') == 'on'
+
+    db.session.commit()
+    flash('Skill aggiornata con successo!', 'success')
+    return redirect(url_for('admin.skills_manage'))
+
+
+@route_admin.route('/skills/<int:skill_id>/delete', methods=['POST'])
+@login_required
+def skill_delete(skill_id):
+    """Delete skill"""
+    skill = Skill.query.get_or_404(skill_id)
+    db.session.delete(skill)
+    db.session.commit()
+    flash('Skill eliminata con successo!', 'success')
+    return redirect(url_for('admin.skills_manage'))
+
+
+# ============================================================================
+# PROJECTS MANAGEMENT
+# ============================================================================
+
+@route_admin.route('/projects')
+@login_required
+def projects_manage():
+    """Manage projects"""
+    projects = Project.query.order_by(Project.display_order).all()
+    return render_template('admin/projects.html', projects=projects)
+
+
+@route_admin.route('/projects/add', methods=['GET', 'POST'])
+@login_required
+def project_add():
+    """Add new project"""
+    if request.method == 'POST':
+        # Handle image upload
+        image_url = request.form.get('image_url')  # Manual URL input
+        if 'image_file' in request.files:
+            file = request.files['image_file']
+            if file.filename:  # Se è stato selezionato un file
+                uploaded_path = save_uploaded_file(file)
+                if uploaded_path:
+                    image_url = uploaded_path
+                else:
+                    flash('Formato immagine non valido. Usa: png, jpg, jpeg, gif, webp', 'danger')
+                    return redirect(url_for('admin.project_add'))
+
+        project = Project(
+            title=request.form.get('title'),
+            description=request.form.get('description'),
+            image_url=image_url,
+            demo_url=request.form.get('demo_url'),
+            github_url=request.form.get('github_url'),
+            display_order=int(request.form.get('display_order', 0)),
+            animation_delay=request.form.get('animation_delay', '0s'),
+            is_published=request.form.get('is_published') == 'on'
+        )
+        db.session.add(project)
+        db.session.flush()
+
+        # Aggiungi tags
+        tags_input = request.form.get('tags', '')
+        if tags_input:
+            tags_list = [tag.strip() for tag in tags_input.split(',') if tag.strip()]
+            for idx, tag_name in enumerate(tags_list):
+                # Estrai colore se specificato (formato: "Python:bg-primary")
+                if ':' in tag_name:
+                    tag_name, color = tag_name.split(':', 1)
+                else:
+                    color = 'bg-primary'
+
+                tag = ProjectTag(
+                    project_id=project.id,
+                    name=tag_name.strip(),
+                    color_class=color.strip(),
+                    display_order=idx
+                )
+                db.session.add(tag)
+
+        db.session.commit()
+        flash('Progetto aggiunto con successo!', 'success')
+        return redirect(url_for('admin.projects_manage'))
+
+    return render_template('admin/project_form.html', project=None)
+
+
+@route_admin.route('/projects/<int:project_id>/edit', methods=['GET', 'POST'])
+@login_required
+def project_edit(project_id):
+    """Edit project"""
+    project = Project.query.get_or_404(project_id)
+
+    if request.method == 'POST':
+        # Handle image upload
+        image_url = request.form.get('image_url', project.image_url)
+        if 'image_file' in request.files:
+            file = request.files['image_file']
+            if file.filename:  # Se è stato selezionato un file
+                uploaded_path = save_uploaded_file(file)
+                if uploaded_path:
+                    image_url = uploaded_path
+                else:
+                    flash('Formato immagine non valido. Usa: png, jpg, jpeg, gif, webp', 'danger')
+                    return redirect(url_for('admin.project_edit', project_id=project_id))
+
+        project.title = request.form.get('title', project.title)
+        project.description = request.form.get('description', project.description)
+        project.image_url = image_url
+        project.demo_url = request.form.get('demo_url', project.demo_url)
+        project.github_url = request.form.get('github_url', project.github_url)
+        project.display_order = int(request.form.get('display_order', project.display_order))
+        project.animation_delay = request.form.get('animation_delay', project.animation_delay)
+        project.is_published = request.form.get('is_published') == 'on'
+
+        # Aggiorna tags
+        ProjectTag.query.filter_by(project_id=project.id).delete()
+
+        tags_input = request.form.get('tags', '')
+        if tags_input:
+            tags_list = [tag.strip() for tag in tags_input.split(',') if tag.strip()]
+            for idx, tag_name in enumerate(tags_list):
+                if ':' in tag_name:
+                    tag_name, color = tag_name.split(':', 1)
+                else:
+                    color = 'bg-primary'
+
+                tag = ProjectTag(
+                    project_id=project.id,
+                    name=tag_name.strip(),
+                    color_class=color.strip(),
+                    display_order=idx
+                )
+                db.session.add(tag)
+
+        db.session.commit()
+        flash('Progetto aggiornato con successo!', 'success')
+        return redirect(url_for('admin.projects_manage'))
+
+    return render_template('admin/project_form.html', project=project)
+
+
+@route_admin.route('/projects/<int:project_id>/delete', methods=['POST'])
+@login_required
+def project_delete(project_id):
+    """Delete project"""
+    project = Project.query.get_or_404(project_id)
+    db.session.delete(project)
+    db.session.commit()
+    flash('Progetto eliminato con successo!', 'success')
+    return redirect(url_for('admin.projects_manage'))
+
+
+# ============================================================================
+# SOCIAL LINKS MANAGEMENT
+# ============================================================================
+
+@route_admin.route('/social-links')
+@login_required
+def social_links_manage():
+    """Manage social links"""
+    social_links = SocialLink.query.order_by(SocialLink.display_order).all()
+    return render_template('admin/social_links.html', social_links=social_links)
+
+
+@route_admin.route('/social-links/add', methods=['POST'])
+@login_required
+def social_link_add():
+    """Add new social link"""
+    link = SocialLink(
+        platform_name=request.form.get('platform_name'),
+        url=request.form.get('url'),
+        icon_class=request.form.get('icon_class'),
+        display_order=int(request.form.get('display_order', 0)),
+        animation_delay=request.form.get('animation_delay', '0s'),
+        is_active=request.form.get('is_active') == 'on'
+    )
+    db.session.add(link)
+    db.session.commit()
+    flash('Link social aggiunto con successo!', 'success')
+    return redirect(url_for('admin.social_links_manage'))
+
+
+@route_admin.route('/social-links/<int:link_id>/edit', methods=['POST'])
+@login_required
+def social_link_edit(link_id):
+    """Edit social link"""
+    link = SocialLink.query.get_or_404(link_id)
+    link.platform_name = request.form.get('platform_name', link.platform_name)
+    link.url = request.form.get('url', link.url)
+    link.icon_class = request.form.get('icon_class', link.icon_class)
+    link.display_order = int(request.form.get('display_order', link.display_order))
+    link.animation_delay = request.form.get('animation_delay', link.animation_delay)
+    link.is_active = request.form.get('is_active') == 'on'
+
+    db.session.commit()
+    flash('Link social aggiornato con successo!', 'success')
+    return redirect(url_for('admin.social_links_manage'))
+
+
+@route_admin.route('/social-links/<int:link_id>/delete', methods=['POST'])
+@login_required
+def social_link_delete(link_id):
+    """Delete social link"""
+    link = SocialLink.query.get_or_404(link_id)
+    db.session.delete(link)
+    db.session.commit()
+    flash('Link social eliminato con successo!', 'success')
+    return redirect(url_for('admin.social_links_manage'))

routes/api.py

@@ -0,0 +1,251 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+
+# Copyright Hersel Giannella
+
+"""
+API Routes for managing portfolio data dynamically
+Provides REST endpoints for CRUD operations on Profile, Skills, Projects, and Social Links
+All write operations (POST, PUT, DELETE) require authentication
+"""
+
+from flask import Blueprint, jsonify, request
+from flask_login import login_required
+from models import db, Profile, Skill, Project, ProjectTag, SocialLink
+
+route_api = Blueprint('api', __name__, url_prefix='/api')
+
+
+# ============================================================================
+# PROFILE ENDPOINTS
+# ============================================================================
+
+@route_api.route('/profile', methods=['GET'])
+def get_profile():
+    """Get profile information"""
+    profile = Profile.query.first()
+    if profile:
+        return jsonify(profile.to_dict())
+    return jsonify({'message': 'Profile not found'}), 404
+
+
+@route_api.route('/profile', methods=['PUT'])
+@login_required
+def update_profile():
+    """Update profile information"""
+    profile = Profile.query.first()
+    if not profile:
+        return jsonify({'message': 'Profile not found'}), 404
+
+    data = request.json
+    profile.title = data.get('title', profile.title)
+    profile.lead_text = data.get('lead_text', profile.lead_text)
+    profile.description_1 = data.get('description_1', profile.description_1)
+    profile.description_2 = data.get('description_2', profile.description_2)
+    profile.years_experience = data.get('years_experience', profile.years_experience)
+    profile.cv_url = data.get('cv_url', profile.cv_url)
+
+    db.session.commit()
+    return jsonify(profile.to_dict())
+
+
+# ============================================================================
+# SKILLS ENDPOINTS
+# ============================================================================
+
+@route_api.route('/skills', methods=['GET'])
+def get_skills():
+    """Get all skills"""
+    skills = Skill.query.order_by(Skill.display_order).all()
+    return jsonify([skill.to_dict() for skill in skills])
+
+
+@route_api.route('/skills', methods=['POST'])
+@login_required
+def create_skill():
+    """Create a new skill"""
+    data = request.json
+    skill = Skill(
+        name=data['name'],
+        icon_class=data['icon_class'],
+        category=data.get('category'),
+        proficiency_level=data.get('proficiency_level'),
+        display_order=data.get('display_order', 0),
+        is_active=data.get('is_active', True)
+    )
+    db.session.add(skill)
+    db.session.commit()
+    return jsonify(skill.to_dict()), 201
+
+
+@route_api.route('/skills/<int:skill_id>', methods=['PUT'])
+@login_required
+def update_skill(skill_id):
+    """Update a skill"""
+    skill = Skill.query.get_or_404(skill_id)
+    data = request.json
+
+    skill.name = data.get('name', skill.name)
+    skill.icon_class = data.get('icon_class', skill.icon_class)
+    skill.category = data.get('category', skill.category)
+    skill.proficiency_level = data.get('proficiency_level', skill.proficiency_level)
+    skill.display_order = data.get('display_order', skill.display_order)
+    skill.is_active = data.get('is_active', skill.is_active)
+
+    db.session.commit()
+    return jsonify(skill.to_dict())
+
+
+@route_api.route('/skills/<int:skill_id>', methods=['DELETE'])
+@login_required
+def delete_skill(skill_id):
+    """Delete a skill"""
+    skill = Skill.query.get_or_404(skill_id)
+    db.session.delete(skill)
+    db.session.commit()
+    return jsonify({'message': 'Skill deleted successfully'})
+
+
+# ============================================================================
+# PROJECTS ENDPOINTS
+# ============================================================================
+
+@route_api.route('/projects', methods=['GET'])
+def get_projects():
+    """Get all projects"""
+    projects = Project.query.order_by(Project.display_order).all()
+    return jsonify([project.to_dict() for project in projects])
+
+
+@route_api.route('/projects', methods=['POST'])
+@login_required
+def create_project():
+    """Create a new project"""
+    data = request.json
+    project = Project(
+        title=data['title'],
+        description=data['description'],
+        image_url=data.get('image_url'),
+        demo_url=data.get('demo_url'),
+        github_url=data.get('github_url'),
+        display_order=data.get('display_order', 0),
+        animation_delay=data.get('animation_delay', '0s'),
+        is_published=data.get('is_published', True)
+    )
+    db.session.add(project)
+    db.session.flush()
+
+    # Add tags
+    tags_data = data.get('tags', [])
+    for tag_data in tags_data:
+        tag = ProjectTag(
+            project_id=project.id,
+            name=tag_data['name'],
+            color_class=tag_data.get('color_class', 'bg-primary'),
+            display_order=tag_data.get('display_order', 0)
+        )
+        db.session.add(tag)
+
+    db.session.commit()
+    return jsonify(project.to_dict()), 201
+
+
+@route_api.route('/projects/<int:project_id>', methods=['PUT'])
+@login_required
+def update_project(project_id):
+    """Update a project"""
+    project = Project.query.get_or_404(project_id)
+    data = request.json
+
+    project.title = data.get('title', project.title)
+    project.description = data.get('description', project.description)
+    project.image_url = data.get('image_url', project.image_url)
+    project.demo_url = data.get('demo_url', project.demo_url)
+    project.github_url = data.get('github_url', project.github_url)
+    project.display_order = data.get('display_order', project.display_order)
+    project.animation_delay = data.get('animation_delay', project.animation_delay)
+    project.is_published = data.get('is_published', project.is_published)
+
+    # Update tags if provided
+    if 'tags' in data:
+        # Remove old tags
+        ProjectTag.query.filter_by(project_id=project.id).delete()
+        # Add new tags
+        for tag_data in data['tags']:
+            tag = ProjectTag(
+                project_id=project.id,
+                name=tag_data['name'],
+                color_class=tag_data.get('color_class', 'bg-primary'),
+                display_order=tag_data.get('display_order', 0)
+            )
+            db.session.add(tag)
+
+    db.session.commit()
+    return jsonify(project.to_dict())
+
+
+@route_api.route('/projects/<int:project_id>', methods=['DELETE'])
+@login_required
+def delete_project(project_id):
+    """Delete a project"""
+    project = Project.query.get_or_404(project_id)
+    db.session.delete(project)
+    db.session.commit()
+    return jsonify({'message': 'Project deleted successfully'})
+
+
+# ============================================================================
+# SOCIAL LINKS ENDPOINTS
+# ============================================================================
+
+@route_api.route('/social-links', methods=['GET'])
+def get_social_links():
+    """Get all social links"""
+    links = SocialLink.query.order_by(SocialLink.display_order).all()
+    return jsonify([link.to_dict() for link in links])
+
+
+@route_api.route('/social-links', methods=['POST'])
+@login_required
+def create_social_link():
+    """Create a new social link"""
+    data = request.json
+    link = SocialLink(
+        platform_name=data['platform_name'],
+        url=data['url'],
+        icon_class=data['icon_class'],
+        display_order=data.get('display_order', 0),
+        animation_delay=data.get('animation_delay', '0s'),
+        is_active=data.get('is_active', True)
+    )
+    db.session.add(link)
+    db.session.commit()
+    return jsonify(link.to_dict()), 201
+
+
+@route_api.route('/social-links/<int:link_id>', methods=['PUT'])
+@login_required
+def update_social_link(link_id):
+    """Update a social link"""
+    link = SocialLink.query.get_or_404(link_id)
+    data = request.json
+
+    link.platform_name = data.get('platform_name', link.platform_name)
+    link.url = data.get('url', link.url)
+    link.icon_class = data.get('icon_class', link.icon_class)
+    link.display_order = data.get('display_order', link.display_order)
+    link.animation_delay = data.get('animation_delay', link.animation_delay)
+    link.is_active = data.get('is_active', link.is_active)
+
+    db.session.commit()
+    return jsonify(link.to_dict())
+
+
+@route_api.route('/social-links/<int:link_id>', methods=['DELETE'])
+@login_required
+def delete_social_link(link_id):
+    """Delete a social link"""
+    link = SocialLink.query.get_or_404(link_id)
+    db.session.delete(link)
+    db.session.commit()
+    return jsonify({'message': 'Social link deleted successfully'})

routes/auth.py

@@ -0,0 +1,101 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+
+# Copyright Hersel Giannella
+
+"""
+Authentication routes for login/logout
+"""
+
+from flask import Blueprint, render_template, request, redirect, url_for, flash
+from flask_login import login_user, logout_user, current_user, login_required
+from models import User, db
+from datetime import datetime
+
+route_auth = Blueprint('auth', __name__, url_prefix='/auth')
+
+
+@route_auth.route('/login', methods=['GET', 'POST'])
+def login():
+    """Login page"""
+    # Se l'utente è già autenticato, reindirizza alla dashboard
+    if current_user.is_authenticated:
+        return redirect(url_for('admin.dashboard'))
+
+    if request.method == 'POST':
+        username = request.form.get('username')
+        password = request.form.get('password')
+        remember = request.form.get('remember', False)
+
+        if not username or not password:
+            flash('Per favore inserisci username e password.', 'danger')
+            return render_template('auth/login.html')
+
+        user = User.query.filter_by(username=username).first()
+
+        if user and user.check_password(password):
+            if not user.is_active:
+                flash('Il tuo account è stato disabilitato.', 'danger')
+                return render_template('auth/login.html')
+
+            # Aggiorna last_login
+            user.last_login = datetime.utcnow()
+            db.session.commit()
+
+            login_user(user, remember=remember)
+            flash(f'Benvenuto {user.username}!', 'success')
+
+            # Redirect alla pagina richiesta o alla dashboard
+            next_page = request.args.get('next')
+            return redirect(next_page) if next_page else redirect(url_for('admin.dashboard'))
+        else:
+            flash('Username o password non corretti.', 'danger')
+
+    return render_template('auth/login.html')
+
+
+@route_auth.route('/logout')
+def logout():
+    """Logout user"""
+    logout_user()
+    flash('Logout effettuato con successo.', 'info')
+    return redirect(url_for('route_home.home'))
+
+
+@route_auth.route('/change-password', methods=['GET', 'POST'])
+@login_required
+def change_password():
+    """Change password page"""
+    if request.method == 'POST':
+        current_password = request.form.get('current_password')
+        new_password = request.form.get('new_password')
+        confirm_password = request.form.get('confirm_password')
+
+        # Validation
+        if not current_password or not new_password or not confirm_password:
+            flash('Tutti i campi sono obbligatori.', 'danger')
+            return render_template('auth/change_password.html')
+
+        # Check current password
+        if not current_user.check_password(current_password):
+            flash('La password attuale non è corretta.', 'danger')
+            return render_template('auth/change_password.html')
+
+        # Check if new passwords match
+        if new_password != confirm_password:
+            flash('Le nuove password non corrispondono.', 'danger')
+            return render_template('auth/change_password.html')
+
+        # Check password length
+        if len(new_password) < 6:
+            flash('La nuova password deve essere di almeno 6 caratteri.', 'danger')
+            return render_template('auth/change_password.html')
+
+        # Update password
+        current_user.set_password(new_password)
+        db.session.commit()
+
+        flash('Password modificata con successo!', 'success')
+        return redirect(url_for('admin.dashboard'))
+
+    return render_template('auth/change_password.html')

routes/home.py

@@ -3,10 +3,24 @@
 
 # Copyright Hersel Giannella
 
-from quart import Blueprint, render_template
+from flask import Blueprint, render_template
+from models import Profile, Skill, Project, SocialLink
 
 route_home = Blueprint('route_home', __name__)
 
 @route_home.route('/')
-async def home():
+def home():
-    return await render_template('index.html')
+    """Render home page with dynamic data from database"""
+    # Fetch all data from database
+    profile = Profile.query.first()
+    skills = Skill.query.filter_by(is_active=True).order_by(Skill.display_order).all()
+    projects = Project.query.filter_by(is_published=True).order_by(Project.display_order).all()
+    social_links = SocialLink.query.filter_by(is_active=True).order_by(SocialLink.display_order).all()
+
+    return render_template(
+        'index.html',
+        profile=profile,
+        skills=skills,
+        projects=projects,
+        social_links=social_links
+    )

templates/admin/base.html

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Admin Dashboard{% endblock %} - Portfolio</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --sidebar-width: 250px;
+            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        .sidebar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            height: 100vh;
+            width: var(--sidebar-width);
+            background: var(--primary-gradient);
+            color: white;
+            padding: 0;
+            overflow-y: auto;
+        }
+        .sidebar-header {
+            padding: 1.5rem;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+        }
+        .sidebar-menu {
+            padding: 1rem 0;
+        }
+        .sidebar-menu a {
+            color: rgba(255,255,255,0.8);
+            text-decoration: none;
+            padding: 0.75rem 1.5rem;
+            display: block;
+            transition: all 0.3s;
+        }
+        .sidebar-menu a:hover,
+        .sidebar-menu a.active {
+            background: rgba(255,255,255,0.1);
+            color: white;
+        }
+        .main-content {
+            margin-left: var(--sidebar-width);
+            padding: 2rem;
+        }
+        .top-bar {
+            background: white;
+            padding: 1rem 2rem;
+            margin: -2rem -2rem 2rem -2rem;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+        }
+        .stat-card {
+            background: white;
+            border-radius: 10px;
+            padding: 1.5rem;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+            transition: transform 0.3s;
+        }
+        .stat-card:hover {
+            transform: translateY(-5px);
+        }
+        .btn-gradient {
+            background: var(--primary-gradient);
+            border: none;
+            color: white;
+        }
+        .btn-gradient:hover {
+            opacity: 0.9;
+            color: white;
+        }
+    </style>
+    {% block extra_css %}{% endblock %}
+</head>
+<body>
+    <!-- Sidebar -->
+    <div class="sidebar">
+        <div class="sidebar-header">
+            <h4 class="mb-0"><i class="fas fa-briefcase me-2"></i>Portfolio Admin</h4>
+            <small class="text-white-50">Ciao, {{ current_user.username }}</small>
+        </div>
+        <nav class="sidebar-menu">
+            <a href="{{ url_for('admin.dashboard') }}" class="{% if request.endpoint == 'admin.dashboard' %}active{% endif %}">
+                <i class="fas fa-th-large me-2"></i>Dashboard
+            </a>
+            <a href="{{ url_for('admin.profile_manage') }}" class="{% if 'profile' in request.endpoint %}active{% endif %}">
+                <i class="fas fa-user me-2"></i>Profilo
+            </a>
+            <a href="{{ url_for('admin.skills_manage') }}" class="{% if 'skills' in request.endpoint %}active{% endif %}">
+                <i class="fas fa-code me-2"></i>Competenze
+            </a>
+            <a href="{{ url_for('admin.projects_manage') }}" class="{% if 'projects' in request.endpoint %}active{% endif %}">
+                <i class="fas fa-folder-open me-2"></i>Progetti
+            </a>
+            <a href="{{ url_for('admin.social_links_manage') }}" class="{% if 'social' in request.endpoint %}active{% endif %}">
+                <i class="fas fa-share-alt me-2"></i>Link Social
+            </a>
+            <hr class="border-white my-3 mx-3">
+            <a href="{{ url_for('auth.change_password') }}" class="{% if request.endpoint == 'auth.change_password' %}active{% endif %}">
+                <i class="fas fa-key me-2"></i>Cambia Password
+            </a>
+            <a href="{{ url_for('route_home.home') }}" target="_blank">
+                <i class="fas fa-external-link-alt me-2"></i>Visualizza Sito
+            </a>
+            <a href="{{ url_for('auth.logout') }}">
+                <i class="fas fa-sign-out-alt me-2"></i>Logout
+            </a>
+        </nav>
+    </div>
+
+    <!-- Main Content -->
+    <div class="main-content">
+        <div class="top-bar">
+            <div class="d-flex justify-content-between align-items-center">
+                <h3 class="mb-0">{% block page_title %}Dashboard{% endblock %}</h3>
+                <div>
+                    <span class="badge bg-success"><i class="fas fa-check-circle me-1"></i>Online</span>
+                </div>
+            </div>
+        </div>
+
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
+                        {{ message }}
+                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+                    </div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+
+        {% block content %}{% endblock %}
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    {% block extra_js %}{% endblock %}
+</body>
+</html>

templates/admin/dashboard.html

@@ -0,0 +1,126 @@
+{% extends "admin/base.html" %}
+
+{% block title %}Dashboard{% endblock %}
+{% block page_title %}Dashboard{% endblock %}
+
+{% block content %}
+<div class="row g-4 mb-4">
+    <div class="col-md-3">
+        <div class="stat-card">
+            <div class="d-flex justify-content-between align-items-center">
+                <div>
+                    <h6 class="text-muted mb-2">Progetti</h6>
+                    <h2 class="mb-0">{{ stats.projects }}</h2>
+                </div>
+                <div class="fs-1 text-primary">
+                    <i class="fas fa-folder-open"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-3">
+        <div class="stat-card">
+            <div class="d-flex justify-content-between align-items-center">
+                <div>
+                    <h6 class="text-muted mb-2">Competenze</h6>
+                    <h2 class="mb-0">{{ stats.skills }}</h2>
+                </div>
+                <div class="fs-1 text-success">
+                    <i class="fas fa-code"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-3">
+        <div class="stat-card">
+            <div class="d-flex justify-content-between align-items-center">
+                <div>
+                    <h6 class="text-muted mb-2">Link Social</h6>
+                    <h2 class="mb-0">{{ stats.social_links }}</h2>
+                </div>
+                <div class="fs-1 text-info">
+                    <i class="fas fa-share-alt"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-3">
+        <div class="stat-card">
+            <div class="d-flex justify-content-between align-items-center">
+                <div>
+                    <h6 class="text-muted mb-2">Pubblicati</h6>
+                    <h2 class="mb-0">{{ stats.published_projects }}</h2>
+                </div>
+                <div class="fs-1 text-warning">
+                    <i class="fas fa-eye"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row g-4">
+    <div class="col-md-8">
+        <div class="card">
+            <div class="card-header bg-white">
+                <h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i>Panoramica</h5>
+            </div>
+            <div class="card-body">
+                <h6>Benvenuto nella Dashboard Admin</h6>
+                <p class="text-muted">
+                    Da qui puoi gestire tutti i contenuti del tuo portfolio. Usa il menu a sinistra per navigare tra le diverse sezioni.
+                </p>
+
+                <div class="mt-4">
+                    <h6>Azioni Rapide</h6>
+                    <div class="d-flex gap-2 flex-wrap">
+                        <a href="{{ url_for('admin.projects_manage') }}" class="btn btn-gradient">
+                            <i class="fas fa-plus me-2"></i>Nuovo Progetto
+                        </a>
+                        <a href="{{ url_for('admin.skills_manage') }}" class="btn btn-outline-primary">
+                            <i class="fas fa-plus me-2"></i>Nuova Skill
+                        </a>
+                        <a href="{{ url_for('route_home.home') }}" class="btn btn-outline-secondary" target="_blank">
+                            <i class="fas fa-external-link-alt me-2"></i>Visualizza Sito
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-md-4">
+        <div class="card">
+            <div class="card-header bg-white">
+                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Info Sistema</h5>
+            </div>
+            <div class="card-body">
+                <div class="mb-3">
+                    <small class="text-muted">Utente</small>
+                    <p class="mb-0"><strong>{{ current_user.username }}</strong></p>
+                </div>
+                <div class="mb-3">
+                    <small class="text-muted">Email</small>
+                    <p class="mb-0">{{ current_user.email }}</p>
+                </div>
+                <div class="mb-3">
+                    <small class="text-muted">Ultimo Accesso</small>
+                    <p class="mb-0">
+                        {% if current_user.last_login %}
+                            {{ current_user.last_login.strftime('%d/%m/%Y %H:%M') }}
+                        {% else %}
+                            Primo accesso
+                        {% endif %}
+                    </p>
+                </div>
+                <hr>
+                <div class="d-grid">
+                    <a href="{{ url_for('auth.logout') }}" class="btn btn-outline-danger">
+                        <i class="fas fa-sign-out-alt me-2"></i>Logout
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/admin/profile.html

@@ -0,0 +1,77 @@
+{% extends "admin/base.html" %}
+
+{% block title %}Gestione Profilo{% endblock %}
+{% block page_title %}Gestione Profilo{% endblock %}
+
+{% block content %}
+<div class="card">
+    <div class="card-body">
+        <form method="POST" action="{{ url_for('admin.profile_edit') }}" enctype="multipart/form-data">
+            <div class="mb-3">
+                <label for="title" class="form-label">Titolo</label>
+                <input type="text" class="form-control" id="title" name="title"
+                       value="{{ profile.title if profile else '' }}" required>
+            </div>
+
+            <div class="mb-3">
+                <label for="lead_text" class="form-label">Testo Principale</label>
+                <textarea class="form-control" id="lead_text" name="lead_text" rows="3" required>{{ profile.lead_text if profile else '' }}</textarea>
+            </div>
+
+            <div class="mb-3">
+                <label for="description_1" class="form-label">Descrizione 1</label>
+                <textarea class="form-control" id="description_1" name="description_1" rows="3">{{ profile.description_1 if profile else '' }}</textarea>
+            </div>
+
+            <div class="mb-3">
+                <label for="description_2" class="form-label">Descrizione 2</label>
+                <textarea class="form-control" id="description_2" name="description_2" rows="3">{{ profile.description_2 if profile else '' }}</textarea>
+            </div>
+
+            <div class="mb-3">
+                <label for="years_experience" class="form-label">Anni di Esperienza</label>
+                <input type="number" class="form-control" id="years_experience" name="years_experience"
+                       value="{{ profile.years_experience if profile else 0 }}">
+            </div>
+
+            <div class="mb-3">
+                <label for="cv_url" class="form-label">URL CV (opzionale)</label>
+                <input type="url" class="form-control" id="cv_url" name="cv_url"
+                       value="{{ profile.cv_url if profile else '' }}">
+            </div>
+
+            <div class="mb-3">
+                <label class="form-label">Immagine di Profilo</label>
+                <div class="row">
+                    <div class="col-md-6">
+                        <label for="profile_image_file" class="form-label text-muted small">Upload Immagine</label>
+                        <input type="file" class="form-control" id="profile_image_file" name="profile_image_file" accept="image/*">
+                        <small class="text-muted">Formati supportati: png, jpg, jpeg, gif, webp (max 16 MB)</small>
+                    </div>
+                    <div class="col-md-6">
+                        <label for="profile_image" class="form-label text-muted small">Oppure inserisci URL manualmente</label>
+                        <input type="text" class="form-control" id="profile_image" name="profile_image"
+                               value="{{ profile.profile_image if profile else '' }}" placeholder="img/personal.webp">
+                        <small class="text-muted">Percorso relativo alla cartella static/</small>
+                    </div>
+                </div>
+                {% if profile and profile.profile_image %}
+                <div class="mt-2">
+                    <small class="text-muted">Immagine attuale:</small><br>
+                    <img src="{{ url_for('static', filename=profile.profile_image) }}" alt="Profile" class="img-thumbnail rounded-circle" style="max-width: 200px; max-height: 200px;">
+                </div>
+                {% endif %}
+            </div>
+
+            <div class="d-flex gap-2">
+                <button type="submit" class="btn btn-gradient">
+                    <i class="fas fa-save me-2"></i>Salva Modifiche
+                </button>
+                <a href="{{ url_for('admin.dashboard') }}" class="btn btn-outline-secondary">
+                    <i class="fas fa-times me-2"></i>Annulla
+                </a>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}

templates/admin/project_form.html

@@ -0,0 +1,101 @@
+{% extends "admin/base.html" %}
+
+{% block title %}{{ 'Modifica' if project else 'Nuovo' }} Progetto{% endblock %}
+{% block page_title %}{{ 'Modifica' if project else 'Nuovo' }} Progetto{% endblock %}
+
+{% block content %}
+<div class="card">
+    <div class="card-body">
+        <form method="POST" enctype="multipart/form-data">
+            <div class="mb-3">
+                <label for="title" class="form-label">Titolo *</label>
+                <input type="text" class="form-control" id="title" name="title"
+                       value="{{ project.title if project else '' }}" required>
+            </div>
+
+            <div class="mb-3">
+                <label for="description" class="form-label">Descrizione *</label>
+                <textarea class="form-control" id="description" name="description" rows="4" required>{{ project.description if project else '' }}</textarea>
+            </div>
+
+            <div class="mb-3">
+                <label class="form-label">Immagine del Progetto</label>
+                <div class="row">
+                    <div class="col-md-6">
+                        <label for="image_file" class="form-label text-muted small">Upload Immagine</label>
+                        <input type="file" class="form-control" id="image_file" name="image_file" accept="image/*">
+                        <small class="text-muted">Formati supportati: png, jpg, jpeg, gif, webp (max 16 MB)</small>
+                    </div>
+                    <div class="col-md-6">
+                        <label for="image_url" class="form-label text-muted small">Oppure inserisci URL manualmente</label>
+                        <input type="text" class="form-control" id="image_url" name="image_url"
+                               value="{{ project.image_url if project else '' }}" placeholder="img/project.webp">
+                        <small class="text-muted">Percorso relativo alla cartella static/</small>
+                    </div>
+                </div>
+                {% if project and project.image_url %}
+                <div class="mt-2">
+                    <small class="text-muted">Immagine attuale:</small><br>
+                    <img src="{{ url_for('static', filename=project.image_url) }}" alt="{{ project.title }}" style="max-width: 200px; max-height: 150px;" class="img-thumbnail">
+                </div>
+                {% endif %}
+            </div>
+
+            <div class="row">
+                <div class="col-md-6 mb-3">
+                    <label for="github_url" class="form-label">URL GitHub</label>
+                    <input type="url" class="form-control" id="github_url" name="github_url"
+                           value="{{ project.github_url if project else '' }}">
+                </div>
+
+                <div class="col-md-6 mb-3">
+                    <label for="demo_url" class="form-label">URL Demo</label>
+                    <input type="url" class="form-control" id="demo_url" name="demo_url"
+                           value="{{ project.demo_url if project else '' }}">
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-md-4 mb-3">
+                    <label for="display_order" class="form-label">Ordine Visualizzazione</label>
+                    <input type="number" class="form-control" id="display_order" name="display_order"
+                           value="{{ project.display_order if project else 0 }}">
+                </div>
+
+                <div class="col-md-4 mb-3">
+                    <label for="animation_delay" class="form-label">Delay Animazione</label>
+                    <input type="text" class="form-control" id="animation_delay" name="animation_delay"
+                           value="{{ project.animation_delay if project else '0s' }}" placeholder="0.2s">
+                </div>
+
+                <div class="col-md-4 mb-3">
+                    <div class="form-check mt-4">
+                        <input type="checkbox" class="form-check-input" id="is_published" name="is_published"
+                               {% if not project or project.is_published %}checked{% endif %}>
+                        <label class="form-check-label" for="is_published">
+                            Pubblica il progetto
+                        </label>
+                    </div>
+                </div>
+            </div>
+
+            <div class="mb-3">
+                <label for="tags" class="form-label">Tags (separati da virgola)</label>
+                <input type="text" class="form-control" id="tags" name="tags"
+                       value="{% if project %}{% for tag in project.tags|sort(attribute='display_order') %}{{ tag.name }}:{{ tag.color_class }}{% if not loop.last %}, {% endif %}{% endfor %}{% endif %}"
+                       placeholder="Python:bg-primary, Flask:bg-info, Docker:bg-success">
+                <small class="text-muted">Formato: Nome:colore, Nome:colore (es: Python:bg-primary, Flask:bg-info)</small>
+            </div>
+
+            <div class="d-flex gap-2">
+                <button type="submit" class="btn btn-gradient">
+                    <i class="fas fa-save me-2"></i>Salva
+                </button>
+                <a href="{{ url_for('admin.projects_manage') }}" class="btn btn-outline-secondary">
+                    <i class="fas fa-times me-2"></i>Annulla
+                </a>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}

templates/admin/projects.html

@@ -0,0 +1,52 @@
+{% extends "admin/base.html" %}
+
+{% block title %}Gestione Progetti{% endblock %}
+{% block page_title %}Gestione Progetti{% endblock %}
+
+{% block content %}
+<div class="mb-3">
+    <a href="{{ url_for('admin.project_add') }}" class="btn btn-gradient">
+        <i class="fas fa-plus me-2"></i>Nuovo Progetto
+    </a>
+</div>
+
+<div class="row g-4">
+    {% for project in projects %}
+    <div class="col-md-4">
+        <div class="card h-100">
+            {% if project.image_url %}
+            <img src="{{ url_for('static', filename=project.image_url) }}" class="card-img-top" alt="{{ project.title }}">
+            {% endif %}
+            <div class="card-body">
+                <h5 class="card-title">{{ project.title }}</h5>
+                <p class="card-text text-muted small">{{ project.description[:100] }}...</p>
+                <div class="mb-2">
+                    {% for tag in project.tags %}
+                    <span class="badge {{ tag.color_class }} me-1">{{ tag.name }}</span>
+                    {% endfor %}
+                </div>
+                <div class="d-flex justify-content-between align-items-center">
+                    <small class="text-muted">
+                        {% if project.is_published %}
+                            <i class="fas fa-eye text-success"></i> Pubblicato
+                        {% else %}
+                            <i class="fas fa-eye-slash text-danger"></i> Bozza
+                        {% endif %}
+                    </small>
+                    <div>
+                        <a href="{{ url_for('admin.project_edit', project_id=project.id) }}" class="btn btn-sm btn-outline-primary">
+                            <i class="fas fa-edit"></i>
+                        </a>
+                        <form method="POST" action="{{ url_for('admin.project_delete', project_id=project.id) }}" class="d-inline">
+                            <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Sicuro di voler eliminare?')">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+{% endblock %}

templates/admin/skills.html

@@ -0,0 +1,132 @@
+{% extends "admin/base.html" %}
+
+{% block title %}Gestione Competenze{% endblock %}
+{% block page_title %}Gestione Competenze{% endblock %}
+
+{% block content %}
+<div class="card mb-4">
+    <div class="card-header bg-white">
+        <h5 class="mb-0">Aggiungi Nuova Competenza</h5>
+    </div>
+    <div class="card-body">
+        <form method="POST" action="{{ url_for('admin.skill_add') }}" class="row g-3">
+            <div class="col-md-3">
+                <input type="text" class="form-control" name="name" placeholder="Nome (es. Python)" required>
+            </div>
+            <div class="col-md-3">
+                <input type="text" class="form-control" name="icon_class" placeholder="Icona (es. fab fa-python)" required>
+            </div>
+            <div class="col-md-2">
+                <input type="text" class="form-control" name="category" placeholder="Categoria">
+            </div>
+            <div class="col-md-1">
+                <input type="number" class="form-control" name="display_order" placeholder="Ordine" value="0">
+            </div>
+            <div class="col-md-1">
+                <div class="form-check mt-2">
+                    <input type="checkbox" class="form-check-input" name="is_active" id="is_active_new" checked>
+                    <label class="form-check-label" for="is_active_new">
+                        Attiva
+                    </label>
+                </div>
+            </div>
+            <div class="col-md-2">
+                <button type="submit" class="btn btn-gradient w-100">
+                    <i class="fas fa-plus me-2"></i>Aggiungi
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-header bg-white">
+        <h5 class="mb-0">Lista Competenze</h5>
+    </div>
+    <div class="card-body">
+        <div class="table-responsive">
+            <table class="table table-hover">
+                <thead>
+                    <tr>
+                        <th>Icona</th>
+                        <th>Nome</th>
+                        <th>Categoria</th>
+                        <th>Ordine</th>
+                        <th>Stato</th>
+                        <th>Azioni</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for skill in skills %}
+                    <tr>
+                        <td><i class="{{ skill.icon_class }} fa-2x text-primary"></i></td>
+                        <td>{{ skill.name }}</td>
+                        <td><span class="badge bg-secondary">{{ skill.category or '-' }}</span></td>
+                        <td>{{ skill.display_order }}</td>
+                        <td>
+                            {% if skill.is_active %}
+                                <span class="badge bg-success">Attiva</span>
+                            {% else %}
+                                <span class="badge bg-danger">Disattiva</span>
+                            {% endif %}
+                        </td>
+                        <td>
+                            <button type="button" class="btn btn-sm btn-outline-primary me-1" data-bs-toggle="modal" data-bs-target="#editModal{{ skill.id }}">
+                                <i class="fas fa-edit"></i>
+                            </button>
+                            <form method="POST" action="{{ url_for('admin.skill_delete', skill_id=skill.id) }}" class="d-inline">
+                                <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Sicuro di voler eliminare?')">
+                                    <i class="fas fa-trash"></i>
+                                </button>
+                            </form>
+                        </td>
+                    </tr>
+
+                    <!-- Edit Modal -->
+                    <div class="modal fade" id="editModal{{ skill.id }}" tabindex="-1">
+                        <div class="modal-dialog">
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <h5 class="modal-title">Modifica Competenza</h5>
+                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                </div>
+                                <form method="POST" action="{{ url_for('admin.skill_edit', skill_id=skill.id) }}">
+                                    <div class="modal-body">
+                                        <div class="mb-3">
+                                            <label class="form-label">Nome</label>
+                                            <input type="text" class="form-control" name="name" value="{{ skill.name }}" required>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label class="form-label">Icona (Font Awesome class)</label>
+                                            <input type="text" class="form-control" name="icon_class" value="{{ skill.icon_class }}" required>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label class="form-label">Categoria</label>
+                                            <input type="text" class="form-control" name="category" value="{{ skill.category or '' }}">
+                                        </div>
+                                        <div class="mb-3">
+                                            <label class="form-label">Ordine di Visualizzazione</label>
+                                            <input type="number" class="form-control" name="display_order" value="{{ skill.display_order }}">
+                                        </div>
+                                        <div class="mb-3 form-check">
+                                            <input type="checkbox" class="form-check-input" name="is_active" id="is_active_{{ skill.id }}" {% if skill.is_active %}checked{% endif %}>
+                                            <label class="form-check-label" for="is_active_{{ skill.id }}">
+                                                Competenza Attiva
+                                            </label>
+                                        </div>
+                                    </div>
+                                    <div class="modal-footer">
+                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annulla</button>
+                                        <button type="submit" class="btn btn-gradient">Salva Modifiche</button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/admin/social_links.html

@@ -0,0 +1,133 @@
+{% extends "admin/base.html" %}
+
+{% block title %}Gestione Link Social{% endblock %}
+{% block page_title %}Gestione Link Social{% endblock %}
+
+{% block content %}
+<div class="card mb-4">
+    <div class="card-header bg-white">
+        <h5 class="mb-0">Aggiungi Nuovo Link</h5>
+    </div>
+    <div class="card-body">
+        <form method="POST" action="{{ url_for('admin.social_link_add') }}" class="row g-3">
+            <div class="col-md-2">
+                <input type="text" class="form-control" name="platform_name" placeholder="Nome (es. LinkedIn)" required>
+            </div>
+            <div class="col-md-3">
+                <input type="url" class="form-control" name="url" placeholder="URL completo" required>
+            </div>
+            <div class="col-md-2">
+                <input type="text" class="form-control" name="icon_class" placeholder="Icona" required>
+            </div>
+            <div class="col-md-1">
+                <input type="number" class="form-control" name="display_order" placeholder="Ordine" value="0">
+            </div>
+            <div class="col-md-2">
+                <div class="form-check mt-2">
+                    <input type="checkbox" class="form-check-input" name="is_active" id="is_active_new" checked>
+                    <label class="form-check-label" for="is_active_new">
+                        Attivo
+                    </label>
+                </div>
+            </div>
+            <div class="col-md-2">
+                <button type="submit" class="btn btn-gradient w-100">
+                    <i class="fas fa-plus me-2"></i>Aggiungi
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <div class="table-responsive">
+            <table class="table table-hover">
+                <thead>
+                    <tr>
+                        <th>Icona</th>
+                        <th>Piattaforma</th>
+                        <th>URL</th>
+                        <th>Ordine</th>
+                        <th>Stato</th>
+                        <th>Azioni</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for link in social_links %}
+                    <tr>
+                        <td><i class="{{ link.icon_class }} fa-2x text-primary"></i></td>
+                        <td>{{ link.platform_name }}</td>
+                        <td><a href="{{ link.url }}" target="_blank" class="text-truncate d-inline-block" style="max-width: 200px;">{{ link.url }}</a></td>
+                        <td>{{ link.display_order }}</td>
+                        <td>
+                            {% if link.is_active %}
+                                <span class="badge bg-success">Attivo</span>
+                            {% else %}
+                                <span class="badge bg-danger">Disattivo</span>
+                            {% endif %}
+                        </td>
+                        <td>
+                            <button type="button" class="btn btn-sm btn-outline-primary me-1" data-bs-toggle="modal" data-bs-target="#editModal{{ link.id }}">
+                                <i class="fas fa-edit"></i>
+                            </button>
+                            <form method="POST" action="{{ url_for('admin.social_link_delete', link_id=link.id) }}" class="d-inline">
+                                <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Sicuro di voler eliminare?')">
+                                    <i class="fas fa-trash"></i>
+                                </button>
+                            </form>
+                        </td>
+                    </tr>
+
+                    <!-- Edit Modal -->
+                    <div class="modal fade" id="editModal{{ link.id }}" tabindex="-1">
+                        <div class="modal-dialog">
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <h5 class="modal-title">Modifica Link Social</h5>
+                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                </div>
+                                <form method="POST" action="{{ url_for('admin.social_link_edit', link_id=link.id) }}">
+                                    <div class="modal-body">
+                                        <div class="mb-3">
+                                            <label class="form-label">Nome Piattaforma</label>
+                                            <input type="text" class="form-control" name="platform_name" value="{{ link.platform_name }}" required>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label class="form-label">URL</label>
+                                            <input type="url" class="form-control" name="url" value="{{ link.url }}" required>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label class="form-label">Icona (Font Awesome class)</label>
+                                            <input type="text" class="form-control" name="icon_class" value="{{ link.icon_class }}" required>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label class="form-label">Ordine di Visualizzazione</label>
+                                            <input type="number" class="form-control" name="display_order" value="{{ link.display_order }}">
+                                        </div>
+                                        <div class="mb-3">
+                                            <label class="form-label">Delay Animazione (es. 0.1s)</label>
+                                            <input type="text" class="form-control" name="animation_delay" value="{{ link.animation_delay }}">
+                                        </div>
+                                        <div class="mb-3 form-check">
+                                            <input type="checkbox" class="form-check-input" name="is_active" id="is_active_{{ link.id }}" {% if link.is_active %}checked{% endif %}>
+                                            <label class="form-check-label" for="is_active_{{ link.id }}">
+                                                Link Attivo
+                                            </label>
+                                        </div>
+                                    </div>
+                                    <div class="modal-footer">
+                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annulla</button>
+                                        <button type="submit" class="btn btn-gradient">Salva Modifiche</button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/auth/change_password.html

@@ -0,0 +1,57 @@
+{% extends "admin/base.html" %}
+
+{% block title %}Cambia Password{% endblock %}
+{% block page_title %}Cambia Password{% endblock %}
+
+{% block content %}
+<div class="row justify-content-center">
+    <div class="col-md-6">
+        <div class="card">
+            <div class="card-body">
+                <div class="text-center mb-4">
+                    <i class="fas fa-key fa-3x text-primary mb-3"></i>
+                    <p class="text-muted">Inserisci la tua password attuale e la nuova password</p>
+                </div>
+
+                <form method="POST" action="{{ url_for('auth.change_password') }}">
+                    <div class="mb-3">
+                        <label for="current_password" class="form-label">
+                            <i class="fas fa-lock me-2"></i>Password Attuale *
+                        </label>
+                        <input type="password" class="form-control" id="current_password" name="current_password" required autofocus>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="new_password" class="form-label">
+                            <i class="fas fa-key me-2"></i>Nuova Password *
+                        </label>
+                        <input type="password" class="form-control" id="new_password" name="new_password" required minlength="6">
+                        <small class="text-muted">Minimo 6 caratteri</small>
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="confirm_password" class="form-label">
+                            <i class="fas fa-check-circle me-2"></i>Conferma Nuova Password *
+                        </label>
+                        <input type="password" class="form-control" id="confirm_password" name="confirm_password" required minlength="6">
+                    </div>
+
+                    <div class="d-flex gap-2">
+                        <button type="submit" class="btn btn-gradient">
+                            <i class="fas fa-save me-2"></i>Cambia Password
+                        </button>
+                        <a href="{{ url_for('admin.dashboard') }}" class="btn btn-outline-secondary">
+                            <i class="fas fa-times me-2"></i>Annulla
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <div class="alert alert-info mt-3">
+            <i class="fas fa-info-circle me-2"></i>
+            <strong>Nota:</strong> Dopo aver cambiato la password, verrai reindirizzato alla dashboard.
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/auth/login.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - Portfolio Admin</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        body {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .login-container {
+            max-width: 450px;
+            width: 100%;
+        }
+        .login-card {
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+            padding: 2.5rem;
+        }
+        .login-header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        .login-header i {
+            font-size: 3rem;
+            color: #667eea;
+            margin-bottom: 1rem;
+        }
+        .btn-login {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border: none;
+            padding: 0.75rem;
+            font-weight: 600;
+        }
+        .btn-login:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+        }
+    </style>
+</head>
+<body>
+    <div class="login-container">
+        <div class="login-card">
+            <div class="login-header">
+                <i class="fas fa-lock"></i>
+                <h2>Admin Login</h2>
+                <p class="text-muted">Accedi per gestire il tuo portfolio</p>
+            </div>
+
+            {% with messages = get_flashed_messages(with_categories=true) %}
+                {% if messages %}
+                    {% for category, message in messages %}
+                        <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
+                            {{ message }}
+                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+                        </div>
+                    {% endfor %}
+                {% endif %}
+            {% endwith %}
+
+            <form method="POST" action="{{ url_for('auth.login') }}">
+                <div class="mb-3">
+                    <label for="username" class="form-label">
+                        <i class="fas fa-user me-2"></i>Username
+                    </label>
+                    <input type="text" class="form-control" id="username" name="username" required autofocus>
+                </div>
+
+                <div class="mb-3">
+                    <label for="password" class="form-label">
+                        <i class="fas fa-key me-2"></i>Password
+                    </label>
+                    <input type="password" class="form-control" id="password" name="password" required>
+                </div>
+
+                <div class="mb-3 form-check">
+                    <input type="checkbox" class="form-check-input" id="remember" name="remember">
+                    <label class="form-check-label" for="remember">
+                        Ricordami
+                    </label>
+                </div>
+
+                <button type="submit" class="btn btn-primary btn-login w-100">
+                    <i class="fas fa-sign-in-alt me-2"></i>Accedi
+                </button>
+            </form>
+
+            <div class="text-center mt-4">
+                <a href="{{ url_for('route_home.home') }}" class="text-decoration-none">
+                    <i class="fas fa-arrow-left me-2"></i>Torna al Portfolio
+                </a>
+            </div>
+        </div>
+
+        <div class="text-center mt-3 text-white">
+            <small>
+                <i class="fas fa-info-circle me-1"></i>
+                Credenziali di default: admin / admin123
+            </small>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>

templates/content/about.html

@@ -3,20 +3,44 @@
             <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">
+                    {% if profile %}
+                    <h3 class="mb-4">{{ profile.title }}</h3>
+                    <p class="lead">{{ profile.lead_text }}</p>
+                    {% if profile.description_1 %}
+                    <p>{{ profile.description_1 }}</p>
+                    {% endif %}
+                    {% if profile.description_2 %}
+                    <p>{{ profile.description_2 }}</p>
+                    {% endif %}
+                    <div class="mt-4">
+                        {% if profile.cv_url %}
+                        <a href="{{ profile.cv_url }}" class="btn btn-primary me-2">Scarica CV</a>
+                        {% endif %}
+                        <a href="#links" class="btn btn-outline-secondary">I Miei Profili</a>
+                    </div>
+                    {% else %}
                     <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>
+                    {% endif %}
                 </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">
+                                {% if skills %}
+                                    {% for skill in skills %}
+                                    <div class="text-center m-3">
+                                        <i class="{{ skill.icon_class }} tech-icon"></i>
+                                        <p>{{ skill.name }}</p>
+                                    </div>
+                                    {% endfor %}
+                                {% else %}
                                     <div class="text-center m-3">
                                         <i class="fab fa-linux tech-icon"></i>
                                         <p>Linux</p>
@@ -49,6 +73,7 @@
                                         <i class="fas fa-network-wired tech-icon"></i>
                                         <p>Networking</p>
                                     </div>
+                                {% endif %}
                             </div>
                         </div>
                     </div>

templates/content/links.html

@@ -6,6 +6,16 @@
                     <div class="card border-0 shadow-sm">
                         <div class="card-body p-5">
                             <div class="d-flex flex-wrap justify-content-center mb-4">
+                                {% if social_links %}
+                                    {% for link in social_links %}
+                                    <a href="{{ link.url }}" class="m-3 text-decoration-none animate__animated animate__bounceIn" {% if link.animation_delay != '0s' %}style="animation-delay: {{ link.animation_delay }}"{% endif %}>
+                                        <div class="text-center">
+                                            <i class="{{ link.icon_class }} social-icon"></i>
+                                            <p class="mt-2 fs-5">{{ link.platform_name }}</p>
+                                        </div>
+                                    </a>
+                                    {% endfor %}
+                                {% else %}
                                     <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>
@@ -42,6 +52,7 @@
                                             <p class="mt-2 fs-5">Email</p>
                                         </div>
                                     </a>
+                                {% endif %}
                             </div>
                             <p class="lead mt-4">Scopri di più sul mio lavoro e segui i miei progetti attraverso questi canali</p>
                         </div>

templates/content/project.html

@@ -2,6 +2,32 @@
         <div class="container">
             <h2 class="text-center section-title animate__animated animate__fadeIn">I Miei Progetti</h2>
             <div class="row">
+                {% if projects %}
+                    {% for project in projects %}
+                    <!-- {{ project.title }} -->
+                    <div class="col-lg-4 col-md-6 mb-4 animate__animated animate__fadeInUp" {% if project.animation_delay != '0s' %}style="animation-delay: {{ project.animation_delay }}"{% endif %}>
+                        <div class="card project-card shadow-sm">
+                            {% if project.image_url %}
+                            <img src="{{ url_for('static', filename=project.image_url) }}" class="card-img-top" alt="{{ project.title }}">
+                            {% endif %}
+                            <div class="card-body">
+                                <h5 class="card-title">{{ project.title }}</h5>
+                                <p class="card-text">{{ project.description }}</p>
+                                <div class="d-flex justify-content-between align-items-center mt-3">
+                                    <div>
+                                        {% for tag in project.tags|sort(attribute='display_order') %}
+                                        <span class="badge {{ tag.color_class }} me-1">{{ tag.name }}</span>
+                                        {% endfor %}
+                                    </div>
+                                    {% if project.github_url or project.demo_url %}
+                                    <a href="{{ project.demo_url if project.demo_url else project.github_url }}" class="btn btn-sm btn-outline-primary">Dettagli</a>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                {% else %}
                     <!-- Progetto 1 -->
                     <div class="col-lg-4 col-md-6 mb-4 animate__animated animate__fadeInUp">
                         <div class="card project-card shadow-sm">
@@ -64,6 +90,7 @@
                             </div>
                         </div>
                     </div>
+                {% endif %}
 
 <!--
 

templates/index.html

@@ -19,7 +19,7 @@
                 </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.webp') }}" alt="Profile" class="img-fluid rounded-circle shadow" style="max-width: 350px;">
+                        <img src="{{ url_for('static', filename=profile.profile_image if profile and profile.profile_image else 'img/personal.webp') }}" alt="Profile" class="img-fluid rounded-circle shadow" style="max-width: 350px;">
                     </div>
                 </div>
             </div>