feat(portfolio): improve landing page

2026-09-20 09:41:14 +02:00 · 2026-08-28 20:42:48 +02:00
parent 452ae78564
commit bd6a22e814
24 changed files with 430 additions and 12 deletions
@@ -12,3 +12,8 @@ devenv.local.yaml
 .pre-commit-config.yaml

 *.sqlite3
+
+*.pyc
+__pycache__/
+local_settings.py
+uploads/
@@ -1,4 +1,5 @@
 {
+  pkgs,
  ...
 }:

@@ -14,7 +15,11 @@
  };

  git-hooks.hooks = {
-    ruff.enable = true;
+    ruff = {
+      enable = true;
+      package = pkgs.ruff;
+      excludes = [ "migrations/" ];
+    };
    djlint = {
      enable = true;
      name = "djlint";
@@ -37,6 +37,7 @@ INSTALLED_APPS = [
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
+    'portfolio'
 ]

 MIDDLEWARE = [
@@ -119,7 +120,8 @@ USE_TZ = True

 STATIC_URL = 'static/'
 STATICFILES_DIRS = [
-    BASE_DIR / "static/"
+    BASE_DIR / "static/",
+    BASE_DIR / "uploads/",
 ]

 # Email
@@ -5,10 +5,11 @@
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <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' %}">
-        <link rel="stylesheet" href="{% static 'css/style.css' %}">
-        <script href="{% static 'tabler/tabler.min.css' %}"></script>
+        <script src="{% static 'tabler/tabler.min.js' %}"></script>
+        <script src="{% static 'tailwindcss/tailwindcss.min.js' %}"></script>
    </head>
    <body class="d-flex flex-column">
        <header class="navbar navbar-expand-md d-print-none">
@@ -34,7 +35,7 @@
                </ul>
            </div>
        </header>
-        <main>
+        <main class="mb-2">
            {% block content %}
            {% endblock content %}
        </main>
@@ -15,6 +15,8 @@ Including another URLconf
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """

+from django.conf import settings
+from django.conf.urls.static import static
 from django.contrib import admin
 from django.urls import path

@@ -24,3 +26,6 @@ urlpatterns = [
    path("admin/", admin.site.urls),
    path("", IndexView.as_view(), name="index"),
 ]
+
+if settings.DEBUG:
+    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
@@ -1,2 +1,16 @@
+from django.contrib import admin

-# Register your models here.
+from portfolio import models
+
+
+@admin.register(models.JobExperience)
+class JobExperienceAdmin(admin.ModelAdmin):
+    pass
+
+@admin.register(models.JobTask)
+class JobTaskAdmin(admin.ModelAdmin):
+    pass
+
+@admin.register(models.Company)
+class CompanyAdmin(admin.ModelAdmin):
+    pass
@@ -0,0 +1,41 @@
+# Generated by Django 6.1 on 2026-08-27 14:16
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Company',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=255, verbose_name='Company')),
+                ('location', models.CharField(max_length=255, verbose_name='Location')),
+                ('logo', models.FileField(upload_to='uploads/portfolio/companies_logo/')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='JobExperience',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('start', models.DateField(verbose_name='Start date')),
+                ('end', models.DateField(blank=True, null=True, verbose_name='End date')),
+                ('company', models.ForeignKey(on_delete=django.db.models.deletion.PROTECT, to='portfolio.company')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='JobTask',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('description', models.TextField(max_length=4192, verbose_name='Description')),
+                ('job', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='portfolio.jobexperience')),
+            ],
+        ),
+    ]
@@ -0,0 +1,23 @@
+# Generated by Django 6.1 on 2026-08-27 19:50
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('portfolio', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='company',
+            options={'verbose_name': 'Company', 'verbose_name_plural': 'Companies'},
+        ),
+        migrations.AddField(
+            model_name='jobexperience',
+            name='position',
+            field=models.CharField(default='CHANGEME', verbose_name='Position'),
+            preserve_default=False,
+        ),
+    ]
@@ -1 +1,46 @@
+from django.db import models
+from django.utils.translation import gettext as _

+
+class Company(models.Model):
+    name = models.CharField(
+        verbose_name=_("Company"), max_length=255, blank=False, null=False
+    )
+    location = models.CharField(
+        verbose_name=_("Location"), max_length=255, blank=False, null=False
+    )
+    logo = models.FileField(upload_to="uploads/portfolio/companies_logo/")
+
+    def __str__(self):
+        return self.name
+
+    class Meta:
+        verbose_name = _("Company")
+        verbose_name_plural = _("Companies")
+
+
+class JobExperience(models.Model):
+    position = models.CharField(verbose_name=_("Position"), null=False, blank=False)
+    start = models.DateField(verbose_name=_("Start date"), null=False, blank=False)
+    end = models.DateField(verbose_name=_("End date"), null=True, blank=True)
+    company = models.ForeignKey(
+        to=Company, null=False, blank=False, on_delete=models.PROTECT
+    )
+
+    @property
+    def currently_employed(self) -> bool:
+        return self.end is None
+
+    def __str__(self):
+        end = self.end if self.end else "today"
+        return f"{self.company} from {self.start} to {end}"
+
+
+class JobTask(models.Model):
+    job = models.ForeignKey(
+        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__()
@@ -1,8 +1,8 @@
 {% extends "base.html" %}
-{% load i18n %}
+{% load i18n static %}
 {% block content %}
    <div class="container">
-        <div class="row h-">
+        <div class="row mb-4">
            <div class="col">
                <div class="text-center mt-4">
                    <h1 class="display-2 fw-bold">Patrick Canal</h1>
@@ -34,5 +34,82 @@
                </div>
            </div>
        </div>
+        <div class="row">
+            <div class="col">
+                <div class="card h-full">
+                    <div class="card-body d-flex align-items-center flex-column">
+                        <div class="w-24 h-30">
+                            <img src="{% static 'images/nix-logo.svg' %}" alt="NixOS logo">
+                        </div>
+                        <b class="fs-2">{% trans "NixOS enthusiast" %}</b>
+                        <p class="text-secondary text-center mt-2">
+                            {% blocktrans %}
+                        Linux user for years my OS of choice is NixOS, embrace reproducibility!
+                        {% endblocktrans %}
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="col">
+                <div class="card h-full">
+                    <div class="card-body d-flex align-items-center flex-column">
+                        <div class="w-24 h-30">
+                            <img src="{% static 'images/foss-logo.webp' %}" alt="FOSS logo">
+                        </div>
+                        <b class="fs-2">{% trans "FOSS lover" %}</b>
+                        <p class="text-secondary text-center mt-2">
+                            {% blocktrans %}
+                            Every line of code that I write for myself is open source<br />
+                            Public money should be invested in public code
+                            {% endblocktrans %}
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="col">
+                <div class="card">
+                    <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>
+                        <b class="fs-2">{% trans "Homelab maintainer" %}</b>
+                        <p class="text-secondary text-center mt-2">
+                            {% blocktrans %}
+                            One of the projects that I am most proud of is my homelabbing activity, 
+                            check it out on my <a href="https://github.com/Superredstone/nixos/tree/main/machines/bomba" target="_blank">Github</a>
+                            {% endblocktrans %}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="hr"></div>
+        <div>
+            <h2 class="fs-1 pb-2">{% trans "Job experiences" %}</h2>
+            <ul class="timeline">
+                {% for je in job_experiences %}
+                    <li class="timeline-event">
+                        <div class="timeline-event-icon bg-primary">
+                            <img src="{{ je.company.logo.url }}" 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 class="text-secondary">{{ je.company.location }}</div>
+                                    <div class="mt-2 text-white">
+                                        {% for jt in je.job_tasks.all %}
+                                            <div>{{ jt.description }}</div>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                {% endfor %}
+            </ul>
+        </div>
    </div>
 {% endblock %}
@@ -1,7 +1,10 @@
 from django.views.generic import TemplateView

+from portfolio import models
+

-# Create your views here.
 class IndexView(TemplateView):
    template_name = "index.html"

+    def get_context_data(self, **kwargs):
+        return {"job_experiences": models.JobExperience.objects.all().order_by("-start")}
@@ -7,7 +7,7 @@ max_line_length = 160

 [tool.ruff]
 exclude = [
-    "*migrations*",
+    "*migrations/",
    "settings.py",
 ]

@@ -1 +1,2 @@
 django
+djlint
@@ -1,3 +1,7 @@
 :root {
    margin: 0px;
 }
+
+html {
+    margin: 0px!important;
+}
@@ -0,0 +1,187 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="535"
+   height="535"
+   viewBox="0 0 501.56251 501.56249"
+   id="svg2"
+   version="1.1"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   sodipodi:docname="nix-snowflake-colours.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs4">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient5562">
+      <stop
+         style="stop-color:#699ad7;stop-opacity:1"
+         offset="0"
+         id="stop5564" />
+      <stop
+         id="stop5566"
+         offset="0.24345198"
+         style="stop-color:#7eb1dd;stop-opacity:1" />
+      <stop
+         style="stop-color:#7ebae4;stop-opacity:1"
+         offset="1"
+         id="stop5568" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient5053">
+      <stop
+         style="stop-color:#415e9a;stop-opacity:1"
+         offset="0"
+         id="stop5055" />
+      <stop
+         id="stop5057"
+         offset="0.23168644"
+         style="stop-color:#4a6baf;stop-opacity:1" />
+      <stop
+         style="stop-color:#5277c3;stop-opacity:1"
+         offset="1"
+         id="stop5059" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient5562"
+       id="linearGradient4328"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(70.650339,-1055.1511)"
+       x1="200.59668"
+       y1="351.41116"
+       x2="290.08701"
+       y2="506.18814" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient5053"
+       id="linearGradient4330"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(864.69589,-1491.3405)"
+       x1="-584.19934"
+       y1="782.33563"
+       x2="-496.29703"
+       y2="937.71399" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.70904368"
+     inkscape:cx="99.429699"
+     inkscape:cy="195.33352"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer3"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1050"
+     inkscape:window-x="1920"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     inkscape:snap-global="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="gradient-logo"
+     style="display:inline;opacity:1"
+     transform="translate(-156.41121,933.30685)">
+    <g
+       id="g2"
+       transform="matrix(0.99994059,0,0,0.99994059,-0.06321798,33.188377)"
+       style="stroke-width:1.00006">
+      <path
+         sodipodi:nodetypes="cccccccccc"
+         inkscape:connector-curvature="0"
+         id="path3336-6"
+         d="m 309.54892,-710.38827 122.19683,211.67512 -56.15706,0.5268 -32.6236,-56.8692 -32.85645,56.5653 -27.90237,-0.011 -14.29086,-24.6896 46.81047,-80.4901 -33.22946,-57.8257 z"
+         style="opacity:1;fill:url(#linearGradient4328);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.00018;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <use
+         height="100%"
+         width="100%"
+         transform="rotate(60,407.11155,-715.78724)"
+         id="use3439-6"
+         inkscape:transform-center-y="151.59082"
+         inkscape:transform-center-x="124.43045"
+         xlink:href="#path3336-6"
+         y="0"
+         x="0"
+         style="stroke-width:1.00006" />
+      <use
+         height="100%"
+         width="100%"
+         transform="rotate(-60,407.31177,-715.70016)"
+         id="use3445-0"
+         inkscape:transform-center-y="75.573958"
+         inkscape:transform-center-x="-168.20651"
+         xlink:href="#path3336-6"
+         y="0"
+         x="0"
+         style="stroke-width:1.00006" />
+      <use
+         height="100%"
+         width="100%"
+         transform="rotate(180,407.41868,-715.7565)"
+         id="use3449-5"
+         inkscape:transform-center-y="-139.94592"
+         inkscape:transform-center-x="59.669705"
+         xlink:href="#path3336-6"
+         y="0"
+         x="0"
+         style="stroke-width:1.00006" />
+      <path
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:url(#linearGradient4330);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.00018;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         d="m 309.54892,-710.38827 122.19683,211.67512 -56.15706,0.5268 -32.6236,-56.8692 -32.85645,56.5653 -27.90237,-0.011 -14.29086,-24.6896 46.81047,-80.4901 -33.22946,-57.8256 z"
+         id="path4260-0"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cccccccccc" />
+      <use
+         height="100%"
+         width="100%"
+         transform="rotate(120,407.33916,-716.08356)"
+         id="use4354-5"
+         xlink:href="#path4260-0"
+         y="0"
+         x="0"
+         style="display:inline;stroke-width:1.00006" />
+      <use
+         height="100%"
+         width="100%"
+         transform="rotate(-120,407.28823,-715.86995)"
+         id="use4362-2"
+         xlink:href="#path4260-0"
+         y="0"
+         x="0"
+         style="display:inline;stroke-width:1.00006" />
+    </g>
+  </g>
+</svg>