Skip to content

About

In the case of Epic Fantasy Forge, the about page gives some information about the developer of Epic Fantasy Forge. The information provided includes:

  • Biography
  • Projects
  • Hobbies
  • Location

Tests

E2E Test

Before implementing the about page we will create an E2E test in Qase. Add a new test case to the "Web Exclusive" suite named "About":

About Test 1

About Test 2

Integration Tests

There is nothing for us to test at the integration level as the home page has no logic or any kind of code.

Unit Tests

There is nothing for us to test at the unit level since the home page has no logic or any kind of code.

Production Code

HTML

The full source code of the Epic Fantasy Forge about page can be found in the file about.html.heex. The Epic Fantasy Forge about page consists of 4 sections that are explained in more detail below.

Biography

Start by creating a new directory named about inside the existing directory priv/static/images. Now pick an image of yourself to use in the Biography section. Ideally the image aspect ratio should be portrait. Once you have found a suitable image, copy it into the about directory you just created.

Now add the below HTML to the about.html.heex file located at lib/epic_fantasy_forge_web/controllers/page_html:

about.html.heex
<!-- Biography -->
<div class="overflow-hidden bg-gray-900 py-6">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="
        mx-auto
        grid
        max-w-2xl
        grid-cols-1
        gap-x-8
        gap-y-16
        sm:gap-y-20
        lg:mx-0
        lg:max-w-none
        lg:grid-cols-5">
      <div class="lg:pt-4 lg:pr-8 lg:col-span-3">
        <p class="
            mt-2
            mb-8
            text-4xl
            font-semibold
            tracking-tight
            text-pretty
            text-white
            sm:text-5xl">
          Biography
        </p>
        <p class="mt-6 text-lg/8 text-gray-300">
          Hello, my name is Henrik Brüsecke. I am the creator of Epic Fantasy
          Forge.
        </p>
        <p class="mt-6 text-lg/8 text-gray-300">
          I am originally from Germany but spent most of my childhood in
          Ireland. Now I am living in Finland. I work as a software developer
          at a Nordic bank.
        </p>
        <p class="mt-6 text-lg/8 text-gray-300">
          I have 10+ years of professional software development experience. The
          majority of my career has been focused on C++. Recently, I have also
          gained some experience with web and mobile development.
        </p>
        <img
          src={~p"/images/about/henrik.jpg"}
          alt="Henrik"
          class="mt-12 rounded-2xl"
        />
      </div>
      <div class="px-6 lg:px-0 lg:col-span-2">
        <div class="relative mx-auto max-w-2xl lg:mt-16">
          <ul class="space-y-12 lg:pl-6">
            <li class="relative">
              <div>
                <span class="text-sm text-indigo-400 font-semibold">
                  1993-1998
                </span>
                <h3 class="text-lg font-bold text-white mt-1">
                  Home + Kindergarten
                </h3>
                <p class="text-gray-300 mt-1">Baby + Toddler</p>
                <p class="text-gray-300 mt-1">Essen, Germany 🇩🇪</p>
              </div>
            </li>
            <li class="relative">
              <div>
                <span class="text-sm text-indigo-400 font-semibold">
                  1998-2006
                </span>
                <h3 class="text-lg font-bold text-white mt-1">Scoil Bhríde</h3>
                <p class="text-gray-300 mt-1">Primary School Student</p>
                <p class="text-gray-300 mt-1">Lettermacaward, Ireland 🇮🇪</p>
              </div>
            </li>
            <li class="relative">
              <div>
                <span class="text-sm text-indigo-400 font-semibold">
                  2006-2011
                </span>
                <h3 class="text-lg font-bold text-white mt-1">
                  St. Columba's Comprehensive School
                </h3>
                <p class="text-gray-300 mt-1">Secondary School Student</p>
                <p class="text-gray-300 mt-1">Glenties, Ireland 🇮🇪</p>
              </div>
            </li>
            <li class="relative">
              <div>
                <span class="text-sm text-indigo-400 font-semibold">
                  2011-2015
                </span>
                <h3 class="text-lg font-bold text-white mt-1">
                  Trinity College Dublin
                </h3>
                <p class="text-gray-300 mt-1">Undergraduate Student</p>
                <p class="text-gray-300 mt-1">Dublin, Ireland 🇮🇪</p>
              </div>
            </li>
            <li class="relative">
              <div>
                <span class="text-sm text-indigo-400 font-semibold">
                  Summer of 2012, 2013 and 2014
                </span>
                <h3 class="text-lg font-bold text-white mt-1">Intel</h3>
                <p class="text-gray-300 mt-1">Intern Software Developer</p>
                <p class="text-gray-300 mt-1">Leixlip, Ireland 🇮🇪</p>
              </div>
            </li>
            <li class="relative">
              <div>
                <span class="text-sm text-indigo-400 font-semibold">
                  2015-2019
                </span>
                <h3 class="text-lg font-bold text-white mt-1">Fidessa</h3>
                <p class="text-gray-300 mt-1">Software Developer</p>
                <p class="text-gray-300 mt-1">Belfast, Northern Ireland 🏴󠁧󠁢󠁮󠁩󠁲󠁿</p>
              </div>
            </li>
            <li class="relative">
              <div>
                <span class="text-sm text-indigo-400 font-semibold">
                  2019-2023
                </span>
                <h3 class="text-lg font-bold text-white mt-1">Blancco</h3>
                <p class="text-gray-300 mt-1">Software Developer</p>
                <p class="text-gray-300 mt-1">Joensuu, Finland 🇫🇮</p>
              </div>
            </li>
            <li class="relative">
              <div>
                <span class="text-sm text-indigo-400 font-semibold">
                  2023-Present
                </span>
                <h3 class="text-lg font-bold text-white mt-1">Nordea</h3>
                <p class="text-gray-300 mt-1">Software Developer</p>
                <p class="text-gray-300 mt-1">Joensuu, Finland 🇫🇮</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Naturally replace the text, image file name and timeline with your own data. Once you are done the biography section on your about page should now look something like this:

About Biography Section

Projects

The projects section can be used to share other projects you have worked on and to list your achievements. Choose two images to represent your project(s) and place them in the about directory located in the priv/static/images directory.

Then add the below code at the end of the about.html.heex file:

about.html.heex
<!-- Projects -->
<div class="overflow-hidden bg-gray-900 py-6">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="
        mx-auto
        grid
        max-w-2xl
        grid-cols-1
        gap-x-8
        gap-y-16
        sm:gap-y-20
        lg:mx-0
        lg:max-w-none
        lg:grid-cols-5">
      <div class="lg:pt-4 lg:pr-8 lg:col-span-3">
        <p class="
            mt-2
            mb-8
            text-4xl
            font-semibold
            tracking-tight
            text-pretty
            text-white
            sm:text-5xl">
          Projects
        </p>
        <p class="mt-6 text-lg/8 text-gray-300">
          Aside from Epic Fantasy Forge, I have worked on some other projects
          before. Some projects were abandoned, others were more successful.
        </p>
        <p class="mt-6 text-lg/8 text-gray-300">
          During my school years I developed an OpenCL and OpenMPI program
          to balance parallel workloads dynamically on heterogeneous systems
          consisting of several computing nodes in a network, where each node
          had several CPUs and GPUs each.
        </p>
        <p class="mt-6 text-lg/8 text-gray-300">
          With the help of Trinity College Dublin I was able to run and test
          this program on a computing cluster. Due to this project I was
          selected to represent Northern Ireland at the Intel ISEF global
          science fair in 2012. The competition was held in the United States.
        </p>
        <p class="mt-6 text-lg/8 text-gray-300">
          This project also helped me gain internships from Intel during the
          summers of 2012, 2013 and 2014.
        </p>
        <p class="
            mt-6
            mb-8
            text-2xl
            font-semibold
            tracking-tight
            text-pretty
            text-white
            sm:text-3xl">
          Instant Workstation
        </p>
        <p class="mt-6 text-lg/8 text-gray-300">
          I founded
          <a
            href="https://instantworkstation.com"
            target="_blank"
            rel="noopener noreferrer"
            class="
              inline-flex
              items-center
              gap-1
              font-semibold
              text-indigo-400
              hover:text-white
              transition-colors"
          >
            Instant Workstation
          </a>
          in 2024, although work on this project
          had already begun in 2023. Instant Workstation is a virtual machine on
          demand service.
        </p>
        <dl class="
              mt-10
              max-w-xl
              space-y-8
              text-base/7
              text-gray-300
              lg:max-w-none">
          <div class="relative pl-9">
            <dt class="inline font-semibold text-white">
              <svg
                class="absolute top-1 left-0 size-5 text-indigo-500"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fill-rule="evenodd"
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd"
                />
              </svg>
              Linux, BSD, Haiku & TempleOS
            </dt>
          </div>
          <div class="relative pl-9">
            <dt class="inline font-semibold text-white">
              <svg
                class="absolute top-1 left-0 size-5 text-indigo-500"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fill-rule="evenodd"
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd"
                />
              </svg>
              40K+ virtual machines started
            </dt>
          </div>
          <div class="relative pl-9">
            <dt class="inline font-semibold text-white">
              <svg
                class="absolute top-1 left-0 size-5 text-indigo-500"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fill-rule="evenodd"
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd"
                />
              </svg>
              2.1K+ registered users
            </dt>
          </div>
          <div class="relative pl-9">
            <dt class="inline font-semibold text-white">
              <svg
                class="absolute top-1 left-0 size-5 text-indigo-500"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fill-rule="evenodd"
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd"
                />
              </svg>
              60+ paying customers
            </dt>
          </div>
        </dl>
      </div>
      <div class="px-6 lg:px-0 lg:col-span-2">
        <div class="relative mx-auto max-w-2xl lg:mt-16">
          <ul class="space-y-12 lg:pl-6">
            <li class="relative">
              <div>
                <span class="text-sm text-indigo-400 font-semibold">2011</span>
                <h3 class="text-lg font-bold text-white mt-1">
                  BT Young Scientist & Technology Exhibition
                </h3>
                <p class="text-gray-300 mt-1">
                  1st Senior Individual Technology Category Award
                </p>
                <p class="text-gray-300 mt-1">
                  Google Technology Trailblazer Award
                </p>
                <p class="text-gray-300 mt-1">
                  BT Business of Science and Technology Program at UCD Award
                </p>
                <p class="text-gray-300 mt-1">Dublin, Ireland 🇮🇪</p>
              </div>
            </li>
            <li class="relative">
              <div>
                <span class="text-sm text-indigo-400 font-semibold">2011</span>
                <h3 class="text-lg font-bold text-white mt-1">
                  Sentinus Young Innovators
                </h3>
                <p class="text-gray-300 mt-1">Intel Award Overall Winner</p>
                <p class="text-gray-300 mt-1">
                  University of Ulster Award for ICT
                </p>
                <p class="text-gray-300 mt-1">Gold CREST Award</p>
                <p class="text-gray-300 mt-1">Belfast, Northern Ireland 🏴󠁧󠁢󠁮󠁩󠁲󠁿</p>
              </div>
            </li>
            <li class="relative">
              <div>
                <span class="text-sm text-indigo-400 font-semibold">2011</span>
                <h3 class="text-lg font-bold text-white mt-1">
                  Google Trailblazer Event
                </h3>
                <p class="text-gray-300 mt-1">
                  Attended as a Google Trailblazer Award Winner
                </p>
                <p class="text-gray-300 mt-1">Zürich, Switzerland 🇨🇭</p>
              </div>
            </li>
            <li class="relative">
              <div>
                <span class="text-sm text-indigo-400 font-semibold">2012</span>
                <h3 class="text-lg font-bold text-white mt-1">Intel ISEF</h3>
                <p class="text-gray-300 mt-1">
                  2nd Place Award from the IEEE Computer Society
                </p>
                <p class="text-gray-300 mt-1">
                  4th Place Award in the Computer Science Catagory
                </p>
                <p class="text-gray-300 mt-1">Pittsburgh, United States 🇺🇸</p>
              </div>
            </li>
            <li class="relative">
              <div>
                <span class="text-sm text-indigo-400 font-semibold">2012</span>
                <h3 class="text-lg font-bold text-white mt-1">
                  Sci-Preneurship
                </h3>
                <p class="text-gray-300 mt-1">
                  Attended as an Intel ISEF Alumni
                </p>
                <p class="text-gray-300 mt-1">Barcelona, Spain 🇪🇸</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <ul
      role="list"
      class="
            text-center
            mx-auto
            mt-20
            max-w-2xl
            grid
            lg:grid-cols-2
            gap-x-8
            gap-y-14
            lg:mx-0
            lg:max-w-none"
    >
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/iw_home_page.jpg"}
          alt="Instant Workstation Home Page"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Instant Workstation Home Page
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/iw_hardware.jpg"}
          alt="Instant Workstation Hardware"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Instant Workstation Hardware
        </h3>
      </li>
    </ul>
  </div>
