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

5
.eslintrc.json
View File

@@ -4,6 +4,11 @@
"plugins": [ "plugins": [
"@typescript-eslint" "@typescript-eslint"
], ],
"settings": {
"react": {
"version": "18.2.0"
}
},
"extends": [ "extends": [
"eslint:recommended", "eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/eslint-recommended",

7
package.json
View File

@@ -3,11 +3,10 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev -p 4000",
"build": "next build", "build": "next build",
"start": "next start", "start": "next start -p 4000",
"lint": "next lint", "lint": "next lint"
"deploy": "git pull && npx next build && npx next start"
}, },
"dependencies": { "dependencies": {
"@splidejs/react-splide": "^0.7.12", "@splidejs/react-splide": "^0.7.12",

27
pages/_app.tsx
View File

@@ -6,6 +6,8 @@ import "../src/styles/main.scss";
import "aos/dist/aos.css"; import "aos/dist/aos.css";
import "@splidejs/splide/css/sea-green"; import "@splidejs/splide/css/sea-green";
import Head from "next/head";
export default function MyApp({ Component, pageProps }: AppProps) { export default function MyApp({ Component, pageProps }: AppProps) {
useEffect(() => { useEffect(() => {
// here you can add your aos options // here you can add your aos options
@@ -14,5 +16,28 @@ export default function MyApp({ Component, pageProps }: AppProps) {
}); });
}, []); }, []);
return <Component {...pageProps} />; return <>
<Head>
<title>Patryk Kuchta</title>
<meta name = "description" content = {
"Welcome to my Portfolio Website. My name is Patryk Kuchta." +
"Explore a showcase of my projects, education and work experience." +
"Discover the passion and expertise of a dedicated computer scientist," +
"poised to make a lasting impact in the world of technology."
} />
<link rel="manifest" href="manifest.json" />
<meta property="og:title" content="Patryk Kuchta's Portfolio"/>
<meta property="og:description" content="Explore a showcase of my projects, education and work experience."/>
<meta property="og:image" content="https://kuchta.uk/logo.svg"/>
<meta property="og:url" content="https://kuchta.uk"/>
<meta property="og:type" content="website"/>
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Patryk Kuchta's Portfolio"/>
<meta name="twitter:description" content="Explore a showcase of my projects, education and work experience."/>
<meta name="twitter:image" content="https://kuchta.uk/logo.svg"/>
</Head>
<Component {...pageProps} />
</>;
} }

2
pages/_document.tsx
View File

