docs: improve commands readability

Updated the Docker CI workflow to include tag support and improved structure.

.dockerignore

@@ -0,0 +1,13 @@
+.git
+.gitignore
+__pycache__
+*.pyc
+*.pyo
+*.pyd
+.env
+venv
+.venv
+db.sqlite3
+staticfiles
+media
+wholestatic

.github/workflows/docker-image.yml

@@ -0,0 +1,43 @@
+name: Build and Push Docker Image
+
+on:
+  push:
+    branches: [main]
+    tags: ["v*"]
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Login to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.gitignore

@@ -8,12 +8,11 @@ devenv.local.yaml
 # direnv
 .direnv
 
-# pre-commit
-.pre-commit-config.yaml
-
 *.sqlite3
 
+.ruff_cache
 *.pyc
 __pycache__/
 local_settings.py
 uploads/
+wholestatic/

.pre-commit-config.yaml

@@ -0,0 +1,15 @@
+repos:
+  - repo: https://github.com/djlint/djLint
+    rev: v1.46.1
+    hooks:
+      - id: djlint-reformat-django
+        language: system
+      - id: djlint-django
+        language: system
+  - repo: https://github.com/astral-sh/ruff-pre-commit
+    rev: v0.16.6
+    hooks:
+      - id: ruff-check
+        language: system
+      - id: ruff-format
+        language: system

Dockerfile

@@ -0,0 +1,20 @@
+FROM python:3.12-slim
+
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV PYTHONUNBUFFERED=1
+
+WORKDIR /app
+
+RUN apt-get update \
+    && apt-get install -y --no-install-recommends gcc
+
+COPY requirements.txt .
+
+RUN pip install --no-cache-dir --upgrade pip \
+    && pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 8000
+
+CMD ["sh", "-c", "python manage.py migrate && python manage.py collectstatic --noinput && gunicorn patrickcanal_it.wsgi:application --bind 0.0.0.0:8000"]

Justfile

@@ -0,0 +1,19 @@
+tabler_dir := "static/tabler/"
+
+css:
+    npx @tailwindcss/cli -i ./src/input.css -o ./dist/tailwind.css
+
+css-nix:
+    nix run nixpkgs#tailwindcss -- -i ./static/css/input.css -o ./static/css/style.css -c tailwind.config.js 
+
+update-dependencies: update-tabler update-htmx
+
+update-htmx:
+    wget -N -P static/htmx/ https://cdn.jsdelivr.net/npm/htmx.org@latest/dist/htmx.min.js
+
+update-tabler:
+    wget -N -P {{tabler_dir}} https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css
+    wget -N -P {{tabler_dir}} https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css.map
+    wget -N -P {{tabler_dir}} https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js
+    wget -N -P {{tabler_dir}} https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js.map
+

README.md

@@ -0,0 +1,22 @@
+# patrickcanal.it
+
+## Docker 
+Build container 
+```bash
+docker build . -t patrickcanal.it
+```
+
+Run docker run 
+```bash
+docker run -p 8000:8000 patrickcanal.it -v "$(pwd)/patrickcanal.it/local_settings.py:/app/patrickcanal.it/local_settings.py" -v "$(pwd)/patrickcanal.it/db.sqlite:/app/db.sqlite"
+```
+
+## Required variables
+### Portfolio
+Email variables will be replaced once `django-post_office` will be updated to support django 6.1 email system
+- MAILER_HOST
+- EMAIL_CONTACT
+- EMAIL_HOST_USER
+- EMAIL_HOST_PASSWORD
+- EMAIL_PORT
+- EMAIL_USE_TLS

devenv.lock

