From 266d27f6ffd9a34b0cf60576d42606a52eaf5fa1 Mon Sep 17 00:00:00 2001 From: Spythere Date: Fri, 23 Feb 2024 19:45:21 +0100 Subject: [PATCH] general styling & design --- package.json | 2 + src/App.tsx | 7 +- src/components/AboutSection.tsx | 47 -------- src/components/LandingSection.tsx | 16 --- src/components/ProjectsSection.tsx | 114 ------------------ src/components/styles/About.styled.ts | 88 ++++---------- src/components/styles/Cursor.styled.ts | 2 +- src/components/styles/Global.styled.ts | 16 ++- src/components/styles/Landing.styled.ts | 75 +++++++++--- src/components/styles/Navbar.styled.ts | 4 +- src/components/styles/Projects.styled.ts | 69 +++++++++-- src/components/styles/SectionHeader.styled.ts | 6 +- src/theme.ts | 2 +- vite.config.ts | 9 +- 14 files changed, 173 insertions(+), 284 deletions(-) delete mode 100644 src/components/AboutSection.tsx delete mode 100644 src/components/LandingSection.tsx delete mode 100644 src/components/ProjectsSection.tsx diff --git a/package.json b/package.json index 1554abc..83bb9a5 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "spythere-portfolio", "private": true, "version": "0.0.1", + "license": "MIT", "type": "module", "scripts": { "dev": "vite", @@ -14,6 +15,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-i18next": "^13.2.1", + "react-icons": "^4.12.0", "styled-components": "^6.0.7" }, "devDependencies": { diff --git a/src/App.tsx b/src/App.tsx index 24ccbf2..d484ff9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,10 +2,10 @@ import { ThemeProvider } from 'styled-components'; import { theme } from './theme'; import { GlobalStyles } from './components/styles/Global.styled'; import Navbar from './components/Navbar'; -import LandingSection from './components/LandingSection'; +import LandingSection from './sections/LandingSection'; import './i18n'; -import AboutSection from './components/AboutSection'; -import ProjectsSection from './components/ProjectsSection'; +import ProjectsSection from './sections/ProjectsSection'; +import AboutSection from './sections/AboutSection'; function App() { return ( @@ -25,4 +25,3 @@ function App() { } export default App; - diff --git a/src/components/AboutSection.tsx b/src/components/AboutSection.tsx deleted file mode 100644 index 088f23d..0000000 --- a/src/components/AboutSection.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { StyledAbout } from './styles/About.styled'; -import { StyledCursor } from './styles/Cursor.styled'; -import { StyledSectionHeader } from './styles/SectionHeader.styled'; - -const aboutInfo = [ - { - title: 'MYSELF', - desc: 'My name is Daniel Pająk, but on the internet, I am better known as Spythere. I was born in 1999 and since I got my first computer at my 11th birthday I was amazed by its complexity, functioning and ability to create my own products of imagination. Computers were always my way to relieve stress and distance myself from overwhelming situations. Coding various things and delving into more and more knowledge about ways I can virtually build things became my passion and it lasts since I have opened my Notepad++ for the first time.', - }, - { - title: 'MY JOURNEY', - desc: 'Miłością do programowania zaraził mnie mój przyjaciel, który pokazał mi jak robić proste aplikacje okienkowe w Javie. Potem przerodziło się to w hobby, gdy odkryłem, że za pomocą tego języka mogę tworzyć m.in. pluginy na serwery Minecraft. W technikum bardziej zainteresowałem się web developmentem, zaprojektowałem kilka stron dla mojej szkoły, a w wolnym czasie szlifowałem umiejętności z podstawowych technologii takich jak HTML, CSS i JS.', - }, - { - title: 'EXPERIENCE', - desc: ' Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure quia natus molestias doloremque voluptas quaerat earum necessitatibus! Iusto sapiente, soluta earum itaque perferendis placeat eligendi. Voluptas odio tenetur placeat quidem eveniet illo sunt ducimus distinctio corrupti. Velit tempore impedit eaque nihil exercitationem ipsa neque minus atque et, hic quae dolores!', - }, - { - title: 'FUTURE', - desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti neque sed aut, nostrum, et laboriosam cupiditate repellat nihil magnam, ratione enim illo culpa odit aperiam porro? Fugiat, repellendus repudiandae cupiditate perferendis veritatis ea corrupti cum, perspiciatis reiciendis sit adipisci. Obcaecati magnam quisquam velit nobis dolorem, tempora beatae! Nobis eos cupiditate praesentium cumque? Possimus perspiciatis, maiores, rerum unde quo quas neque, sequi porro doloremque minima temporibus!', - }, -]; - -function AboutSection() { - return ( - - - ABOUT{' '} - - ME - - - - - - - ); -} - -export default AboutSection; diff --git a/src/components/LandingSection.tsx b/src/components/LandingSection.tsx deleted file mode 100644 index 448a6f6..0000000 --- a/src/components/LandingSection.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import Logo from './Logo'; -import { StyledBrandName, StyledLanding, StyledLandingWrapper } from './styles/Landing.styled'; - -export default function LandingSection() { - return ( - - - - - - SPYTHERE:// - - - - ); -} diff --git a/src/components/ProjectsSection.tsx b/src/components/ProjectsSection.tsx deleted file mode 100644 index 57152c2..0000000 --- a/src/components/ProjectsSection.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { StyledCursor } from './styles/Cursor.styled'; -import { StyledProjects } from './styles/Projects.styled'; -import { StyledSectionHeader } from './styles/SectionHeader.styled'; - -const badges = { - HTML: ' https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white', - CSS: ' https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white', - JS: ' https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E', - SASS: ' https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white', - TS: ' https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white', - Node: ' https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white', - Vue: ' https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D', - Express: ' https://img.shields.io/badge/Express.js-404D59?style=for-the-badge', - Mongo: ' https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white', - React: ' https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB', - Flutter: ' https://img.shields.io/badge/Flutter-02569B?style=for-the-badge&logo=flutter&logoColor=white', - NET: ' https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&logo=.net&logoColor=white', - Python: ' https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white', - Java: ' https://img.shields.io/badge/Java-ED8B00?style=for-the-badge&logo=java&logoColor=white', - AWS: ' https://img.shields.io/badge/Amazon_AWS-232F3E?style=for-the-badge&logo=amazon-aws&logoColor=white', - Heroku: ' https://img.shields.io/badge/Heroku-430098?style=for-the-badge&logo=heroku&logoColor=white', - NestJS: 'https://img.shields.io/badge/nestjs-red?style=for-the-badge&logo=nestjs&logoColor=white', - Discord: ' https://img.shields.io/badge/discord.js-white?style=for-the-badge&logo=discord&logoColor=blue', - Postgresql: ' https://img.shields.io/badge/postgresql-blue?style=for-the-badge&logo=postgresql&logoColor=white', - CSharp: ' https://img.shields.io/badge/C%20SHARP-orange?style=for-the-badge&logo=csharp&logoColor=white', - Dotnet: ' https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&logo=.net&logoColor=white', -}; - -function ProjectsSection() { - return ( - - - MY{' '} - - PROJECTS - - - - -

ROZWIJANE PROJEKTY

- -
-
-

Stacjownik

-

Lorem ipsum dolor sit amet.

- -
- typescript - vue.js - sass/scss -
- -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione - ipsum inventore quidem unde dolore. -

- -
- - -
-
- -
-

Pojazdownik

-

Lorem ipsum dolor sit amet.

-
- typescript - vue.js - sass/scss -
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione - ipsum inventore quidem unde dolore. -

-
- -
-

GeneraTOR

-

Lorem ipsum dolor sit amet.

-
- typescript - vue.js - sass/scss -
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione - ipsum inventore quidem unde dolore. -

-
- -
-

Stacjobot

-

Lorem ipsum dolor sit amet.

-
- typescript - vue.js - sass/scss -
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione - ipsum inventore quidem unde dolore. -

-
-
- - ); -} - -export default ProjectsSection; diff --git a/src/components/styles/About.styled.ts b/src/components/styles/About.styled.ts index e927a6f..675cce8 100644 --- a/src/components/styles/About.styled.ts +++ b/src/components/styles/About.styled.ts @@ -1,77 +1,33 @@ import { styled } from 'styled-components'; export const StyledAbout = styled.section` - img { - max-width: 90px; - } + display: flex; + flex-direction: column; + justify-content: center; - ul.about-list { - display: flex; - flex-wrap: wrap; + .about-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 3em; + margin-top: 100px; - li { - margin: 0.5em 0; + img { + border-radius: 1em; + max-width: 100%; } - h2 { - display: inline-block; - background-color: ${({ theme }) => theme.colors['600']}; - padding: 0.25em; - margin: 0; - } + .about-content { + h2 { + font-size: 1.5em; + color: ${({ theme }) => theme.colors['200']}; + } - p { - background-color: ${({ theme }) => theme.colors['400']}; - padding: 1em; - margin: 0; + p { + color: ${({ theme }) => theme.colors['300']}; + margin-top: 2em; + text-align: justify; + line-height: 1.7; + } } } `; - -// export const StyledAboutItem = styled.li` -// display: flex; -// background-color: ${({ theme }) => theme.colors['400']}; - -// gap: 1em; -// margin-top: 50px; - -// h2 { -// margin: 0; -// } -// `; - -// export const StyledAboutImageWrapper = styled.div` -// display: inline-block; -// position: relative; - -// &::before { -// position: absolute; -// top: -25px; -// left: 50%; -// height: calc(100% + 52px); - -// content: ''; -// width: 5px; -// background-color: ${({ theme }) => theme.colors['400']}; -// border-radius: 2px; - -// z-index: -1; -// transform: translateX(-50%); -// } -// `; - -// export const StyledAboutContentWrapper = styled.div``; - -// export const StyledAboutTitle = styled.h2` -// display: inline-block; -// margin: 1em 0; -// padding: 0.1em 2em 0.1em 0.5em; - -// background-color: ${({ theme }) => theme.colors['600']}; -// `; - -// export const StyledAboutDescription = styled.p` -// margin: 0; -// margin-top: 1em; -// text-align: justify; -// `; diff --git a/src/components/styles/Cursor.styled.ts b/src/components/styles/Cursor.styled.ts index dfb4e5b..be9a106 100644 --- a/src/components/styles/Cursor.styled.ts +++ b/src/components/styles/Cursor.styled.ts @@ -5,7 +5,7 @@ export const StyledCursor = styled.span` top: 0; left: calc(100% + 0.25em); - width: 15px; + width: 10px; height: 100%; background-color: ${({ theme }) => theme.colors.accent}; diff --git a/src/components/styles/Global.styled.ts b/src/components/styles/Global.styled.ts index 2f01993..47f40f2 100644 --- a/src/components/styles/Global.styled.ts +++ b/src/components/styles/Global.styled.ts @@ -1,4 +1,5 @@ import { createGlobalStyle } from 'styled-components'; +import { deviceSize } from '../../common/deviceSizes'; export const GlobalStyles = createGlobalStyle` :root { @@ -24,13 +25,19 @@ export const GlobalStyles = createGlobalStyle` width: 100%; overflow-x: hidden; position: relative; + + font-size: 1rem; + + @media screen and (max-width: ${deviceSize.md}) { + font-size: calc(1vw + 0.6rem); + } } #root > .site-content { margin: 0 auto; - max-width: 1500px; - padding: 0 2em; + max-width: 1200px; + padding: 0 1em; } .text { @@ -72,6 +79,11 @@ export const GlobalStyles = createGlobalStyle` padding: 0; } + p { + padding: 0; + margin: 0; + } + @keyframes typing { to { left: 100% } } diff --git a/src/components/styles/Landing.styled.ts b/src/components/styles/Landing.styled.ts index d863087..3bb91d5 100644 --- a/src/components/styles/Landing.styled.ts +++ b/src/components/styles/Landing.styled.ts @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import { deviceSize } from '../../common/deviceSizes'; export const StyledLanding = styled.section` min-height: calc(100vh - 3.5em); @@ -7,37 +8,49 @@ export const StyledLanding = styled.section` justify-content: center; align-items: center; - font-family: ${({ theme }) => theme.fonts.monospace}; - letter-spacing: 5px; - - text-align: center; - width: 100%; /* background-color: #fff; */ `; export const StyledLandingWrapper = styled.div` display: flex; - align-items: center; flex-direction: column; + gap: 100px; + max-width: 100%; - p { - font-size: 2.5em; + .landing_main { + display: flex; + align-items: center; + gap: 5em; + + @media screen and (max-width: ${deviceSize.md}) { + flex-direction: column; + } } - div { - display: flex; - justify-content: flex-start; - align-items: center; + .landing_tech { + h3 { + position: relative; + margin: 0; + font-size: 1.8em; + } + + .separator { + width: 2px; + height: 30px; + background-color: red; + } } `; export const StyledBrandName = styled.div` position: relative; + display: inline-block; - font-size: 2.5em; + font-family: ${({ theme }) => theme.fonts.monospace}; + font-size: 3em; opacity: 1; - margin-top: 0.5em; white-space: nowrap; + letter-spacing: 5px; &::after { content: ''; @@ -66,4 +79,38 @@ export const StyledBrandName = styled.div` animation: typing 0.75s steps(11) forwards, blinking 1.5s infinite; } + + @media screen and (max-width: ${deviceSize.sm}) { + font-size: 2.3em; + } +`; + +export const StyledLandingRight = styled.div` + color: ${({ theme }) => theme.colors['200']}; + font-size: 1.2em; + + .greeting { + font-family: ${({ theme }) => theme.fonts.monospace}; + display: block; + } + + .description { + margin-top: 1em; + } +`; + +export const StyledLinkIcons = styled.div` + display: flex; + gap: 1em; + margin-top: 1em; +`; + +export const StyledLinkIcon = styled.a` + cursor: pointer; + font-size: 2em; + margin-top: 0.5em; + + &:hover { + color: skyblue; + } `; diff --git a/src/components/styles/Navbar.styled.ts b/src/components/styles/Navbar.styled.ts index 7f5a866..be38f30 100644 --- a/src/components/styles/Navbar.styled.ts +++ b/src/components/styles/Navbar.styled.ts @@ -6,7 +6,7 @@ export const StyledNavbar = styled.nav` left: 0; z-index: 1000; width: 100%; - background-color: ${({ theme }) => theme.colors['600']}; + background-color: ${({ theme }) => theme.colors['500']}; .navbar-content { display: flex; @@ -17,7 +17,7 @@ export const StyledNavbar = styled.nav` color: white; padding: 0.75em 2em; - max-width: 1500px; + max-width: 1900px; } `; diff --git a/src/components/styles/Projects.styled.ts b/src/components/styles/Projects.styled.ts index 1f39999..2a2adda 100644 --- a/src/components/styles/Projects.styled.ts +++ b/src/components/styles/Projects.styled.ts @@ -1,44 +1,87 @@ import { styled } from 'styled-components'; export const StyledProjects = styled.section` - .sub-header { + h3.sub-header { letter-spacing: 0.1em; color: ${({ theme }) => theme.colors['200']}; + margin-top: 3em; } .projects-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); + display: flex; + flex-direction: column; gap: 2rem; } .project-card { - padding: 1em; - background-color: ${({ theme }) => theme.colors['600']}; - /* box-shadow: #333 10px 7px 11px 0px; */ + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3.5em; + + .project-thumbnail img, + .project-badges img { + border-radius: 1em; + } h2, h3 { margin: 0; } + } - h2 { - color: ${({ theme }) => theme.colors.accent}; - } + .project-content { + display: flex; + flex-direction: column; + } - h3 { - color: ${({ theme }) => theme.colors['300']}; - } + hr { + width: 100%; + border: 1px solid white; + margin: 0.5em 0; + } + + h2.project-title { + color: ${({ theme }) => theme.colors.accent}; + } + + h3.project-subtitle { + font-size: 1.1em; + color: ${({ theme }) => theme.colors['200']}; } .project-badges { display: flex; flex-wrap: wrap; gap: 0.5em; - margin-top: 0.5em; + + margin: 0.5em 0; img { max-width: 120px; } } + + .project-desc { + color: ${({ theme }) => theme.colors['300']}; + text-align: justify; + + height: 100%; + margin-bottom: 1em; + } + + .project-actions { + display: flex; + gap: 1em; + + a { + padding: 0.25em; + font-weight: bold; + + svg { + font-size: 1.5em; + vertical-align: bottom; + margin-right: 0.5em; + } + } + } `; diff --git a/src/components/styles/SectionHeader.styled.ts b/src/components/styles/SectionHeader.styled.ts index b691948..27b1466 100644 --- a/src/components/styles/SectionHeader.styled.ts +++ b/src/components/styles/SectionHeader.styled.ts @@ -1,6 +1,10 @@ import { styled } from 'styled-components'; export const StyledSectionHeader = styled.h1` + padding: 0; + margin: 0; + margin-bottom: 0.25em; + position: relative; font-size: 2.5em; font-family: ${({ theme }) => theme.fonts.monospace}; @@ -10,7 +14,7 @@ export const StyledSectionHeader = styled.h1` &::after { content: ''; position: absolute; - top: 110%; + top: calc(100% + 3px); left: 0; width: 15em; height: 3px; diff --git a/src/theme.ts b/src/theme.ts index af5ad6e..7ce2839 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -1,7 +1,7 @@ export const theme = { colors: { 200: '#e0e1dd', - 300: '#778da9', + 300: '#bbc1c9', 400: '#415a77', 500: '#1b263b', 600: '#0d1b2a', diff --git a/vite.config.ts b/vite.config.ts index 5a33944..03fd1ca 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,10 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], -}) + server: { + port: 5002, + }, +});