Add contacts section

Also enables responsive image optimization

8 files changed, 412 insertions, 24 deletions

diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index 1411218..57fc10c 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -9,8 +9,10 @@ import {
   siCreativecommons,
   siDblp,
   siGithub,
+  siGnuprivacyguard,
   siGooglescholar,
   siLinkedin,
+  siMicrosoftteams,
   siOrcid,
   siScopus,
 } from 'simple-icons';
@@ -83,6 +85,8 @@ export const FediverseIcon = makeSimpleIcon(fediverse);
 
 export const GithubIcon = makeSimpleIcon(siGithub);
 
+export const GPGIcon = makeSimpleIcon(siGnuprivacyguard);
+
 export const GoogleScholarIcon = makeSimpleIcon(siGooglescholar);
 
 export const LinkedInIcon = makeSimpleIcon(siLinkedin);
@@ -92,3 +96,5 @@ export const MTMTIcon = makeSimpleIcon(mtmt);
 export const OrcidIcon = makeSimpleIcon(siOrcid);
 
 export const ScopusIcon = makeSimpleIcon(siScopus);
+
+export const TeamsIcon = makeSimpleIcon(siMicrosoftteams);
diff --git a/src/components/landing/sections/Contact.module.css b/src/components/landing/sections/Contact.module.css
new file mode 100644
index 0000000..15ed2a6
--- /dev/null
+++ b/src/components/landing/sections/Contact.module.css
@@ -0,0 +1,175 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Kristóf Marussy
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.contacts {
+  margin-top: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.col {
+  margin-bottom: 1.5rem;
+}
+
+.contact {
+  position: relative;
+  display: flex;
+  height: 100%;
+  flex-direction: row;
+  align-items: center;
+  --marussy-contact-color: var(--ifm-font-color-base);
+  --marussy-contact-icon-color: var(--marussy-contact-color);
+  --marussy-contact-icon-hover-color: var(--ifm-link-hover-color);
+  --marussy-contact-muted-color: var(--ifm-color-secondary-contrast-foreground);
+  --marussy-contact-muted-color-or-hover: var(--marussy-contact-muted-color);
+  --marussy-alternate-icon: 0;
+  color: var(--marussy-contact-color);
+  transition: color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+[data-theme='dark'] .contact {
+  --marussy-contact-muted-color: var(--ifm-color-emphasis-500);
+  --marussy-contact-icon-hover-color: var(--ifm-color-primary-light);
+}
+
+.contact:not(:has(.contact__action:hover)):hover,
+.contact:focus-within:not(:has(.contact__action:focus)) {
+  --marussy-contact-color: var(--ifm-link-hover-color);
+  --marussy-contact-icon-color: var(--marussy-contact-icon-hover-color);
+  --marussy-contact-muted-color-or-hover: var(--ifm-link-hover-color);
+}
+
+.contact:has(.contact__action--alternate:hover),
+.contact:has(.contact__action--alternate:focus) {
+  --marussy-alternate-icon: 1;
+}
+
+.contact__icon-holder {
+  position: relative;
+  display: flex;
+  padding: 1rem;
+  margin-right: 1rem;
+  background: var(--ifm-color-emphasis-200);
+  border-radius: 50em;
+  align-items: center;
+  justify-content: center;
+  color: var(--marussy-contact-icon-color);
+}
+
+.contact__icon-holder--fediverse {
+  padding: 0.75rem;
+}
+
+.contact__icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  opacity: calc(1 - var(--marussy-alternate-icon));
+  transition:
+    color var(--ifm-transition-fast) var(--ifm-transition-timing-default),
+    opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+}
+
+.contact__icon--fediverse {
+  width: 3rem;
+  height: 3rem;
+  margin: -0.0625rem -0.0625rem 0.0625rem 0.0625rem;
+}
+
+.contact__icon--alternate {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  color: var(--marussy-contact-icon-hover-color);
+  opacity: var(--marussy-alternate-icon);
+}
+
+.contact__content {
+  dispaly: flex;
+  flex-direction: row;
+}
+
+.contact__title {
+  margin: 0;
+  --casl: 0;
+}
+
+.contact__value {
+  margin: 0;
+}
+
+.contact__description {
+  margin: 0;
+  --slnt: -15;
+  --crsv: 1;
+  font-size: 0.875rem;
+  --marussy-contact-color: var(--marussy-contact-muted-color-or-hover);
+  color: var(--marussy-contact-muted-color-or-hover);
+  transition: color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.contact__link {
+  --ifm-link-color: var(--marussy-contact-color);
+}
+
+.contact__link::after {
+  content: ' ';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.contact__action {
+  position: relative;
+  --ifm-link-color: var(--marussy-contact-muted-color);
+}
+
+.contact__action:focus {
+  --ifm-link-color: var(--ifm-link-hover-color);
+}
+
+.small {
+  display: inline-block;
+  position: relative;
+  max-height: 0;
+  width: 1.5rem;
+  overflow: visible;
+  vertical-align: text-bottom;
+}
+
+.small__link {
+  display: flex;
+  position: absolute;
+  bottom: 0;
+}
+
+.small__icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.photo__container {
+  position: relative;
+  border-radius: var(--ifm-card-border-radius);
+  overflow: hidden;
+  aspect-ratio: 1288/480;
+  min-height: 15rem;
+  max-width: 100%;
+  background-size: cover;
+  background-position: 25% center;
+}
+
+.photo {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 25% center;
+}
diff --git a/src/components/landing/sections/Contact.tsx b/src/components/landing/sections/Contact.tsx
new file mode 100644
index 0000000..01279a9
--- /dev/null
+++ b/src/components/landing/sections/Contact.tsx
@@ -0,0 +1,218 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Kristóf Marussy
+ *
+ * SPDX-License-Identifier: MIT AND CC-BY-4.0
+ *
+ * Code in this file is MIT licensed, while content is CC-BY-4.0 licensed.
+ */
+
+import Link from '@docusaurus/Link';
+import {
+  EnvelopeSimple,
+  HandWaving,
+  MapPin,
+  Phone,
+} from '@phosphor-icons/react';
+import clsx from 'clsx';
+
+import Section from '@site/src/components/landing/Section';
+import { FediverseIcon, GPGIcon, TeamsIcon } from '@site/src/components/icons';
+import photo from '@site/src/pages/bme-building-i-cropped.jpg?placeholder=true&sizes[]=644&sizes[]=1288&sizes[]=2576&rl';
+
+import styles from './Contact.module.css';
+
+export default function Contact() {
+  return (
+    <Section id="contact" title="Contact">
+      <div className={clsx('container', styles.contacts)}>
+        <div className="row">
+          <div className={clsx('col', 'col--4', styles.col)}>
+            <div className={styles.contact}>
+              <div className={styles['contact__icon-holder']}>
+                <EnvelopeSimple
+                  aria-hidden="true"
+                  className={styles.contact__icon}
+                />
+              </div>
+              <div className={styles.contact__content}>
+                <h3 className={styles.contact__title}>Work e-mail</h3>
+                <p className={styles.contact__value}>
+                  <Link
+                    to="mailto:marussy@mit.bme.hu"
+                    className={styles.contact__link}
+                  >
+                    marussy@mit.bme.hu
+                  </Link>{' '}
+                  <span className={styles.small}>
+                    <Link
+                      to="https://keyoxide.org/96C12D444D19ED5C41BA8B14C30B3B1A31ACCD46"
+                      className={clsx(
+                        styles.contact__action,
+                        styles.small__link,
+                      )}
+                    >
+                      <GPGIcon alt="GPG key" className={styles.small__icon} />
+                    </Link>
+                  </span>
+                </p>
+                <p className={styles.contact__description}>
+                  For research and professional inquiries
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className={clsx('col', 'col--4', styles.col)}>
+            <div className={styles.contact}>
+              <div className={styles['contact__icon-holder']}>
+                <TeamsIcon hidden className={styles.contact__icon} />
+                <Phone
+                  aria-hidden="true"
+                  className={clsx(
+                    styles.contact__icon,
+                    styles['contact__icon--alternate'],
+                  )}
+                />
+              </div>
+              <div className={styles.contact__content}>
+                <h3 className={styles.contact__title}>Call or chat with me</h3>
+                <p className={styles.contact__value}>
+                  <Link
+                    to="https://teams.microsoft.com/l/chat/0/0?users=marussy.kristof@bme.hu"
+                    className={styles.contact__link}
+                  >
+                    <span className="sr-only">Microsoft Teams: </span>
+                    marussy.kristof@bme.hu
+                  </Link>
+                </p>
+                <p className={styles.contact__description}>
+                  <Link
+                    to="tel:+3614633586"
+                    className={clsx(
+                      styles.contact__action,
+                      styles['contact__action--alternate'],
+                    )}
+                  >
+                    Or use landline: +36 1 463-3586
+                  </Link>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className={clsx('col', 'col--4', styles.col)}>
+            <div className={styles.contact}>
+              <div className={styles['contact__icon-holder']}>
+                <MapPin aria-hidden="true" className={styles.contact__icon} />
+              </div>
+              <div className={styles.contact__content}>
+                <h3 className={styles.contact__title}>Office</h3>
+                <p className={styles.contact__value}>
+                  <Link
+                    to="https://www.openstreetmap.org/way/24726476#map=19/47.47263/19.06006"
+                    className={styles.contact__link}
+                  >
+                    H-1117 Budapest, Magyar tudósok körútja 2., Building I, Room
+                    B.417
+                  </Link>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="row">
+          <div className={clsx('col', 'col--12', styles.col)}>
+            <div
+              className={styles.photo__container}
+              style={{ backgroundImage: `url("${photo.placeholder}")` }}
+            >
+              <img
+                src={photo.src}
+                srcSet={photo.srcSet}
+                width={photo.width}
+                height={photo.height}
+                sizes="(min-width: 1384px) 1288px, (min-width: 996px) calc(100vw - 96px), (min-width: 676px) calc(100vw - 32px), 644px"
+                loading="lazy"
+                alt=""
+                className={styles.photo}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="row">
+          <div className={clsx('col', 'col--6', styles.col)}>
+            <div className={styles.contact}>
+              <div className={styles['contact__icon-holder']}>
+                <HandWaving
+                  aria-hidden="true"
+                  className={styles.contact__icon}
+                />
+              </div>
+              <div className={styles.contact__content}>
+                <h3 className={styles.contact__title}>Personal e-mail</h3>
+                <p className={styles.contact__value}>
+                  <Link
+                    to="mailto:kristof@marussy.com"
+                    className={styles.contact__link}
+                  >
+                    kristof@marussy.com
+                  </Link>{' '}
+                  <span className={styles.small}>
+                    <Link
+                      to="https://keyoxide.org/7AADE6E800F1979D2A13EEBBB00C29F3D5A628AF"
+                      className={clsx(
+                        styles.contact__action,
+                        styles.small__link,
+                      )}
+                    >
+                      <GPGIcon alt="GPG key" className={styles.small__icon} />
+                    </Link>
+                  </span>
+                </p>
+                <p className={styles.contact__description}>
+                  For messages about my projects, this website, or anything else
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className={clsx('col', 'col--6', styles.col)}>
+            <div className={styles.contact}>
+              <div
+                className={clsx(
+                  styles['contact__icon-holder'],
+                  styles['contact__icon-holder--fediverse'],
+                )}
+              >
+                <FediverseIcon
+                  className={clsx(
+                    styles.contact__icon,
+                    styles['contact__icon--fediverse'],
+                  )}
+                />
+              </div>
+              <div className={styles.contact__content}>
+                <h3 className={styles.contact__title}>Follow me</h3>
+                <p className={styles.contact__value}>
+                  <Link
+                    to="https://pleroma.marussy.com/users/kristof"
+                    className={styles.contact__link}
+                  >
+                    @kristof@marussy.com
+                  </Link>
+                </p>
+                <p className={styles.contact__description}>
+                  On the{' '}
+                  <Link
+                    to="https://fediverse.info"
+                    className={styles.contact__action}
+                  >
+                    Fediverse
+                  </Link>
+                  , a diverse community of interconnected platforms
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Section>
+  );
+}
diff --git a/src/components/landing/sections/Hero.module.css b/src/components/landing/sections/Hero.module.css
index ce0444f..0909c3f 100644
--- a/src/components/landing/sections/Hero.module.css
+++ b/src/components/landing/sections/Hero.module.css
@@ -37,6 +37,7 @@
 
 .avatar__image {
   width: 100%;
+  height: auto;
   max-width: 298px;
   border-radius: 100em;
 }
@@ -48,7 +49,6 @@
   font-size: 1.5rem;
 }
 
-
 .introduction__name {
   font-family: var(--ifm-heading-font-family);
   font-weight: var(--ifm-heading-font-weight);
diff --git a/src/components/landing/sections/Hero.tsx b/src/components/landing/sections/Hero.tsx
index 2773b9b..ee11048 100644
--- a/src/components/landing/sections/Hero.tsx
+++ b/src/components/landing/sections/Hero.tsx
@@ -16,10 +16,11 @@ import {
   LinkedInIcon,
   OrcidIcon,
 } from '@site/src/components/icons';
+import avatar from '@site/src/pages/avatar.jpg?sizes[]=149&sizes[]=298&sizes[]=596&rl';
 
 import styles from './Hero.module.css';
 
-export default function Hero({ avatar }: { avatar: string }) {
+export default function Hero() {
   return (
     <header className={clsx('hero', 'hero--dark', styles.hero)}>
       <div className="container">
@@ -27,7 +28,15 @@ export default function Hero({ avatar }: { avatar: string }) {
           <div
             className={clsx('col', 'col--3', styles.hero__col, styles.avatar)}
           >
-            <img src={avatar} alt="My photo" className={styles.avatar__image} />
+            <img
+              src={avatar.src}
+              srcSet={avatar.srcSet}
+              width={avatar.width}
+              height={avatar.height}
+              sizes="(min-width: 1384px) 298px, (min-width: 996px) calc(25vw - 48px), (min-width: 300px) 298px, calc(100vw - 32px)"
+              alt="My photo"
+              className={styles.avatar__image}
+            />
           </div>
           <div className={clsx('col', 'col--9', styles.hero__col)}>
             <h1 className={clsx('hero__title', styles.introduction)}>
diff --git a/src/components/landing/sections/Research.tsx b/src/components/landing/sections/Research.tsx
index a295419..5f69d5e 100644
--- a/src/components/landing/sections/Research.tsx
+++ b/src/components/landing/sections/Research.tsx
@@ -33,7 +33,7 @@ function Topic({
   children: ReactNode;
 }) {
   return (
-    <div className={clsx('col', 'col-3', styles.topic)}>
+    <div className={clsx('col', 'col--3', styles.topic)}>
       <div className={styles.topic__contents}>
         <div className={clsx(styles.topic__icon, style)}>
           <Icon aria-hidden="true" size={128} weight="light" />
diff --git a/src/components/landing/sections/Software.module.css b/src/components/landing/sections/Software.module.css
deleted file mode 100644
index 1d0db4d..0000000
--- a/src/components/landing/sections/Software.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2023 Kristóf Marussy
- *
- * SPDX-License-Identifier: MIT
- */
diff --git a/src/components/landing/sections/Software.tsx b/src/components/landing/sections/Software.tsx
deleted file mode 100644
index 8a421b5..0000000
--- a/src/components/landing/sections/Software.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2023 Kristóf Marussy
- *
- * SPDX-License-Identifier: MIT
- */
-
-import clsx from 'clsx';
-
-import Section from '@site/src/components/landing/Section';
-
-import styles from './Software.module.css';
-
-export default function Software() {
-  return <Section id="software" title="Software"></Section>;
-}