sexyjekyll-theme 1.0.0

data/README.md

@@ -0,0 +1,276 @@
+# SexyJekyll Theme
+
+A modern, feature-rich Jekyll theme designed for professional blogs and personal websites. Built with accessibility, performance, and user experience in mind.
+
+![SexyJekyll Theme](screenshot.png)
+
+## Features
+
+### Design & User Experience
+- **Modern Design**: Clean, minimalist aesthetic
+- **Fully Responsive**: Mobile-first design that works on all devices
+- **Reading Progress**: Visual indicator showing article reading progress
+- **Print Styles**: Optimized layouts for printing
+
+### Content & Navigation
+- **Advanced Search**: Instant client-side search with keyword highlighting
+- **Related Posts**: Smart post recommendations based on categories and tags
+- **Categories**: Category-based filtering and organization
+- **Pagination**: Customizable post pagination
+
+### SEO & Social
+- **SEO Optimized**: Meta tags, Open Graph, Twitter Cards
+- **Structured Data**: JSON-LD schema for better search engine understanding
+- **RSS Feed**: Automatic feed generation
+- **Sitemap**: Auto-generated sitemap for search engines
+
+### Accessibility
+- **WCAG 2.1 Level AA**: Comprehensive accessibility support
+- **Skip to Content**: Keyboard navigation helpers
+- **Semantic HTML**: Proper HTML5 landmarks and structure
+- **ARIA Labels**: Screen reader friendly
+- **Reduced Motion**: Respects user motion preferences
+- **High Contrast**: Excellent color contrast ratios
+
+### Performance
+- **Responsive Images**: WebP format with multiple sizes
+- **Lazy Loading**: Images load as needed
+- **Optimized CSS/JS**: Minified and efficient code
+- **Fast Load Times**: Optimized for performance
+
+### Developer Features
+- **Syntax Highlighting**: Code blocks with line numbers (Rouge)
+- **Reading Time**: Automatic reading time estimation
+- **Multi-language**: Full i18n system supporting English, Italian, German, French, and Spanish
+- **Customizable**: Easy configuration via `_config.yml`
+- **Well Documented**: Comprehensive documentation included
+
+### AI & LLM Features
+- **llms.txt Support**: Automatic generation of AI-friendly content summaries
+- **Per-Post llms.txt**: Each blog post generates its own dedicated llms.txt file at `/blog/YYYY/MM/DD/post-slug/llms.txt`
+- **Site-level llms.txt**: Main llms.txt file at root with site overview and content structure
+- **Structured Content**: Clean, semantic HTML5 markup optimized for AI crawlers
+- **JSON-LD Schema**: Rich structured data for better content understanding
+- **AI Crawler Friendly**: Welcoming approach to AI indexing with clear instructions
+
+## Installation
+
+### As a Ruby Gem (Recommended)
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "sexyjekyll-theme"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: sexyjekyll-theme
+```
+
+Then execute:
+
+```bash
+bundle install
+```
+
+### Remote Theme (GitHub Pages)
+
+If you're using GitHub Pages, add this to your `_config.yml`:
+
+```yaml
+remote_theme: amargiovanni/sexyjekyll-theme
+```
+
+### Manual Installation
+
+1. Download or clone this repository
+2. Copy the files to your Jekyll site
+3. Update your `_config.yml` with the theme settings
+
+## Quick Start
+
+1. **Install the theme** using one of the methods above
+
+2. **Configure** your `_config.yml`:
+
+```yaml
+# Site settings
+title: Your Name
+email: your.email@example.com
+description: Your site description
+baseurl: ""
+url: "https://yoursite.com"
+lang: en  # Options: en, it, de, fr, es
+
+# Author information
+author:
+  name: Your Name
+  email: your.email@example.com
+  linkedin: https://www.linkedin.com/in/yourprofile/
+  bluesky: https://bsky.app/profile/yourhandle
+
+# Navigation logo
+nav_logo:
+  type: text  # 'text' or 'image'
+  text: YN    # Your initials or text
+  # image: /assets/img/logo.png  # Or path to logo image
+  # alt: Your Logo
+
+# Hero section
+hero:
+  name: Your Name
+  role: Your Role
+  subtitle: Your Company or Tagline
+  tagline: Your personal tagline
+  description: A brief description about you
+
+# Blog section
+blog:
+  title: Blog
+  description: Your blog description
+
+# Contact section
+contact:
+  title: Get In Touch
+  description: Contact page description
+  links:
+    - name: Email
+      url: mailto:your.email@example.com
+      type: email
+    - name: LinkedIn
+      url: https://www.linkedin.com/in/yourprofile/
+      type: linkedin
+```
+
+3. **Create your first post** in `_posts/`:
+
+```markdown
+---
+layout: post
+title: "Your First Post"
+subtitle: "Optional subtitle"
+date: 2025-11-01
+categories: blog tech
+---
+
+Your post content here...
+```
+
+4. **Run Jekyll**:
+
+```bash
+bundle exec jekyll serve
+```
+
+Visit `http://localhost:4000` to see your site!
+
+## Configuration
+
+### Available Layouts
+
+- `default` - Base layout for all pages
+- `home` - Homepage with hero section
+- `blog` - Blog listing page
+- `post` - Individual blog post
+- `about` - About page
+- `contact` - Contact page with social links
+- `category` - Category-specific post listing
+- `404` - Custom 404 error page
+
+### Plugins
+
+The theme uses these Jekyll plugins:
+
+**Standard Plugins:**
+- `jekyll-feed` - RSS feed generation
+- `jekyll-seo-tag` - SEO meta tags
+- `jekyll-paginate` - Post pagination
+- `jekyll-sitemap` - Sitemap generation
+- `liquid_reading_time` - Reading time estimation
+- `jekyll_picture_tag` - Responsive images
+
+**Custom Plugins:**
+- `llms_txt_generator` - Automatically generates llms.txt files for each blog post and creates AI-friendly content summaries
+- `auto_related_posts` - Intelligent post recommendation system based on categories, tags, and content similarity using TF-IDF-like algorithm
+- `category_generator` - Automatically creates dedicated pages for each category with filtered post listings
+- `localized_date` - Liquid filter for formatting dates according to the selected language (e.g., "15 January 2025" in English, "15 gennaio 2025" in Italian)
+
+### Customization
+
+#### Colors and Styles
+
+Edit `css/style.css` to customize colors, fonts, and styles.
+
+#### Social Links
+
+Configure social links in `_config.yml` under `contact.links`. Supported types:
+- email, linkedin, bluesky, twitter, github, instagram, facebook
+- youtube, mastodon, telegram, whatsapp, medium, reddit
+- discord, tiktok, twitch, slack
+
+## Documentation
+
+Detailed documentation is available in the following files:
+
+- [I18N.md](docs/I18N.md) - Internationalization system and language support
+- [ACCESSIBILITY.md](docs/ACCESSIBILITY.md) - Accessibility features and testing
+- [SEARCH.md](docs/SEARCH.md) - Search functionality
+- [READING_PROGRESS.md](docs/READING_PROGRESS.md) - Reading progress indicator
+- [STRUCTURED_DATA.md](docs/STRUCTURED_DATA.md) - SEO structured data
+- [SOCIAL_SHARE.md](SOCIAL_SHARE.md) - How to add social sharing (optional)
+- [COMMENTS.md](docs/COMMENTS.md) - How to add comments (optional)
+- [CHANGELOG.md](CHANGELOG.md) - Version history
+- [PUBLISHING.md](PUBLISHING.md) - Guide to publish your theme
+
+### Available in Multiple Languages
+
+- 🇬🇧 [README.md](README.md) - English
+- 🇮🇹 [README.it.md](README.it.md) - Italian
+- 🇩🇪 [README.de.md](README.de.md) - German
+- 🇫🇷 [README.fr.md](README.fr.md) - French
+- 🇪🇸 [README.es.md](README.es.md) - Spanish
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+- Mobile browsers (iOS Safari, Chrome Mobile)
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## Support
+
+If you encounter any issues or have questions:
+
+- Open an issue on [GitHub](https://github.com/amargiovanni/sexyjekyll-theme/issues)
+- Check the [documentation](https://github.com/amargiovanni/sexyjekyll-theme#readme)
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Credits
+
+Created by [Andrea Margiovanni](https://margiovanni.it)
+
+## Acknowledgments
+
+- Built with [Jekyll](https://jekyllrb.com/)
+- Syntax highlighting by [Rouge](https://github.com/rouge-ruby/rouge)
+- Icons and design inspiration from modern web design trends
+
+---
+
+If you find this theme useful, please consider giving it a star on GitHub!

data/_includes/critical-css.html

@@ -0,0 +1,4 @@
+<style>
+/* Critical CSS - Inline per LCP ottimizzato */
+:root{--bg-primary:#0f0f23;--bg-secondary:rgba(20,20,40,.7);--bg-elevated:rgba(30,30,60,.8);--text-primary:#fff;--text-secondary:#e0e0ff;--text-tertiary:#a0a0d0;--nav-bg:rgba(15,15,35,.6);--color-purple:#a855f7;--color-pink:#ec4899;--color-blue:#3b82f6;--color-cyan:#06b6d4;--accent:#a855f7;--accent-hover:#c084fc;--border:rgba(168,85,247,.2);--font-heading:'Sora',system-ui,sans-serif;--font-body:'Plus Jakarta Sans',system-ui,sans-serif;--spacing-xs:.5rem;--spacing-sm:1rem;--spacing-md:1.5rem;--spacing-lg:2rem;--spacing-xl:3rem;--spacing-2xl:4rem;--spacing-3xl:6rem;--radius-sm:.5rem;--radius-md:1rem;--radius-lg:1.5rem;--radius-full:9999px;--transition-fast:.15s cubic-bezier(.4,0,.2,1);--transition-base:.3s cubic-bezier(.4,0,.2,1)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);background-color:var(--bg-primary);background-image:url('/assets/bg.webp');background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;color:var(--text-primary);line-height:1.7;font-size:18px;overflow-x:hidden;position:relative}h1{font-size:inherit}section h1{font-size:clamp(3rem,8vw,6rem)}.nav{position:sticky;top:0;left:0;right:0;z-index:1000;background:var(--nav-bg);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--border);transition:all var(--transition-base);box-shadow:0 4px 30px rgba(0,0,0,.15)}.nav-container{max-width:1400px;margin:0 auto;padding:1.5rem var(--spacing-lg);display:flex;justify-content:space-between;align-items:center}.nav-logo{font-family:var(--font-heading);font-size:2rem;font-weight:800;background:linear-gradient(135deg,var(--color-purple) 0%,var(--color-pink) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:none;transition:transform var(--transition-base);display:inline-flex;align-items:center}.nav-logo-image{height:2.5rem;width:auto;max-width:12rem;object-fit:contain;display:block;border-radius:50%}.nav-links{display:flex;gap:var(--spacing-xl)}.nav-link{color:var(--text-secondary);text-decoration:none;font-weight:600;font-size:1.1rem;transition:all var(--transition-base);position:relative;padding:.5rem 0}.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-3xl) var(--spacing-lg);position:relative}.hero-container{max-width:1100px;margin:0 auto;width:100%}.hero-content{text-align:center}.hero-name{display:block;font-family:var(--font-heading);font-size:clamp(3rem,8vw,6rem);font-weight:800;line-height:1.1;margin-bottom:var(--spacing-md);background:linear-gradient(135deg,var(--color-purple) 0%,var(--color-pink) 50%,var(--color-cyan) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}@media (max-width:768px){body{font-size:16px}.nav-container{padding:1.25rem var(--spacing-md)}.nav-logo{font-size:1.6rem}.nav-links{gap:var(--spacing-lg)}.hero{padding:var(--spacing-2xl) var(--spacing-md);min-height:calc(100vh - 70px)}}
+</style>

data/_includes/footer.html

@@ -0,0 +1,81 @@
+{% assign t = site.data.i18n[site.lang] %}
+<footer class="footer">
+    <div class="footer-container">
+        <div class="footer-grid">
+            <!-- Column 1: About Section -->
+            <div class="footer-section">
+                <p class="footer-title">{{ site.author.name }}</p>
+                <p class="footer-description">{{ site.description }}</p>
+            </div>
+
+            <!-- Column 2: Navigation -->
+            <div class="footer-section">
+                <p class="footer-title">{{ t.footer.navigation }}</p>
+                <ul class="footer-links">
+                    <li><a href="{{ '/' | relative_url }}">{{ t.nav.home }}</a></li>
+                    <li><a href="{{ '/blog' | relative_url }}">{{ t.nav.blog }}</a></li>
+                    <li><a href="{{ '/categories' | relative_url }}">{{ t.nav.categories }}</a></li>
+                    <li><a href="{{ '/contact' | relative_url }}">{{ t.nav.contacts }}</a></li>
+                </ul>
+            </div>
+
+            <!-- Column 3: Social Links -->
+            <div class="footer-section">
+                <p class="footer-title">{{ t.footer.follow_me }}</p>
+                <ul class="footer-links footer-contact-list">
+                    {% for link in site.contact.links %}
+                        <li>
+                            <a href="{{ link.url }}" class="footer-contact-link" {% if link.type != 'email' %}target="_blank" rel="noopener noreferrer"{% endif %}>
+                                <span class="contact-icon">
+                                    {% case link.type %}
+                                        {% when 'email' %}
+                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                                        {% when 'linkedin' %}
+                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
+                                        {% when 'github' %}
+                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
+                                        {% when 'instagram' %}
+                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
+                                        {% when 'bluesky' %}
+                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"/></svg>
+                                        {% when 'mastodon' %}
+                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M21.327 8.566c0-4.339-2.843-5.61-2.843-5.61-1.433-.658-3.894-.935-6.451-.956h-.063c-2.557.021-5.016.298-6.45.956 0 0-2.843 1.272-2.843 5.61 0 .993-.019 2.181.012 3.441.103 4.243.778 8.425 4.701 9.463 1.809.479 3.362.579 4.612.51 2.268-.126 3.541-.809 3.541-.809l-.075-1.646s-1.621.511-3.441.449c-1.804-.062-3.707-.194-3.999-2.409a4.523 4.523 0 0 1-.04-.621s1.77.433 4.014.536c1.372.063 2.658-.08 3.965-.236 2.506-.299 4.688-1.843 4.962-3.254.434-2.223.398-5.424.398-5.424zm-3.353 5.59h-2.081V9.057c0-1.075-.452-1.62-1.357-1.62-1 0-1.501.647-1.501 1.927v2.791h-2.069V9.364c0-1.28-.501-1.927-1.502-1.927-.905 0-1.357.546-1.357 1.62v5.099H6.026V8.903c0-1.074.273-1.927.823-2.558.566-.631 1.307-.955 2.228-.955 1.065 0 1.872.409 2.405 1.228l.518.869.519-.869c.533-.819 1.34-1.228 2.405-1.228.92 0 1.662.324 2.228.955.549.631.822 1.484.822 2.558v5.253z"/></svg>
+                                        {% else %}
+                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
+                                    {% endcase %}
+                                </span>
+                                <span class="contact-label">{{ link.name }}</span>
+                            </a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
+
+            <!-- Column 4: Built With -->
+            <div class="footer-section">
+                <p class="footer-title">{{ t.footer.built_with }}</p>
+                <a href="https://jekyllrb.com" target="_blank" rel="noopener noreferrer" style="display: inline-block; margin-bottom: var(--spacing-xs);">
+                    <img src="{{ '/assets/images/jekyll.webp' | relative_url }}" alt="Jekyll" style="height: 40px; width: auto; opacity: 0.9; transition: opacity var(--transition-base);" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.9'">
+                </a>
+                <p class="footer-description">
+                    {{ t.footer.jekyll_description }}
+                </p>
+            </div>
+        </div>
+
+        <!-- Bottom Bar -->
+        <div class="footer-bottom">
+            <div class="footer-license">
+                <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener noreferrer" class="cc-license">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/>
+                    </svg>
+                    <span>{{ t.footer.license }}</span>
+                </a>
+                <span class="separator">·</span>
+                <span>&copy; {{ 'now' | date: "%Y" }} {{ site.author.name }}</span>
+            </div>
+            <p class="footer-tagline">{{ t.footer.made_with_love }} <a href="https://margiovanni.it" title="Andrea">Andrea</a></p>
+        </div>
+    </div>
+</footer>

data/_includes/head.html

@@ -0,0 +1,88 @@
+{% assign t = site.data.i18n[site.lang] %}
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
+    <meta name="author" content="{{ site.author.name }}">
+    <meta name="keywords" content="{% if page.keywords %}{{ page.keywords }}{% else %}{{ t.seo.default_keywords }}{% endif %}">
+
+<!-- AI Crawlers Meta Tags -->
+    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
+    <meta property="article:author" content="{{ site.author.name }}">
+    {% if page.date %}
+    <meta property="article:published_time" content="{{ page.date | date_to_xmlschema }}">
+    <meta property="article:modified_time" content="{{ page.date | date_to_xmlschema }}">
+    {% endif %}
+    {% if page.categories %}
+    {% for category in page.categories %}
+    <meta property="article:tag" content="{{ category }}">
+    {% endfor %}
+    {% endif %}
+    <link rel="canonical" href="{{ page.url | absolute_url }}">
+
+    <!-- Open Graph -->
+    <meta property="og:title" content="{% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %}">
+    <meta property="og:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
+    <meta property="og:type" content="{% if page.layout == 'post' %}article{% else %}website{% endif %}">
+    {% if page.image %}
+    <meta property="og:image" content="{{ page.image | absolute_url }}">
+    {% endif %}
+
+    <title>{% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %}</title>
+
+    <!-- Favicon -->
+    <link rel="apple-touch-icon" sizes="57x57" href="{{ '/assets/favicon/apple-icon-57x57.png' | relative_url }}">
+    <link rel="apple-touch-icon" sizes="60x60" href="{{ '/assets/favicon/apple-icon-60x60.png' | relative_url }}">
+    <link rel="apple-touch-icon" sizes="72x72" href="{{ '/assets/favicon/apple-icon-72x72.png' | relative_url }}">
+    <link rel="apple-touch-icon" sizes="76x76" href="{{ '/assets/favicon/apple-icon-76x76.png' | relative_url }}">
+    <link rel="apple-touch-icon" sizes="114x114" href="{{ '/assets/favicon/apple-icon-114x114.png' | relative_url }}">
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ '/assets/favicon/apple-icon-120x120.png' | relative_url }}">
+    <link rel="apple-touch-icon" sizes="144x144" href="{{ '/assets/favicon/apple-icon-144x144.png' | relative_url }}">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ '/assets/favicon/apple-icon-152x152.png' | relative_url }}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/favicon/apple-icon-180x180.png' | relative_url }}">
+    <link rel="icon" type="image/png" sizes="192x192"  href="{{ '/assets/favicon/android-icon-192x192.png' | relative_url }}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/favicon/favicon-32x32.png' | relative_url }}">
+    <link rel="icon" type="image/png" sizes="96x96" href="{{ '/assets/favicon/favicon-96x96.png' | relative_url }}">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ '/assets/favicon/favicon-16x16.png' | relative_url }}">
+    <link rel="shortcut icon" href="{{ '/assets/favicon/favicon.ico' | relative_url }}">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="{{ '/assets/favicon/ms-icon-144x144.png' | relative_url }}">
+    <meta name="theme-color" content="#ffffff">
+
+    <!-- Preconnect to external domains for faster resource loading -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+    <!-- Preload risorse critiche -->
+    <link rel="preload" href="{{ '/assets/bg.webp' | relative_url }}" as="image" type="image/webp">
+
+    <!-- Critical CSS inline per LCP ottimizzato -->
+    {% include critical-css.html %}
+
+    <!-- Preload del CSS completo -->
+    <link rel="preload" href="{{ '/css/style.css' | relative_url }}?v={{ site.time | date: '%s' }}" as="style">
+
+    <!-- CSS completo caricato in modo asincrono -->
+    <link rel="stylesheet" href="{{ '/css/style.css' | relative_url }}?v={{ site.time | date: '%s' }}" media="print" onload="this.media='all';this.onload=null">
+    <noscript><link rel="stylesheet" href="{{ '/css/style.css' | relative_url }}?v={{ site.time | date: '%s' }}"></noscript>
+
+    <!-- Non-critical CSS preloaded and loaded asynchronously -->
+    <link rel="preload" href="{{ '/css/animations.css' | relative_url }}?v={{ site.time | date: '%s' }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="{{ '/css/animations.css' | relative_url }}?v={{ site.time | date: '%s' }}"></noscript>
+
+    <link rel="preload" href="{{ '/css/syntax-dark.css' | relative_url }}?v={{ site.time | date: '%s' }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="{{ '/css/syntax-dark.css' | relative_url }}?v={{ site.time | date: '%s' }}"></noscript>
+
+    <!-- Google Fonts loaded asynchronously -->
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet"></noscript>
+
+    {% seo %}
+    {% feed_meta %}
+
+    <!-- Structured Data (JSON-LD) -->
+    {% include structured-data-website.html %}
+    {% include structured-data-person.html %}
+    {% include structured-data-article.html %}
+    {% include structured-data-breadcrumb.html %}
+</head>

