aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/landing/sections/Hero.tsx
blob: 35f5bd9f974f805ec0d86a8d573b18fa66c3c27b (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
/*
 * SPDX-FileCopyrightText: 2023-2024 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>
  );
}