From dac507c3b8de3c135bfb3c94600b93e8f069b01a Mon Sep 17 00:00:00 2001 From: Kristóf Marussy Date: Wed, 22 Nov 2023 19:55:45 +0100 Subject: refactor landing page --- src/components/landing/Section.module.css | 38 ++ src/components/landing/Section.tsx | 24 + src/components/landing/Subtitle.module.css | 10 + src/components/landing/Subtitle.tsx | 24 + src/components/landing/sections/Hero.module.css | 81 ++++ src/components/landing/sections/Hero.tsx | 129 ++++++ src/components/landing/sections/Resume.module.css | 121 +++++ src/components/landing/sections/Resume.tsx | 398 ++++++++++++++++ src/pages/index.module.css | 236 ---------- src/pages/index.tsx | 538 +--------------------- 10 files changed, 834 insertions(+), 765 deletions(-) create mode 100644 src/components/landing/Section.module.css create mode 100644 src/components/landing/Section.tsx create mode 100644 src/components/landing/Subtitle.module.css create mode 100644 src/components/landing/Subtitle.tsx create mode 100644 src/components/landing/sections/Hero.module.css create mode 100644 src/components/landing/sections/Hero.tsx create mode 100644 src/components/landing/sections/Resume.module.css create mode 100644 src/components/landing/sections/Resume.tsx delete mode 100644 src/pages/index.module.css (limited to 'src') diff --git a/src/components/landing/Section.module.css b/src/components/landing/Section.module.css new file mode 100644 index 0000000..3f2bbdc --- /dev/null +++ b/src/components/landing/Section.module.css @@ -0,0 +1,38 @@ +/* + * SPDX-FileCopyrightText: 2023 Kristóf Marussy + * + * SPDX-License-Identifier: MIT + */ + +.section { + display: flex; + flex-direction: column; + padding: 2rem; +} + +@media (max-width: 996px) { + .section { + padding-left: 0; + padding-right: 0; + } +} + +.section__title { + position: relative; + display: block; + --ifm-h2-font-size: 2rem; + margin: 0 auto 1rem auto; + padding-bottom: 0.25rem; +} + +.section__title::after { + content: ' '; + position: absolute; + height: 0.25rem; + width: 100%; + bottom: 0; + left: 0; + right: 0; + background: var(--ifm-color-primary); + transform: skew(-30deg, 0); +} diff --git a/src/components/landing/Section.tsx b/src/components/landing/Section.tsx new file mode 100644 index 0000000..f44272d --- /dev/null +++ b/src/components/landing/Section.tsx @@ -0,0 +1,24 @@ +/* + * SPDX-FileCopyrightText: 2023 Kristóf Marussy + * + * SPDX-License-Identifier: MIT + */ + +import type { ReactNode } from 'react'; + +import styles from './Section.module.css'; + +export default function Section({ + title, + children, +}: { + title: string; + children?: ReactNode; +}) { + return ( +
+

{title}

+ {children} +
+ ); +} diff --git a/src/components/landing/Subtitle.module.css b/src/components/landing/Subtitle.module.css new file mode 100644 index 0000000..9f5233c --- /dev/null +++ b/src/components/landing/Subtitle.module.css @@ -0,0 +1,10 @@ +/* + * SPDX-FileCopyrightText: 2023 Kristóf Marussy + * + * SPDX-License-Identifier: MIT + */ + +.subtitle { + --ifm-h3-font-size: 1.5rem; + margin: 1.5rem 0; +} diff --git a/src/components/landing/Subtitle.tsx b/src/components/landing/Subtitle.tsx new file mode 100644 index 0000000..d514f71 --- /dev/null +++ b/src/components/landing/Subtitle.tsx @@ -0,0 +1,24 @@ +/* + * SPDX-FileCopyrightText: 2023 Kristóf Marussy + * + * SPDX-License-Identifier: MIT + */ + +import type { ReactNode } from 'react'; + +import styles from './Subtitle.module.css'; + +export default function Subtitle({ + icon, + children, +}: { + icon: string; + children?: ReactNode; +}) { + return ( +

+ {icon !== undefined && <>{icon} } + {children} +

+ ); +} diff --git a/src/components/landing/sections/Hero.module.css b/src/components/landing/sections/Hero.module.css new file mode 100644 index 0000000..bc5c151 --- /dev/null +++ b/src/components/landing/sections/Hero.module.css @@ -0,0 +1,81 @@ +/* + * SPDX-FileCopyrightText: 2023 Kristóf Marussy + * + * SPDX-License-Identifier: MIT + */ + +.hero { + /* Reserve space for the bottom padding of the avatar in single-column mode. */ + padding-bottom: 2rem; + --ifm-link-color: #6ea1f7; + --ifm-link-hover-color: var(--ifm-link-color); +} + +.hero__col { + display: flex; + flex-direction: column; + justify-content: center; + padding-bottom: 2rem; +} + +.avatar { + align-items: center; +} + +.avatar__image { + width: 100%; + max-width: 298px; + border-radius: 100em; +} + +.introduction { + font-family: var(--ifm-font-family-base); + font-weight: 500; + --casl: 0; + font-size: 1.5rem; +} + +.introduction__name { + font-family: var(--ifm-heading-font-family); + font-weight: var(--ifm-heading-font-weight); + --casl: 1; + font-size: 2.5rem; + white-space: pre; +} + +.cta { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 1rem; +} + +.cta__button { + flex: 1; +} + +.contacts { + display: flex; + flex-direction: row; + flex-grow: 999999; + margin: 0 0 0 -0.5rem; + padding: 0; +} + +.contacts__item { + display: flex; + align-items: center; +} + +.contacts__icon { + padding: 0.375rem 0.5rem; + display: flex; + --ifm-link-color: var(--ifm-color-secondary); + --ifm-link-hover-color: var(--ifm-color-secondary-dark); + --ifm-link-text-decoration: none; +} + +.contacts__icon svg { + width: 2rem; + height: 2rem; +} 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 ( +
+
+
+
+ My photo +
+
+

+ Hi! 👋 I’m{' '} + Kristóf Marussy +

+

+ I’m a research fellow working at the{' '} + + 🔬 Critical Systems Research Group ( + ftsrg) + {' '} + at the{' '} + + 🏫 Department of Measurement and Information + Systems (MIT) + {' '} + at{' '} + + 🏛️ Budapest University of Technology and + Economics (BME) + + . My reasearch interests include graph generation, logic solvers, + formal verification, and applying these techniques for ensuring + the safety and correcness of critical systems. +

+

+ I also like free (as in liberty) and open source software. My + pronouns are he/him. +

+ +
+
+
+
+ ); +} diff --git a/src/components/landing/sections/Resume.module.css b/src/components/landing/sections/Resume.module.css new file mode 100644 index 0000000..246ebec --- /dev/null +++ b/src/components/landing/sections/Resume.module.css @@ -0,0 +1,121 @@ +/* + * SPDX-FileCopyrightText: 2023 Kristóf Marussy + * + * SPDX-License-Identifier: MIT + */ + +.cv { + position: relative; +} + +.cv::before { + content: ' '; + position: absolute; + width: 0.25rem; + top: 0.5rem; + bottom: 0; + left: 0.5rem; + background: var(--ifm-color-primary); + transform: skew(0, -30deg); +} + +.cv__item { + position: relative; + list-style-type: none; +} + +.cv__item::before { + position: absolute; + content: ' '; + top: 0; + left: -2rem; + width: 0.75rem; + height: 0.75rem; + background: var(--ifm-color-white); + border: 0.25rem solid var(--ifm-color-primary); + border-radius: 100em; +} + +[data-theme='dark'] .cv__item::before { + background: var(--ifm-background-color); +} + +.cv__item p { + margin: 1rem 0; +} + +.cv__title { + --casl: 0; +} + +.cv__times { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 0.5rem; +} + +.cv__time { + position: relative; + display: inline-block; + padding: 0.25rem 0.5em; + font-size: 0.9rem; + --mono: 1; +} + +.cv__time::before { + content: ' '; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; + background: var(--ifm-color-emphasis-200); + transform: skew(-12deg, 0); +} + +[data-theme='dark'] .cv__time::before { + background: var(--ifm-pre-background); +} + +[data-theme='dark'] .cv__time a { + --ifm-link-color: var(--ifm-color-primary-light); + --ifm-link-hover-color: var(--ifm-color-primary-light); +} + +.cv__awarddesc { + font-size: 0.875rem; + color: var(--ifm-color-emphasis-800); +} + +[data-theme='dark'] .cv__awarddesc { + color: var(--ifm-color-emphasis-600); +} + +.cv__activities { + margin: 1em 0; +} + +.cv__activity { + margin: 1em 0; + list-style-type: disc; +} + +.cv__activity--tight { + margin: 0; +} + +.thesis-links { + display: flex; + column-gap: 0.5rem; + row-gap: 1rem; + flex-wrap: wrap; + align-items: baseline; + width: 100%; + margin: 1rem 0; +} + +.thesis-links__link { + font-size: 0.875rem; +} diff --git a/src/components/landing/sections/Resume.tsx b/src/components/landing/sections/Resume.tsx new file mode 100644 index 0000000..40ceeb0 --- /dev/null +++ b/src/components/landing/sections/Resume.tsx @@ -0,0 +1,398 @@ +/* + * SPDX-FileCopyrightText: 2023 Kristóf Marussy + * + * SPDX-License-Identifier: MIT AND CC-BY-4.0 + */ + +import clsx from 'clsx'; + +import Section from '@site/src/components/landing/Section'; +import Subtitle from '@site/src/components/landing/Subtitle'; + +import styles from './Resume.module.css'; + +export default function Resume() { + return ( +
+
+
+
+ Education + + Scholarships and awards + + Teaching and mentoring + +
+
+ Professional experience + + Research visits + + Academic service + +
+
+
+
+ ); +} diff --git a/src/pages/index.module.css b/src/pages/index.module.css deleted file mode 100644 index 2eb2c5f..0000000 --- a/src/pages/index.module.css +++ /dev/null @@ -1,236 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2023 Kristóf Marussy - * - * SPDX-License-Identifier: MIT - */ - -.hero { - /* Reserve space for the bottom padding of the avatar in single-column mode. */ - padding-bottom: 2rem; - --ifm-link-color: #6ea1f7; - --ifm-link-hover-color: var(--ifm-link-color); -} - -.hero__col { - display: flex; - flex-direction: column; - justify-content: center; - padding-bottom: 2rem; -} - -.avatar { - align-items: center; -} - -.avatar__image { - width: 100%; - max-width: 298px; - border-radius: 100em; -} - -.introduction { - font-family: var(--ifm-font-family-base); - font-weight: 500; - --casl: 0; - font-size: 1.5rem; -} - -.introduction__name { - font-family: var(--ifm-heading-font-family); - font-weight: var(--ifm-heading-font-weight); - --casl: 1; - font-size: 2.5rem; - white-space: pre; -} - -.cta { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 1rem; -} - -.cta__button { - flex: 1; -} - -.contacts { - display: flex; - flex-direction: row; - flex-grow: 999999; - margin: 0 0 0 -0.5rem; - padding: 0; -} - -.contacts__item { - display: flex; - align-items: center; -} - -.contacts__icon { - padding: 0.375rem 0.5rem; - display: flex; - --ifm-link-color: var(--ifm-color-secondary); - --ifm-link-hover-color: var(--ifm-color-secondary-dark); - --ifm-link-text-decoration: none; -} - -.contacts__icon svg { - width: 2rem; - height: 2rem; -} - -.section { - display: flex; - flex-direction: column; - padding: 2rem; -} - -@media (max-width: 996px) { - .section { - padding-left: 0; - padding-right: 0; - } -} - -.section__title { - position: relative; - display: block; - --ifm-h2-font-size: 2rem; - margin: 0 auto 1rem auto; - padding-bottom: 0.25rem; -} - -.section__title::after { - content: ' '; - position: absolute; - height: 0.25rem; - width: 100%; - bottom: 0; - left: 0; - right: 0; - background: var(--ifm-color-primary); - transform: skew(-30deg, 0); -} - -.section__subtitle { - --ifm-h3-font-size: 1.5rem; - margin: 1.5rem 0; -} - -.cv { - position: relative; -} - -.cv::before { - content: ' '; - position: absolute; - width: 0.25rem; - top: 0.5rem; - bottom: 0; - left: 0.5rem; - background: var(--ifm-color-primary); - transform: skew(0, -30deg); -} - -.cv__item { - position: relative; - list-style-type: none; -} - -.cv__item::before { - position: absolute; - content: ' '; - top: 0; - left: -2rem; - width: 0.75rem; - height: 0.75rem; - background: var(--ifm-color-white); - border: 0.25rem solid var(--ifm-color-primary); - border-radius: 100em; -} - -[data-theme='dark'] .cv__item::before { - background: var(--ifm-background-color); -} - -.cv__item p { - margin: 1rem 0; -} - -.cv__title { - --casl: 0; -} - -.cv__times { - display: flex; - flex-wrap: wrap; - align-items: baseline; - padding-left: 0.25rem; - gap: 0.5rem; -} - -.cv__time { - position: relative; - display: inline-block; - padding: 0.25rem 0.5em; - font-size: 0.9rem; - --mono: 1; -} - -.cv__time::before { - content: ' '; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: -1; - background: var(--ifm-color-emphasis-200); - transform: skew(-12deg, 0); -} - -[data-theme='dark'] .cv__time::before { - background: var(--ifm-pre-background); -} - -[data-theme='dark'] .cv__time a { - --ifm-link-color: var(--ifm-color-primary-light); - --ifm-link-hover-color: var(--ifm-color-primary-light); -} - -.cv__awarddesc { - font-size: 0.875rem; - color: var(--ifm-color-emphasis-800); -} - -[data-theme='dark'] .cv__awarddesc { - color: var(--ifm-color-emphasis-600); -} - -.cv__activities { - margin: 1em 0; -} - -.cv__activity { - margin: 1em 0; - list-style-type: disc; -} - -.cv__activity--tight { - margin: 0; -} - -.thesis-links { - display: flex; - column-gap: 0.5rem; - row-gap: 1rem; - flex-wrap: wrap; - align-items: baseline; - width: 100%; - margin: 1rem 0; -} - -.thesis-links__link { - font-size: 0.875rem; -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5f1f5bb..b8e986d 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -4,543 +4,23 @@ * SPDX-License-Identifier: MIT */ -import clsx from 'clsx'; - import Layout from '@theme/Layout'; -import { - FediverseIcon, - GithubIcon, - GoogleScholarIcon, - LinkedInIcon, - OrcidIcon, -} from '@site/src/components/icons'; +import Hero from '@site/src/components/landing/sections/Hero'; +import Resume from '@site/src/components/landing/sections/Resume'; +import Section from '@site/src/components/landing/Section'; import avatar from './avatar.jpg'; -import styles from './index.module.css'; export default function Home() { return ( -
-
-
-
- My photo -
-
-

- Hi! 👋 I’m{' '} - - Kristóf Marussy - -

-

- I’m a research fellow working at the{' '} - - 🔬 Critical Systems Research Group ( - ftsrg) - {' '} - at the{' '} - - 🏫 Department of Measurement and Information - Systems (MIT) - {' '} - at{' '} - - 🏛️ Budapest University of Technology and - Economics (BME) - - . My reasearch interests include graph generation, logic - solvers, formal verification, and applying these techniques for - ensuring the safety and correcness of critical systems. -

-

- I also like free (as in liberty) and open source software. My - pronouns are he/him. -

- -
-
-
-
-
-

Resume

-
-
-
-

🎓 Education

- -

- 🏅 Scholarships and awards -

- -

- 👨‍🏫 Teaching and mentoring -

- -
-
-

- 👨‍💼 Professional experience -

- -

- 🏕️ Research visits -

- -

- 📔 Academic service -

- -
-
-
-
+ +
+
+
+ +
); } -- cgit v1.2.3-54-g00ecf