Initial commit

src/portfolio/MainPage.tsx

@@ -0,0 +1,19 @@
+import Intro from "@/src/portfolio/sections/Intro";
+import Projects from "@/src/portfolio/sections/Projects";
+import Experience from "@/src/portfolio/sections/Experience";
+import Achievements from "@/src/portfolio/sections/Achievements";
+import Footer from "@/src/portfolio/sections/Footer";
+
+const MainPage = () => {
+	return (
+		<div>
+			<Intro/>
+			<Achievements/>
+			<Experience/>
+			<Projects/>
+			<Footer/>
+		</div>
+	);
+};
+
+export default MainPage;

src/portfolio/data/certificateData.ts

@@ -0,0 +1,36 @@
+import {AwardArgs} from "@/src/portfolio/helpers/Certificate";
+
+const certificateData : AwardArgs[] = [
+	{
+		title: "Westfield Trust Prize",
+		institution: "Queen Mary University of London",
+		city: "London",
+		awardDate: "July 2023",
+		notes: [
+			"Academic award for exceptional scholastic achievement"
+		]
+	},
+	{
+		title: "IELTS Academic in English",
+		institution: "British Consulate",
+		city: "Warsaw",
+		awardDate: "July 2020",
+		notes: [
+			"Overall: 7.5 / 9.0, equivalent to C1",
+		]
+	},
+	{
+		title: "Project Management Fundamentals",
+		institution: "Project Management Institute",
+		city: "Warsaw",
+		awardDate: "April 2019",
+	},
+	{
+		title: "Project Management Principles",
+		institution: "Project Management Institute",
+		city: "Warsaw",
+		awardDate: "April 2019",
+	}
+];
+
+export default certificateData;

src/portfolio/data/educationData.ts

@@ -0,0 +1,43 @@
+import {EducationArgs} from "@/src/portfolio/helpers/Education";
+
+const educationData : EducationArgs[] = [
+	{
+		title: "Master of Science",
+		subtitle: "Artificial Intelligence",
+		institution: "University Of Edinburgh",
+		city: "Edinburgh",
+		startDate: "September 2023",
+		notes: [
+			"Expected graduation in September 2024"
+		]
+	},
+	{
+		title: "Bachelor of Science",
+		subtitle: "Computer Science",
+		institution: "Queen Mary University of London",
+		city: "London",
+		startDate: "September 2020",
+		endDate: "July 2023",
+		notes: [
+			"Graduated with Honours, First Class",
+			"Recipient of the Westfield Trust Academic Prize",
+			"Graduated with overall average at 90%"
+		]
+	},
+	{
+		title: "High-school Education",
+		subtitle: "advanced IT, Maths and Physics",
+		institution: "Zamoyski High-school",
+		city: "Warsaw",
+		startDate: "September 2017",
+		endDate: "July 2020",
+		notes: [
+			"Final exam in Computer Science: 98% percentile",
+			"Final exam in Physics: 97% percentile",
+			"Final exam in Mathematics: 92% percentile"
+		],
+		useWith: true,
+	}
+];
+
+export default educationData;

src/portfolio/data/workExperienceData.ts

@@ -0,0 +1,77 @@
+import {WorkExperienceArgs} from "@/src/portfolio/helpers/WorkExperience";
+
+const workExperienceData : WorkExperienceArgs[] = [
+	{
+		industry: "Software",
+		title: "Software Developer Intern",
+		company: "Softwire",
+		city: "London",
+		country: "United Kingdom",
+		startDate: "June 2023"
+	},
+	{
+		industry: "Education",
+		title: "Laboratory Demonstrator",
+		company: "Queen Mary University",
+		city: "London",
+		country: "United Kingdom",
+		startDate: "September 2021",
+		endDate: "June 2023"
+	},
+	{
+		industry: "Education",
+		title: "Tutor",
+		company: "FireTechCamp",
+		city: "London",
+		country: "United Kingdom",
+		startDate: "January 2022",
+		endDate: "January 2023"
+	},
+	{
+		industry: "Education",
+		title: "Coding Tutor",
+		company: "Kodland",
+		city: "London",
+		country: "United Kingdom",
+		startDate: "May 2021",
+		endDate: "August 2023"
+	},
+	{
+		industry: "Hospitality",
+		title: "Bartender",
+		company: "Delaware North",
+		city: "London",
+		country: "United Kingdom",
+		startDate: "December 2021",
+	},
+	{
+		industry: "Hospitality",
+		title: "Customer Assistant",
+		company: "Morrisons",
+		city: "London",
+		country: "United Kingdom",
+		startDate: "September 2020",
+		endDate: "September 2022"
+	},
+	{
+		industry: "Hospitality",
+		title: "Customer Assistant",
+		company: "McDonald's",
+		city: "Warsaw",
+		country: "Poland",
+		startDate: "July 2018",
+		endDate: "August 2018"
+	},
+];
+
+// todo update
+export const workExperienceParagraph  =
+	"My work experience started when I was 16 years old, starting with hospitality and retail-based\n" +
+	"positions. Although they are not the most relevant to my career path, I still believe there I had\n" +
+	"learned plenty from them in regards to depending on each other, reliability and teamwork. Since last\n" +
+	"year I have been moving more toward the education industry. I have experience working as a tutor in\n" +
+	"a significant number of companies. Furthermore, I am working as a Laboratory Demonstrator for Queen\n" +
+	"Mary University of London. This position involves assisting, teaching and marking students, which is\n" +
+	"a great opportunity to broaden my IT knowledge and improve my interpersonal skills.";
+
+export default workExperienceData;

