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

Initial commit

Browse Source
This commit is contained in:
Patryk Kuchta
2023-07-30 21:35:47 +01:00
commit 24c6dbe278
70 changed files with 6764 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
.eslintrc.json Normal file
View File

@@ -0,0 +1,28 @@
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@next/next/recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended"
],
"rules": {
"indent": [
"error",
"tab",
{"SwitchCase": 1}
],
"quotes": [
"error",
"double"
],
"semi": "error"
}
}

2
.gitattributes vendored Normal file
View File

@@ -0,0 +1,2 @@
# Auto detect text files and perform LF normalization
* text=auto

35
.gitignore vendored Normal file
View File

@@ -0,0 +1,35 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts

5
.idea/.gitignore generated vendored Normal file
View File

@@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

26
.idea/codeStyles/Project.xml generated Normal file
View File

@@ -0,0 +1,26 @@
<component name="ProjectCodeStyleConfiguration">
<code_scheme name="Project" version="173">
<JSCodeStyleSettings version="0">
<option name="FORCE_SEMICOLON_STYLE" value="true" />
<option name="FORCE_QUOTE_STYlE" value="true" />
</JSCodeStyleSettings>
<TypeScriptCodeStyleSettings version="0">
<option name="FORCE_SEMICOLON_STYLE" value="true" />
<option name="FORCE_QUOTE_STYlE" value="true" />
</TypeScriptCodeStyleSettings>
<codeStyleSettings language="JavaScript">
<option name="ALIGN_MULTILINE_PARAMETERS" value="false" />
<option name="ALIGN_MULTILINE_FOR" value="false" />
<indentOptions>
<option name="USE_TAB_CHARACTER" value="true" />
</indentOptions>
</codeStyleSettings>
<codeStyleSettings language="TypeScript">
<option name="ALIGN_MULTILINE_PARAMETERS" value="false" />
<option name="ALIGN_MULTILINE_FOR" value="false" />
<indentOptions>
<option name="USE_TAB_CHARACTER" value="true" />
</indentOptions>
</codeStyleSettings>
</code_scheme>
</component>

5
.idea/codeStyles/codeStyleConfig.xml generated Normal file
View File

@@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="USE_PER_PROJECT_SETTINGS" value="true" />
</state>
</component>

6
.idea/inspectionProfiles/Project_Default.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>

6
.idea/jsLinters/eslint.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="EslintConfiguration">
<option name="fix-on-save" value="true" />
</component>
</project>

8
.idea/modules.xml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/new_portfolio.iml" filepath="$PROJECT_DIR$/.idea/new_portfolio.iml" />
</modules>
</component>
</project>

12
.idea/new_portfolio.iml generated Normal file
View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

4
.idea/watcherTasks.xml generated Normal file
View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
</project>

34
README.md Normal file
View File

@@ -0,0 +1,34 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/index.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

8
next.config.js Normal file
View File

@@ -0,0 +1,8 @@
/* eslint-disable */
const path = require("path");
module.exports = {
sassOptions: {
includePaths: [path.join(__dirname, "styles")],
},
};

4182
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

36
package.json Normal file
View File

@@ -0,0 +1,36 @@
{
"name": "new_portfolio",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@splidejs/react-splide": "^0.7.12",
"@types/node": "20.3.0",
"@types/react": "18.2.11",
"@types/react-dom": "18.2.4",
"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",
"animejs": "^3.2.1",
"aos": "^2.3.4",
"bootstrap": "^5.3.0",
"eslint": "8.42.0",
"eslint-config-next": "13.4.5",
"next": "^13.4.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.9.0",
"typescript": "5.1.3"
},
"devDependencies": {
"@next/eslint-plugin-next": "^13.4.12",
"@types/aos": "^3.0.4",
"eslint-plugin-react": "^7.33.0",
"eslint-plugin-react-hooks": "^4.6.0",
"sass": "^1.64.1"
}
}

