Patryk-Kuchta/Portfolio
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Preparation for proper release

Browse Source
This commit is contained in:
Patryk Kuchta
2023-08-05 18:49:04 +01:00
parent 25cda7ef65
commit 25b1250df7
20 changed files with 366 additions and 508 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/portfolio/data/projectData.ts Normal file
View File

@@ -0,0 +1,107 @@
import {ProjectArguments, TechnologyEnum} from "@/src/portfolio/helpers/Project";
const projectData : ProjectArguments[] = [
{
imagePath: "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: [
TechnologyEnum.typescript,
TechnologyEnum.react,
TechnologyEnum.html,
TechnologyEnum.css,
TechnologyEnum.express,
TechnologyEnum.javascript
],
github: "https://github.com/KuchtaVR6/CryptoGramProject"
},
{
imagePath: "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: [
TechnologyEnum.react,
TechnologyEnum.html,
TechnologyEnum.javascript,
TechnologyEnum.css
],
github: "https://github.com/KuchtaVR6/PhotoCa.st",
access: "photocast.html"
},
{
imagePath: "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: [
TechnologyEnum.javascript,
TechnologyEnum.html,
TechnologyEnum.css,
TechnologyEnum.bootstrap
],
github: "https://github.com/KuchtaVR6/Portfolio-for-an-Architect",
access: "https://aleksandrakuchta.co.uk/"
},
{
imagePath: "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: [
TechnologyEnum.html,
TechnologyEnum.css,
TechnologyEnum.bootstrap
],
github: "https://github.com/KuchtaVR6/porfolio2021",
access: "portfolio/view/index.html"
},
{
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.",
tech: [
TechnologyEnum.python,
TechnologyEnum.html,
TechnologyEnum.bootstrap
],
github: "https://github.com/KuchtaVR6/EmbederBot",
access: "https://discord.com/api/oauth2/authorize?client_id=819208892834644008&permissions=0&scope=bot"
},
{
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.",
tech: [
TechnologyEnum.python,
TechnologyEnum.linux,
TechnologyEnum.design3d
]
},
{
imagePath: "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: [
TechnologyEnum.react,
TechnologyEnum.html,
TechnologyEnum.javascript,
TechnologyEnum.php
],
access: "tutor.html",
github: "https://github.com/KuchtaVR6/Portfolio"
},
{
imagePath: "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: [
TechnologyEnum.react,
TechnologyEnum.html,
TechnologyEnum.javascript,
TechnologyEnum.css,
TechnologyEnum.bootstrap
],
github: "https://github.com/KuchtaVR6/Portfolio",
access: "/"
}
];
export default projectData;

8
src/portfolio/helpers/Certificate.tsx
View File