src/portfolio/helpers/Certificate.tsx

@@ -0,0 +1,51 @@
+import {FC} from "react";
+import styles from "../styling/achievements.module.scss";
+
+export type AwardArgs = {
+	institution : string,
+	awardDate: string,
+	title : string,
+	city : "Warsaw" | "London" | "Edinburgh",
+	notes? : string[]
+}
+
+const Award : FC<AwardArgs> = (props) => {
+
+	const getCountryEmoji = () => {
+		switch (props.city) {
+			case "Warsaw":
+				return "🇵🇱";
+			case "London":
+				return "🏴󠁧󠁢󠁥󠁮󠁧󠁿";
+			case "Edinburgh":
+				return "🏴󠁧󠁢󠁳󠁣󠁴󠁿";
+		}
+	};
+
+	return (
+		<div className={styles.education} data-aos={"fade-left"}>
+			<div>
+				<span className={styles.title}>{props.title}</span>
+				<br/>
+				from <i>{props.institution}</i>
+				{props.notes?
+					<ul className={styles.notes}>
+						{props.notes.map((note, index) =>
+							<li key={index}>
+								{note}
+							</li>
+						)}
+					</ul>
+					: ""
+				}
+			</div>
+			<span className={styles.otherDetails}>
+				<div className={styles.location}>{props.city} {getCountryEmoji()}</div>
+				<hr/>
+				{props.awardDate}
+			</span>
+		</div>
+	);
+};
+
+export default Award;

src/portfolio/helpers/Education.tsx

@@ -0,0 +1,54 @@
+import {FC} from "react";
+import styles from "../styling/achievements.module.scss";
+
+export type EducationArgs = {
+    institution : string,
+    startDate : string,
+    title : string,
+	subtitle : string,
+    city : "Warsaw" | "London" | "Edinburgh",
+    endDate? : string,
+	notes? : string[]
+	useWith? : true,
+}
+
+const Education : FC<EducationArgs> = (props) => {
+
+	const getCountryEmoji = () => {
+		switch (props.city) {
+			case "Warsaw":
+				return "🇵🇱";
+			case "London":
+				return "🏴󠁧󠁢󠁥󠁮󠁧󠁿";
+			case "Edinburgh":
+				return "🏴󠁧󠁢󠁳󠁣󠁴󠁿";
+		}
+	};
+
+	return (
+		<div style={{fontSize: "1.1em"}} className={styles.education} data-aos={"fade-right"}>
+			<div>
+				<span className={styles.title}>{props.title}</span> in <b>{props.subtitle}</b>
+				<br/>
+				at <i>{props.institution}</i>
+				{props.notes?
+					<ul className={styles.notes}>
+						{props.notes.map((note, index) =>
+							<li key={index}>
+								{note}
+							</li>
+						)}
+					</ul>
+					: ""
+				}
+			</div>
+			<span className={styles.otherDetails}>
+				<div className={styles.location}>{props.city} {getCountryEmoji()}</div>
+				<hr/>
+				{props.endDate ? props.startDate + " - " + props.endDate : "Since " + props.startDate}
+			</span>
+		</div>
+	);
+};
+
+export default Education;

src/portfolio/helpers/ProgressBar.tsx