@@ -3,11 +3,11 @@
     "devenv": {
       "locked": {
         "dir": "src/modules",
-        "lastModified": 1786975632,
-        "narHash": "sha256-3N/pfn4/ADlkTzHJWgClmKD1mTLyVJNFxLbDMMHl/xw=",
+        "lastModified": 1789304775,
+        "narHash": "sha256-WPuZ7LbqlQ8n+kocw8oo4sNvHy//LXBTAHOqRDp5I5c=",
         "owner": "cachix",
         "repo": "devenv",
-        "rev": "c972cb46d511e690c942e6ee3309a7e8b9a20475",
+        "rev": "e6f5e1e6cda3a75bad3e0a4af97eb9e70bc9e127",
         "type": "github"
       },
       "original": {
@@ -55,11 +55,11 @@
         "nixpkgs": "nixpkgs"
       },
       "locked": {
-        "lastModified": 1784288435,
-        "narHash": "sha256-ReRHaLgr/uVqdD8afFSn+myXIfpHeOhP0yYe0TJqAA8=",
+        "lastModified": 1788267358,
+        "narHash": "sha256-nt+lUqYVpc9Y6JeMd2WmXzCDojasdadKo0mWcluvY2Y=",
         "owner": "cachix",
         "repo": "git-hooks.nix",
-        "rev": "43b3c1ab9d40fb1dbb008f451988a91e375825e9",
+        "rev": "27555e2624241fb116b49095df4caaee85a25691",
         "type": "github"
       },
       "original": {
@@ -70,11 +70,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1782918843,
-        "narHash": "sha256-ETYnV9U7Sr+A45dohzZdfCZKOss4qrTkO+wgNZNvEc0=",
+        "lastModified": 1787631388,
+        "narHash": "sha256-vMiXptXarfSdJb1Gkc+FYVOAibuBRj7qxGa8z68q1Uw=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "e8273b29fe1390ec8d4603f2477357555291432e",
+        "rev": "ac6b2166e7a9375683b8e98f860f273222337b16",
         "type": "github"
       },
       "original": {
@@ -108,11 +108,11 @@
     "nixpkgs-src": {
       "flake": false,
       "locked": {
-        "lastModified": 1786098110,
-        "narHash": "sha256-shi1tjDhCGGd0kIgVPNY03V8NBWSTzhMSFDb7IqSoec=",
+        "lastModified": 1787394516,
+        "narHash": "sha256-pRGOQSClnXNI2iLUG6DYpsGvYcuw0drOutVZFTJNw90=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "afb4584a80bbf779ce0f691509ff902d188c2b3d",
+        "rev": "c8f90650c15282fa8656a041bfbbd2403997a9a7",
         "type": "github"
       },
       "original": {
@@ -127,11 +127,11 @@
         "nixpkgs-src": "nixpkgs-src"
       },
       "locked": {
-        "lastModified": 1786472144,
-        "narHash": "sha256-W1wLGKZKGtnTWGRFgjbsVQleuO6jgMweaSAbFltLkN0=",
+        "lastModified": 1787753358,
+        "narHash": "sha256-Tl77VbWyAKrOfRNQhL6JbQtb/MLzbYa/1RG1gWWfICk=",
         "owner": "cachix",
         "repo": "devenv-nixpkgs",
-        "rev": "ea21d30f66a051c7cd750692a2af8d56e0ec4bfb",
+        "rev": "256551e45f6303e142ab4a98be1bf243feb77dc0",
         "type": "github"
       },
       "original": {

devenv.nix

@@ -1,5 +1,4 @@
 {
-  pkgs,
   ...
 }:
 
@@ -11,20 +10,5 @@
       enable = true;
       requirements = ./requirements.txt;
     };
-
-  };
-
-  git-hooks.hooks = {
-    ruff = {
-      enable = true;
-      package = pkgs.ruff;
-      excludes = [ "migrations/" ];
-    };
-    djlint = {
-      enable = true;
-      name = "djlint";
-      entry = "djlint --check .";
-      types = [ "html" ];
-    };
   };
 }

patrickcanal_it/settings.py

@@ -37,6 +37,7 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'post_office',
     'portfolio'
 ]
 
@@ -48,6 +49,7 @@ MIDDLEWARE = [
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
+    "whitenoise.middleware.WhiteNoiseMiddleware",
 ]
 
 ROOT_URLCONF = 'patrickcanal_it.urls'
@@ -114,6 +116,12 @@ USE_I18N = True
 
 USE_TZ = True
 
+STATIC_ROOT = BASE_DIR / "wholestatic"
+
+try: 
+    from patrickcanal_it.local_settings import *
+except Exception as e:
+    print(e)
 
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/6.1/howto/static-files/
@@ -121,14 +129,23 @@ USE_TZ = True
 STATIC_URL = 'static/'
 STATICFILES_DIRS = [
     BASE_DIR / "static/",
-    BASE_DIR / "uploads/",
 ]
 
