s8a.github.io/index.html at master · S8A/s8a.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
---
layout: default
title: Home
main_class_extra: divide-y divide-gray-950/5 dark:divide-white/10
---

<section class="flex flex-col sm:flex-row justify-center gap-8 pb-6 print:break-inside-avoid">
  <div class="shrink-0 flex flex-col gap-2 w-full sm:w-auto text-center">
    {%- include img-local.html class="size-32 rounded-2xl" src="/assets/img/s8a-20231207.webp" widths="192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960, 1024, 1088, 1152, 1216, 1280, 1344, 1408, 1472, 1536, 1600, 1664, 1728" sizes="16rem" default_width="256" -%}
  </div>
  <div class="w-full sm:w-auto prose dark:prose-invert prose-h1:mb-6 prose-lead:text-balance prose-lead:text-gray-800 dark:prose-lead:text-gray-200 max-w-none">
    <h1>Samuel Ochoa</h1>
    <p class="lead">
      Information systems engineer and software developer from Venezuela. Primarily working on backend web development using Python frameworks like Django and FastAPI.
    </p>
    <div class="flex items-center gap-2">
      {%- for contact in site.data.contact -%}
      <a
        href="{{ contact.url }}"
        class="no-underline flex items-center justify-center size-12 rounded-lg text-blue-600 hover:bg-gray-100 hover:text-black dark:text-blue-400 dark:hover:bg-gray-800 dark:hover:text-white transition-colors"
        title="{{ contact.name }}"
      >
        {% include lucide-icon.html icon=contact.icon class="size-6" %}
        <span class="sr-only">{{ contact.name }}</span>
      </a>
      {%- endfor -%}
    </div>
  </div>
</section>

<section class="py-6 print:break-inside-avoid">
  <h2 class="text-2xl font-bold mb-6">Work experience</h2>
  <div class="flex flex-col gap-4 mb-6">
    {%- assign work_experience = site.data.work_experience | where: "highlight", true | slice: 0, 3 -%}
    {%- for job in work_experience -%}
      <div class="px-4 py-3 border-l-4 border-blue-600 dark:border-blue-500">
        <h3 class="text-xl font-medium">
          {{ job.title }} &ndash; {% if job.company_url %}<a href="{{- job.company_url -}}" class="underline text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 transition-colors">{{- job.company -}}</a>{% else %}{{- job.company -}}{% endif %}
        </h3>
        <p class="text-sm text-gray-600 dark:text-gray-400">
          {%- assign period_start = job.period_start | date: "%B %Y" -%}
          {%- capture period_end -%}
            {%- if job.period_end -%}
              {{ job.period_end | date: "%B %Y" }}
            {%- else -%}
              present
            {%- endif -%}
          {%- endcapture -%}
          {{- period_start | append: "-" | append: period_end | split: "-" | uniq | join: " &ndash; " -}}
        </p>
        {%- if job.key_points.size > 1 -%}
          <ul class="ml-4 mb-0 list-disc list-outside">
            {%- for item in job.key_points -%}
              <li>{{- item -}}</li>
            {%- endfor -%}
          </ul>
        {%- else -%}
          <p>{{- job.key_points[0] -}}</p>
        {%- endif -%}
      </div>
    {%- endfor -%}
  </div>
  <p class="text-sm text-gray-600 dark:text-gray-400">
    <a href="/about/" class="inline-block px-4 py-2 rounded-md bg-blue-600 hover:bg-blue-500 text-white dark:bg-blue-500 dark:hover:bg-blue-400 transition-colors">
      See full work experience
    </a>
  </p>
</section>

<section class="pt-6 print:break-inside-avoid">
  <h2 class="text-2xl font-bold mb-6">Projects</h2>
  {%- assign project_collections = site.data.project_collections | map: "id" -%}
  {%- assign highlighted_projects = site.documents | where_exp: "item", "project_collections contains item.collection and item.highlight" | sort_by: "last_update" | reverse -%}
  <div class="flex flex-col gap-4 mb-6">
    {%- for project in highlighted_projects -%}
    <div class="px-4 py-3 border-l-4 border-blue-600 dark:border-blue-500 grid grid-cols-1 sm:grid-cols-3 gap-4">
      {%- if project.display_image -%}
        <div class="col-span-1 flex items-center">
          {%- include img-local.html class="w-full" src=project.display_image widths="192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960, 1024, 1080" sizes="100vw, 40rem:14rem, 48rem:16rem, 64rem:22rem" default_width="640" -%}
        </div>
      {%- endif -%}
      <div class="col-span-1 {% if project.display_image %}sm:col-span-2{% else %}sm:col-span-3{% endif -%}">
        <div class="mb-2">
          <h3 class="text-xl font-medium">
            {{ project.name }}
          </h3>
          <p class="text-sm text-gray-600 dark:text-gray-400">
            {%- if collection.id == "mathematics" -%}
              {{ project.date | date_to_string }}
            {%- else -%}
              Last update: {{ project.last_update | date: "%b %Y" }}
            {%- endif -%}
          </p>
          <p>{{ project.summary }}</p>
        </div>
        <div>
          <a href="{{ project.url }}" class="inline-block px-3 py-1 rounded-md border text-blue-600 border-blue-600 hover:text-white hover:bg-blue-600 dark:text-blue-500 dark:border-blue-500 dark:hover:text-white dark:hover:bg-blue-500 transition-colors">
            View details
          </a>
        </div>
      </div>
    </div>
    {%- endfor -%}
  </div>
  <p class="text-sm text-gray-600 dark:text-gray-400">
    <a href="/projects/" class="inline-block px-4 py-2 rounded-md bg-blue-600 hover:bg-blue-500 text-white dark:bg-blue-500 dark:hover:bg-blue-400 transition-colors">
      See all projects
    </a>
  </p>
</section>