1 files changed, 129 insertions, 0 deletions

diff --git a/src/components/landing/sections/Hero.tsx b/src/components/landing/sections/Hero.tsx
new file mode 100644
index 0000000..a56deb1
--- /dev/null
+++ b/src/components/landing/sections/Hero.tsx
@@ -0,0 +1,129 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Kristóf Marussy
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+import clsx from 'clsx';
+
+import {
+  FediverseIcon,
+  GithubIcon,
+  GoogleScholarIcon,
+  LinkedInIcon,
+  OrcidIcon,
+} from '@site/src/components/icons';
+
+import styles from './Hero.module.css';
+
+export default function Hero({ avatar }: { avatar: string }) {
+  return (
+    <header className={clsx('hero', 'hero--dark', styles.hero)}>
+      <div className="container">
+        <div className="row">
+          <div
+            className={clsx('col', 'col--3', styles.hero__col, styles.avatar)}
+          >
+            <img src={avatar} alt="My photo" className={styles.avatar__image} />
+          </div>
+          <div className={clsx('col', 'col--9', styles.hero__col)}>
+            <h1 className={clsx('hero__title', styles.introduction)}>
+              Hi! 👋 I&rsquo;m{' '}
+              <span className={styles.introduction__name}>Kristóf Marussy</span>
+            </h1>
+            <p>
+              I&rsquo;m a research fellow working at the{' '}
+              <a href="https://ftsrg.mit.bme.hu">
+                🔬&nbsp;Critical Systems Research Group&nbsp;(
+                <abbr>ftsrg</abbr>)
+              </a>{' '}
+              at the{' '}
+              <a href="https://mit.bme.hu">
+                🏫&nbsp;Department of Measurement and Information
+                Systems&nbsp;(MIT)
+              </a>{' '}
+              at{' '}
+              <a href="https://bme.hu">
+                🏛️&nbsp;Budapest University of Technology and
+                Economics&nbsp;(BME)
+              </a>
+              . My reasearch interests include graph generation, logic solvers,
+              formal verification, and applying these techniques for ensuring
+              the safety and correcness of critical systems.
+            </p>
+            <p>
+              I also like free (as in liberty) and open source software. My
+              pronouns are he/him.
+            </p>
+            <div className={styles.cta}>
+              <a
+                href="/cv.pdf"
+                className={clsx(
+                  'button',
+                  'button--lg',
+                  'button--primary',
+                  styles.cta__button,
+                )}
+              >
+                Read my CV
+              </a>
+              <a
+                href="#contact"
+                className={clsx(
+                  'button',
+                  'button--lg',
+                  'button--secondary',
+                  styles.cta__button,
+                )}
+              >
+                Contact me
+              </a>
+              <ul className={styles.contacts}>
+                <li className={styles.contacts__item}>
+                  <a
+                    href="https://orcid.org/0000-0002-9135-8256"
+                    className={styles.contacts__icon}
+                  >
+                    <OrcidIcon />
+                  </a>
+                </li>
+                <li className={styles.contacts__item}>
+                  <a
+                    href="https://scholar.google.com/citations?user=E9CKNYoAAAAJ"
+                    className={styles.contacts__icon}
+                  >
+                    <GoogleScholarIcon />
+                  </a>
+                </li>
+                <li className={styles.contacts__item}>
+                  <a
+                    href="https://github.com/kris7t/"
+                    className={styles.contacts__icon}
+                  >
+                    <GithubIcon />
+                  </a>
+                </li>
+                <li className={styles.contacts__item}>
+                  <a
+                    href="https://pleroma.marussy.com/users/kristof"
+                    className={styles.contacts__icon}
+                  >
+                    <FediverseIcon />
+                  </a>
+                </li>
+                <li className={styles.contacts__item}>
+                  <a
+                    href="https://www.linkedin.com/in/k-marussy"
+                    className={styles.contacts__icon}
+                  >
+                    <LinkedInIcon />
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}