+MEDIA_URL = "/uploads/"
+MEDIA_ROOT = BASE_DIR / "uploads/"
+
 # Email
 # https://docs.djangoproject.com/en/6.1/topics/email/#topic-email-configuration
+EMAIL_BACKEND = 'post_office.EmailBackend'
+# TODO: Replace old mail backend with new once post_office supports it 
+# MAILERS = {
+#     'default': {
+#         'BACKEND': 'post_office.EmailBackend',
+#     },
+#     'smtp': {
+#         'BACKEND': 'django.core.mail.backends.smtp.EmailBackend',
+#         'OPTIONS': {'host': MAILER_HOST, 'port': 587},
+#     },
+# }
+# POST_OFFICE = {'DEFAULT_MAILER': 'smtp'}
 
-MAILERS = {
-    'default': {
-        'BACKEND': 'django.core.mail.backends.console.EmailBackend',
-    },
-}

patrickcanal_it/templates/base.html

@@ -4,62 +4,71 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Patrick Canal developer website">
         <title>Patrick Canal</title>
         <link rel="stylesheet" href="{% static 'css/style.css' %}">
         <link rel="stylesheet" href="{% static 'tabler/tabler.min.css' %}">
         <link rel="stylesheet" href="{% static 'fontawesome-7/css/all.min.css' %}">
         <script src="{% static 'tabler/tabler.min.js' %}"></script>
-        <script src="{% static 'tailwindcss/tailwindcss.min.js' %}"></script>
+        <script src="{% static 'htmx/htmx.min.js' %}"></script>
     </head>
-    <body class="d-flex flex-column">
-        <header class="navbar navbar-expand-md d-print-none">
-            <div class="container-xl">
-                <button class="navbar-toggler"
-                        type="button"
-                        data-bs-toggle="collapse"
-                        data-bs-target="#navbar-menu"
-                        aria-controls="navbar-menu"
-                        aria-expanded="false"
-                        aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-                <ul class="navbar-nav">
-                    <li class="nav-item active">
-                        <a class="nav-link" href="{% url 'index' %}">
-                            <span class="nav-link-icon">
-                                <i class="fa-solid fa-house"></i>
-                            </span>
-                            <span class="nav-link-title">Home</span>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </header>
-        <main class="mb-2">
-            {% block content %}
-            {% endblock content %}
-        </main>
-        <footer class="footer">
-            <div class="container">
-                <div class="d-flex justify-content-between">
-                    <div class="fs-3">
-                        <p class="text-secondary">Copyright @ {% now "Y" %} Patrick Canal</p>
-                        <p class="text-secondary">{% trans "Distributed as FOSS with GPLv3 license" %}</p>
-                    </div>
-                    <div class="fs-1">
-                        <a href="mailto:me@patrickcanal.it">
-                            <i class="fa-solid fa-envelope"></i>
-                        </a>
-                        <a href="https://www.linkedin.com/in/patrick-canal-7831252b7/"
-                           target="_blank">
-                            <i class="fa-brands fa-linkedin"></i>
-                        </a>
-                        <a href="https://github.com/Superredstone" target="_blank">
-                            <i class="fa-brands fa-github"></i>
-                        </a>
+    <body>
+        <div class="d-flex flex-column min-vh-100">
+            <header class="navbar navbar-expand-md d-print-none">
+                <div class="container-xl">
+                    <button class="navbar-toggler"
+                            type="button"
+                            data-bs-toggle="collapse"
+                            data-bs-target="#navbar-menu"
+                            aria-controls="navbar-menu"
+                            aria-expanded="false"
+                            aria-label="Toggle navigation">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+                    <div class="collapse navbar-collapse" id="navbar-menu">
+                        <ul class="navbar-nav">
+                            <li class="nav-item {% if request.path == "/portfolio/" %}active{% endif %}">
+                                <a class="nav-link" href="{% url 'portfolio' %}">
+                                    <span class="nav-link-icon"><i class="fa-solid fa-home"></i></span>
+                                    <span class="nav-link-title">{% trans "Home" %}</span>
+                                </a>
+                            </li>
+                            <li class="nav-item {% if "/portfolio/projects" in request.path %}active{% endif %}">
+                                <a class="nav-link" href="{% url 'projects' %}">
+                                    <span class="nav-link-icon"><i class="fa-solid fa-folder-open"></i></span>
+                                    <span class="nav-link-title">{% trans "Projects" %}</span>
+                                </a>
+                            </li>
+                        </ul>
                     </div>
                 </div>