18
pages/_app.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { AppProps } from "next/app";
import { useEffect } from "react";
import AOS from "aos";
import "../src/styles/main.scss";
import "aos/dist/aos.css";
import "@splidejs/splide/css/sea-green";
export default function MyApp({ Component, pageProps }: AppProps) {
useEffect(() => {
// here you can add your aos options
AOS.init({
offset: 100,
});
}, []);
return <Component {...pageProps} />;
}

13
pages/_document.tsx Normal file
View File

@@ -0,0 +1,13 @@
import {Html, Head, Main, NextScript} from "next/document";
export default function Document() {
return (
<Html>
<Head/>
<body>
<Main/>
<NextScript/>
</body>
</Html>
);
}

BIN
pages/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

0
pages/globals.css Normal file
View File

9
pages/index.tsx Normal file
View File

@@ -0,0 +1,9 @@
import MainPage from "@/src/portfolio/MainPage";
export default function Home() {
return (
<main>
<MainPage/>
</main>
);
}

21
pages/layout.tsx Normal file
View File

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

95
pages/tutor/page.tsx Normal file
View File

@@ -0,0 +1,95 @@
import Image from "next/image";
import styles from "../page.module.css";
export default function Home() {
return (
<main className={styles.main}>
<div className={styles.description}>
<p>
Get sasdasddassdsatarted by editing&nbsp;
<code className={styles.code}>app/page.tsx</code>
</p>
<div>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{" "}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className={styles.vercelLogo}
width={100}
height={24}
priority
/>
</a>
</div>
</div>
<div className={styles.center}>
<Image
className={styles.logo}
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
priority
/>
</div>
<div className={styles.grid}>
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2>
Docs <span>-&gt;</span>
</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2>
Learn <span>-&gt;</span>
</h2>
<p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
</a>
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2>
Templates <span>-&gt;</span>
</h2>
<p>Explore the Next.js 13 playground.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className={styles.card}
target="_blank"
rel="noopener noreferrer"
>
<h2>
Deploy <span>-&gt;</span>
</h2>
<p>
Instantly deploy your Next.js site to a shareable URL with Vercel.
</p>
</a>
</div>
</main>
);
}

BIN
public/portfolio/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

6
public/portfolio/logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

15
public/portfolio/manifest.json Normal file
View File

@@ -0,0 +1,15 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "256x256 64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#000000"
}

BIN
public/portfolio/profile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
public/portfolio/projects/cryptogram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 288 KiB

BIN
public/portfolio/projects/photocast.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
public/portfolio/projects/port1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 994 KiB

BIN
public/portfolio/projects/port2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
public/portfolio/projects/port3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 532 KiB

BIN
public/portfolio/projects/proj1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1002 KiB

BIN
public/portfolio/projects/proj2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 152 KiB

BIN
public/portfolio/projects/tutor.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 874 KiB

3
public/portfolio/robots.txt Normal file
View File

@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

BIN
public/portfolio/view/images/about.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/portfolio/view/images/cpp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
public/portfolio/view/images/css.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
public/portfolio/view/images/html.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
public/portfolio/view/images/java.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

BIN
public/portfolio/view/images/javascript.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
public/portfolio/view/images/php.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
public/portfolio/view/images/profile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
public/portfolio/view/images/python.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
public/portfolio/view/images/sql.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
public/portfolio/view/images/top.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

561
public/portfolio/view/index.html Normal file
View File

