reset

dreamz12345 · Jun 17, 2024 · 4d6508a · 4d6508a
1 parent f1fd5e6
commit 4d6508a
Show file tree

Hide file tree

Showing 15 changed files with 69 additions and 52 deletions.
diff --git a/.github/workflows/deploy_gh_page.yaml b/.github/workflows/deploy_gh_page.yaml
@@ -29,6 +29,8 @@ jobs:
       - name: Build portfolio
         working-directory: ./portfolio
         run: npm run build
+
+
       # - name: Deploy
       #   uses: peaceiris/actions-gh-pages@v4
       #   with:

diff --git a/portfolio/package.json b/portfolio/package.json
@@ -1,5 +1,5 @@
 {
-  "homepage": "https://www.spychala.dev/#",
+  "homepage": "http://www.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/src/Assets/GitHub_Logo_White.png b/portfolio/src/Assets/GitHub_Logo_White.png
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/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);
     text-align: center;
     border-top: 1px solid rgb(60, 60, 60);
-    padding-left: 1rem;
-    padding-right: 1rem;
+    padding: 1.5vmax;
 
 }
diff --git a/portfolio/src/Components/Navbar/Navbar.css b/portfolio/src/Components/Navbar/Navbar.css
@@ -32,7 +32,7 @@
     justify-content: space-between;
     position: sticky;
     top: 0;
-    z-index: 3;
+    z-index: 5;
 }
 
 .material-symbols-outlined {
@@ -84,7 +84,7 @@
     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);
@@ -98,7 +98,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;

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-bottom: 1vmax;
     margin-top: 1rem;
+    border-bottom: 0.1vmax cornflowerblue solid;
+    padding-bottom: 4px;
 }
 
 .aboutLinkText {
     color: cornflowerblue;
-    font-size: 2.4rem;
+    font-size: 1.5vmax;
     font-weight: 400;
 }
 
@@ -33,27 +34,28 @@
 
 
 .aboutTopText {
-    border-left: 1px solid gray;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding-left: 4rem;
+    margin: 1vmax;
 }
 
 .aboutThinText {
-    font-size: 1.8rem;
+    font-size: 1.5vmax;
     font-weight: 100;
     color: rgb(200, 200, 200);
 }
 
 
 .aboutBoldText {
-    font-size: 2.4rem;
+    font-size: 1.7vmax;
     font-weight: 600;
-    color: white;
+    color: rgb(220, 220, 220);
 }
 
 
 .aboutPortraitPhoto {
-    width: 25rem;
+    width: 50%;
+    max-width: 40%;
+    margin: 1vmax;
 }