-            </div>
-        </footer>
+            </header>
+            <main class="mb-2">
+                {% block content %}
+                {% endblock content %}
+            </main>
+            <footer class="footer">
+                <div class="container">
+                    <div class="d-flex justify-content-between">
+                        <div class="fs-3">
+                            <p class="text-secondary">Copyright @ {% now "Y" %} Patrick Canal</p>
+                            <p class="text-secondary">{% trans "Distributed as FOSS with GPLv3 license" %}</p>
+                        </div>
+                        <div class="fs-1">
+                            <a href="mailto:me@patrickcanal.it">
+                                <i class="fa-solid fa-envelope"></i>
+                            </a>
+                            <a href="https://www.linkedin.com/in/patrick-canal-7831252b7/"
+                               target="_blank">
+                                <i class="fa-brands fa-linkedin"></i>
+                            </a>
+                            <a href="https://github.com/Superredstone" target="_blank">
+                                <i class="fa-brands fa-github"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        </div>
     </body>
 </html>

patrickcanal_it/urls.py

@@ -18,13 +18,14 @@ Including another URLconf
 from django.conf import settings
 from django.conf.urls.static import static
 from django.contrib import admin
-from django.urls import path
+from django.urls import include, path
 
-from portfolio.views import IndexView
+from patrickcanal_it.views import IndexView
 
 urlpatterns = [
     path("admin/", admin.site.urls),
     path("", IndexView.as_view(), name="index"),
+    path("portfolio/", include("portfolio.urls")),
 ]
 
 if settings.DEBUG:

patrickcanal_it/views.py

@@ -0,0 +1,7 @@
+from django.shortcuts import redirect
+from django.views.generic import View
+
+
+class IndexView(View):
+    def get(self, request, *args, **kwargs):
+        return redirect("portfolio")

portfolio/admin.py

@@ -5,12 +5,25 @@ from portfolio import models
 
 @admin.register(models.JobExperience)
 class JobExperienceAdmin(admin.ModelAdmin):
-    pass
+    list_display = ["company", "position", "start", "end"]
+
 
 @admin.register(models.JobTask)
 class JobTaskAdmin(admin.ModelAdmin):
-    pass
+    list_display = ["job__company", "description", "job__start", "job__end"]
+
 
 @admin.register(models.Company)
 class CompanyAdmin(admin.ModelAdmin):
-    pass
+    list_display = ["name", "location"]
+
+
+@admin.register(models.Project)
+class ProjectAdmin(admin.ModelAdmin):
+    list_display = ["name", "short_description"]
+    filter_horizontal = ["tags"]
+
+
+@admin.register(models.ProjectTag)
+class ProjectTagAdmin(admin.ModelAdmin):
+    list_display = ["name", "color"]

portfolio/forms.py

@@ -0,0 +1,54 @@
+from django import forms
+from django.utils.translation import gettext as _
+
+
+class TablerEmailInput(forms.EmailInput):
+    def __init__(self, *args, **kwargs):
+        attrs = kwargs.setdefault("attrs", {})
+        attrs.update(
+            {
+                "class": "form-control",
+                "placeholder": "example@mail.com",
+                "autocomplete": "off",
+                "minlength": "4",
+            }
+        )
+        super().__init__(*args, **kwargs)
+
+
+class TablerTextInput(forms.TextInput):
+    def __init__(self, placeholder=None, *args, **kwargs):
+        attrs = kwargs.setdefault("attrs", {})
+        attrs.update(
+            {
+                "class": "form-control",
+                "placeholder": placeholder,
+                "autocomplete": "off",
+                "minlength": "4",
+            }
+        )
+        super().__init__(*args, **kwargs)
+
+
+class TablerTextArea(forms.Textarea):
+    def __init__(self, placeholder=None, *args, **kwargs):
+        attrs = kwargs.setdefault("attrs", {})
+        attrs.update(
+            {
+                "class": "form-control",
+                "placeholder": placeholder,
+                "autocomplete": "off",
+                "minlength": "4",
+            }
+        )
+        super().__init__(*args, **kwargs)
+
+
+class ContactForm(forms.Form):
+    email = forms.EmailField(max_length=50, min_length=4, widget=TablerEmailInput())
+    subject = forms.CharField(
+        max_length=200,
+        min_length=4,
+        widget=TablerTextInput(placeholder=_("Your message")),
+    )
+    message = forms.CharField(max_length=5000, min_length=10, widget=TablerTextArea())

