diff --git a/.eslintrc.json b/.eslintrc.json index e3562ab..2360924 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -4,6 +4,11 @@ "plugins": [ "@typescript-eslint" ], + "settings": { + "react": { + "version": "18.2.0" + } + }, "extends": [ "eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", diff --git a/package.json b/package.json index 6d2702c..332759c 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,10 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "next dev", + "dev": "next dev -p 4000", "build": "next build", - "start": "next start", - "lint": "next lint", - "deploy": "git pull && npx next build && npx next start" + "start": "next start -p 4000", + "lint": "next lint" }, "dependencies": { "@splidejs/react-splide": "^0.7.12", diff --git a/pages/_app.tsx b/pages/_app.tsx index 6c97598..a14f88b 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -6,6 +6,8 @@ import "../src/styles/main.scss"; import "aos/dist/aos.css"; import "@splidejs/splide/css/sea-green"; +import Head from "next/head"; + export default function MyApp({ Component, pageProps }: AppProps) { useEffect(() => { // here you can add your aos options @@ -14,5 +16,28 @@ export default function MyApp({ Component, pageProps }: AppProps) { }); }, []); - return ; + return <> + + Patryk Kuchta + + + + + + + + + + + + + + + + ; } \ No newline at end of file diff --git a/pages/_document.tsx b/pages/_document.tsx index f4f8309..d317003 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -2,7 +2,7 @@ import {Html, Head, Main, NextScript} from "next/document"; export default function Document() { return ( - +
diff --git a/pages/layout.tsx b/pages/layout.tsx index 814ed29..e0eb2e4 100644 --- a/pages/layout.tsx +++ b/pages/layout.tsx @@ -1,12 +1,6 @@ -//import "./globals.css"; -import { Inter } from "next/font/google"; +import { Work_Sans } from "next/font/google"; -const inter = Inter({ subsets: ["latin"] }); - -export const metadata = { - title: "Create Next App", - description: "Generated by create next app", -}; +const workSans = Work_Sans({ subsets: ["latin"] }); export default function RootLayout({ children, @@ -15,7 +9,7 @@ export default function RootLayout({ }) { return ( - {children} + {children} ); } diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..550bd73 --- /dev/null +++ b/public/manifest.json @@ -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." +} \ No newline at end of file diff --git a/src/portfolio/data/projectData.ts b/src/portfolio/data/projectData.ts new file mode 100644 index 0000000..116f973 --- /dev/null +++ b/src/portfolio/data/projectData.ts @@ -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; \ No newline at end of file diff --git a/src/portfolio/helpers/Certificate.tsx b/src/portfolio/helpers/Certificate.tsx index cf98855..2adb4ef 100644 --- a/src/portfolio/helpers/Certificate.tsx +++ b/src/portfolio/helpers/Certificate.tsx @@ -14,11 +14,11 @@ const Award : FC = (props) => { const getCountryEmoji = () => { switch (props.city) { case "Warsaw": - return "🇵🇱"; + return ", PL"; case "London": - return "🏴󠁧󠁢󠁥󠁮󠁧󠁿"; + return ", UK󠁧󠁢󠁥󠁮󠁧󠁿"; case "Edinburgh": - return "🏴󠁧󠁢󠁳󠁣󠁴󠁿"; + return ", UK󠁧󠁢󠁳󠁣󠁴󠁿"; } }; @@ -40,7 +40,7 @@ const Award : FC = (props) => { } -
{props.city} {getCountryEmoji()}
+
{props.city}{getCountryEmoji()}
{props.awardDate} diff --git a/src/portfolio/helpers/Education.tsx b/src/portfolio/helpers/Education.tsx index eb2dbf8..7b2488f 100644 --- a/src/portfolio/helpers/Education.tsx +++ b/src/portfolio/helpers/Education.tsx @@ -17,11 +17,11 @@ const Education : FC = (props) => { const getCountryEmoji = () => { switch (props.city) { case "Warsaw": - return "🇵🇱"; + return ", Poland"; case "London": - return "🏴󠁧󠁢󠁥󠁮󠁧󠁿"; + return ", England, UK󠁧󠁢󠁥󠁮󠁧󠁿"; case "Edinburgh": - return "🏴󠁧󠁢󠁳󠁣󠁴󠁿"; + return ", Scotland, UK󠁧󠁢󠁳󠁣󠁴󠁿"; } }; @@ -43,7 +43,7 @@ const Education : FC = (props) => { } -
{props.city} {getCountryEmoji()}
+
{props.city}{getCountryEmoji()}
{props.endDate ? props.startDate + " - " + props.endDate : "Since " + props.startDate} diff --git a/src/portfolio/helpers/Project.tsx b/src/portfolio/helpers/Project.tsx index 26d7089..497b56d 100644 --- a/src/portfolio/helpers/Project.tsx +++ b/src/portfolio/helpers/Project.tsx @@ -1,40 +1,68 @@ -import {FaGithubSquare} from "react-icons/fa"; -import {BiLinkExternal} from "react-icons/bi"; -import {FC} from "react"; -import Technology from "@/src/portfolio/helpers/Technology"; +import TechnologyDisplay from "@/src/portfolio/helpers/TechnologyDisplay"; +import Image from "next/image"; +import styles from "../styling/projects.module.scss"; +import {VscGithub} from "react-icons/vsc"; +import {BsGlobe2} from "react-icons/bs"; -type args = { - path : string, +export interface ProjectArguments { + imagePath : string, title : string, text : string, - tech : string[], + tech : TechnologyEnum[], github? : string, access? : string } -const Project : FC = ({path, title, text, tech, github, access}) => { +export enum TechnologyEnum { + typescript = "typescript", + react = "react", + html = "html", + css = "css", + express = "express.js", + javascript = "javascript", + bootstrap = "bootstrap", + python = "python", + linux = "linux", + design3d = "3d design", + php = "php" +} + +const Project = ({imagePath, title, text, tech, github, access} : ProjectArguments) => { let i = 0; return ( -
-
-
- {title} -

Technologies Used:

-
- {tech.map((value) => { - i++; - return ; - })} -
+
+
+

{title}

+

+ {text} +

+
+ {github? + + + : ""} + {access? + + + : ""}
+
-
-

{title}

-

- {text} -

- {github? Github repository of the project:""} - {access? View and use the project here:""} +
+
+ {"Image +
+

Technologies Used:

+
+ {tech.map((value) => { + i++; + return ; + })}
diff --git a/src/portfolio/helpers/Technology.tsx b/src/portfolio/helpers/Technology.tsx deleted file mode 100644 index 8d15534..0000000 --- a/src/portfolio/helpers/Technology.tsx +++ /dev/null @@ -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 = ({name, score, customScore}) => { - if (score) { - return ( -
- {name} - -
- ); - } - return ( - - {name} - - ); -}; - -export default Technology; \ No newline at end of file diff --git a/src/portfolio/helpers/TechnologyDisplay.tsx b/src/portfolio/helpers/TechnologyDisplay.tsx new file mode 100644 index 0000000..af9f1ad --- /dev/null +++ b/src/portfolio/helpers/TechnologyDisplay.tsx @@ -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 = ({name, score, customScore}) => { + if (score) { + return ( +
+ {name} + +
+ ); + } + return ( + + {name} + + ); +}; + +export default TechnologyDisplay; \ No newline at end of file diff --git a/src/portfolio/sections/Footer.tsx b/src/portfolio/sections/Footer.tsx index c16f204..54df543 100644 --- a/src/portfolio/sections/Footer.tsx +++ b/src/portfolio/sections/Footer.tsx @@ -1,8 +1,9 @@ +import styles from "../styling/footer.module.scss"; + const Footer = () => { return ( -