data/_includes/nav.html

@@ -0,0 +1,21 @@
+{% assign t = site.data.i18n[site.lang] %}
+<a href="#main-content" class="skip-to-content">{{ t.nav.skip_to_content }}</a>
+
+<nav class="nav" role="navigation" aria-label="{{ t.nav.main_navigation }}">
+    <div class="nav-container">
+        <a href="{{ '/' | relative_url }}" class="nav-logo" aria-label="{{ site.author.name }} - {{ t.nav.home }}">
+            {% if site.nav_logo.type == 'image' %}
+                <img src="{{ site.nav_logo.image | relative_url }}" alt="{{ site.nav_logo.alt | default: site.title }}" class="nav-logo-image">
+            {% elsif site.nav_logo.text %}
+                {{ site.nav_logo.text }}
+            {% else %}
+                {{ site.author.name | slice: 0, 2 | upcase }}
+            {% endif %}
+        </a>
+        <div class="nav-links">
+            <a href="{{ '/' | relative_url }}" class="nav-link {% if page.url == '/' or page.url == '/index.html' %}active{% endif %}" {% if page.url == '/' or page.url == '/index.html' %}aria-current="page"{% endif %}>{{ t.nav.home }}</a>
+            <a href="{{ '/blog' | relative_url }}" class="nav-link {% if page.url contains '/blog' %}active{% endif %}" {% if page.url contains '/blog' %}aria-current="page"{% endif %}>{{ t.nav.blog }}</a>
+            <a href="{{ '/contact' | relative_url }}" class="nav-link {% if page.url contains '/contact' %}active{% endif %}" {% if page.url contains '/contact' %}aria-current="page"{% endif %}>{{ t.nav.contacts }}</a>
+        </div>
+    </div>
+</nav>