portfolio/migrations/0003_project_alter_jobtask_job.py

@@ -0,0 +1,28 @@
+# Generated by Django 6.1 on 2026-08-30 18:10
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('portfolio', '0002_alter_company_options_jobexperience_position'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Project',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=256, verbose_name='Name')),
+                ('short_description', models.CharField(max_length=512, verbose_name='Short description')),
+                ('url', models.URLField(blank=True, verbose_name='URL')),
+            ],
+        ),
+        migrations.AlterField(
+            model_name='jobtask',
+            name='job',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='job_tasks', to='portfolio.jobexperience'),
+        ),
+    ]

portfolio/migrations/0004_company_color_alter_company_logo.py

@@ -0,0 +1,23 @@
+# Generated by Django 6.1.1 on 2026-09-15 17:48
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('portfolio', '0003_project_alter_jobtask_job'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='company',
+            name='color',
+            field=models.CharField(default='000000', max_length=6, verbose_name='Color (hex)'),
+        ),
+        migrations.AlterField(
+            model_name='company',
+            name='logo',
+            field=models.FileField(upload_to='portfolio/companies_logo/'),
+        ),
+    ]

portfolio/migrations/0005_projecttag_project_tags.py

@@ -0,0 +1,26 @@
+# Generated by Django 6.1.1 on 2026-09-15 18:04
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('portfolio', '0004_company_color_alter_company_logo'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='ProjectTag',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=25, verbose_name='Name')),
+                ('color', models.CharField(default='000000', max_length=6, verbose_name='Color (hex)')),
+            ],
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='tags',
+            field=models.ManyToManyField(blank=True, related_name='projects', to='portfolio.projecttag', verbose_name='Tags'),
+        ),
+    ]

portfolio/migrations/0006_alter_project_short_description.py

@@ -0,0 +1,18 @@
+# Generated by Django 6.1.1 on 2026-10-01 19:01
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('portfolio', '0005_projecttag_project_tags'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='project',
+            name='short_description',
+            field=models.TextField(max_length=512, verbose_name='Short description'),
+        ),
+    ]

portfolio/migrations/0007_projecttag_dark_text.py

@@ -0,0 +1,18 @@
+# Generated by Django 6.1.1 on 2026-10-01 19:38
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('portfolio', '0006_alter_project_short_description'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='projecttag',
+            name='dark_text',
+            field=models.BooleanField(default=False, verbose_name='Dark text'),
+        ),
+    ]

portfolio/models.py

@@ -9,7 +9,14 @@ class Company(models.Model):
     location = models.CharField(
         verbose_name=_("Location"), max_length=255, blank=False, null=False
     )
-    logo = models.FileField(upload_to="uploads/portfolio/companies_logo/")
+    color = models.CharField(
+        verbose_name=_("Color (hex)"),
+        max_length=6,
+        null=False,
+        blank=False,
+        default="000000",
+    )
+    logo = models.FileField(upload_to="portfolio/companies_logo/")
 
     def __str__(self):
         return self.name
@@ -38,9 +45,49 @@ class JobExperience(models.Model):
 
 class JobTask(models.Model):
     job = models.ForeignKey(
-        to=JobExperience, null=False, blank=False, on_delete=models.CASCADE, related_name="job_tasks"
+        to=JobExperience,
+        null=False,
+        blank=False,
+        on_delete=models.CASCADE,
+        related_name="job_tasks",
     )
     description = models.TextField(verbose_name=_("Description"), max_length=4192)
 
     def __str__(self):
         return self.job.__str__()