</div>

Naturally replace the text, image file names and timeline of achievements with your own data. Once you are done the projects section on your about page should now look something like this:

About Projects Section

Hobbies

The hobbies section can be used to share your hobbies. Choose some images representative of your hobbies and place them in the about directory located in the priv/static/images directory.

Then add the below code at the end of the about.html.heex file:

about.html.heex
<!-- Hobbies -->
<div class="overflow-hidden bg-gray-900 py-6">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="
        mx-auto
        grid
        max-w-2xl
        grid-cols-1
        gap-x-8
        gap-y-16
        sm:gap-y-20
        lg:mx-0
        lg:max-w-none
        lg:grid-cols-5">
      <div class="lg:pt-4 lg:pr-8 lg:col-span-3">
        <p class="
            mt-2
            mb-8
            text-4xl
            font-semibold
            tracking-tight
            text-pretty
            text-white
            sm:text-5xl">
          Hobbies
        </p>
        <p class="mt-6 text-lg/8 text-gray-300">
          Besides working on programming projects, I like to go for walks in the
          forest. On vacation I also like to go hiking.
        </p>
        <p class="mt-6 text-lg/8 text-gray-300">
          At home I enjoy playing board games, running my steam engine or
          playing with my model railway. Spending time outside
          beside the fire and having a BBQ is also one of my favourite leisure
          activities.
        </p>
        <p class="mt-6 text-lg/8 text-gray-300">
          I enjoy traveling and have visited the below countries:
        </p>
        <div class="mt-8 grid grid-cols-2 gap-8">
          <div>
            <h4 class="text-md font-semibold text-indigo-400 mb-2">Europe</h4>
            <div class="flex flex-wrap gap-2">
              <span title="Germany" class="text-2xl">🇩🇪</span>
              <span title="Netherlands" class="text-2xl">🇳🇱</span>
              <span title="United Kingdom" class="text-2xl">🇬🇧</span>
              <span title="England" class="text-2xl">🏴󠁧󠁢󠁥󠁮󠁧󠁿</span>
              <span title="Scotland" class="text-2xl">󠁧󠁢󠁥🏴󠁧󠁢󠁳󠁣󠁴󠁿</span>
              <span title="Belgium" class="text-2xl">🇧🇪</span>
              <span title="France" class="text-2xl">🇫🇷</span>
              <span title="Wales" class="text-2xl">🏴󠁧󠁢󠁷󠁬󠁳󠁿</span>
              <span title="Ireland" class="text-2xl">🇮🇪</span>
              <span title="Switzerland" class="text-2xl">🇨🇭</span>
              <span title="Spain" class="text-2xl">🇪🇸</span>
              <span title="Denmark" class="text-2xl">🇩🇰</span>
              <span title="Sweden" class="text-2xl">🇸🇪</span>
              <span title="Norway" class="text-2xl">🇳🇴</span>
              <span title="Finland" class="text-2xl">🇫🇮</span>
              <span title="Estonia" class="text-2xl">🇪🇪</span>
              <span title="Latvia" class="text-2xl">🇱🇻</span>
              <span title="Guernsey" class="text-2xl">🇬🇬</span>
            </div>
          </div>
          <div>
            <h4 class="text-md font-semibold text-indigo-400 mb-2">
              Outside Europe
            </h4>
            <div class="flex flex-wrap gap-2">
              <span title="United States" class="text-2xl">🇺🇸</span>
              <span title="Japan" class="text-2xl">🇯🇵</span>
              <span title="China" class="text-2xl">🇨🇳</span>
              <span title="Maldives" class="text-2xl">🇲🇻</span>
              <span title="Singapore" class="text-2xl">🇸🇬</span>
              <span title="Australia" class="text-2xl">🇦🇺</span>
              <span title="Qatar" class="text-2xl">🇶🇦</span>
              <span title="Philippines" class="text-2xl">🇵🇭</span>
            </div>
          </div>
        </div>
      </div>
      <div class="px-6 lg:px-0 lg:col-span-2">
        <div class="relative mx-auto max-w-2xl lg:mt-16">
          <ul
            role="list"
            class="
              text-center
              mx-auto
              lg:mt-20
              max-w-2xl
              gap-x-8
              gap-y-14
              lg:mx-0
              lg:max-w-none"
          >
            <li>
              <img
                class="w-full rounded-2xl object-cover"
                src={~p"/images/about/calanques.jpg"}
                alt="Calanques National Park"
              />
              <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
                Calanques National Park, France
              </h3>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <ul
      role="list"
      class="
            text-center
            mx-auto
            mt-20
            grid
            max-w-2xl
            grid-cols-1
            gap-x-8
            gap-y-14
            lg:mx-0
            lg:max-w-none
            xl:grid-cols-2"
    >
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/steam_engine.jpg"}
          alt="Wilesco Steam Engine"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Wilesco Steam Engine
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/brass_birmingham.jpg"}
          alt="Brass Birmingham Board Game"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Brass Birmingham Board Game
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/bbq_in_summer.jpg"}
          alt="BBQ in Summer"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          BBQ in Summer
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/fire_in_winter.jpg"}
          alt="Fire in Winter"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Fire in Winter
        </h3>
      </li>
    </ul>
  </div>
