Merge branch 'ci'

dreamz12345 · Jul 15, 2024 · 1dfdec5 · 1dfdec5
2 parents 1bfdce8 + 7bb1c28
commit 1dfdec5
Show file tree

Hide file tree

Showing 43 changed files with 358 additions and 254 deletions.
diff --git a/.github/workflows/deploy_gh_page.yaml b/.github/workflows/deploy_gh_page.yaml
@@ -0,0 +1,57 @@
+name: Deploy Gh-pages
+
+
+run-name: ${{ github.actor }} is learning GitHub Actions
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  id-token: write
+  pages: write
+
+jobs:
+  build:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Install npm
+        working-directory: ./portfolio
+        run: npm install
+      - name: Build portfolio
+        working-directory: ./portfolio
+        run: npm run build
+
+
+      # - name: Deploy
+      #   uses: peaceiris/actions-gh-pages@v4
+      #   with:
+      #     github_token: ${{ secrets.GITHUB_TOKEN }}
+      #     publish_dir: ./portfolio/build
+      - name: Copy site to special dir
+        run: |
+          mkdir _site
+          cp -R portfolio/build/* _site/
+          ls -R
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/asset-manifest.json b/asset-manifest.json
diff --git a/index.html b/index.html
diff --git a/portfolio/package.json b/portfolio/package.json
@@ -1,5 +1,5 @@
 {
-  "homepage": "https://dreamz12345.github.io/portfolio",
+  "homepage": "https://spychala.dev/#",
   "name": "portfolio",
   "version": "0.1.0",
   "private": true,

diff --git a/portfolio/public/favicon.ico b/portfolio/public/favicon.ico
diff --git a/portfolio/public/index.html b/portfolio/public/index.html
@@ -6,15 +6,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Web site created using create-react-app"/>
-    <link rel="stylesheet" href="style.css">
     <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=Ubuntu:wght@300;400&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
-    <title>Portfolio</title>
+    <title>Łukasz Spychała Website</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root">
+
+    </div>
   </body>
 </html>
diff --git a/portfolio/src/App.js b/portfolio/src/App.js
@@ -1,4 +1,4 @@
-import { BrowserRouter, Routes, Route} from "react-router-dom"
+import { HashRouter, Routes, Route} from "react-router-dom"
 import Home from "../src/Pages/Home"
 import About from "../src/Pages/About"
 import Contact from "../src/Pages/Contact"
@@ -9,7 +9,7 @@ import Projects from "../src/Pages/Projects"
 function App() {
   return (
     <div className="App">
-      <BrowserRouter>
+      <HashRouter>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/home" element={<Home />} />
@@ -19,7 +19,7 @@ function App() {
           <Route path="/projects" element={<Projects />} />
           <Route path="*" element={<Home />} />
         </Routes>
-      </BrowserRouter>
+      </HashRouter>
     </div>
   );
 }

diff --git a/portfolio/src/Assets/0001-1200.mp4 b/portfolio/src/Assets/0001-1200.mp4
diff --git a/portfolio/src/Assets/GitHub_Logo_White.png b/portfolio/src/Assets/GitHub_Logo_White.png
diff --git a/portfolio/src/Assets/HOD_3000.png b/portfolio/src/Assets/HOD_3000.png
diff --git a/portfolio/src/Assets/IDME_2000.png b/portfolio/src/Assets/IDME_2000.png
diff --git a/portfolio/src/Assets/TT-SU2_700_samples_transparen_background.png b/portfolio/src/Assets/TT-SU2_700_samples_transparen_background.png
diff --git a/portfolio/src/Assets/about_square_size.jpg b/portfolio/src/Assets/about_square_size.jpg
diff --git a/portfolio/src/Assets/github-mark-white.png b/portfolio/src/Assets/github-mark-white.png
diff --git a/portfolio/src/Assets/placeholder_portrait.png b/portfolio/src/Assets/placeholder_portrait.png
diff --git a/portfolio/src/Assets/placeholder_portrait4.png b/portfolio/src/Assets/placeholder_portrait4.png
diff --git a/portfolio/src/Assets/pong_animation0000-0120.mp4 b/portfolio/src/Assets/pong_animation0000-0120.mp4
diff --git a/portfolio/src/Assets/trkME+.png b/portfolio/src/Assets/trkME+.png
diff --git a/portfolio/src/Components/Footer/Footer.css b/portfolio/src/Components/Footer/Footer.css
@@ -1,17 +1,16 @@
 .footer{
-    height: 3rem;
+    height: 2rem;
     width: 100vw;
     display: flex;
     align-items: center;
     justify-items: center;
     justify-content: center;
-    font-size: 0.8rem;
+    font-size: 1vmax;
     font-weight: 100;
     color: rgb(100, 100, 100);
-    background-color: rgb(40, 40, 40);
+    background-color: rgb(27, 27, 31);
     text-align: center;
-    border-top: 1px solid rgb(60, 60, 60);
-    padding-left: 1rem;
-    padding-right: 1rem;
+    border-top: 0.1vmax solid cornflowerblue;
+    padding: 1.5vmax;
 
 }
diff --git a/portfolio/src/Components/Navbar/Navbar.css b/portfolio/src/Components/Navbar/Navbar.css
@@ -1,6 +1,6 @@
 
 .navbar{
-    background-color: rgb(40, 40, 40);
+    background-color: rgb(27, 27, 31);
     border-bottom: 1px solid cornflowerblue;
     position: sticky;
     z-index: 20;
@@ -32,7 +32,7 @@
     justify-content: space-between;
     position: sticky;
     top: 0;
-    z-index: 3;
+    z-index: 5;
 }
 
 .material-symbols-outlined {
@@ -84,10 +84,11 @@
     flex-direction: column;
     border-radius: 1rem;
     justify-content: center;
-    border: solid 1px rgb(60, 60, 60);
+    border: solid 1px cornflowerblue;
     padding: 5px;
     text-align: center;
-    background-color: rgb(40, 40, 40);
+    background-color: rgb(27, 27, 31);
+
 }
 
 .openMobileMenuButton {
@@ -98,7 +99,7 @@
     height: 0;
     width: 0;
     border: 10px solid transparent;
-    border-bottom-color: rgb(60, 60, 60);
+    border-bottom-color: cornflowerblue;
     position: absolute;
     top: -1.3rem;
     right: 0.8rem;
@@ -124,9 +125,8 @@
 .active.mobileMenuNavLink {
     color: white;
     border-radius: 0.75rem;
-    background-color: rgb(35, 35, 35);
     background-size: contain;
-    border: 1px inset rgb(60, 60, 60);
+    border: 0.2vmax solid cornflowerblue;
 }
 
 

diff --git a/portfolio/src/Components/Navbar/Navbar.js b/portfolio/src/Components/Navbar/Navbar.js
@@ -11,7 +11,7 @@ const Navbar = () => {
             <div className="navbarContents">
                 <NavLink to="/" className="logoAndPortfolioText">
                     <img src={logo} alt="Logo" className="logoImg"></img>
-                    <text className="portfolioText">Portfolio</text>
+                    <p className="portfolioText">Portfolio</p>
 
                 </NavLink>
                     <div className="desktopMenu">

diff --git a/portfolio/src/Pages/About.css b/portfolio/src/Pages/About.css
@@ -2,28 +2,29 @@
 
 .aboutTopDiv {
     display: flex;
-    margin: auto 5rem;
     justify-content: center;
-
+    padding: 1vmax;
+
 }
 
 .aboutMidDiv {
     display: flex;
     justify-content: left;
     flex-direction: column;
-    margin: 3rem auto;
+    padding: 1vmax;
 }
 
 .aboutTitleText {
-    font-size: 3rem;
+    font-size: 2.5vmax;
     font-weight: 400;
-    margin-bottom: 1rem;
-    margin-top: 1rem;
+    border-bottom: 0.1vmax cornflowerblue solid;
+    padding-bottom: 4px;
+    margin-top: 1vmax;
 }
 
 .aboutLinkText {
     color: cornflowerblue;
-    font-size: 2.4rem;
+    font-size: 1.5vmax;
     font-weight: 400;
 }
 
@@ -33,27 +34,36 @@
 
 
 .aboutTopText {
-    border-left: 1px solid gray;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding-left: 4rem;
+    margin: 1vmax;
 }
 
-.aboutThinText {
-    font-size: 1.8rem;
+.thinTxt {
+    font-size: 1.5vmax;
     font-weight: 100;
     color: rgb(200, 200, 200);
 }
 
+.midTxt {
+    font-size: 1.5vmax;
+    font-weight: 600;
+    color: rgb(220, 220, 220);
+}
 
-.aboutBoldText {
-    font-size: 2.4rem;
+
+.boldTxt {
+    font-size: 1.7vmax;
     font-weight: 600;
-    color: white;
+    color: rgb(220, 220, 220);
+    margin-top: 1vmax;
 }
 
 
 .aboutPortraitPhoto {
-    width: 25rem;
+    width: 50%;
+    max-width: 40%;
+    margin: 1vmax;
+
 }
diff --git a/portfolio/src/Pages/About.js b/portfolio/src/Pages/About.js
@@ -1,14 +1,15 @@
 import Navbar from "../Components/Navbar/Navbar";
 import Footer from "../Components/Footer/Footer";
 import ScrollToTop from "../Components/scrollToTop";
-import placeholder_portrait from "./../Assets/placeholder_portrait.png"
+import placeholder_portrait from "./../Assets/placeholder_portrait4.png"
 import "./About.css";
-import { NavLink } from "react-router-dom";
 
 const About = () => {
     var python_projects = "https://github.com/dreamz12345/Python-Projects";
     var c_projects = "https://github.com/dreamz12345/Arduino-Heater";
     var react_projects = "https://github.com/dreamz12345/portfolio";
+    var docs_link = "https://github.com/dreamz12345/Python-Projects/blob/main/15%20-%20Coffee%20Machine/main.py";
+    var my_github_page = "https://github.com/dreamz12345";
     return (
         <div className="page">
             <ScrollToTop/>
@@ -19,34 +20,49 @@ const About = () => {
                     <div className="aboutTopDiv">
                         <img className="aboutPortraitPhoto" alt="My Portrait" src={placeholder_portrait}></img>
                         <div className="aboutTopText">
-                            <span className="aboutThinText">My name is <span className="aboutBoldText">Łukasz Spychała.</span></span>
-                            <span className="aboutThinText">I'm aspiring <span className="aboutBoldText">software developer</span></span>
-                            <span className="aboutThinText">with a goal of delivering <span className="aboutBoldText">high quality code</span></span>
-                            <span className="aboutThinText">with <span className="aboutBoldText">full documentation.</span></span>
+                            <span className="thinTxt">My name is <span className="boldTxt">Łukasz Spychała.</span></span>
+                            <span className="thinTxt">I'm aspiring <span className="boldTxt">software developer</span></span>
+                            <span className="thinTxt">with a goal of delivering <span className="boldTxt">high quality code</span></span>
+                            <span className="thinTxt">with <span className="boldTxt">full documentation.</span></span>
                         </div>
                     </div>
 
 
                     <div className="aboutMidDiv">
-                        <span className="aboutTitleText">Skills:</span>
-                        <span className="aboutThinText">- Programming languages: <a href={python_projects} className="aboutLinkText">Python</a> but I also dabbed a bit in <a href={c_projects} className="aboutLinkText"> C++</a> and <a href={react_projects} className="aboutLinkText"> React JSX</a></span>
-                        <span className="aboutThinText">- I'm not opposed to learn new technologies and tools.</span>
-                        <span className="aboutThinText">- I can create unit tests for my code.</span>
-                        <span className="aboutThinText">- I have wide range of hobbies: 3D modeling, 2D digital art, design so I have good understanding of color and composition that may come in handy in some projects.</span>
-                        <span className="aboutThinText">- Good English proficiency.</span>
+                        <span className="aboutTitleText">Skills</span>
+                        <span className="boldTxt">Hard Skills:</span>
+                        <ul>
+                            <li className="thinTxt"><text className="midTxt">Programming: </text>Mainly <a href={python_projects} className="aboutLinkText">Python</a> but also a little bit of <a href={c_projects} className="aboutLinkText"> C++</a> and <a href={react_projects} className="aboutLinkText"> React JSX</a></li>
+                            <li className="thinTxt"><text className="midTxt">Commitment to quality: </text>I always try to find the best possible solutions before I start to code.</li>
+                            <li className="thinTxt"><text className="midTxt">Creating with future in mind: </text>I believe that <a href={docs_link} className="aboutLinkText"> documentation</a> and good code design is very important to make sure my code can be understandable and reusable in the future. </li>
+                            <li className="thinTxt"><text className="midTxt">Version control software: </text>I use <a href={my_github_page} className="aboutLinkText">GitHub </a> and GitKraken.</li>
+                            <li className="thinTxt"><text className="midTxt">Tests: </text>I can write simple tests for my code in UnitTests na Pytest libraries.</li>
+                            <li className="thinTxt"><text className="midTxt">Wide range of interests: </text>3D modeling, 2D digital art, composition, color theory and more.</li>
+                            <li className="thinTxt"><text className="midTxt">Language: </text>Polish and English.</li>
+                        </ul>
+                        <span className="boldTxt">Soft Skills:</span>
+                        <ul>
+                            <li className="thinTxt"><text className="midTxt">Curiosity: </text>Being curious person allows me to discover new solutions fast.</li>
+                            <li className="thinTxt"><text className="midTxt">Grow-mindset: </text>I easliy find and learn from courses, tutorials, and quicktips which allows me to grow fast.</li>
+                            <li className="thinTxt"><text className="midTxt">Personal culture: </text>I do understand that everyone deserves respect and anyone can be wrong - myself included.</li>
+                            <li className="thinTxt"><text className="midTxt">Team player: </text>Good atmosphere in a team is important to me.</li>
+                        </ul>
+
                         <span className="aboutTitleText">How do I write my code:</span>
-                        <span className="aboutThinText">- I'm always looking for improvement of the code but I'm not going to force the company to do things my way.</span>
-                        <span className="aboutThinText">- I'm willing to put a lot of effort into writing documenation for my code because I believe that it's very important to ensure that the code is reusable and understandable by me and other software developers in the future.</span>
-                        <span className="aboutTitleText">What is my mindset when I work on a project:</span>
-                        <span className="aboutThinText">- Team player.</span>
-                        <span className="aboutThinText">- Finishing project and client satisfaction is the most important thing to keep the company afloat.</span>
-                        <span className="aboutThinText">- Easliy adapts to new tools and work ethic in new working environment.</span>
-                        <span className="aboutThinText">- I'm open to do courses to learn about technologies and libraries that your company use.</span>
-                        <span className="aboutThinText">- Good personal culture, I understand and accept that sometimes I could be wrong and others can be right.</span>
-                        <span className="aboutThinText">- When I write my code I always try to get done as much as possible in shortest possible time by focusing on functions and </span>
-                        <span className="aboutThinText">- I believe that software development is about solving problems and correct mindset and less about what programming language or library I'm currently using.</span>
-                        <span className="aboutThinText"></span>
-                        <span className="aboutThinText"></span>
+                        <ul>
+                            <li className="thinTxt"><text className="midTxt">High Quality: </text>I develop the code in small incremental steps making sure it always works.</li>
+                            <li className="thinTxt"><text className="midTxt">Incrementally: </text>I always develop in a way that will allow to easliy expend on created solutions in the future.</li>
+                            <li className="thinTxt"><text className="midTxt">With future in mind: </text>Keeping functions as independend as possible makes refactoring easy and ensures that the code is flexible and clear.</li>
+                            <li className="thinTxt"><text className="midTxt">Easy to Read: </text>I always try to oblige with community set code formating standards. I try to keep every single line of code as short and simple as possible which gives high readability and easy debugging if needed.</li>
+                        </ul>
+
+                        <span className="aboutTitleText">What is my mindset:</span>
+                        <ul>
+                            <li className="thinTxt"><text className="midTxt">Not stubborn: </text>I easliy adapt to new tools and work ethic in the new work environment.</li>
+                            <li className="thinTxt"><text className="midTxt">Focus on the right thing: </text>Finishing project and client satisfaction is the most important thing to me.</li>
+                            <li className="thinTxt"><text className="midTxt">Flexible: </text>I'm open to do courses to learn about technologies and libraries that your company use.</li>
+                            <li className="thinTxt"><text className="midTxt">Continous Improvement: </text>I'm always looking for improvement of the code but I'm not going to force the company to do things my way.</li>
+                        </ul>
                     </div>
 
                     <div className="aboutBotDiv">