+
+
+class ProjectTag(models.Model):
+    name = models.CharField(
+        verbose_name=_("Name"), max_length=25, blank=False, null=False
+    )
+    color = models.CharField(
+        verbose_name=_("Color (hex)"),
+        max_length=6,
+        null=False,
+        blank=False,
+        default="000000",
+    )
+    dark_text = models.BooleanField(verbose_name=_("Dark text"), default=False)
+
+    def __str__(self):
+        return self.name
+
+
+class Project(models.Model):
+    name = models.CharField(
+        verbose_name=_("Name"), max_length=256, null=False, blank=False
+    )
+    short_description = models.TextField(
+        verbose_name=_("Short description"), max_length=512, blank=False, null=False
+    )
+    url = models.URLField(verbose_name=_("URL"), blank=True, null=False)
+    tags = models.ManyToManyField(
+        ProjectTag,
+        verbose_name=_("Tags"),
+        blank=True,
+        related_name="projects",
+    )
+
+    def __str__(self):
+        return self.name

portfolio/templates/contact_thanks.html

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+{% load i18n static %}
+{% block content %}
+    <div class="container mt-4 fs-2">
+        <div>{% trans "Thanks for contacting me!" %}</div>
+        <a href="{% url 'index' %}" class="btn btn-primary mt-4">{% trans "Go back" %}</a>
+    </div>
+{% endblock %}

portfolio/templates/index.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% load i18n static %}
 {% block content %}
-    <div class="container">
+    <div class="container px-4 px-md-0">
         <div class="row mb-4">
             <div class="col">
                 <div class="text-center mt-4">
@@ -16,29 +16,29 @@
                 </div>
                 <div class="mb-4 text-center">
                     <div class="mb-2">
-                        <span class="badge bg-blue-lt fs-4 me-2">Python</span>
-                        <span class="badge bg-blue-lt fs-4 me-2">Django</span>
-                        <span class="badge bg-blue-lt fs-4 me-2">JavaScript/TypeScript</span>
-                        <span class="badge bg-blue-lt fs-4 me-2">HTML/CSS</span>
+                        <span class="badge bg-blue-lt fs-4 m-1">Python</span>
+                        <span class="badge bg-blue-lt fs-4 m-1">Django</span>
+                        <span class="badge bg-blue-lt fs-4 m-1">JavaScript/TypeScript</span>
+                        <span class="badge bg-blue-lt fs-4 m-1">HTML/CSS</span>
                     </div>
                     <div>
-                        <span class="badge bg-blue-lt fs-4 me-2">Docker</span>
-                        <span class="badge bg-blue-lt fs-4 me-2">Git</span>
-                        <span class="badge bg-blue-lt fs-4 me-2">Linux</span>
-                        <span class="badge bg-blue-lt fs-4">NixOS</span>
+                        <span class="badge bg-blue-lt fs-4 m-1">Docker</span>
+                        <span class="badge bg-blue-lt fs-4 m-1">Git</span>
+                        <span class="badge bg-blue-lt fs-4 m-1">Linux</span>
+                        <span class="badge bg-blue-lt fs-4 m-1">NixOS</span>
                     </div>
                 </div>
                 <div class="text-center">
-                    <a href="" class="btn btn-primary btn-lg me-2">My projects</a>
-                    <a href="" class="btn btn-outline-secondary btn-lg">Contact me</a>
+                    <a href="{% url 'projects' %}" class="btn btn-primary btn-lg me-2">My projects</a>
+                    <a href="#contact-me" class="btn btn-outline-secondary btn-lg">Contact me</a>
                 </div>
             </div>
         </div>
-        <div class="row">
-            <div class="col">
+        <div class="row row-deck row-cards">
+            <div class="col-md-4">
                 <div class="card h-full">
                     <div class="card-body d-flex align-items-center flex-column">
-                        <div class="w-24 h-30">
+                        <div class="tw-24 th-30">
                             <img src="{% static 'images/nix-logo.svg' %}" alt="NixOS logo">
                         </div>
                         <b class="fs-2">{% trans "NixOS enthusiast" %}</b>
@@ -50,10 +50,10 @@
                     </div>
                 </div>
             </div>
-            <div class="col">
+            <div class="col-md-4">
                 <div class="card h-full">
                     <div class="card-body d-flex align-items-center flex-column">
-                        <div class="w-24 h-30">
+                        <div class="tw-24 th-30">
                             <img src="{% static 'images/foss-logo.webp' %}" alt="FOSS logo">
                         </div>
                         <b class="fs-2">{% trans "FOSS lover" %}</b>
