giorgiopagano.org: Personal Portfolio

<h2>Overview</h2><p>The site is managed with DDEV locally and deployed via rsync to a dedicated VPS. All content types — projects, articles — are built as custom Drupal entities with OpenSpec-driven development workflow.</p><p>The theme compiles Bootstrap 5 from source SCSS, keeping the CSS footprint minimal and the design fully aligned to the brand.</p>

<h2>Development Workflow</h2><p>Every feature starts as a GitLab issue, is formalised as an OpenSpec change with proposal, design and tasks, and lands in a dedicated branch. Commits reference the issue number throughout.</p><pre><code class="language-bash"># Start a new feature\ngit checkout -b feature/NNN-short-description\n\n# Commit referencing the issue\ngit commit -m "feat(project): add field_sections (Refs #2)"</code></pre>

<h2>Performance Snapshot</h2>
<p>Lighthouse scores measured against the production build after optimizing assets, lazy-loading images and adding Service Worker caching.</p>
<div style="max-width:560px;margin:2rem 0">
<canvas id="lighthouseChart" height="140"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4/dist/chart.umd.min.js"></scri…;
<script>
(function(){
var ctx = document.getElementById("lighthouseChart");
if(!ctx) return;
new Chart(ctx, {
type: "bar",
data: {
labels: ["Performance","Accessibility","Best Practices","SEO"],
datasets: [{
label: "Lighthouse Score",
data: [96, 100, 95, 100],
backgroundColor: [
"rgba(13,110,253,0.7)",
"rgba(25,135,84,0.7)",
"rgba(255,193,7,0.7)",
"rgba(13,202,240,0.7)"
],
borderRadius: 6
}]
},
options: {
responsive: true,
indexAxis: "y",
scales: { x: { min: 0, max: 100 } },
plugins: { legend: { display: false } }
}
});
})();
</script>