diff --git a/.github/workflows/deploy_gh_page.yaml b/.github/workflows/deploy_gh_page.yaml index 41bd7c1..58c704c 100644 --- 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 index 6dadf97..7e8c7f6 100644 --- 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 new file mode 100644 index 0000000..1036526 Binary files /dev/null and b/portfolio/public/favicon.ico differ diff --git a/portfolio/src/Assets/GitHub_Logo_White.png b/portfolio/src/Assets/GitHub_Logo_White.png new file mode 100644 index 0000000..c61ab9d Binary files /dev/null and b/portfolio/src/Assets/GitHub_Logo_White.png differ diff --git a/portfolio/src/Assets/github-mark-white.png b/portfolio/src/Assets/github-mark-white.png new file mode 100644 index 0000000..50b8175 Binary files /dev/null and b/portfolio/src/Assets/github-mark-white.png differ diff --git a/portfolio/src/Assets/placeholder_portrait.png b/portfolio/src/Assets/placeholder_portrait.png index 4b6f05e..518ea3f 100644 Binary files a/portfolio/src/Assets/placeholder_portrait.png and b/portfolio/src/Assets/placeholder_portrait.png differ diff --git a/portfolio/src/Components/Footer/Footer.css b/portfolio/src/Components/Footer/Footer.css index f27fbd2..37fc4cb 100644 --- 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 index 5b54e52..9b45623 100644 --- 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 index 62e7fca..eabf815 100644 --- 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; } \ No newline at end of file diff --git a/portfolio/src/Pages/About.js b/portfolio/src/Pages/About.js index 2fcd456..c9d472e 100644 --- a/portfolio/src/Pages/About.js +++ b/portfolio/src/Pages/About.js @@ -27,7 +27,8 @@ const About = () => {
- Skills: + Skills + Hard Skills: - Programming languages: Python but I also dabbed a bit in C++ and React JSX - I'm not opposed to learn new technologies and tools. - I can create unit tests for my code. diff --git a/portfolio/src/Pages/Home.css b/portfolio/src/Pages/Home.css index da7a962..f0169ec 100644 --- 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 index 85bea9f..cae57f2 100644 --- 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 = () => {
-
-
- Hello, I'm - Łukasz Spychała!! - I'm aspiring - Software Developer - Click here to learn - more about me. +
+ My Portrait +
+ My name is Łukasz Spychała. + I'm aspiring software developer + you can click here + to learn more About Me
-
- myPhoto -
diff --git a/portfolio/src/Pages/Projects.css b/portfolio/src/Pages/Projects.css index dd2ec51..2098ea7 100644 --- 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 index 2b956ed..aabe20e 100644 --- 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 ( +
- +
@@ -27,7 +44,7 @@ const Projects = () => {
Pong Game - Famous oldschool game written by me in Python Turtle. + My take on famous oldschool game written in Python Turtle.
projectsPhoto
diff --git a/portfolio/src/style.css b/portfolio/src/style.css index 8d9e151..03efb96 100644 --- 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) {