@@ -66,11 +66,11 @@
                     </div>
                 </div>
             </div>
-            <div class="col">
-                <div class="card">
+            <div class="col-md-4">
+                <div class="card h-full">
                     <div class="card-body d-flex align-items-center flex-column">
-                        <div class="w-24 h-30 text-5xl pt-4">
-                            <i class="fa-solid fa-server fa-2xl"></i>
+                        <div class="tw-24 th-30 ttext-5xl pt-4">
+                            <i class="fa-solid fa-server"></i>
                         </div>
                         <b class="fs-2">{% trans "Homelab maintainer" %}</b>
                         <p class="text-secondary text-center mt-2">
@@ -90,14 +90,14 @@
                 {% for je in job_experiences %}
                     <li class="timeline-event">
                         <div class="timeline-event-icon bg-primary">
-                            <img src="{{ je.company.logo.url }}" alt="">
+                            <img src="{% url 'company-logo' pk=je.company.pk %}" alt="">
                         </div>
                         <div class="timeline-event-card card">
                             <div class="card-body">
                                 <p class="text-primary mb-0">{{ je.start }} - {% if je.end %}{{ je.end }}{% else %}{% trans "today" %}{% endif %}</p>
                                 <h2 class="fs-2">{{ je.position }}</h2>
-                                <div class="">
-                                    <div class="text-danger">{{ je.company.name }}</div>
+                                <div>
+                                    <div style="color: #{{ je.company.color }};">{{ je.company.name }}</div>
                                     <div class="text-secondary">{{ je.company.location }}</div>
                                     <div class="mt-2 text-white">
                                         {% for jt in je.job_tasks.all %}
@@ -111,5 +111,35 @@
                 {% endfor %}
             </ul>
         </div>
+        <div class="hr"></div>
+        <div class="row d-flex justify-content-center mb-md-4">
+            <div class="card col-md-6" id="contact-me">
+                <div class="card-body">
+                    <h3 class="card-title fs-2">
+                        <b>
+                            <i class="fa-solid fa-envelope"></i>
+                            {% trans "Contact me" %}
+                        </b>
+                    </h3>
+                    <form action="{% url 'contact' %}" method="post" id="contact-form">
+                        {% csrf_token %}
+                        {% for field in contact_form %}
+                            <div class="form-floating mb-2">
+                                {{ field }}
+                                <label for="{{ field.id }}">{{ field.label }}</label>
+                            </div>
+                        {% endfor %}
+                        <div class="d-flex justify-content-end">
+                            <button class="btn btn-primary" type="submit">{% trans "Send" %}</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
     </div>
+    <style>
+        textarea {
+            height: 10rem !important;
+        }
+    </style>
 {% endblock %}

portfolio/templates/project_list.html

@@ -0,0 +1,25 @@
+{% extends "base.html" %}
+{% load i18n %}
+{% block content %}
+    <div class="container mt-2 mt-md-4">
+        <form class="mb-2 mb-md-4">
+            <div class="form-floating">
+                <input type="text"
+                       class="form-control"
+                       id="floating-name"
+                       placeholder=""
+                       name="query"
+                       autocomplete="off"
+                       hx-target="#projects"
+                       hx-get="{% url 'projects-query' %}"
+                       hx-trigger="load, input, delay:200ms" />
+                <label for="floating-name">{% trans "Search" %}</label>
+            </div>
+        </form>
+        <div id="projects">
+            <div class="d-flex justify-content-center w-full">
+                <div id="spinner" class="fs-1 spinner-border"></div>
+            </div>
+        </div>
+    </div>
+{% endblock %}

portfolio/templates/project_list_query.html