diff --git a/portfolio/src/Pages/About.js b/portfolio/src/Pages/About.js
@@ -27,7 +27,8 @@ const About = () => {
 
 
                     <div className="aboutMidDiv">
-                        <span className="aboutTitleText">Skills:</span>
+                        <span className="aboutTitleText">Skills</span>
+                        <span className="aboutBoldText">Hard 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>

diff --git a/portfolio/src/Pages/Home.css b/portfolio/src/Pages/Home.css
@@ -43,22 +43,9 @@
 
 
 .homeLinksDiv {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    justify-content: space-between;
-    margin: 3rem auto;
     padding-bottom: 3rem;
-    border-bottom: 0px solid rgb(100, 100, 100);
 }
 
-.homeLink{
-    display: flex;
-    justify-content: space-between;
-    overflow-x: hidden;
-
-
-}
 
 .homeLinkTextDivLeft{
     width: 50%;
@@ -101,14 +88,14 @@
     width: 50%;
     align-items: flex-end;
     justify-content: right;
-    z-index: -1;
+    z-index: 3;
 }
 
 .homePhotoDivRight{
     display: flex;
     width: 50%;
     align-items: flex-start;
-    z-index: -1;
+    z-index: 3;
 }
 
 .homePhoto {
@@ -126,7 +113,7 @@
 
 .portraitPhoto {
     object-fit: fill;
-    width: 40rem;
+    width: 30rem;
     min-width: 20rem;
 
 }

diff --git a/portfolio/src/Pages/Home.js b/portfolio/src/Pages/Home.js
@@ -2,6 +2,7 @@ import Footer from "../Components/Footer/Footer";
 import Navbar from "../Components/Navbar/Navbar";
 import ScrollToTop from "../Components/scrollToTop";
 import "./Home.css"
+import "./Projects.css"
 import myPhoto from "../Assets/placeholder_portrait.png"
 import pongSquare from "../Assets/pong_square_size.jpg"
 import renderPhoto from "../Assets/TT-SU2_700_samples_transparen_background.png"
@@ -17,19 +18,15 @@ const Home = () => {
 
                     <div className="homeLinksDiv">
                         <NavLink to={"/about"} className="homeLink">
-                            <div className="projectsLinkTextDivLeft">
-                                <div className="helloText">
-                                    <span className="softDev">Hello, I'm</span>
-                                    <span className="myName">Łukasz Spychała!! </span>
-                                    <span className="softDev">I'm aspiring </span>
-                                    <span className="helloIm">Software Developer</span>
-                                    <span className="softDev">Click here to learn </span>
-                                    <span className="softDev">more about me.</span>
+                        <div className="aboutTopDiv">
+                            <img className="aboutPortraitPhoto" alt="My Portrait" src={myPhoto}></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">you can <span className="aboutBoldText">click here</span></span>
+                                    <span className="aboutThinText">to learn more <span className="aboutBoldText">About Me</span></span>
                                 </div>
                             </div>
-                            <div className="homePhotoDivLeft">
-                                <img src={myPhoto} alt="myPhoto" className="portraitPhoto"></img>
-                            </div>
                         </NavLink>
                     </div>
 

diff --git a/portfolio/src/Pages/Projects.css b/portfolio/src/Pages/Projects.css
@@ -80,7 +80,7 @@
     display: flex;
     width: 50%;
     align-items: flex-start;
-    z-index: -1;
+    z-index: 3;
 }
 
 .projectsPhoto {
@@ -89,6 +89,14 @@
     min-width: 20rem;
     border: 2px solid rgb(100, 100, 100);
 }
+.projectsPhotoGitHub {
+    object-fit: fill;
+    width: 30rem;
+    min-width: 20rem;
+    margin-top: 7rem;
+    margin-bottom: 7rem;
+
+}
 
 
 .projectsTechnologiesUsed {

diff --git a/portfolio/src/Pages/Projects.js b/portfolio/src/Pages/Projects.js
@@ -6,19 +6,36 @@ import pongSquare from "../Assets/pong_square_size.jpg";
 import pythonLogo from "../Assets/python-logo-only.png";
 import arduinoLogo from "../Assets/arduino-logo.png";
 import cplusplusLogo from "../Assets/c++-logo.png";
+import GitHubLogo from "../Assets/GitHub_Logo_White.png"
 
 import placeholderPhoto from "../Assets/myPhoto.jpg";
 import { NavLink } from "react-router-dom";
 
+
+
 const Projects = () => {
+
+    var github_link = "https://github.com/dreamz12345/"
+
     return (
+
 <div className="page">
     <ScrollToTop/>
             <div className="pageAboveFooter">
                 <Navbar />
                 <div className="pageContent">
 
-
+                <div className="projectsLinksDiv">
+                        <a href={github_link} className="projectsLink">
+                            <div className="projectsPhotoDivRight">
+                                <img src={GitHubLogo} alt="projectsPhoto" className="projectsPhotoGitHub"></img>
+                            </div>
+                            <div className="projectsLinkTextDivRight">
+                                <span className="projectsLinkTextRight">All of my Projects</span>
+                                <span className="projectsLinkTextRightMedium">You can see them directly at my GitHub Page.</span>
+                            </div>
+                        </a>
+                    </div>
 
                     <div className="projectsLinksDiv">
                         <NavLink to="/projects" className="projectsLink">
@@ -27,7 +44,7 @@ const Projects = () => {
                             </div>
                             <div className="projectsLinkTextDivRight">
                                 <span className="projectsLinkTextRight">Pong Game</span>
-                                <span className="projectsLinkTextRightMedium">Famous oldschool game written by me in Python Turtle.</span>
+                                <span className="projectsLinkTextRightMedium">My take on famous oldschool game written in Python Turtle.</span>
                                 <div className="projectsTechnologiesUsedDiv">
                                     <img src={pythonLogo} alt="projectsPhoto" className="technologiesUsedPhoto"></img>
                                 </div>

diff --git a/portfolio/src/style.css b/portfolio/src/style.css
@@ -28,8 +28,12 @@ p{
 }
 
 .pageContent{
-    margin: 2rem auto;
+    margin: 1.5rem auto;
     max-width: 70vw;
+    background-color: rgb(31, 33, 35);
+    padding: 1rem 1rem;
+    border: 0.1vmax cornflowerblue solid;
+    border-radius: 2rem;
 }
 
 @media screen and (max-width:1050px) {