@@ -0,0 +1,561 @@
<html data-scroll="0">
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Patryk Kuchta</title>
<link rel="stylesheet" href="stylesheets/reset.css" type="text/css" />
<link rel="stylesheet" href="stylesheets/style.css" type="text/css" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital@1&display=swap" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@200;300&family=Mulish:wght@300;500&display=swap"
rel="stylesheet">
</head>
<body>
<div id="floatingmenu">
<div class="triangle">
<a href="#intro"> <img class="totop" src="images/top.png"> </a>
</div>
</div>
<div class="floatingwarning">
Please be aware that this website is only a preview of my previous work!
Most information here has not been updated since I have created my newest website:
If you are visiting to read about me please click <a href="/">here</a> to go to the newest website.
</div>
<div class="container-fluid p-0 m-0 w-100 d-inline">
<div class="row pt-1 m-0" id="intro">
<div class="col-md-5">
<img src="images/profile.png" alt="picture of me" class="profile" />
</div>
<div class="col-md-5" id="intro_text">
<h1>Hello! My name is <b>Patryk Kuchta</b>. I'm a Computer Science Student at Queen Mary University in
London. I'm looking forward to becoming a <b>Software Engineer</b>.</h1>
<p>
<br>
Growing up in the era of rapid digitalization, by the time I was in high school, I was sure where I
was heading for my career, and it was computer science. Why? Because computers are my hobby and I
love solving logical-mathematical problems, furthermore there are plenty of ways to apply IT to
regular Engineering, which always was something that I was interested in. Getting a place at a very
reputable Queen Mary University in London and a job at Queen Mary University as a Demonstrator
(Teaching Assistant)
put me on the right track to achieve success in my life.
<br>
<br>
<br>
<br>
<br>
</p>
<a class="jumpto" href="#education">Education</a>
<a class="jumpto" href="#experience">Experience</a>
<a class="jumpto" href="#certification">Certificates</a>
<a class="jumpto" href="#skills">Skills</a>
<a class="jumpto" href="#projects">Projects</a>
<a class="jumpto" href="#contact">Contact</a>
</div>
<div class="col-md-2">
</div>
</div>
<div class="row m-0" id="education">
<div class="col-md-2">
</div>
<div class="col-md-3 white_text">
<h1>
<b>"An investment in knowledge pays the best interest."</b><br> <i>Benjamin Franklin</i>
</h1>
</div>
<div class="col-md-5 white_text">
<p style="text-align:left;">
Second year student at Queen Mary University, London
<span class="date">
Since September 2020
</span><br>
Course: (BSc) Computer Science <br>
• First year’s average mark at 89% <br>
• 1st in all eight modules
</p>
<hr>
<p style="text-align:left;">
Jan Zamoyski High School, Warsaw
<span class="date">
2017 - 2020
</span><br>
• Class with extended Mathematics, IT and Physics
</p>
</div>
<div class="col-md-2">
</div>
</div>
<div class="row p-0 m-0" id="experience">
<div class="col-md-1"></div>
<div class="col-md-10">
<h1 class="colour_head">
My professional experience
</h1>
<p id="exp_text">
Although I am only 20 years old, I have already worked in 7 different companies. This of course gave
me a lot of insight into how companies work, both those big and startups. My early jobs
centred around hospitality and retail, which gave me knowledge about problems that could be solved
using IT in those areas. Lately, I'm mostly involved in positions about teaching and supporting
students, which are stimulating my skills that are important in IT workplaces, for example, the
ability to explain concepts to a 'non-IT' crowd, and leading a team. In February, in keeping with my
passion for teaching I have decided to start working as a freelance private tutor.
</p>
<div class="row pt-4 m-0">
<div class="col-md-3 p-2">
</div>
<div class="col-md-6 p-2">
<div class="binner">
<p style="text-align:left;">
<b>Freelance private Tutoring @ Kuchta Tutoring</b>
<span class="date">
<b>Since February 2022</b>
</span><br>
<hr>
<b>
• Find out more <a href="tutor.html">here</a><br />
• Further improved my tutoring skills<br />
• Gained a lot of knowledge into how businesses are run
</b>
</p>
</div>
</div>
<div class="col-md-3 p-2">
</div>
</div>
<div class="row pt-4 m-0">
<div class="col-md-6 p-2">
<div class="binner">
<p style="text-align:left; ">
<b>Demonstrator at Queen Mary University in London</b>
<span class="date">
<b>Since September 2021</b>
</span><br>
<hr>
<b>
• Improved my interpersonal skills<br>
• Gained further professionalism in a remote working environment<br>
• Gained knowledge in explaining IT concepts in a professional manner<br>
• Tailored resources for individual needs
</b>
</p>
</div>
</div>
<div class="col-md-6 p-2">
<div class="binner">
<p style="text-align:left;">
<b>Tutor at FireTechCamp in London</b>
<span class="date">
<b>Since January 2022</b>
</span><br>
<hr>
<b>
• Improved my interpersonal skills<br />
• Gained further professionalism in remote working environments<br />
• Gained knowledge in explaining IT concepts in a professional manner<br />
• Refined my experience with tailoring resources for individual needs<br />
</b>
</p>
</div>
</div>
</div>
<div class="row pt-4 m-0">
<div class="col-md-6 p-2">
<div class="binner">
<p style="text-align:left; ">
<b>Tutor at MyTutor in London</b>
<span class="date">
<b>Since December 2021</b>
</span><br>
<hr>
<b>
• Acquired experience tutoring “one to one”<br />
• Gained further professionalism in remote working environments<br />
• Gained knowledge in explaining computer science concepts<br />
• Refined my experience with tailoring resources for individual needs<br />
</b>
</p>
</div>
</div>
<div class="col-md-6 p-2">
<div class="binner">
<p style="text-align:left;">
<b>Coding Tutor at Kodland in London</b>
<span class="date">
<b>May - August 2021</b>
</span><br>
<hr>
<b>
• Improved my presentational skills<br />
• Gained experience in a remote working environment<br />
• Gained skills in explaining programming principles<br /><br />
</b>
</p>
</div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div class="col-md-1"></div>
</div>
<div class="row pt-5 pb-5 m-0" id="certification">
<div class="col-md-1">
</div>
<div class="col-md-2 white_text">
<h1>
<b>Acquired certification</b>
</h1>
</div>
<div class="col-md-4 white_text">
<p style="text-align:left;">
IELTS Academic C1
<span class="date">
2020
</span><br>
Listening: 9.0, Reading: 8.0, Writing: 6.5, Speaking: 7.0, Overall: 7.5
</p>
<hr>
<p style="text-align:left;">
Project Management Principles
<span class="date">
2019
</span>
</p>
</div>
<div class="col-md-4 white_text">
<p style="text-align:left;">
Full EU Driver’s License
<span class="date">
2015 and 2019
</span><br>
AM and B Categories.
</p>
<hr>
<p style="text-align:left;">
Project Management Fundamentals
<span class="date">
2019
</span>
</p>
</div>
<div class="col-md-1">
</div>
</div>
<div class="row m-0 p-0" id="skills">
<div class="col-md-1">
</div>
<div class="col-md-10">
<h1 class="colour_head">
Some of the skills, that I have gained throught my life.
</h1>
<p>
Programming languages
</p>
<div class="row p-0 m-0 binner">
<div class="col-md-3">
<img src="images/java.png" class="skillico" alt="java">
</div>
<div class="col-md-3">
<img src="images/python.png" class="skillico" alt="python">
</div>
<div class="col-md-3">
<img src="images/cpp.png" class="skillico" alt="cpp">
</div>
<div class="col-md-3">
<img src="images/sql.png" class="skillico" alt="sql">
</div>
<div class="col-md-3">
<img src="images/javascript.png" class="skillico" alt="javascript">
</div>
<div class="col-md-3">
<img src="images/php.png" class="skillico" alt="php">
</div>
<div class="col-md-3">
<img src="images/html.png" class="skillico" alt="html">
</div>
<div class="col-md-3">
<img src="images/css.png" class="skillico" alt="css">
</div>
</div>
<p class="smallhead">
Languages
</p>
<div class="row p-0 m-0 languages">
<div class="col-md-4">
<div class="binner">
<p style="font-size: 170%; text-align:left;">
<b>
Polish
<hr>
Native
</b>
<span style="float:right;">
<b>C2</b>
</span>
</p>
</div>
</div>
<div class="col-md-4">
<div class="binner">
<p style="font-size: 170%; text-align:left;">
<b>
English
<hr>
Advanced
</b>
<span style="float:right;">
<b>C1</b>
</span>
</p>
</div>
</div>
<div class="col-md-4">
<div class="binner">
<p style="font-size: 170%; text-align:left;">
<b>
German
<hr>
Intermediate
</b>
<span style="float:right;">
<b>B2</b>
</span>
</p>
</div>
</div>
</div>
<p class="smallhead">
Other Skills
</p>
<div id="minorskills">
<div class="smallcont">
<b>
Ability to work in fast-paced environments
</b>
</div>
<div class="smallcont">
<b>
Extensive knowledge in consumer electronics, motorbikes and cars
</b>
</div>
<div class="smallcont">
<b>
Expertise in photo and video editing
</b>
</div>
<div class="smallcont">
<b>
Proficiency in using Microsoft Office and Linux
</b>
</div>
<div class="smallcont">
<b>
Ability to solder, build, diagnose and repair computers
</b>
</div>
<div class="smallcont">
<b>
Great communication skills and ability to work in team
</b>
</div>
</div>
</div>
<div class="col-md-1">
</div>
</div>
<div class="row p-0 m-0" id="projects">
<div class="col-md-1">
</div>
<div class="col-md-10 white_text">
<h2>Some of my most intresting projects</h2>
<div class="col-md-12">
<div class="project">
<h1>This portfolio website</h1>
<div class="row p-0 m-0">
<div class="col-md-6">
<img src="../projects/port1.png" class="imgproject">
</div>
<div class="col-md-6 projecttext">
<p>
This website was created with a clear and elegant design in mind. This meant
reducing flamboyant animations and effects to the minimum as that would make it
harder the convey the message. To create this website I have used HTML, CSS and
Bootstrap. The absence of javascript is to ensure maximum optimisation and
compatibility. Furthermore, this will mean that this website will be very
responsive no matter what device is being used. Use of Bootstrap only adds to
the compatibility argument.
<br>
<br>
<a href="">Go back to the top</a><br>
<a href="https://github.com/KuchtaVR6/porfolio">Github repository</a>
</p>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="project">
<h1>A portfolio website for an Architect</h1>
<div class="row p-0 m-0">
<div class="col-md-6">
<img src="../projects/port2.png" class="imgproject">
</div>
<div class="col-md-6 projecttext">
<p>
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.
<br><br>
<a href="https://aleksandrakuchta.co.uk">Link to the website</a><br>
<a href="https://github.com/KuchtaVR6/kuchtavr6.github.io">Github repository</a>
</p>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="project">
<h1>A discord bot</h1>
<div class="row p-0 m-0">
<div class="col-md-6">
<img src="../projects/proj2.png" class="imgproject">
</div>
<div class="col-md-6 projecttext">
<p>
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.
<br>
<br>
<a
href="https://discord.com/api/oauth2/authorize?client_id=819208892834644008&permissions=0&scope=bot">Link
for inviting the bot</a>
</p>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="project">
<h1>DIY AndroidAuto Car Infotainment</h1>
<div class="row p-0 m-0">
<div class="col-md-6">
<img src="../projects/proj1.png" class="imgproject">
</div>
<div class="col-md-6 projecttext">
<p>
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.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-1">
</div>
</div>
<div class="row pb-5 m-0" id="contact">
<div class="col-md-3">
</div>
<div class="col-md-6">
<p style="text-align:center">
Patryk Kuchta
</p>
<hr>
<p style="text-align:left;">
Phone number:
<span style="float:right;">
07467 174589
</span><br>
</p>
<hr>
<p style="text-align:left;">
Email:
<span style="float:right;">
<a href="mailto: patrick@kuchta.uk">patrick@kuchta.uk</a>
</span>
</p>
<hr>
<p style="text-align:left;">
Discord:
<span style="float:right;">
Kuchta#1111
</span><br>
</p>
<hr>
<p style="text-align:left;">
Github:
<span style="float:right;">
<a href="https://github.com/KuchtaVR6">https://github.com/KuchtaVR6</a>
</span><br>
</p>
<hr>
<p style="text-align:left;">
Linkedin:
<span style="float:right;">
<a
href="https://www.linkedin.com/in/kuchtap/">https://www.linkedin.com/in/kuchtap/</a>
</span><br>
</p>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</body>
</html>

