Files
hersel.it/templates/content/links.html
Claude c6425235a2 Migrate from Quart to Flask and add MariaDB dynamic database
Major Changes:
- Migrated web framework from Quart (async) to Flask (sync)
- Added MariaDB database integration with SQLAlchemy ORM
- Implemented dynamic content management for portfolio

New Features:
- Database models for Profile, Skills, Projects, ProjectTags, and SocialLinks
- RESTful API endpoints for CRUD operations on all entities
- Database initialization script (init_db.py) with sample data
- Docker Compose configuration with MariaDB service

Modified Files:
- app.py: Replaced Quart with Flask, added database initialization
- config.py: Added database configuration with environment variables
- routes/home.py: Converted async to sync, added database queries
- requirements.txt: Replaced Quart/Hypercorn with Flask/Gunicorn, added Flask-SQLAlchemy and PyMySQL
- docker-compose.yml: Added MariaDB service with health checks
- templates/: Updated all templates to use dynamic data from database with Jinja2
- .env.example: Added database configuration variables
- README.md: Complete rewrite with new setup instructions and API documentation

New Files:
- models.py: SQLAlchemy models for all database entities
- init_db.py: Database initialization script
- routes/api.py: REST API endpoints for content management

Benefits:
- Simplified architecture (sync vs async)
- Better ecosystem compatibility
- Dynamic content management via database
- Easy content updates through REST API
- Improved deployment with standard WSGI server (Gunicorn)
2025-11-13 09:16:24 +00:00

63 lines
4.5 KiB
HTML

<section id="links" class="bg-light">
<div class="container">
<h2 class="text-center section-title animate__animated animate__fadeIn">I Miei Profili</h2>
<div class="row justify-content-center">
<div class="col-lg-10 text-center animate__animated animate__fadeInUp">
<div class="card border-0 shadow-sm">
<div class="card-body p-5">
<div class="d-flex flex-wrap justify-content-center mb-4">
{% 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>
<p class="mt-2 fs-5">LinkedIn</p>
</div>
</a>
<a href="https://github.com/blulupo" class="m-3 text-decoration-none animate__animated animate__bounceIn" style="animation-delay: 0.2s">
<div class="text-center">
<i class="fab fa-github social-icon"></i>
<p class="mt-2 fs-5">GitHub</p>
</div>
</a>
<a href="https://stackoverflow.com/users/11765177/hersel-giannella" class="m-3 text-decoration-none animate__animated animate__bounceIn" style="animation-delay: 0.3s">
<div class="text-center">
<i class="fab fa-stack-overflow social-icon"></i>
<p class="mt-2 fs-5">Stack Overflow</p>
</div>
</a>
<a href="https://www.codewars.com/users/BluLupo" class="m-3 text-decoration-none animate__animated animate__bounceIn" style="animation-delay: 0.4s">
<div class="text-center">
<i class="fas fa-code social-icon"></i>
<p class="mt-2 fs-5">CodeWars</p>
</div>
</a>
<a href="https://blog.hersel.it" class="m-3 text-decoration-none animate__animated animate__bounceIn" style="animation-delay: 0.5s">
<div class="text-center">
<i class="fas fa-blog social-icon"></i>
<p class="mt-2 fs-5">Blog</p>
</div>
</a>
<a href="mailto:info@hersel.it" class="m-3 text-decoration-none animate__animated animate__bounceIn" style="animation-delay: 0.6s">
<div class="text-center">
<i class="fas fa-envelope social-icon"></i>
<p class="mt-2 fs-5">Email</p>
</div>
</a>
{% endif %}
</div>
<p class="lead mt-4">Scopri di più sul mio lavoro e segui i miei progetti attraverso questi canali</p>
</div>
</div>
</div>
</div>
</div>
</section>