Initial adjustments to the website

src/portfolio/MainPage.tsx

@@ -3,6 +3,7 @@ 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";
+import SkillsAndLinks from "@/src/portfolio/sections/SkillsAndLinks";
 
 const MainPage = () => {
 	return (
@@ -11,6 +12,7 @@ const MainPage = () => {
 			<Achievements/>
 			<Experience/>
 			<Projects/>
+			<SkillsAndLinks/>
 			<Footer/>
 		</div>
 	);

src/portfolio/helpers/Education.tsx

@@ -19,9 +19,9 @@ const Education : FC<EducationArgs> = (props) => {
 			case "Warsaw":
 				return ", Poland";
 			case "London":
-				return ", England, UK󠁧󠁢󠁥󠁮󠁧󠁿";
+				return ", UK󠁧󠁢󠁥󠁮󠁧󠁿";
 			case "Edinburgh":
-				return ", Scotland, UK󠁧󠁢󠁳󠁣󠁴󠁿";
+				return ", UK󠁧󠁢󠁳󠁣󠁴󠁿";
 		}
 	};
 
@@ -45,7 +45,16 @@ const Education : FC<EducationArgs> = (props) => {
 			<span className={styles.otherDetails}>
 				<div className={styles.location}>{props.city}{getCountryEmoji()}</div>
 				<hr/>
-				{props.endDate ? props.startDate + " - " + props.endDate : "Since " + props.startDate}
+				{props.endDate ?
+					<>
+						<i>From:&nbsp;&nbsp;</i>
+						<span style={{float:"right"}}>{props.startDate}</span>
+						<br/>
+						<i>To:&nbsp;&nbsp;</i>
+						<span style={{float:"right"}}>{props.endDate}</span>
+					</>:
+					"Since " + props.startDate
+				}
 			</span>
 		</div>
 	);

src/portfolio/helpers/WorkExperience.tsx

@@ -2,7 +2,7 @@ import {FC} from "react";
 import styles from "../styling/experience.module.scss";
 
 export type WorkExperienceArgs = {
-    industry? : "Education" | "Software" | "Hospitality",
+    industry? : "Education" | "Software" | "Hospitality" | "Artificial Intelligence",
     company : string,
     startDate : string,
     title : string,
@@ -21,6 +21,8 @@ const WorkExperience : FC<WorkExperienceArgs> = (props) => {
 				return "👨‍💻";
 			case "Hospitality":
 				return "🛎️";
+			case "Artificial Intelligence":
+				return "🤖";
 		}
 	};
 

src/portfolio/sections/Achievements.tsx

@@ -23,31 +23,6 @@ const Achievements = () => {
 					})
 				}
 			</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>
 	);
 };

src/portfolio/sections/Experience.tsx