</div>

Naturally replace the text, image file names and list of visited country flags with your own data. Once you are done the hobbies section on your about page should now look something like this:

About Hobbies Section

Location

The location section can be used to share some information and images about where you live. Choose some images representative of your location and place them in the about directory located in the priv/static/images directory.

Then add the below code at the end of the about.html.heex file:

about.html.heex
<!-- Location -->
<div class="overflow-hidden bg-gray-900 py-6">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="
        mx-auto
        grid
        max-w-2xl
        grid-cols-1
        gap-x-8
        gap-y-16
        sm:gap-y-20
        lg:mx-0
        lg:max-w-none
        lg:grid-cols-5">
      <div class="lg:pt-4 lg:pr-8 lg:col-span-3">
        <p class="
            mt-2
            mb-8
            text-4xl
            font-semibold
            tracking-tight
            text-pretty
            text-white
            sm:text-5xl">
          Location
        </p>
        <p class="mt-6 text-lg/8 text-gray-300">
          I live in a city in Eastern Finland called Joensuu. The city has
          approximately 80,000 inhabitants. It is the capital of North Karelia.
          North Karelia is a relatively remote and sparsely populated area in
          Europe with a population density of only 7.5 people per km². Bears and
          wolves live in the forests.
        </p>
        <dl class="
              mt-10
              max-w-xl
              space-y-8
              text-base/7
              text-gray-300
              lg:max-w-none">
          <div class="relative pl-9">
            <dt class="inline font-semibold text-white">
              <svg
                class="absolute top-1 left-0 size-5 text-indigo-500"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fill-rule="evenodd"
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd"
                />
              </svg>
              Distinct seasons
            </dt>
          </div>
          <div class="relative pl-9">
            <dt class="inline font-semibold text-white">
              <svg
                class="absolute top-1 left-0 size-5 text-indigo-500"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fill-rule="evenodd"
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd"
                />
              </svg>
              Affordable property
            </dt>
          </div>
          <div class="relative pl-9">
            <dt class="inline font-semibold text-white">
              <svg
                class="absolute top-1 left-0 size-5 text-indigo-500"
                viewBox="0 0 20 20"
                fill="currentColor"
                aria-hidden="true"
                data-slot="icon"
              >
                <path
                  fill-rule="evenodd"
                  d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                  clip-rule="evenodd"
                />
              </svg>
              Good work-life balance
            </dt>
          </div>
        </dl>
      </div>
      <div class="px-6 lg:px-0 lg:col-span-2">
        <div class="relative mx-auto max-w-2xl lg:mt-16">
          <ul
            role="list"
            class="
              text-center
              mx-auto
              lg:mt-20
              max-w-2xl
              gap-x-8
              gap-y-14
              lg:mx-0
              lg:max-w-none"
          >
            <li>
              <img
                class="w-full rounded-2xl object-cover"
                src={~p"/images/about/repokallio.jpg"}
                alt="Repokallio"
              />
              <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
                Repokallio
              </h3>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <ul
      role="list"
      class="
            text-center
            mx-auto
            mt-20
            grid
            max-w-2xl
            grid-cols-1
            gap-x-8
            gap-y-14
            lg:mx-0
            lg:max-w-none
            xl:grid-cols-2"
    >
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/cycling_infrastructure.jpg"}
          alt="Cycling Infrastructure"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Cycling Infrastructure
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/historic_train.jpg"}
          alt="Historic Railway"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Historic Railway
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/train.jpg"}
          alt="Train Connection"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Train Connection
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/plane.jpg"}
          alt="Air Connection"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Air Connection
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/river.jpg"}
          alt="Pielisjoki River"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Pielisjoki River
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/koli.jpg"}
          alt="Koli National Park"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Koli National Park
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/neighbourhoods.jpg"}
          alt="Hukanhauta Neighbourhood"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Hukanhauta Neighbourhood
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/nature_trails.jpg"}
          alt="Nature Trail"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Nature Trail
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/public_services.jpg"}
          alt="Snowplow"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Snowplow
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/coca_cola_truck.jpg"}
          alt="Coca Cola Truck"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Coca Cola Truck
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/ice_sculpture.jpg"}
          alt="Ice Sculpture in Botania"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Ice Sculpture in Botania
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/ice_slide.jpg"}
          alt="Ice Slide in Botania"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Ice Slide in Botania
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/spring.jpg"}
          alt="Spring"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Spring
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/summer.jpg"}
          alt="Summer"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Summer
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/autumn.jpg"}
          alt="Autumn"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Autumn
        </h3>
      </li>
      <li>
        <img
          class="w-full rounded-2xl object-cover"
          src={~p"/images/about/winter.jpg"}
          alt="Winter"
        />
        <h3 class="mt-6 text-lg/8 font-semibold tracking-tight text-white">
          Winter
        </h3>
      </li>
    </ul>
  </div>
</div>

Naturally replace the text and image file names with your own data. Once you are done the location section on your about page should now look something like this:

About Location Section