@@ -2,7 +2,7 @@ import {Html, Head, Main, NextScript} from "next/document";
export default function Document() { export default function Document() {
return ( return (
<Html> <Html lang="en">
<Head/> <Head/>
<body> <body>
<Main/> <Main/>

12
pages/layout.tsx
View File

@@ -1,12 +1,6 @@
//import "./globals.css"; import { Work_Sans } from "next/font/google";
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] }); const workSans = Work_Sans({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ export default function RootLayout({
children, children,
@@ -15,7 +9,7 @@ export default function RootLayout({
}) { }) {
return ( return (
<html lang="en"> <html lang="en">
<body className={inter.className}>{children}</body> <body className={workSans.className}>{children}</body>
</html> </html>
); );
} }

8
public/manifest.json Normal file
View File

@@ -0,0 +1,8 @@
{
"name": "Patryk Kuchta's Portfolio",
"short_name": "Patryk Kuchta",
"start_url": "/",
"display": "standalone",
"background_color": "#fff",
"description": "Patryk Kuchta's Portfolio entailing his academic and professional work."
}

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

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

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

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

@@ -1,40 +1,68 @@
import {FaGithubSquare} from "react-icons/fa"; import TechnologyDisplay from "@/src/portfolio/helpers/TechnologyDisplay";
import {BiLinkExternal} from "react-icons/bi"; import Image from "next/image";
import {FC} from "react"; import styles from "../styling/projects.module.scss";
import Technology from "@/src/portfolio/helpers/Technology"; import {VscGithub} from "react-icons/vsc";
import {BsGlobe2} from "react-icons/bs";
type args = { export interface ProjectArguments {
path : string, imagePath : string,
title : string, title : string,
text : string, text : string,
tech : string[], tech : TechnologyEnum[],
github? : string, github? : string,
access? : 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; let i = 0;
return ( return (
<div className={"fullPage project dark"}> <div className={styles.projectDisplay}>
<div className={"row"}> <div className={styles.text}>
<div className={"col-md-7"}> <h2 data-aos={"fade-left"}>{title}</h2>
<img src={"portfolio/projects/" + path} alt={title} className={"picture"} data-aos={"fade-in"}/> <p data-aos={"fade-left"}>
<h2 data-aos={"fade-right"}>Technologies Used:</h2> {text}
<div className={"techContainer"}> </p>
{tech.map((value) => { <div className={styles.links}>
i++; {github?
return <Technology key={i} name={value}/>; <a href={github} title={"Github repository of the project"} className={styles.icon} data-aos={"fade-left"}>
})} <VscGithub/>
</div> </a> : ""}
{access?
<a href={access} title={"View and use the project here"} className={styles.icon} data-aos={"fade-left"}>
<BsGlobe2/>
</a> : ""}
</div> </div>
</div>
<div className={"col-md-5"}> <div className={styles.imageAndTech}>
<h1 data-aos={"fade-left"}>{title}</h1> <div className={styles.imageContainer}>
<p data-aos={"fade-left"}> <Image
{text} src = {"/portfolio/projects/"+imagePath}
</p> alt = {"Image showing the " + title + " project."}
{github? <a href={github} className={"icon"} data-aos={"fade-left"}>Github repository of the project<FaGithubSquare size={75}></FaGithubSquare></a>:""} fill = {true}
{access? <a href={access} className={"icon"} data-aos={"fade-left"}>View and use the project here<BiLinkExternal size={75}></BiLinkExternal></a>:""} 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> </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 = () => { const Footer = () => {
return ( return (
<footer className={"dark footer"}> <footer className={styles.section}>
<a href={"tutor.html"} data-aos={"zoom-in"}>Looking for an amazing tutor?</a><br/> Copyright &copy; Patryk Kuchta 2023
Copyright &copy; Patryk Kuchta 2022
</footer> </footer>
); );
}; };

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

@@ -19,7 +19,7 @@ const Intro = () => {
return ( return (
<section className={styles.section}> <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.row}>
<div className={styles.logoContainer}> <div className={styles.logoContainer}>
<Image src={logo} alt={"Kuchta logo"} fill={true}/> <Image src={logo} alt={"Kuchta logo"} fill={true}/>
@@ -27,7 +27,7 @@ const Intro = () => {
<a href={"#achievements"}>Achievements</a> <a href={"#achievements"}>Achievements</a>
<a href={"#experience"}>Experience</a> <a href={"#experience"}>Experience</a>
<a href={"#projects"}>Projects</a> <a href={"#projects"}>Projects</a>
<a href={"#skills"}>Skills</a> {/*<a href={"#skills"}>Skills</a>*/}
</div> </div>
<div className={styles.left}> <div className={styles.left}>
<a href={"mailto: patrick@kuchta.uk"}>patrick@kuchta.uk</a> <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 {Splide, SplideSlide} from "@splidejs/react-splide";
import Project from "@/src/portfolio/helpers/Project"; import Project from "@/src/portfolio/helpers/Project";
import projectData from "@/src/portfolio/data/projectData";
import styles from "../styling/projects.module.scss";
const Projects = () => { const Projects = () => {
return ( return (
<div className={"fullPage projects gallery"} id={"projects"}> <div className={styles.section} id={"projects"}>
<Splide <Splide
options={{ options={{
rewind: true, rewind: true,
@@ -11,83 +13,12 @@ const Projects = () => {
perPage: 1, perPage: 1,
}} }}
> >
<SplideSlide> { projectData.map((entry, key) => {
<Project path={"cryptogram.png"} title={"Cryptocurrency wallet prototype"} return (
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."} <SplideSlide key={key}>
tech={["TYPESCRIPT", "REACT.JS", "HTML", "CSS", "EXPRESS.JS", "JAVASCRIPT"]} <Project {...entry}/>
github={"https://github.com/KuchtaVR6/CryptoGramProject"} </SplideSlide> ); })
/> }
</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> </Splide>
</div> </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; text-decoration: none;
&:hover { &:hover {
color: $red; color: $strong_red;
font-style: italic; font-style: italic;
} }
} }
@@ -65,9 +65,12 @@
padding: 0 15px; padding: 0 15px;
font-weight: 350; font-weight: 350;
font-size: 0.7em;
.text { .text {
line-height: 1.5;
margin: 0 0 auto; margin: 0 0 auto;
font-size: 1.5em; font-size: 2em;
} }
.larger { .larger {
@@ -75,13 +78,15 @@
} }
.greeting { .greeting {
color: $red; color: $strong_red;
font-style: italic; font-style: italic;
} }
} }
.profileContainer { .profileContainer {
max-width: 30em; max-width: 30em;
height: max-content;
display: flex;
@include nextImg; @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;
}
}
}
}
}

9
src/styles/helpers.scss
View File

@@ -1,7 +1,10 @@
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap');
$black: #000000; $black: #000000;
$white: #ffffff; $white: #ffffff;
$gray: #C2C2C2; $gray: #E3E3E3;
$red: #ff0000; $strong_red: #ff0000;
$red: #8F0000;
@mixin darkSection { @mixin darkSection {
background-color: $black; background-color: $black;
@@ -34,7 +37,7 @@ $mediumGap: 30px;
$smallGap: 15px; $smallGap: 15px;
@mixin regularFont { @mixin regularFont {
font-family: 'Inter', sans-serif; font-family: Work Sans, sans-serif;
font-size: 25px; font-size: 25px;

348
src/styles/main.scss
View File

@@ -7,8 +7,11 @@
} }
html { html {
width: 100%; width: 100vw;
overflow-x: clip; }
html, body {
overflow-x: hidden;
} }
body { body {
@@ -34,345 +37,4 @@ body {
.splide__arrow.splide__arrow--prev { .splide__arrow.splide__arrow--prev {
height: 5em !important; height: 5em !important;
width: 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;
} }