7
public/portfolio/view/stylesheets/reset.css Normal file
View File

@@ -0,0 +1,7 @@
html, body, div, span, h1, h2, h3, h4, h5, h6, p, table, hgroup, section, a, img, caption, figcaption {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}

240
public/portfolio/view/stylesheets/style.css Normal file
View File

@@ -0,0 +1,240 @@
@media screen and (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
@media (orientation: landscape) {
#intro{
min-height: 100vh;
background: rgb(59,86,166);
background: linear-gradient(139deg, rgba(59,86,166,1) 0%, rgba(169,60,81,1) 29%, rgba(59,86,166,1) 64%);
background-size: auto 100%;
background-repeat: no-repeat;
color: rgb(255, 255, 255);
font-family: 'Montserrat', sans-serif;
}
.profile{
margin-top: 30vh;
height: 70vh;
}
.triangle
{
bottom: 0;
right: 0;
width: 0;
height: 0;
border-bottom: 5vw solid rgba(136, 136, 136, 0.747);
border-left: 5vw solid transparent;
margin: 0%;
}
.floatingwarning{
position: fixed;
padding: 2%;
bottom: 10%;
left: 10%;
z-index: 2;
background-color: rgba(0, 0, 0, 0.68);
color: white;
font-size: 1.5em;
width: 40%;
}
}
@media (orientation: portrait) {
#intro{
min-height: 100vh;
background: rgb(59,86,166);
background: linear-gradient(139deg, rgba(59,86,166,1) 0%, rgba(169,60,81,1) 29%, rgba(59,86,166,1) 64%);
background-size: 100% auto;
background-repeat: no-repeat;
color: rgb(255, 255, 255);
font-family: 'Montserrat', sans-serif;
}
.profile{
display: none;
}
.triangle
{
bottom: 0;
right: 0;
width: 0;
height: 0;
border-bottom: 20vw solid rgba(136, 136, 136, 0.747);
border-left: 20vw solid transparent;
margin: 0%;
}
.floatingwarning{
position: fixed;
padding: 1%;
bottom: 2%;
left: 2%;
z-index: 2;
background-color: rgba(0, 0, 0, 0.68);
color: white;
font-size: 1.125em;
width: 60%;
}
}
#floatingmenu{
position: fixed;
z-index: 2;
bottom: 0;
right: 0;
}
#intro p{
line-height: 1.5;
}
.jumpto{
font-weight: bold;
/*background-color: rgba(255, 255, 255, 0.171);
border: 1px solid #4d4d4d;
border-radius: 10px;
box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
*/
box-sizing: border-box;
color: #fdfdfd;
cursor: pointer;
display: inline-block;
font-family: "Montserrat",sans-serif;
font-size: 100%;
margin: 4 px;
padding: 5px;
text-decoration: none;
text-align: center;
vertical-align: middle;
font-weight: bold;
}
.jumpto:hover {
background-color: rgba(255, 255, 255, 0.9);
text-decoration: none;
}
.jumpto img{
width: 3vw;
}
#intro h1{
font-size: 230%;
padding-top: 15%;
padding-bottom: 2%;
}
#intro_text{
font-size: 120%;
padding-right: 2%;
padding-bottom: 3%;
}
#education .white_text{
margin-top: 7%;
margin-bottom: 6%;
}
.white_text{
font-family: 'Mulish', sans-serif;
padding: 4% 2% 4% 2%;
font-size: 120%;
}
#certification .white_text{
padding: 10% 5% 10% 5%;
}
.white_text h2{
font-size: 400%;
}
#experience{
background: rgb(125,59,166);
background: linear-gradient(30deg, rgba(125,59,166,1) 0%, rgba(59,86,166,1) 43%, rgba(125,59,166,1) 100%);
color: white;
}
.colour_head{
text-align: center;
padding: 10% 0% 1% 0%;
font-family: 'Montserrat', sans-serif;
font-size: 370%;
}
#skills p{
text-align: center;
padding: 3% 0% 3% 0%;
font-size: 200%;
font-family: 'Montserrat', sans-serif;
}
#exp_text{
padding: 3% 20% 3% 20%;
line-height: 2;
font-weight: 600;
font-family: 'Montserrat', serif;
}
.binner{
color: rgb(0, 0, 0);
padding: 6% 3% 6% 3%;
font-size: 110%;
line-height: 2;
font-family: 'Montserrat', sans-serif;
border-radius: 3%;
margin: 3%;
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 20px 20px rgba(0, 0, 0, 0.288);
}
#skills{
background: rgb(59,156,166);
background: linear-gradient(30deg, rgba(59,156,166,1) 0%, rgba(59,86,166,1) 61%, rgba(59,156,166,1) 100%);
color: rgb(255, 255, 255);
}
.skillico{
width: 100%;
padding: 20%;
}
#minorskills{
padding: 0% auto;
margin-left: 5%;
margin-bottom: 10%;
}
.smallcont{
display: inline-block;
margin: 1%;
padding: 2%;
color: rgb(0, 0, 0);
font-size: 130%;
font-family: 'Montserrat', sans-serif;
border-radius: 3%;
background-color: rgba(255, 255, 255, 0.459);
box-shadow: 5px 10px rgba(0, 0, 0, 0.432);
}
.smallhead{
padding-top: 4% !important;
}
.languages .binner{
padding: 8% 20% 8% 20%;
}
#projects{
text-align: center;
}
.project{
margin-top: 4%;
margin-bottom: 4%;
padding: 1%;
}
.project h1{
padding: 3% 0% 3% 0%;
font-size: 350%;
}
.imgproject{
width: 100%;
padding-bottom: 5%;
}
.projecttext{
font-size: 100%;
text-align:justify;
}
.totop{
position: absolute;
top: 50%;
left: 50%;
width: 40%;
padding: 0%;
opacity: 10%;
}
.triangle:hover .totop{
opacity: 100%;
}
.date{
font-style: italic;
float: right;
font-size: 80%;
}