@@ -6,7 +6,7 @@ import workExperienceData, {workExperienceParagraph} from "@/src/portfolio/data/
 
 const Experience = () => {
 	const calcPagesOnWidth = (width : number) => {
-		return Math.floor(width / 900 + 1);
+		return Math.floor(width / 700 + 1);
 	};
 
 	const [pages, setPages] = useState(calcPagesOnWidth(1000));

src/portfolio/sections/Footer.tsx

@@ -3,7 +3,7 @@ import styles from "../styling/footer.module.scss";
 const Footer = () => {
 	return (
 		<footer className={styles.section}>
-            Copyright &copy; Patryk Kuchta 2023
+            Copyright &copy; Patryk Kuchta 2024
 		</footer>
 	);
 };

src/portfolio/sections/Intro.tsx

@@ -27,12 +27,12 @@ const Intro = () => {
 					<a href={"#achievements"}>Achievements</a>
 					<a href={"#experience"}>Experience</a>
 					<a href={"#projects"}>Projects</a>
-					{/*<a href={"#skills"}>Skills</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>
+					<a href={"mailto: patryk@kuchta.uk"}>patryk@kuchta.uk</a>
 				</div>
 			</header>
 			<div className={styles.mainContent}>
@@ -47,7 +47,7 @@ const Intro = () => {
 						<br/>
 							an aspiring
 						<br/>
-						<b>Computer Scientist</b>.
+						<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>

src/portfolio/sections/Projects.tsx

@@ -4,21 +4,6 @@ import projectData from "@/src/portfolio/data/projectData";
 import styles from "../styling/projects.module.scss";
 
 const Projects = () => {
-	const otherLinks = [
-		{
-			title: "Github",
-			link: "https://github.com/KuchtaVR6/"
-		},
-		{
-			title: "LinkedIn",
-			link: "https://linkedin.com/in/kuchtap"
-		},
-		{
-			title: "Curriculum Vitae",
-			link:  "/PatrykKuchta_CV.pdf"
-		}
-	];
-
 	return (
 		<div className={styles.section} id={"projects"}>
 			<Splide
@@ -34,25 +19,7 @@ const Projects = () => {
 							<Project {...entry}/>
 						</SplideSlide> ); })
 				}
-
 			</Splide>
-			<div data-aos = {"fade-left"} className={styles.otherLinks}>
-				<h2>Other useful links about me:</h2>
-				<ul>
-					{
-						otherLinks.map(({title, link}, key) => {
-							return (
-								<li key = {key}>
-									<a href={link}>
-										{title}
-									</a>
-								</li>
-							);
-						}
-						)
-					}
-				</ul>
-			</div>
 		</div>
 	);
 };

src/portfolio/sections/SkillsAndLinks.tsx

@@ -0,0 +1,96 @@
+import styles from "../styling/extraLinks.module.scss";
+
+const SkillsAndLinks = () => {
+	const moreInfoLinks = [
+		{
+			title: "Github",
+			link: "https://github.com/KuchtaVR6/"
+		},
+		{
+			title: "LinkedIn",
+			link: "https://linkedin.com/in/kuchtap"
+		},
+		{
+			title: "Curriculum Vitae",
+			link:  "/PatrykKuchta_CV.pdf"
+		}
+	];
+
+	const contactLinks = [
+		{
+			title: "Email",
+			link: "mailto:patryk@kuchta.uk"
+		},
+		{
+			title: "LinkedIn",
+			link: "https://linkedin.com/in/kuchtap"
+		}
+	];
+
+	return (
+		<div className={styles.section} id={"skills"}>
+			<div data-aos = {"fade-left"} className={styles.otherLinks}>
+
+				<h2>Find out more about me:</h2>
+				<ul>
+					{
+						moreInfoLinks.map(({title, link}, key) => {
+							return (
+								<li key = {key}>
+									<a href={link}>
+										{title}
+									</a>
+								</li>
+							);
+						}
+						)
+					}
+				</ul>
+			</div>
+			<div data-aos = {"fade-right"} className={styles.otherLinks}>
+				<h2>Contact me through:</h2>
+				<ul>
+					{
+						contactLinks.map(({title, link}, key) => {
+							return (
+								<li key = {key}>
+									<a href={link}>
+										{title}
+									</a>
+								</li>
+							);
+						}
+						)
+					}
+				</ul>
+			</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 SkillsAndLinks;

src/portfolio/styling/achievements.module.scss

@@ -8,8 +8,10 @@
   flex-direction: row;
   justify-content: center;
   flex-wrap: wrap;
-  gap: $largeGap;
+  gap: $smallGap;
-  padding-top: 2em;
+  padding: 1em 0 2em;
+
+  font-size: 1.15em;
 
   & > div {
     text-align: center;
@@ -28,7 +30,7 @@
   flex-direction: row;
   flex-wrap: wrap;
 
-  column-gap: $largeGap;
+  column-gap: $mediumGap;
   row-gap: $smallGap;
 
 
@@ -38,7 +40,7 @@
 
   .notes {
     font-size: 0.9em;
-    margin: 0.4em 0 0em;
+    margin-top: 0.4em;
   }
 
   .otherDetails {

src/portfolio/styling/experience.module.scss

@@ -10,10 +10,10 @@
   padding-top: 2em;
 
   p {
-    text-align: left;
+    text-align: justify;
     text-justify: distribute-all-lines;
     margin: 0 auto 0 auto;
-    width: 40em;
+    width: 42em;
     max-width: 70vw;
     line-height: 1.7;
   }
@@ -21,8 +21,9 @@
 
 .job {
   @include lightSection;
+  width: 100%;
   padding: 1em;
-  margin: 1em;
+  margin: auto 1em;
 
   .largerText {
     font-size: 1.3em;

src/portfolio/styling/extraLinks.module.scss

@@ -0,0 +1,21 @@
+@import "@/src/styles/helpers.scss";
+
+.section {
+  @include lightSection;
+  @include regularFont;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+
+  padding: 3em 6em;
+}
+
+.section .otherLinks{
+  margin: auto 1em;
+}
+
+.section .otherLinks h2{
+  font-size: 115%;
+}
+

src/portfolio/styling/intro.module.scss

@@ -55,7 +55,7 @@
 }
 
 .mainContent {
-  margin: auto 0 0;
+  margin: 0;
 
   display: flex;
   flex-direction: row;
@@ -70,7 +70,6 @@
 
   .text {
     line-height: 1.5;
-    margin: 0 0 auto;
     font-size: 2em;
   }
 
@@ -85,7 +84,7 @@
 }
 
 .profileContainer {
-  max-width: 30em;
+  max-width: 35em;
   height: max-content;
   display: flex;
   position: relative;

src/portfolio/styling/projects.module.scss

@@ -2,12 +2,11 @@
 
 .section {
   @include lightSection;
-  @include fullPage;
   @include regularFont;
 }
 
 .technology {
-  font-family: 'Share Tech Mono', monospace;
+  font-family: 'Ubuntu Mono', monospace;
   font-size: 1.4em;
   color: $black;
   margin: 0.1em;

src/styles/helpers.scss

@@ -39,7 +39,7 @@ $smallGap: 15px;
 @mixin regularFont {
   font-family: Work Sans, sans-serif;
 
-  font-size: 25px;
+  font-size: 20px;
 
   @media (max-width: 768px) {
     font-size: 15px;

src/styles/main.scss

@@ -37,4 +37,8 @@ body {
 .splide__arrow.splide__arrow--prev {
     height: 5em !important;
     width: 5em !important;
+}
+
+.splide__slide {
+    display: flex;
 }