about.qmd

---
pagetitle: "Philly Social Justice Hackathon"
page-layout: custom
section-divs: false
toc: false
anchor-sections: true # not working?
aliases:
  - index.html
execute: 
  echo: false
  output: asis
  warning: false
---




:::::: {.content-block}
```{r workspace}
#| include: false
library(htmltools)
library(commonmark)
library(glue)

general_card_div <- function(..., lg = 3, md = 2, sm = 2, xs = 1) {
  class_info <- 
    paste(
      "card",       # card class
      # about card
      "rounded-3",  # border-radius = 0.3rem
      "m-2",        # margin all sides: 0.5rem
      # about grid placement
      glue("g-col-lg-{12/lg}"), # when >=1200px use {lg} cols per card (ex. 3 across)
      glue("g-col-md-{12/md}"), # when >= 992px use {md} cols per card (ex. 2 across)
      glue("g-col-sm-{12/sm}"), # when >= 768px use {sm} cols per card (ex. 2 across)
      glue("g-col-{12/xs}")     # when  < 576px use {xs} cols per card (ex. 1 across)
    )
  
  div(
    class = class_info,
    style = "background: #8f4b99;",
    ...
  )
}
```

## About the Event
::: {.grid}
::: {.g-col-lg-8 .g-col-12}


Together, attendees will work on technology solutions to respond to specific justice needs of residents and neighborhoods most impacted by social, economic, and environmental injustices in Philadelphia.

**The event is free to attend and open to all participants, regardless of coding experience or affiliation with an organization or university.**
:::

:::{.g-col-lg-4 .g-col-8 .g-start-3}
![](assets/about-page_hero-bg-img-1.jpeg)
:::
:::
::::::

:::::: {.content-block}

```{r organizer-gallery}
organizers <- local({
  df <- read.csv("assets/about--organizers.csv", na.strings = "-")
  df[order(df$name), ]
})

advisors <- local({
  df <- read.csv("assets/about--advisors.csv", na.strings = "-")
  df[order(df$name), ]
})

organizers <- organizers[organizers$name %in% setdiff(organizers$name, advisors$name), ]
 
add_profile_card <- function(person, personList) {
  info <- 
    personList[personList$name == person, ] |>
    as.list()

  general_card_div(
    div(
      class = "card-body text-center",
      # image
      a(
          img(src = file.path("assets/organizers", info$img), height = "100px"),
          href = info$linkedin
      ),
      # name
      p(
        class = "text-center mt-3",
        a(info$name, href = info$linkedin),
        style = "font-size: 1.2rem;"
      ),
      p(
          class = "text-center person-bio",
          HTML(commonmark::markdown_html(info$bio))
        )
    )
  )
}
# Render section

h2("Organizers")

lapply(
  organizers$name, 
  \(x) add_profile_card(x, organizers)
) |>
  div(class = "list grid")

h2("Advisors")

lapply(
  advisors$name,
  \(x) add_profile_card(x, advisors)
) |>
  div(class = "list grid")

```
::::::

:::::: {.content-block}
## Our Sponsors {#sponsors}

```{r}
div(
    class="sponsor-logos",
    a(
        href="https://drexel.edu/law/",
        target="_blank",
        img(
            src="assets/sponsors/drexel-law-school.png",
            alt="Drexel Law School Logo"
        )
    ),
    a(
        href="https://www.law.upenn.edu/",
        target="_blank",
        img(
            src="assets/sponsors/fpi logo.png",
            alt="Penn Law School Logo"
        )
    ),
    a(
        href="https://law.temple.edu/ilit/",
        target="_blank",
        img(
            src="assets/sponsors/iLIT__White_Vert_Red_Black_Horiz (1).png",
            alt="Temple iLIT Logo"
        )
    ),
    a(
        href="https://www.meetup.com/LegalHackersPA/",
        target="_blank",
        img(
            src="assets/sponsors/philly-legal-hackers.gif",
            alt="Philadelphia Legal Hackers Logo"
        )
    ),
    a(
        href="https://www.rladiesphilly.org/",
        target="_blank",
        img(
            src="assets/sponsors/rladies logo.png",
            alt="R Ladies Philly Logo"
        )
    ),
    a(
        href="https://codeforphilly.org/",
        target="_blank",
        img(
            src="assets/sponsors/code-for-philly.png",
            alt="Code for Philly Logo"
        )
    ),
    a(
        href="https://www.pit-un.org",
        target="_blank",
        img(
            src="assets/sponsors/pit-un.png",
            alt="PIT-UN Logo",
            style="max-height: 30px;"
        )
    ),
    a(
        href="https://neota.com/",
        target="_blank",
        img(
            src="assets/sponsors/neota-logo.png",
            alt="Neota Logo"
        )
    ),
    a(
        href="https://www.gavel.io",
        target="_blank",
        img(
            src="assets/sponsors/Gavel logo with transparent background.png",
            alt="Gavel Logo"
        )
    ),
    #a(
    #    href="https://badgecert.com/",
    #    target="_blank",
    #    img(
    #        src="assets/sponsors/BadgeCert Logo.png",
    #        alt="BadgeCert Logo"
    #    )
    #)
)

div(
    class="text-center mt-4 p-3 rounded-3",
    style="border: 1px solid white; max-width: 600px; margin: 0 auto;",
    p("Winners of the Social Justice Hackathon will advance to the Information Architecture Conference design hackathon, where IAC26 attendees will collaborate on design and strategy for that project."),
    a(
        href="https://www.theiaconference.com/",
        target="_blank",
        img(
            src="assets/sponsors/IAC26-Graphic.jpg",
            alt="IAC 2026 Graphic",
            style="max-width: 450px; width: 100%; border-radius: 0.3rem;"
        )
    )
)
```
::::::