@@ -0,0 +1,39 @@
+{% load i18n %}
+<div class="row row-deck row-cards">
+    {% if object_list.count == 0 %}
+        <p>{% trans "No projects found" %}</p>
+    {% endif %}
+    {% for project in object_list %}
+        <div class="col-md-4">
+            {% if project.url %}
+                <a class="card card-link card-link-pop"
+                   href="{{ project.url }}"
+                   target="_blank">
+                    <div class="card-body">
+                        <h4>{{ project.name }}</h4>
+                        <p>{{ project.short_description }}</p>
+                        <div>
+                            {% for t in project.tags.all %}
+                                <div class="badge {% if t.dark_text %}text-black{% else %}text-white{% endif %} fs-5"
+                                     style="background-color: #{{ t.color }}">{{ t }}</div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                </a>
+            {% else %}
+                <div class="card">
+                    <div class="card-body">
+                        <h4>{{ project.name }}</h4>
+                        <p>{{ project.short_description }}</p>
+                        <div>
+                            {% for t in project.tags.all %}
+                                <div class="badge text-white fs-5"
+                                     style="background-color: #{{ t.color }}">{{ t }}</div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                </div>
+            {% endif %}
+        </div>
+    {% endfor %}
+</div>

portfolio/urls.py

@@ -0,0 +1,11 @@
+from django.urls import path
+
+from portfolio import views
+
+urlpatterns = [
+    path("", views.PortfolioView.as_view(), name="portfolio"),
+    path("projects/", views.ProjectList.as_view(), name="projects"),
+    path("projects/query/", views.ProjectListQuery.as_view(), name="projects-query"),
+    path("contact/", views.ContactSend.as_view(), name="contact"),
+    path("company/<int:pk>/logo/", views.CompanyLogo.as_view(), name="company-logo"),
+]

portfolio/views.py

@@ -1,10 +1,68 @@
-from django.views.generic import TemplateView
+from django.conf import settings
+from django.db.models import Q
+from django.http.response import FileResponse, HttpResponseBadRequest
+from django.utils.translation import gettext as _
+from django.views.generic import DetailView, ListView, TemplateView
+from post_office import mail
 
-from portfolio import models
+from portfolio import forms, models
 
 
-class IndexView(TemplateView):
+class PortfolioView(TemplateView):
     template_name = "index.html"
 
     def get_context_data(self, **kwargs):
-        return {"job_experiences": models.JobExperience.objects.all().order_by("-start")}
+        contact_form = forms.ContactForm()
+        return {
+            "job_experiences": models.JobExperience.objects.all().order_by("-start"),
+            "contact_form": contact_form,
+        }
+
+
+class ProjectList(TemplateView):
+    template_name = "project_list.html"
+
+
+class ContactSend(TemplateView):
+    template_name = "contact_thanks.html"
+
+    def post(self, request, *args, **kwargs):
+        form = forms.ContactForm(request.POST)
+
+        if not form.is_valid():
+            return HttpResponseBadRequest(_("Invalid request"))
+
+        mail.send(
+            subject=form.cleaned_data["subject"],
+            message=form.cleaned_data["message"],
+            sender=settings.EMAIL_HOST_USER,
+            cc=form.cleaned_data["email"],
+            recipients=[settings.EMAIL_CONTACT],
+        )
+
+        return super().get(request, *args, **kwargs)
+
+
+class CompanyLogo(DetailView):
+    model = models.Company
+
+    def get(self, request, *args, **kwargs):
+        company = self.get_object()
+        return FileResponse(company.logo)
+
+
+class ProjectListQuery(ListView):
+    template_name = "project_list_query.html"
+    model = models.Project
+
+    def get_queryset(self):
+        query = self.request.GET.get("query")
+        if not query:
+            return super().get_queryset()
+
+        return (
+            super()
+            .get_queryset()
+            .filter(Q(name__contains=query) | Q(tags__name__contains=query))
+            .distinct()
+        )

pyproject.toml

@@ -19,4 +19,6 @@ line-ending = "auto"
 
 [tool.ruff.lint]
 extend-select = ["I"]
-
+ignore = [
+    "RUF012"
+]

requirements.txt

@@ -1,2 +1,5 @@
 django
 djlint
+django-post_office
+gunicorn
+whitenoise

static/css/input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

static/css/style.css

@@ -1,7 +1,564 @@
-:root {
-    margin: 0px;
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
-html {
-    margin: 0px!important;
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+/*
+! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-feature-settings: normal;
+  /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none;
+}
+
+.tw-24 {
+  width: 6rem;
+}
+
+.ttext-5xl {
+  font-size: 3rem;
+  line-height: 1;
 }

tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  prefix: 't',
+  content: [
+    "./**/templates/**/*.html",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+