use yew::prelude::*;

pub struct About;
impl Component for About {
  type Message = ();
  type Properties = ();

  fn create(_ctx: &Context<Self>) -> Self {
    Self
  }

  fn view(&self, _ctx: &Context<Self>) -> Html {
    html! {
      <>
        <div class="tile is-parent container box is-small is-flex-shrink-5 mb-5 mt-5">
          <img alt="insert pfp here" loading="eager" class="image is-128x128 is-square is-inline-block mg-small" src="profile.avif" />
          <div class="columns is-narrow ml-3 is-inline-block is-vcentered is-centered is-gapless is-multiline is-0 mt-4" style="vertical-align: top !important;">
            <p class="column is-narrow" style="filter: url(post.bloom.svg#process) !important; color: #B4BEFE !important;"><img loading="eager" alt="ket" class="image is-24x24 is-square is-inline-block mg-small" src="oneko.gif" />{r"  Lucielle R. Hoerner"}</p>
            <p class="column is-narrow" style="background-clip: text !important; background-image: linear-gradient(45deg, #5BCEFAFF, #F5A9B8FF, #FFFFFFFF) !important;">
              <p>{r"they/she · transfem"}</p>
              <p>{r"certified catgirl™"}</p>
              <p>{r"software engineer"}</p>
            </p>
          </div>
          <hr style="background-color: #B4BEFE60 !important;" />
          <p class="subtitle">{r#"about me"#}</p>
          <div class="content is-size-7">{r#"
            haj! i'm luciel, but you can also just call me lucie.
            i have lots of interests including music, cooking, development and learning new things.
            in my free-time i mostly work on my private projects or spent time with my partners or online friends.
            my knowledge is based on autodidactics and experiences with (former) friends.
            looking for an apprenticeship or job atm. because i wasn't able to finish my previous one due to some financial circumstances.
            you can find public projects i work on somewhere in the header.
            i may or may not update information stated here.
          "#}
          </div>
        </div>
      </>
    }
  }
}
