feat: stricter lint, check pipelines, docker-containers, pnpm

src/portfolio/sections/Intro/Intro.tsx

@@ -0,0 +1,17 @@
+import styles from "../../styling/intro.module.scss";
+import TopBar from "./TopBar";
+import IntroContent from "./IntroContent";
+import { getGreeting } from "./helpers";
+
+const Intro = (): JSX.Element => {
+	const greeting = getGreeting();
+
+	return (
+		<section className={styles.section}>
+			<TopBar/>
+			<IntroContent greeting={greeting}/>
+		</section>
+	);
+};
+
+export default Intro;

src/portfolio/sections/Intro/IntroContent.tsx

@@ -0,0 +1,39 @@
+import Image from "next/image";
+import styles from "../../styling/intro.module.scss";
+import profilePic from "../../../../public/portfolio/profile.png";
+
+interface IIntroContentProps {
+	greeting: string;
+}
+
+const IntroContent = ({ greeting }: IIntroContentProps): JSX.Element => {
+	return (
+		<div className={styles.mainContent}>
+			<div className={styles.text} data-aos={"fade-in"} data-aos-duration={"500"}>
+				<div className={styles.larger}>
+					<span className={styles.greeting}>
+						{greeting}
+					</span>
+					<br/>
+						I am
+					<b> Patryk Kuchta, </b>
+						an aspiring
+					<br/>
+					<b>Artificial Intelligence Scientist</b>.
+				</div>
+				<span data-aos={"fade-in"} data-aos-offset={"200"}>
+					<i>and yes, the greeting is synced to your time.</i>
+				</span>
+			</div>
+			<div className={styles.profileContainer}>
+				<Image
+					src={profilePic}
+					alt={"Frontal image showing Patryk Kuchta"}
+					fill={true}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default IntroContent;

src/portfolio/sections/Intro/TopBar.tsx

@@ -0,0 +1,26 @@
+import Image from "next/image";
+import styles from "../../styling/intro.module.scss";
+import logo from "../../../../public/portfolio/logo.svg";
+
+const TopBar = (): JSX.Element => {
+	return (
+		<header className={styles.topBar} data-aos={"zoom-in-down"} data-aos-duration={"500"}>
+			<div className={styles.row}>
+				<div className={styles.logoContainer}>
+					<Image src={logo} alt={"Kuchta logo"} fill={true}/>
+				</div>
+				<a href={"#achievements"}>Achievements</a>
+				<a href={"#experience"}>Experience</a>
+				<a href={"#projects"}>Projects</a>
+				<a href={"#skills"}>Skills</a>
+			</div>
+			<div className={styles.left}>
+				<a href={"mailto: patrick@kuchta.uk"}>patrick@kuchta.uk</a>
+				<span>/</span>
+				<a href={"mailto: patryk@kuchta.uk"}>patryk@kuchta.uk</a>
+			</div>
+		</header>
+	);
+};
+
+export default TopBar;

src/portfolio/sections/Intro/helpers.ts

@@ -0,0 +1,10 @@
+export const getGreeting = (): string => {
+	const hour = new Date().getHours();
+	if (hour > 4 && hour < 12) {
+		return "Good Morning!";
+	} else if (hour < 18) {
+		return "Good Afternoon!";
+	} else {
+		return "Good Evening!";
+	}
+};

src/portfolio/sections/Intro/index.ts

@@ -0,0 +1 @@
+export { default } from "./Intro";