{"version":3,"file":"about-DMKoFU2W.js","sources":["../../../../../src/components/specific/about/HeroArticle.tsx","../../../../../src/components/specific/(home)/ui/Articles.tsx","../../../../../src/components/specific/about/RecentUpdates.tsx","../../../../../src/components/specific/about/Projects.tsx","../../../../../src/components/specific/about/About.tsx","../../../../../src/routes/(home)/about.tsx?pick=default&pick=$css"],"sourcesContent":["import { For, JSXElement } from \"solid-js\";\nimport { avatarUrls } from \"~/configs/paths\";\n\nfunction HeroArticle(): JSXElement {\n  return (\n    <article\n      class=\"jl-start border-ink fluid-px fluid-py fl-xs-s md:fl-m-l lg:fl-l-xl surface3\"\n      id=\"about-me\"\n    >\n      <div class=\"relative additive-spacing additive-spacing--lg\">\n        <div class=\"grid-auto-fit cols-1 lg:grid-cols-2 mx-auto\">\n          <div class=\"jl-centered additive-spacing additive-spacing--lg p-5\">\n            <ContentBody />\n          </div>\n          <ul class=\"max-w-full relative flex flex-wrap md:flex-nowrap items-center justify-center\">\n            <For each={avatarUrls}>\n              {(item) => (\n                <li class=\"text-xs p-3 md:p-1\">\n                  <picture>\n                    <source\n                      media={`(min-width: ${item.size * 2 + 100}px)`}\n                      srcset={item.url}\n                    />\n                    <source\n                      media={`(max-width: ${item.size * 2 + 99}px)`}\n                      srcset={`${item.url.split(\"/upload/\")[0]}/upload/q_auto:low,e_pixelate:${Math.max(20, 512 / item.size)}/${item.url.split(\"/upload/\")[1]}`}\n                    />\n                    <img\n                      width={item.size}\n                      height={item.size}\n                      class={`about-profile z-2 bg-transparent object-cover hide-on-small-screen-${item.size}`}\n                      src={item.url}\n                      alt={`avatar-${item.size}x${item.size}`}\n                      crossOrigin=\"anonymous\"\n                    />\n                  </picture>\n                </li>\n              )}\n            </For>\n          </ul>\n        </div>\n      </div>\n    </article>\n  );\n}\n\nfunction ContentBody() {\n  return (\n    <div class=\"px-5\">\n      <h2 class=\"text-pretty tracking-tight text2 text-3xl lg:text-4xl\">\n        Crafting <span class=\"max-lg:whitespace-pre\">High-Performance</span>{\" \"}\n        <span class=\"max-lg:whitespace-nowrap\">Web Experiences</span>\n      </h2>\n      <p class=\"pretty-text mt-6 text-lg leading-8 ff-sans-serif text1 font-light\">\n        Hey, I'm <span class=\"ff-cursive text4\">Jonathan</span>\n        ,&nbsp;or{\" \"}\n        <span class=\"ff-cursive text4\" style={{ \"--color\": \"var(--elevate2)\" }}>\n          Jon\n        </span>{\" \"}\n        for short. I'm a{\" \"}\n        <span class=\"ff-cursive em-underline decoration-dotted text4 lg:whitespace-nowrap\">\n          front-end engineer\n        </span>{\" \"}\n        with 8+ yoe in individual and team lead roles, collaborating with\n        product, platform, and marketing teams.\n        <br />\n        <br />I focus on web standards-compliant experiences and specialize in\n        performance, helping teams build user-centric products that are both\n        functional and performant.\n      </p>\n    </div>\n  );\n}\n\nexport default HeroArticle;\n","import { For, JSXElement } from \"solid-js\";\nexport function ContentBody(props: { title: string; children: JSXElement }) {\n  return (\n    <div class=\"mx-5 w-full\">\n      <h4>{props.title}</h4>\n      <br />\n      {props.children}\n    </div>\n  );\n}\n// @ts-expect-error ignore\nexport function ArticlesList(props) {\n  return (\n    <section class=\"jl-start additive-spacing additive-spacing--lg lg:mr-8\">\n      <ul class=\"flow flow-list h-full space-xs-s\">\n        <For each={props.articles}>\n          {(item) => {\n            return (\n              <li class=\"w-full\">\n                <a href={item.url} target=\"_blank\" class=\"jl-start\">\n                  <article class=\"flex justify-between items-center gap-2 ff-serif sm:gap-4 flex-wrap lg:flex-nowrap\">\n                    <div>\n                      <h5\n                        data-area-label=\"title\"\n                        class=\"text2 ff-serif text-ellipsis overflow-hidden mx-w-md lg:max-w-lg pr-4\"\n                      >\n                        {item.title}\n                      </h5>\n                      {props.renderBody && (\n                        <p class=\"font-light text-sm text3 ff-sans-serif\">\n                          {props.renderBody(item)}\n                        </p>\n                      )}\n                    </div>\n                    {item.date && (\n                      <time\n                        data-area-label=\"date\"\n                        class=\"text3\"\n                        datetime={String(item.date)}\n                      >\n                        {item.date}\n                      </time>\n                    )}\n                  </article>\n                </a>\n              </li>\n            );\n          }}\n        </For>\n      </ul>\n    </section>\n  );\n}\n","import { JSXElement } from \"solid-js\";\nimport { mediumFeatures, popularPosts } from \"~/configs/paths\";\nimport { ContentBody, ArticlesList } from \"../(home)/ui/Articles\";\nfunction RecentUpdates(): JSXElement {\n  return (\n    <article\n      class=\"jl-centered fluid-px fluid-py fl-xs-s md:fl-m-l px-5\"\n      id=\"about-personal\"\n    >\n      <div class=\"relative additive-spacing additive-spacing--lg w-full\">\n        <h3 class=\"text-xl ff-serif px-5\">Curated Writings</h3>\n        <section class=\"grid-auto-fit mx-auto cols-1 lg:cols-2 gap-3\">\n          <div class=\"jl-start additive-spacing additive-spacing--lg\">\n            <ContentBody title=\"Blog Highlights\">\n              <PopularArticles />\n            </ContentBody>\n          </div>\n          <ContentBody title=\"Featured Articles\">\n            <MediumArticles />\n          </ContentBody>\n        </section>\n      </div>\n    </article>\n  );\n}\n\nfunction MediumArticles() {\n  return (\n    <ArticlesList\n      articles={mediumFeatures}\n      // @ts-expect-error ignore\n      renderBody={(item) => (\n        <>\n          in {item.publisher}\n          {item.likes && (\n            <span class=\"text-xs\"> &nbsp;&nbsp;&#9829;&nbsp;{item.likes}</span>\n          )}\n        </>\n      )}\n    />\n  );\n}\n\nfunction PopularArticles() {\n  return (\n    <ArticlesList\n      articles={popularPosts}\n      // @ts-expect-error ignore\n      renderBody={(item) => <>{item.highlight}</>}\n    />\n  );\n}\nexport default RecentUpdates;\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { JSXElement } from \"solid-js\";\n\nimport content from \"~/data/content.json\";\nimport { ContentBody, ArticlesList } from \"../(home)/ui/Articles\";\n\nconst workdata = content.workData;\nconst samplesData = content.samplesData;\nfunction Projects(): JSXElement {\n  return (\n    <article\n      class=\"jl-centered fluid-px fluid-py fl-xs-s md:fl-m-l px-5\"\n      id=\"about-personal\"\n    >\n      <div class=\"relative additive-spacing additive-spacing--lg w-full\">\n        <h3 class=\"text-xl ff-serif px-5\">Tools/Projects</h3>\n        <section class=\"grid-auto-fit mx-auto cols-1 lg:cols-2 gap-3\">\n          <div class=\"jl-start additive-spacing additive-spacing--lg\">\n            <ContentBody title=\"Published\">\n              <List data={workdata.children} />\n            </ContentBody>\n          </div>\n          <ContentBody title=\"Misc/Archive\">\n            <List data={samplesData} />\n          </ContentBody>\n        </section>\n      </div>\n    </article>\n  );\n}\n\nfunction List(props: { data: any }) {\n  return (\n    <ArticlesList\n      articles={props.data}\n      // @ts-expect-error ignore\n      renderBody={(item) => <>{item.text}</>}\n    />\n  );\n}\nexport default Projects;\n","import { RESUME_URL } from \"~/configs/paths\";\nimport HeroArticle from \"./HeroArticle\";\nimport RecentUpdates from \"./RecentUpdates\";\nimport FaArrowRightLong from \"~/assets/svg/fa-arrow-right-long.svg?component-solid\";\nimport Projects from \"./Projects\";\n\nexport default function AboutView() {\n  return (\n    <div\n      id=\"skiplink-content\"\n      class=\"flex flex-col outer`-mx size-step-1 xl:size-step-0 overflow-hidden\"\n    >\n      {/* I’m a jobbing web developer with a firm belief that the web is a */}\n      {/* revolutionary communication mechanism and should be available to all */}\n      <HeroArticle />\n      <div class=\"jl-centered my-20\">\n        <p class=\"pretty-text ff-sans-serif outer-mx size-step-2 text-lg\">\n          This website is maintained by me,{\" \"}\n          <strong class=\"ff-cursive text4\">Jonathan Lau.</strong> View my{\" \"}\n          <a\n            data-defer\n            aria-label=\"view resume in pdf format\"\n            href={RESUME_URL}\n            style={{ \"--color\": \"var(--elevate3)\" }}\n            class=\"jl-underline ff-cursive text4 cursor-highlight-pointer-dark hover:wavy-underline hover:text-neutral-55\"\n          >\n            full résumé.\n            <span\n              aria-hidden=\"true\"\n              class=\"ff-mono text-lg text-center\"\n              aria-label=\"Arrow indicating link to resume\"\n            >\n              <FaArrowRightLong\n                class=\"inline pl-1\"\n                style={{ fill: \"var(--kiwi-100)\" }}\n              />\n            </span>\n          </a>\n        </p>\n      </div>\n      <RecentUpdates />\n      <Projects />\n      {/* <RootAccessibility /> */}\n      {/* <RootOpportunities /> */}\n      {/* <PersonalArticle /> */}\n      {/* <Misc /> */}\n      {/* <RootLinks /> */}\n      {/* <div role=\"list\" class=\"flex flex-col jl-grid\">\n        <For each={gridItems}>\n            {({ order, rowSpan, colSpan, child }) => (\n              <GridCardItem order={order} rowSpan={rowSpan} colSpan={colSpan}>\n                {child}\n              </GridCardItem>\n            )}\n          </For>\n        </div> */}\n    </div>\n  );\n}\n","import { Link, Title } from \"@solidjs/meta\";\nimport AboutView from \"~/components/specific/about/About\";\nimport { sitepaths } from \"~/configs/paths\";\n\nconst meta = {\n  title: `${sitepaths.about.title} | Jonathan Lau`,\n  canonical: `${import.meta.env.VITE_APP_BASE_URL}${sitepaths.about.path}`,\n};\nconst About = () => {\n  return (\n    <>\n      <>\n        <Title>{meta.title}</Title>\n        <Link rel=\"canonical\" href={`${meta.canonical}`} />\n      </>\n      <AboutView />\n    </>\n  );\n};\n\nexport default About;\n"],"names":["HeroArticle","_el$","_$getNextElement","_tmpl$","_el$4","firstChild","_el$5","nextSibling","_$insert","_$createComponent","ContentBody","For","each","avatarUrls","children","_el$6","_tmpl$2","_el$8","_el$9","_el$10","_$effect","_p$","_v$","item","size","_v$2","url","_v$3","_v$4","split","Math","max","_v$5","_v$6","_v$7","_v$8","_v$9","e","_$setAttribute","t","a","o","i","n","s","_$className","h","r","undefined","_el$11","_tmpl$3","style","setProperty","props","_el$2","_co$","_$getNextMarker","title","ArticlesList","_el$7","articles","_c$","_c$2","_el$12","_el$13","_el$14","_co$2","_el$15","_el$16","_co$3","_$memo","renderBody","_el$17","_tmpl$4","date","_el$18","_tmpl$5","createRenderEffect","String","RecentUpdates","PopularArticles","MediumArticles","mediumFeatures","publisher","likes","popularPosts","highlight","workdata","content","workData","samplesData","Projects","List","data","text","AboutView","RESUME_URL","FaArrowRightLong","class","fill","meta","sitepaths","about","canonical","path","About","Title","Link","rel","href"],"mappings":"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"}