aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/landing/sections/Contact.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/landing/sections/Contact.tsx')
-rw-r--r--src/components/landing/sections/Contact.tsx218
1 files changed, 218 insertions, 0 deletions
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 @@
1/*
2 * SPDX-FileCopyrightText: 2024 Kristóf Marussy
3 *
4 * SPDX-License-Identifier: MIT AND CC-BY-4.0
5 *
6 * Code in this file is MIT licensed, while content is CC-BY-4.0 licensed.
7 */
8
9import Link from '@docusaurus/Link';
10import {
11 EnvelopeSimple,
12 HandWaving,
13 MapPin,
14 Phone,
15} from '@phosphor-icons/react';
16import clsx from 'clsx';
17
18import Section from '@site/src/components/landing/Section';
19import { FediverseIcon, GPGIcon, TeamsIcon } from '@site/src/components/icons';
20import photo from '@site/src/pages/bme-building-i-cropped.jpg?placeholder=true&sizes[]=644&sizes[]=1288&sizes[]=2576&rl';
21
22import styles from './Contact.module.css';
23
24export default function Contact() {
25 return (
26 <Section id="contact" title="Contact">
27 <div className={clsx('container', styles.contacts)}>
28 <div className="row">
29 <div className={clsx('col', 'col--4', styles.col)}>
30 <div className={styles.contact}>
31 <div className={styles['contact__icon-holder']}>
32 <EnvelopeSimple
33 aria-hidden="true"
34 className={styles.contact__icon}
35 />
36 </div>
37 <div className={styles.contact__content}>
38 <h3 className={styles.contact__title}>Work e-mail</h3>
39 <p className={styles.contact__value}>
40 <Link
41 to="mailto:marussy@mit.bme.hu"
42 className={styles.contact__link}
43 >
44 marussy@mit.bme.hu
45 </Link>{' '}
46 <span className={styles.small}>
47 <Link
48 to="https://keyoxide.org/96C12D444D19ED5C41BA8B14C30B3B1A31ACCD46"
49 className={clsx(
50 styles.contact__action,
51 styles.small__link,
52 )}
53 >
54 <GPGIcon alt="GPG key" className={styles.small__icon} />
55 </Link>
56 </span>
57 </p>
58 <p className={styles.contact__description}>
59 For research and professional inquiries
60 </p>
61 </div>
62 </div>
63 </div>
64 <div className={clsx('col', 'col--4', styles.col)}>
65 <div className={styles.contact}>
66 <div className={styles['contact__icon-holder']}>
67 <TeamsIcon hidden className={styles.contact__icon} />
68 <Phone
69 aria-hidden="true"
70 className={clsx(
71 styles.contact__icon,
72 styles['contact__icon--alternate'],
73 )}
74 />
75 </div>
76 <div className={styles.contact__content}>
77 <h3 className={styles.contact__title}>Call or chat with me</h3>
78 <p className={styles.contact__value}>
79 <Link
80 to="https://teams.microsoft.com/l/chat/0/0?users=marussy.kristof@bme.hu"
81 className={styles.contact__link}
82 >
83 <span className="sr-only">Microsoft Teams: </span>
84 marussy.kristof@bme.hu
85 </Link>
86 </p>
87 <p className={styles.contact__description}>
88 <Link
89 to="tel:+3614633586"
90 className={clsx(
91 styles.contact__action,
92 styles['contact__action--alternate'],
93 )}
94 >
95 Or use landline: +36 1 463-3586
96 </Link>
97 </p>
98 </div>
99 </div>
100 </div>
101 <div className={clsx('col', 'col--4', styles.col)}>
102 <div className={styles.contact}>
103 <div className={styles['contact__icon-holder']}>
104 <MapPin aria-hidden="true" className={styles.contact__icon} />
105 </div>
106 <div className={styles.contact__content}>
107 <h3 className={styles.contact__title}>Office</h3>
108 <p className={styles.contact__value}>
109 <Link
110 to="https://www.openstreetmap.org/way/24726476#map=19/47.47263/19.06006"
111 className={styles.contact__link}
112 >
113 H-1117 Budapest, Magyar tudósok körútja 2., Building I, Room
114 B.417
115 </Link>
116 </p>
117 </div>
118 </div>
119 </div>
120 </div>
121 <div className="row">
122 <div className={clsx('col', 'col--12', styles.col)}>
123 <div
124 className={styles.photo__container}
125 style={{ backgroundImage: `url("${photo.placeholder}")` }}
126 >
127 <img
128 src={photo.src}
129 srcSet={photo.srcSet}
130 width={photo.width}
131 height={photo.height}
132 sizes="(min-width: 1384px) 1288px, (min-width: 996px) calc(100vw - 96px), (min-width: 676px) calc(100vw - 32px), 644px"
133 loading="lazy"
134 alt=""
135 className={styles.photo}
136 />
137 </div>
138 </div>
139 </div>
140 <div className="row">
141 <div className={clsx('col', 'col--6', styles.col)}>
142 <div className={styles.contact}>
143 <div className={styles['contact__icon-holder']}>
144 <HandWaving
145 aria-hidden="true"
146 className={styles.contact__icon}
147 />
148 </div>
149 <div className={styles.contact__content}>
150 <h3 className={styles.contact__title}>Personal e-mail</h3>
151 <p className={styles.contact__value}>
152 <Link
153 to="mailto:kristof@marussy.com"
154 className={styles.contact__link}
155 >
156 kristof@marussy.com
157 </Link>{' '}
158 <span className={styles.small}>
159 <Link
160 to="https://keyoxide.org/7AADE6E800F1979D2A13EEBBB00C29F3D5A628AF"
161 className={clsx(
162 styles.contact__action,
163 styles.small__link,
164 )}
165 >
166 <GPGIcon alt="GPG key" className={styles.small__icon} />
167 </Link>
168 </span>
169 </p>
170 <p className={styles.contact__description}>
171 For messages about my projects, this website, or anything else
172 </p>
173 </div>
174 </div>
175 </div>
176 <div className={clsx('col', 'col--6', styles.col)}>
177 <div className={styles.contact}>
178 <div
179 className={clsx(
180 styles['contact__icon-holder'],
181 styles['contact__icon-holder--fediverse'],
182 )}
183 >
184 <FediverseIcon
185 className={clsx(
186 styles.contact__icon,
187 styles['contact__icon--fediverse'],
188 )}
189 />
190 </div>
191 <div className={styles.contact__content}>
192 <h3 className={styles.contact__title}>Follow me</h3>
193 <p className={styles.contact__value}>
194 <Link
195 to="https://pleroma.marussy.com/users/kristof"
196 className={styles.contact__link}
197 >
198 @kristof@marussy.com
199 </Link>
200 </p>
201 <p className={styles.contact__description}>
202 On the{' '}
203 <Link
204 to="https://fediverse.info"
205 className={styles.contact__action}
206 >
207 Fediverse
208 </Link>
209 , a diverse community of interconnected platforms
210 </p>
211 </div>
212 </div>
213 </div>
214 </div>
215 </div>
216 </Section>
217 );
218}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-08-30 06:15:03 +0000