19
src/portfolio/MainPage.tsx Normal file
View File

@@ -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;

36
src/portfolio/data/certificateData.ts Normal file
View File

@@ -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;

43
src/portfolio/data/educationData.ts Normal file
View File

@@ -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;

77
src/portfolio/data/workExperienceData.ts Normal file
View File

@@ -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;

51
src/portfolio/helpers/Certificate.tsx Normal file
View File

@@ -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;

54
src/portfolio/helpers/Education.tsx Normal file
View File

@@ -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;

74
src/portfolio/helpers/ProgressBar.tsx Normal file
View File

@@ -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;

44
src/portfolio/helpers/Project.tsx Normal file
View File

@@ -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;

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

@@ -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;

42
src/portfolio/helpers/WorkExperience.tsx Normal file
View File

@@ -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;

56
src/portfolio/sections/Achievements.tsx Normal file
View File

@@ -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;

56
src/portfolio/sections/Experience.tsx Normal file
View File

@@ -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;

10
src/portfolio/sections/Footer.tsx Normal file
View File

@@ -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;

66
src/portfolio/sections/Intro.tsx Normal file
View File

@@ -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;

97
src/portfolio/sections/Projects.tsx Normal file
View File

@@ -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;

52
src/portfolio/styling/achievements.module.scss Normal file
View File

@@ -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;
}
}
}

38
src/portfolio/styling/experience.module.scss Normal file
View File

@@ -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;
}
}

87
src/portfolio/styling/intro.module.scss Normal file
View File

@@ -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;
}

44
src/styles/helpers.scss Normal file
View File

@@ -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;
}
}

378
src/styles/main.scss Normal file
View File

@@ -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;
}

28
tsconfig.json Normal file
View File

@@ -0,0 +1,28 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}