@@ -0,0 +1,74 @@
+import {FC, MutableRefObject, useEffect, useRef, useState} from "react";
+
+
+type args = {
+    percentage : number,
+    customScore? : string,
+}
+const ProgressBar : FC<args> = ({percentage,customScore}) => {
+	const ref = useRef<HTMLDivElement>() as MutableRefObject<HTMLDivElement>;
+	const onScreen = useOnScreen(ref);
+
+	const [current,setCurrent] = useState(0);
+
+	useEffect(()=>{
+		if(onScreen && current==0)
+		{
+			let counter = 0;
+			const id = setInterval(() => {
+				if(counter<percentage*2)
+				{
+					counter += (percentage/100);
+					setCurrent(counter);
+				}
+				else{
+					if(counter>percentage*2)
+					{
+						setCurrent(percentage*2);
+					}
+					clearInterval(id);
+				}
+			},25);
+		}
+	},[onScreen]);
+
+	return (
+		<div className={"pBContainer"} ref={ref}>
+			<div className={"progressBar"}>
+				<div className={"inner"} style={{width : `${current/2}%`}}></div>
+			</div>
+			<div className={"below"} style={{width : customScore? "100%" : `${current/2}%`, textAlign: "right"}}>{customScore? customScore : Math.ceil(current/2)+"%"}</div>
+		</div>
+
+	);
+};
+
+function useOnScreen(ref : MutableRefObject<HTMLDivElement>, rootMargin = "0px") {
+	// State and setter for storing whether element is visible
+	const [isIntersecting, setIntersecting] = useState(false);
+	useEffect(() => {
+		const observer = new IntersectionObserver(
+			([entry]) => {
+				// Update our state when observer callback fires
+				setIntersecting(entry.isIntersecting);
+			},
+			{
+				rootMargin,
+			}
+		);
+		if (ref.current) {
+			observer.observe(ref.current);
+		}
+		return () => {
+			try{
+				observer.unobserve(ref.current);
+			}
+			catch (e) {
+				console.log("REPORTED: observer failure :/");
+			}
+		};
+	}, []); // Empty array ensures that effect is only run on mount and unmount
+	return isIntersecting;
+}
+
+export default ProgressBar;

src/portfolio/helpers/Project.tsx