data/_includes/related-posts.html

@@ -0,0 +1,75 @@
+{% assign maxRelated = 4 %}
+
+{% comment %}
+  This include finds related posts using:
+  1. Auto-generated related posts (from auto_related_posts.rb plugin) - if available
+  2. Fallback to manual category-based matching
+{% endcomment %}
+
+{% assign related_posts = "" | split: "" %}
+
+{% comment %} Use auto-generated related posts if available {% endcomment %}
+{% if page.auto_related_posts and page.auto_related_posts.size > 0 %}
+  {% assign related_posts = page.auto_related_posts %}
+{% else %}
+  {% comment %} Fallback: Find posts with common categories {% endcomment %}
+  {% assign minCommonCategories = 1 %}
+
+  {% for post in site.posts %}
+    {% if post.url != page.url %}
+      {% assign commonCategories = 0 %}
+      {% for category in post.categories %}
+        {% if page.categories contains category %}
+          {% assign commonCategories = commonCategories | plus: 1 %}
+        {% endif %}
+      {% endfor %}
+
+      {% if commonCategories >= minCommonCategories %}
+        {% assign related_posts = related_posts | push: post %}
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+
+  {% comment %} If we don't have enough related posts, add recent ones {% endcomment %}
+  {% if related_posts.size < maxRelated %}
+    {% for post in site.posts %}
+      {% if post.url != page.url %}
+        {% unless related_posts contains post %}
+          {% assign related_posts = related_posts | push: post %}
+        {% endunless %}
+      {% endif %}
+      {% if related_posts.size >= maxRelated %}
+        {% break %}
+      {% endif %}
+    {% endfor %}
+  {% endif %}
+{% endif %}
+
+{% if related_posts.size > 0 %}
+{% assign t = site.data.i18n[site.lang] %}
+<aside class="related-posts">
+  <h2 class="related-posts-title">{{ t.related.you_may_like }}</h2>
+  <div class="related-posts-grid">
+    {% for post in related_posts limit:maxRelated %}
+    <article class="related-post-card">
+      <time class="related-post-date" datetime="{{ post.date | date_to_xmlschema }}">
+        {{ post.date | localized_date }}
+      </time>
+      {% if post.categories %}
+      <div class="related-post-categories">
+        {% for category in post.categories %}
+        <span class="related-post-category">{{ category }}</span>
+        {% endfor %}
+      </div>
+      {% endif %}
+      <h3 class="related-post-title">
+        <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+      </h3>
+      {% if post.subtitle %}
+      <p class="related-post-subtitle">{{ post.subtitle }}</p>
+      {% endif %}
+    </article>
+    {% endfor %}
+  </div>
+</aside>
+{% endif %}