pastel.codes/views/about.pug

extends layout

block nav-links
  a(href='/')
    li.py-3.bg-pink.text-black.transition.duration-500.ease-in-out(
      class='hover:bg-black hover:text-pink'
    )
      span Home
  a(href='#')
    li.py-3.bg-black.text-green.transition.duration-500.ease-in-out(
      class='hover:bg-pink hover:text-black'
    ) 
      span About
  a(href='/obsidian/projects.html')
    li.py-3.bg-pink.text-black.transition.duration-500.ease-in-out(
      class='hover:bg-black hover:text-pink'
    )
      span Obsidian
  a(href='https://github.com/aurora-dot')
    li.py-3.bg-pink.text-black.transition.duration-500.ease-in-out(
      class='hover:bg-black hover:text-pink'
    )
      span Projects
  a(href='https://blog.pastel.codes')
    li.py-3.bg-pink.text-black.transition.duration-500.ease-in-out(
      class='hover:bg-black hover:text-pink'
    )
      span Blog
  a(href='/contact')
    li.py-3.bg-pink.text-black.transition.duration-500.ease-in-out(
      class='hover:bg-black hover:text-pink'
    )
      span Contact

block content
  .mt-5
    .text-lg
      h1.font-sans.text-6xl.wavy.mb-10 Hello.
      p.mb-5 I’m Esther, a 24-year-old full-stack developer with four years’ professional experience. I live in the UK.
      p.mb-5 I’m currently working at Kraken Technologies as a Software Engineer, part of the Client Engineering team.
      p.mb-5 I’m currently learning Rust and Go.
      p.mb-5 In my spare time I create digital art, make electronic music, make jewellery and other random creative stuff. I also like to discover and play experimental and artistic video games, as well as listen to lots of music.
      p.mb-5 Here are all of!{ ' ' }
        |
        a.text-green(href='/obsidian/projects.html') my projects
        span !{ ' ' } and my !{ ' ' }
          |
          a.text-green(href='https://github.com/aurora-dot/') GitHub
        | .
    if project
      div
        h1.font-sans.text-6xl.wavy.my-10 Projects.

      div
        each val in project
          .mb-10.text-center(class='sm:text-left')
            .contents
              a.contents(href=val.url)
                if val.feature_image
                  img.mx-auto(class='sm:w-2/3 sm:mx-0', src=val.feature_image)
                else
                  img(src='/images/logo.png')
            .mt-2
              a(href=val.url)
                span.font-sans.text-2xl.mt-3.mb-3(class='sm:text-3xl') #{ val.title }
              p.text-lg #{ val.excerpt }

    if blog
      div
        h1.font-sans.text-6xl.wavy.my-10 Blog.
      div
        each val in blog
          .mb-10.text-center(class='sm:text-left')
            .contents
              a.contents(href=val.url)
                if val.feature_image
                  img.mx-auto(class='sm:w-2/3 sm:mx-0', src=val.feature_image)
                else
                  img(src='/images/logo.png')
            .mt-2
              a(href=val.url)
                span.font-sans.text-2xl.mt-3.mb-3(class='sm:text-3xl') #{ val.title }
              p.text-lg #{ val.excerpt }