@@ -0,0 +1,44 @@
+import {FaGithubSquare} from "react-icons/fa";
+import {BiLinkExternal} from "react-icons/bi";
+import {FC} from "react";
+import Technology from "@/src/portfolio/helpers/Technology";
+
+type args = {
+    path : string,
+    title : string,
+    text : string,
+    tech : string[],
+    github? : string,
+    access? : string
+}
+
+const Project : FC<args> = ({path, title, text, tech, github, access}) => {
+	let i = 0;
+	return (
+		<div className={"fullPage project dark"}>
+			<div className={"row"}>
+				<div className={"col-md-7"}>
+					<img src={"portfolio/projects/" + path} alt={title} className={"picture"} data-aos={"fade-in"}/>
+					<h2 data-aos={"fade-right"}>Technologies Used:</h2>
+					<div className={"techContainer"}>
+						{tech.map((value) => {
+							i++;
+							return <Technology key={i} name={value}/>;
+						})}
+					</div>
+				</div>
+
+				<div className={"col-md-5"}>
+					<h1 data-aos={"fade-left"}>{title}</h1>
+					<p data-aos={"fade-left"}>
+						{text}
+					</p>
+					{github? <a href={github} className={"icon"} data-aos={"fade-left"}>Github repository of the project<FaGithubSquare size={75}></FaGithubSquare></a>:""}
+					{access? <a href={access} className={"icon"} data-aos={"fade-left"}>View and use the project here<BiLinkExternal size={75}></BiLinkExternal></a>:""}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Project;

src/portfolio/helpers/Technology.tsx

@@ -0,0 +1,27 @@
+
+import {FC} from "react";
+import ProgressBar from "@/src/portfolio/helpers/ProgressBar";
+
+type args = {
+    name : string,
+    customScore? : string,
+    score? : number
+}
+
+const Technology : FC<args> = ({name, score, customScore}) => {
+	if (score) {
+		return (
+			<div id={name.toLowerCase()} className={"technology"} data-aos={"fade-in"}>
+				{name}
+				<ProgressBar percentage={score} customScore={customScore}/>
+			</div>
+		);
+	}
+	return (
+		<a href={"#"+name.toLowerCase()} className={"technology"} data-aos={"fade-in"}>
+			{name}
+		</a>
+	);
+};
+
+export default Technology;

src/portfolio/helpers/WorkExperience.tsx

@@ -0,0 +1,42 @@
+import {FC} from "react";
+import styles from "../styling/experience.module.scss";
+
+export type WorkExperienceArgs = {
+    industry? : "Education" | "Software" | "Hospitality",
+    company : string,
+    startDate : string,
+    title : string,
+    city : string,
+    country : string,
+    endDate? : string
+}
+
+const WorkExperience : FC<WorkExperienceArgs> = (props) => {
+
+	const getEmojiForIndustry = () => {
+		switch (props.industry) {
+			case "Education":
+				return "🎓";
+			case "Software":
+				return "👨‍💻";
+			case "Hospitality":
+				return "🛎️";
+		}
+	};
+
+	return (
+		<div className={styles.job} data-aos={"fade-left"}>
+			<span className={styles.largerText}>
+				<b>{props.title}</b><br/>
+				at <span className={styles.redText}>{props.company}</span><br/>
+			</span>
+			in <b>{props.city}, {props.country}.</b>
+			<div className={styles.industry}>{getEmojiForIndustry()} {props.industry}</div>
+			<hr/>
+			{props.endDate ? props.startDate + " - " + props.endDate : "Since " + props.startDate}
+
+		</div>
+	);
+};
+
+export default WorkExperience;

src/portfolio/sections/Achievements.tsx

@@ -0,0 +1,56 @@
+import Certificate from "@/src/portfolio/helpers/Certificate";
+import Education from "@/src/portfolio/helpers/Education";
+import React from "react";
+import styles from "../styling/achievements.module.scss";
+import educationData from "@/src/portfolio/data/educationData";
+import certificateData from "@/src/portfolio/data/certificateData";
+
+const Achievements = () => {
+	return (
+		<div className={styles.section} id={"achievements"}>
+			<div>
+				<h2>Education:</h2>
+				{
+					educationData.map((entry, index) => {
+						return <Education {...entry} key = {index}/>;
+					})
+				}
+			</div>
+			<div>
+				<h2>Certificates and Awards:</h2>
+				{
+					certificateData.map((entry, index) => {
+						return <Certificate {...entry} key = {index}/>;
+					})
+				}
+			</div>
+			{/*
+					<h2>Programming Languages</h2>
+					<Skill name={"Java"} score={95} />
+					<Skill name={"Python"} score={90} />
+					<Skill name={"JavaScript"} score={85} />
+					<Skill name={"Typescript"} score={80} />
+					<Skill name={"C++"} score={60} />
+					<Skill name={"PHP"} score={30} />
+					<h2>Human Languages</h2>
+					<Skill name={"English"} score={80} customScore={"Fluent"}/>
+					<Skill name={"Polish"} score={100} customScore={"Native"}/>
+					<Skill name={"German"} score={65} customScore={"Intermediate"}/>
+				</div>
+				<div className={"col-md-4"}>
+					<h2>Other Skills</h2>
+					<Skill name={"HTML"} score={100} />
+					<Skill name={"CSS"} score={100} />
+					<Skill name={"SQL"} score={95} />
+					<Skill name={"React.js"} score={90} />
+					<Skill name={"Bootstrap"} score={70} />
+					<Skill name={"Photo-editing"} score={65} />
+					<Skill name={"Express.js"} score={60} />
+					<Skill name={"Linux"} score={55} />
+					<Skill name={"3D Design"} score={50} />
+					*/}
+		</div>
+	);
+};
+
+export default Achievements;

src/portfolio/sections/Experience.tsx

@@ -0,0 +1,56 @@
+import {Splide, SplideSlide} from "@splidejs/react-splide";
+import {useEffect, useState} from "react";
+import styles from "../styling/experience.module.scss";
+import WorkExperience from "@/src/portfolio/helpers/WorkExperience";
+import workExperienceData, {workExperienceParagraph} from "@/src/portfolio/data/workExperienceData";
+
+const Experience = () => {
+	const calcPagesOnWidth = (width : number) => {
+		return Math.floor(width / 900 + 1);
+	};
+
+	const [pages, setPages] = useState(calcPagesOnWidth(1000));
+
+	useEffect(() => {
+
+		setPages(calcPagesOnWidth(window.innerWidth));
+		const handleResize = () => {
+			setPages(calcPagesOnWidth(window.innerWidth));
+		};
+
+		window.addEventListener("resize", handleResize);
+
+		return () => {
+			window.removeEventListener("resize", handleResize);
+		};
+	}, []);
+
+	return (
+		<div className={styles.section} id={"experience"}>
+			<h2>Work Experience</h2>
+			<p data-aos={"fade-right"}>
+				{workExperienceParagraph}
+			</p>
+			<Splide
+				options={{
+					rewind: true,
+					perPage: pages,
+					focus: "center",
+					start: 0
+				}}
+			>
+				{
+					workExperienceData.map((entry, index) =>
+						<SplideSlide key={"outer"+index}>
+							<WorkExperience
+								{...entry} key={"inner"+index}
+							/>
+						</SplideSlide>
+					)
+				}
+			</Splide>
+		</div>
+	);
+};
+
+export default Experience;

src/portfolio/sections/Footer.tsx

@@ -0,0 +1,10 @@
+const Footer = () => {
+	return (
+		<footer className={"dark footer"}>
+			<a href={"tutor.html"} data-aos={"zoom-in"}>Looking for an amazing tutor?</a><br/>
+            Copyright &copy; Patryk Kuchta 2022
+		</footer>
+	);
+};
+
+export default Footer;

src/portfolio/sections/Intro.tsx

@@ -0,0 +1,66 @@
+import styles from "../styling/intro.module.scss";
+import Image from "next/image";
+import profilePic from "../../../public/portfolio/profile.png";
+import logo from "../../../public/portfolio/logo.svg";
+
+const Intro = () => {
+
+	const greeting = () => {
+		const hour = new Date().getHours();
+		if (hour > 4 && hour < 12) {
+			return "Good Morning!";
+		} else if (hour < 18) {
+			return "Good Afternoon!";
+		} else {
+			return "Good Evening!";
+		}
+
+	};
+
+	return (
+		<section className={styles.section}>
+			<header className={styles.topBar} data-aos={"zoom-in-down"} data-aos-duration={"1000"}>
+				<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={"tel:07467174589"}>07467174589</a>
+				</div>
+			</header>
+			<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>
+						<br/>
+							an aspiring
+						<br/>
+						<b>Computer 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>
+		</section>
+	);
+};
+
+export default Intro;

src/portfolio/sections/Projects.tsx

@@ -0,0 +1,97 @@
+import {Splide, SplideSlide} from "@splidejs/react-splide";
+import Project from "@/src/portfolio/helpers/Project";
+
+const Projects = () => {
+	return (
+		<div className={"fullPage projects gallery"} id={"projects"}>
+			<Splide
+				options={{
+					rewind: true,
+					type: "loop",
+					perPage: 1,
+				}}
+			>
+				<SplideSlide>
+					<Project path={"cryptogram.png"} title={"Cryptocurrency wallet prototype"}
+						text={"This is one of my academic projects, the prototype that you can see in the figure was created from the ground up starting with the domain analysis for our idea. We have worked as a group of 6, where I have taken the position of a manager assigning tasks, keeping track of deadlines and checking the quality of work of others. There were lots of interesting challenges creating the prototype itself, like learning how to create a RestAPI, but the biggest challenge was effective teamwork, in which I believe we have succeeded, having all of our group contributing a significant work and having only minor problems with code integration. This project has won the best project award."}
+						tech={["TYPESCRIPT", "REACT.JS", "HTML", "CSS", "EXPRESS.JS", "JAVASCRIPT"]}
+						github={"https://github.com/KuchtaVR6/CryptoGramProject"}
+					/>
+				</SplideSlide>
+
+				<SplideSlide>
+					<Project path={"photocast.png"} title={"Fully functional weather app"}
+						text={"This is also one of my academic projects, where the goal was to create a fully functional weather application with one stakeholder in mind, we have chosen to create an application tailored for photographers. While developing this application I have learned about creating a very usable and minimalistic User Interface, along with working with APIs. Furthermore, I have gained experience working in a team, where I also became the manager of the project.  "}
+						tech={["REACT.JS", "HTML", "JAVASCRIPT", "CSS"]}
+						github={"https://github.com/KuchtaVR6/PhotoCa.st"}
+						access={"photocast.html"}
+					/>
+				</SplideSlide>
+
+				<SplideSlide>
+					<Project path={"port2.png"} title={"Portfolio website for an Architect"}
+						text={"Another professional website, that I have created is a portfolio website for an Architect. The design was a vital part of the whole experience as an Architect needs to exhibit their design language. The creation of this website involved using HTML, CSS and Javascript. Javascript is mainly used for the integrated gallery view of each project. Whilst I didn't come up with the design, I was tasked with translating sketches into code. Furthermore, Bootstrap was used to ensure that the website still looks stunning on a mobile device or a vertical screen."}
+						tech={["JAVASCRIPT", "CSS", "HTML", "BOOTSTRAP"]}
+						github={"https://github.com/KuchtaVR6/Portfolio-for-an-Architect"}
+						access={"https://aleksandrakuchta.co.uk/"}
+					/>
+				</SplideSlide>
+
+				<SplideSlide>
+					<Project path={"port1.png"} title={"My previous portfolio website"}
+						text={"This website was created as a challenge to myself to create an eye-pleasing and portable website with limited time. I decided to make it purely using HTML and CSS, and for the portability, I have used Bootstrap CSS. The resulting product is an informative, simple and good looking portfolio, which I was quite happy with. Throughout this academic year, I have gained more confidence in using React, I have decided to remake my portfolio this time with a more interesting and responsive design in mind, whilst maintaining the readability of the older version."}
+						tech={["HTML", "CSS", "BOOTSTRAP"]}
+						github={"https://github.com/KuchtaVR6/porfolio2021"}
+						access={"portfolio/view/index.html"}
+					/>
+				</SplideSlide>
+
+				<SplideSlide>
+					<Project
+						path={"proj2.png"}
+						title={"A discord bot for colourful messages"}
+						text={"To further expand my knowledge in python and APIs, I developed a fully functional bot that creates embedded messages. Although the task might seem not that hard, I gave myself a requirement that the system must have professional-grade exception catching and an interface that will make it very easy to use by someone less fluent in command based interaction. This made it a much bigger project with extensive testing and a steep learning curve. Even though it was my third discord bot this one was the most challenging and I have learned a lot from writing it."}
+						tech={["PYTHON", "HTML"]}
+						github={"https://github.com/KuchtaVR6/EmbederBot"}
+						access={"https://discord.com/api/oauth2/authorize?client_id=819208892834644008&permissions=0&scope=bot"}
+					/>
+				</SplideSlide>
+
+
+				<SplideSlide>
+					<Project
+						path={"proj1.png"}
+						title={"DIY AndroidAuto"}
+						text={"A project that I did during the first lockdown, was creating an AndroidAuto based infotainment system for my Dads car. This project gave me a chance to work with Linux, Python, RaspberryPi, 3D printing and design (in Blender), soldering, relays and electronics in general. It had all features of a full AndroidAuto experience including wake on Ignition, separate volume adjustment and a touchscreen. Because I was only using the most basic electronic components possible this allowed me to design and create electrical circuits. Furthermore, a lot of parts were 3D printed and I had to ensure that components that I created were shake and heat resistant so they can survive in a car environment."}
+						tech={["PYTHON", "LINUX", "3D DESIGN"]}
+					/>
+				</SplideSlide>
+
+				<SplideSlide>
+					<Project
+						path={"tutor.png"}
+						title={"My private tutoring website"}
+						text={ "This website was designed with accessibility and interactivity in mind. I created the front-end using the React library to make the client-side dynamic and eye-pleasing. In addition to stunning animations, the website has a \"contact me\" button that automatically sends two emails. Implementing this functionality has given me confidence in setting up DNS records and email certifications. Furthermore, I have gained knowledge in Security Engineering by researching and patching potential exploits in the systems."}
+						tech={["REACT.JS", "HTML", "JAVASCRIPT","PHP", "CSS", "BOOTSTRAP"]}
+						access={"tutor.html"}
+						github={"https://github.com/KuchtaVR6/Portfolio"}
+					/>
+				</SplideSlide>
+
+				<SplideSlide>
+					<Project
+						path={"port3.png"}
+						title={"My current portfolio website"}
+						text={"And finally, this website is my most recent project. Design-wise I wanted to keep the website minimalistic but stunning at the same time to show my skills, and I have kept accessibility in mind. I had created this project with plentiful react to experience and I created this website with a very high standard of code and with reusability in mind so that I don't have to rewrite this website in the future. Admittedly I will probably end up doing it anyway because I love coding and improving my websites. "}
+						tech={["REACT.JS", "HTML", "JAVASCRIPT", "CSS", "BOOTSTRAP"]}
+						github={"https://github.com/KuchtaVR6/Portfolio"}
+						access={"/"}
+					/>
+				</SplideSlide>
+
+			</Splide>
+		</div>
+	);
+};
+
+export default Projects;

src/portfolio/styling/achievements.module.scss

@@ -0,0 +1,52 @@
+@import "/src/styles/helpers";
+
+.section {
+  @include lightSection;
+  @include regularFont;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: $largeGap;
+  padding-top: 2em;
+
+  & > div {
+    text-align: center;
+  }
+}
+
+.education {
+  text-align: left;
+  background-color: transparentize($gray, 0.5);
+  padding: 1em;
+  margin: 1em;
+  border-radius: $smallGap;
+  box-shadow: 0.5em 0.5em transparentize($black, 0.5);
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  column-gap: $largeGap;
+  row-gap: $smallGap;
+
+
+  .title {
+    color: $red;
+  }
+
+  .notes {
+    font-size: 0.9em;
+    margin: 0.4em 0 0em;
+  }
+
+  .otherDetails {
+    margin: auto 0 auto auto;
+
+    .location {
+      display: flex;
+      justify-content: space-around;
+    }
+  }
+}

src/portfolio/styling/experience.module.scss

@@ -0,0 +1,38 @@
+@import "/src/styles/helpers";
+
+.section {
+  @include darkSection;
+  @include regularFont;
+
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  padding-top: 2em;
+
+  p {
+    text-align: left;
+    text-justify: distribute-all-lines;
+    margin: 0 auto 0 auto;
+    width: 40em;
+    max-width: 70vw;
+  }
+}
+
+.job {
+  @include lightSection;
+  padding: 1em;
+  margin: 1em;
+
+  .largerText {
+    font-size: 1.3em;
+  }
+
+  .redText {
+    color: $red;
+  }
+
+  .industry {
+    margin-top: 12px;
+    text-align: right;
+  }
+}

src/portfolio/styling/intro.module.scss

@@ -0,0 +1,87 @@
+@import "@/src/styles/helpers.scss";
+
+.section {
+  @include fullPage;
+  @include darkSection;
+  @include regularFont;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: $largeGap;
+}
+
+.topBar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  column-gap: $largeGap;
+  row-gap: $smallGap;
+  margin: 1em;
+
+  & > div {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: $mediumGap;
+
+    * {
+      margin: auto 0;
+    }
+
+    a {
+      color: $white;
+      text-decoration: none;
+
+      &:hover {
+        color: $red;
+        font-style: italic;
+      }
+    }
+  }
+
+  .left{
+    margin-left: auto;
+  }
+
+  .logoContainer {
+    width: 2.5em;
+    height: 2.5em;
+
+    @include nextImg;
+  }
+}
+
+.mainContent {
+  margin: auto 0 0;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+
+  flex-wrap: wrap;
+
+  padding: 0 15px;
+  font-weight: 350;
+
+  .text {
+    margin: 0 0 auto;
+    font-size: 1.5em;
+  }
+
+  .larger {
+    font-size: 1.5em;
+  }
+
+  .greeting {
+    color: $red;
+    font-style: italic;
+  }
+}
+
+.profileContainer {
+  max-width: 30em;
+
+  @include nextImg;
+}

src/styles/helpers.scss

@@ -0,0 +1,44 @@
+$black: #000000;
+$white: #ffffff;
+$gray: #C2C2C2;
+$red: #ff0000;
+
+@mixin darkSection {
+  background-color: $black;
+  color: $white;
+  font-weight: 300;
+}
+
+@mixin lightSection {
+  background-color: $white;
+  color: $black;
+  font-weight: 400;
+}
+
+@mixin fullPage {
+  width: 100%;
+  @media (min-width: 768px) {
+    min-height: 100vh;
+  }
+  overflow: clip;
+}
+
+@mixin nextImg {
+  img {
+    position: relative !important;
+  }
+}
+
+$largeGap: 60px;
+$mediumGap: 30px;
+$smallGap: 15px;
+
+@mixin regularFont {
+  font-family: 'Inter', sans-serif;
+
+  font-size: 25px;
+
+  @media (max-width: 768px) {
+    font-size: 15px;
+  }
+}

src/styles/main.scss

@@ -0,0 +1,378 @@
+@import "helpers";
+
+@media screen and (prefers-reduced-motion: no-preference) {
+    html {
+        scroll-behavior: smooth;
+    }
+}
+
+html {
+    width: 100%;
+    overflow-x: clip;
+}
+
+body {
+    width: 100%;
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.splide__arrow svg {
+    fill: $red !important;
+}
+
+.splide__pagination__page.is-active {
+    background-color: $red !important;
+}
+
+.splide__arrow.splide__arrow--next {
+    height: 5em !important;
+    width: 5em !important;
+}
+
+.splide__arrow.splide__arrow--prev {
+    height: 5em !important;
+    width: 5em !important;
+}
+
+
+/* old deprecated */
+
+
+@media (max-width: 768px) {
+    body {
+        font-size: 0.8em;
+    }
+
+    .gallery {
+        padding: 1em;
+    }
+
+    .intro .mainText {
+        margin: 3em 2em;
+    }
+
+    .intro .mainText .big {
+        color: $white;
+        font-size: 2.5em;
+    }
+
+    .intro .textContainer {
+        height: 40vh;
+    }
+
+    .intro .logo {
+        width: 2.5em;
+        margin: 0 1em 0 0;
+    }
+    footer{
+        padding: 2em 2em 2.45em;
+        line-height: 2em;
+    }
+}
+
+@media (orientation: landscape)
+{
+    .intro .picContainer {
+        display: flex;
+        float: right;
+        height: 85vh;
+        max-width: 40%;
+    }
+}
+
+@media (orientation: portrait)
+{
+    .intro .picContainer {
+        display: flex;
+        float: right;
+        min-height: 50vh;
+        height: max-content;
+        max-width: 80%;
+    }
+}
+
+@media (min-width: 768px) {
+
+    .gallery {
+        padding: 3% 4% 1% 4%;
+    }
+
+    .intro .mainText {
+        margin: 2em 0em 2em 5em;
+    }
+
+    .intro .mainText .big {
+        color: $white;
+        font-size: 3em;
+    }
+
+    .intro .logo {
+        width: 2.5em;
+        margin: 0 1em 0 1em;
+    }
+    footer{
+        padding: 2em;
+    }
+}
+
+code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+.fullPage {
+    width: 100%;
+    min-height: 100vh;
+    overflow: clip;
+
+    &Intro {
+        background-color: $black;
+        color: $white;
+        font-family: 'Inter', sans-serif;
+    }
+}
+
+.intro .largePic {
+    margin: auto auto 0 auto;
+    width: 100%;
+    max-height: 100%;
+}
+
+.intro .textContainer{
+    float: left;
+    width: fit-content;
+}
+
+.intro .links {
+    display: inline;
+    font-size: 2em;
+}
+
+.intro .links .oneRow {
+    float: left;
+    display: flex;
+    padding: 1em 0 0 1em;
+    flex-direction: row;
+}
+
+.intro .links a {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    color: $gray;
+}
+
+.intro .links .oneRow a {
+    padding-top: 0.5em;
+}
+
+.intro .row.init {
+    height: 15vh;
+}
+
+.intro .contact {
+    padding: 1em 1em 0 0;
+    opacity: 80%;
+    float: right;
+    text-align: right;
+    margin-top: 0.5em;
+    color: $gray;
+}
+
+.intro .contact a {
+    color: $gray;
+}
+
+.intro .mainText {
+    color: $gray;
+    font-size: 2em;
+}
+
+.project {
+    display: flex;
+    width: 100%;
+    min-height: 80vh;
+}
+
+.project .row {
+    width: 100%;
+    padding: 3em;
+    margin: auto 0;
+}
+
+.project .picture {
+    width: 100%;
+}
+
+.project .icon{
+    width: 200px;
+    display: flex;
+    font-size: 1.5em;
+    text-align: center;
+    flex-direction: column;
+    margin: 1em;
+}
+
+.project .icon svg{
+    margin: 0 auto;
+}
+
+.project h1 {
+    margin: 0 0 0.5em 0;
+    font-weight: bold;
+    font-size: 3em;
+}
+
+.project h2{
+    margin: 0.5em 0.5em 0;
+    font-size: 2.5em;
+    text-align: center;
+}
+
+.project p {
+    font-size: 1.925em;
+}
+
+.project a{
+    float: right;
+}
+
+.project a:hover{
+    color: $gray;
+}
+
+.techContainer {
+    padding: 1em;
+    display: flex;
+    width: fit-content;
+    margin: 0 auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+}
+
+.project .technology {
+    font-family: 'Share Tech Mono', monospace;
+    font-size: 2.5em;
+    color: $gray;
+    margin: 0.1em;
+    padding: 0.1em 0.3em;
+    background-color: $white;
+}
+
+.technology:hover {
+    color: $black;
+}
+
+.experience {
+    display: flex;
+    flex-direction: column;
+}
+
+.experience p {
+    text-justify: distribute-all-lines;
+    margin: 0 auto 2em auto;
+    font-size: 2em;
+    width: 40em;
+    max-width: 70vw;
+}
+
+.experience .job {
+    border: 10px solid $black;
+    width: 100%;
+    min-height: 30vh;
+    font-size: 2.7rem;
+    padding: 1em;
+}
+
+.knowledge .edu{
+    display: flex;
+    flex-direction: column;
+}
+
+.knowledge h1{
+    font-size: 3em;
+    text-align: center;
+}
+
+.knowledge h2{
+    font-family: 'Share Tech Mono', monospace;
+    font-size: 2em;
+    margin-left: 0.1em;
+}
+
+.knowledge .job{
+    width: 73%;
+    font-size: 1.2em;
+    margin: 2em auto 0;
+    padding: 1em;
+}
+
+.pBContainer .progressBar{
+    width: 100%;
+    height: 8px;
+    background-color: $gray;
+}
+
+.pBContainer .progressBar .inner{
+    overflow: hidden;
+    height: inherit;
+    background-color: $black;
+}
+
+.technology {
+    font-family: 'Share Tech Mono', monospace;
+    font-size: 2em;
+    color: $black;
+    margin: 0.1em;
+    padding: 0.1em 0.3em;
+    background-color: $gray;
+    border-radius: 2px;
+}
+
+.technology:hover{
+    background-color: opacify($gray, 0.35);
+}
+
+footer{
+    text-align: center;
+    font-size: 2.5em;
+}
+
+footer a{
+    color: $white !important;
+}
+
+footer a:hover{
+    color: $red;
+}
+
+.notfound{
+    display: flex;
+    font-size: 3em;
+    text-align: center;
+    color: $red;
+}
+
+.notfound .container{
+    margin: auto auto;
+}
+
+.notfound h1{
+    font-size: 2em;
+    font-weight: bold;
+}
+
+.notfound i{
+    font-size: 0.5em;
+}
+
+.notfound a{
+    background-color: $white;
+    color: $black;
+    padding: 0.3em;
+    font-weight: bold;
+}