feat: fix responsiness and links

src/portfolio/data/projectData.ts

@@ -144,7 +144,7 @@ const projectData : IProjectArguments[] = [
 		],
 		github: "https://github.com/KuchtaVR6/Portfolio-for-an-Architect",
 		access: "https://aleksandrakuchta.co.uk/"
-	},
+	}
 	// {
 	// 	imagePath: "port1.png",
 	// 	title: "My previous portfolio website",
@@ -165,7 +165,12 @@ const projectData : IProjectArguments[] = [
 	// {
 	// 	imagePath: "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.",
+	// 	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: [
 	// 		SkillEnum.python,
 	// 		SkillEnum.html,
@@ -177,7 +182,14 @@ const projectData : IProjectArguments[] = [
 	// {
 	// 	imagePath: "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.",
+	// 	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: [
 	// 		SkillEnum.python,
 	// 		SkillEnum.linux,

src/portfolio/sections/CurrentWork.tsx

@@ -32,7 +32,7 @@ const RoleInfo = (): JSX.Element => {
 
 const CurrentWork = (): JSX.Element => {
 	return (
-		<div className={styles.section} id={"current-work"}>
+		<div className={styles.section} id={"about-me"}>
 			<div className={styles.mainContent}>
 				<div className={styles.currentWorkSection}>
 					<h2>What I&apos;m Up To</h2>

src/portfolio/sections/Intro/TopBar.tsx

@@ -9,7 +9,7 @@ const TopBar = (): JSX.Element => {
 				<div className={styles.logoContainer}>
 					<Image src={logo} alt={"Kuchta logo"} fill={true}/>
 				</div>
-				<a href={"#achievements"}>Achievements</a>
+				<a href={"#about-me"}>About Me</a>
 				<a href={"#experience"}>Experience</a>
 				<a href={"#skills"}>Skills</a>
 				<a href={"#projects"}>Projects</a>

src/portfolio/sections/Projects/projects.module.scss

@@ -153,8 +153,8 @@
 	}
 
 	@media (max-width: 768px) {
-		width: 2em;
+		width: 2.5em;
-		height: 2em;
+		height: 2.5em;
 	}
 }
 
@@ -209,11 +209,11 @@
 	position: absolute;
 	top: $smallGap;
 	right: $smallGap;
-	background-color: rgba($white, 0.1);
+	background-color: rgba($black, 0.8);
-	border: none;
+	border: 2px solid rgba($white, 0.3);
 	border-radius: 50%;
-	width: 40px;
+	width: 48px;
-	height: 40px;
+	height: 48px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -221,15 +221,30 @@
 	z-index: 10;
 	transition: all 0.3s ease;
 	color: $white;
+	box-shadow: 0 2px 8px rgba($black, 0.3);
 
 	svg {
-		width: 24px;
+		width: 28px;
-		height: 24px;
+		height: 28px;
 	}
 
 	&:hover {
 		background-color: $accent_colour;
+		border-color: $accent_colour;
 		transform: scale(1.1);
+		box-shadow: 0 4px 12px rgba($black, 0.4);
+	}
+
+	@media (max-width: 768px) {
+		width: 44px;
+		height: 44px;
+		background-color: rgba($black, 0.85);
+		border: 2px solid rgba($white, 0.4);
+
+		svg {
+			width: 26px;
+			height: 26px;
+		}
 	}
 }
 
@@ -240,12 +255,12 @@
 	background-color: rgba(0, 0, 0, 0.3);
 
 	@media (max-width: 768px) {
-		height: 250px;
+		height: 300px;
 	}
 }
 
 .modalImage {
-	object-fit: cover;
+	object-fit: contain;
 }
 
 .modalBody {
@@ -273,4 +288,9 @@
 	color: rgba($white, 0.9);
 	margin-bottom: $largeGap;
 	white-space: pre-wrap;
+
+	@media (max-width: 768px) {
+		font-size: 1.05em;
+		line-height: 1.7;
+	}
 }