@@ -14,11 +14,11 @@ const Award : FC<AwardArgs> = (props) => {
const getCountryEmoji = () => {
switch (props.city) {
case "Warsaw":
return "🇵🇱";
return ", PL";
case "London":
return "🏴󠁧󠁢󠁥󠁮󠁧󠁿";
return ", UK󠁧󠁢󠁥󠁮󠁧󠁿";
case "Edinburgh":
return "🏴󠁧󠁢󠁳󠁣󠁴󠁿";
return ", UK󠁧󠁢󠁳󠁣󠁴󠁿";
}
};
@@ -40,7 +40,7 @@ const Award : FC<AwardArgs> = (props) => {
}
</div>
<span className={styles.otherDetails}>
<div className={styles.location}>{props.city} {getCountryEmoji()}</div>
<div className={styles.location}>{props.city}{getCountryEmoji()}</div>
<hr/>
{props.awardDate}
</span>

8
src/portfolio/helpers/Education.tsx
View File

@@ -17,11 +17,11 @@ const Education : FC<EducationArgs> = (props) => {
const getCountryEmoji = () => {
switch (props.city) {
case "Warsaw":
return "🇵🇱";
return ", Poland";
case "London":
return "🏴󠁧󠁢󠁥󠁮󠁧󠁿";
return ", England, UK󠁧󠁢󠁥󠁮󠁧󠁿";
case "Edinburgh":
return "🏴󠁧󠁢󠁳󠁣󠁴󠁿";
return ", Scotland, UK󠁧󠁢󠁳󠁣󠁴󠁿";
}
};
@@ -43,7 +43,7 @@ const Education : FC<EducationArgs> = (props) => {
}
</div>
<span className={styles.otherDetails}>
<div className={styles.location}>{props.city} {getCountryEmoji()}</div>
<div className={styles.location}>{props.city}{getCountryEmoji()}</div>
<hr/>
{props.endDate ? props.startDate + " - " + props.endDate : "Since " + props.startDate}
</span>

80
src/portfolio/helpers/Project.tsx
View File

@@ -1,40 +1,68 @@
import {FaGithubSquare} from "react-icons/fa";
import {BiLinkExternal} from "react-icons/bi";
import {FC} from "react";
import Technology from "@/src/portfolio/helpers/Technology";
import TechnologyDisplay from "@/src/portfolio/helpers/TechnologyDisplay";
import Image from "next/image";
import styles from "../styling/projects.module.scss";
import {VscGithub} from "react-icons/vsc";
import {BsGlobe2} from "react-icons/bs";
type args = {
path : string,
export interface ProjectArguments {
imagePath : string,
title : string,
text : string,
tech : string[],
tech : TechnologyEnum[],
github? : string,
access? : string
}
const Project : FC<args> = ({path, title, text, tech, github, access}) => {
export enum TechnologyEnum {
typescript = "typescript",
react = "react",
html = "html",
css = "css",
express = "express.js",
javascript = "javascript",
bootstrap = "bootstrap",
python = "python",
linux = "linux",
design3d = "3d design",
php = "php"
}
const Project = ({imagePath, title, text, tech, github, access} : ProjectArguments) => {
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 className={styles.projectDisplay}>
<div className={styles.text}>
<h2 data-aos={"fade-left"}>{title}</h2>
<p data-aos={"fade-left"}>
{text}
</p>
<div className={styles.links}>
{github?
<a href={github} title={"Github repository of the project"} className={styles.icon} data-aos={"fade-left"}>
<VscGithub/>
</a> : ""}
{access?
<a href={access} title={"View and use the project here"} className={styles.icon} data-aos={"fade-left"}>
<BsGlobe2/>
</a> : ""}
</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 className={styles.imageAndTech}>
<div className={styles.imageContainer}>
<Image
src = {"/portfolio/projects/"+imagePath}
alt = {"Image showing the " + title + " project."}
fill = {true}
sizes = {"100%"}
/>
</div>
<h3 data-aos={"fade-right"}>Technologies Used:</h3>
<div className={styles.tech}>
{tech.map((value) => {
i++;
return <TechnologyDisplay key={i} name={value}/>;
})}
</div>
</div>
</div>

27
src/portfolio/helpers/Technology.tsx
View File

@@ -1,27 +0,0 @@
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;

28
src/portfolio/helpers/TechnologyDisplay.tsx Normal file
View File

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

7
src/portfolio/sections/Footer.tsx
View File

@@ -1,8 +1,9 @@
import styles from "../styling/footer.module.scss";
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 className={styles.section}>
Copyright &copy; Patryk Kuchta 2023
</footer>
);
};

4
src/portfolio/sections/Intro.tsx
View File

@@ -19,7 +19,7 @@ const Intro = () => {
return (
<section className={styles.section}>
<header className={styles.topBar} data-aos={"zoom-in-down"} data-aos-duration={"1000"}>
<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}/>
@@ -27,7 +27,7 @@ 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>

87
src/portfolio/sections/Projects.tsx
View File

@@ -1,9 +1,11 @@
import {Splide, SplideSlide} from "@splidejs/react-splide";
import Project from "@/src/portfolio/helpers/Project";
import projectData from "@/src/portfolio/data/projectData";
import styles from "../styling/projects.module.scss";
const Projects = () => {
return (
<div className={"fullPage projects gallery"} id={"projects"}>
<div className={styles.section} id={"projects"}>
<Splide
options={{
rewind: true,
@@ -11,83 +13,12 @@ const Projects = () => {
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>
{ projectData.map((entry, key) => {
return (
<SplideSlide key={key}>
<Project {...entry}/>
</SplideSlide> ); })
}
</Splide>
</div>

9
src/portfolio/styling/footer.module.scss Normal file
View File

@@ -0,0 +1,9 @@
@import "@/src/styles/helpers.scss";
.section {
@include darkSection;
@include regularFont;
padding: 0.4em;
text-align: center;
}

11
src/portfolio/styling/intro.module.scss
View File

@@ -35,7 +35,7 @@
text-decoration: none;
&:hover {
color: $red;
color: $strong_red;
font-style: italic;
}
}
@@ -65,9 +65,12 @@
padding: 0 15px;
font-weight: 350;
font-size: 0.7em;
.text {
line-height: 1.5;
margin: 0 0 auto;
font-size: 1.5em;
font-size: 2em;
}
.larger {
@@ -75,13 +78,15 @@
}
.greeting {
color: $red;
color: $strong_red;
font-style: italic;
}
}
.profileContainer {
max-width: 30em;
height: max-content;
display: flex;
@include nextImg;
}

80
src/portfolio/styling/projects.module.scss Normal file
View File

@@ -0,0 +1,80 @@
@import "@/src/styles/helpers.scss";
.section {
@include lightSection;
@include fullPage;
@include regularFont;
}
.technology {
font-family: 'Share Tech Mono', monospace;
font-size: 1.4em;
color: $black;
margin: 0.1em;
padding: 0.1em 0.3em;
background-color: $gray;
border-radius: 2px;
:hover{
background-color: opacify($gray, 0.35);
}
}
.projectDisplay {
@include darkSection;
display: flex;
flex-direction: row;
@media (max-width: 1280px) {
flex-direction: column;
}
.imageAndTech {
flex-basis: calc(100% / 2);
margin: 1em;
.imageContainer {
width: 100%;
@include nextImg;
}
.tech {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
}
}
.text {
flex-basis: calc(100% / 2);
padding: 2em 2em;
.links {
display: flex;
flex-direction: row-reverse;
gap: 2em;
.icon {
color: $white;
filter: drop-shadow(7px 7px 5px $red);
$size: 4em;
width: $size;
height: $size;
svg {
width: $size;
height: $size;
}
:hover {
color: $gray;
}
}
}
}
}