Spythere/spythere-portfolio
1
0
Fork 0
mirror of https://github.com/Spythere/spythere-portfolio.git synced 2026-05-03 13:38:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
Spythere
2023-09-04 17:39:31 +02:00
parent 6611006c0d
commit d23e1ac050
14 changed files with 133 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+6 -3
View File
@@ -13,9 +13,12 @@ function App() {
<>
<GlobalStyles />
<Navbar />
<LandingSection />
<AboutSection />
<ProjectsSection />
<div className="site-content">
<LandingSection />
<AboutSection />
<ProjectsSection />
</div>
</>
</ThemeProvider>
);
src/components/AboutSection.tsx
+6 -19
View File
@@ -1,11 +1,4 @@
import {
StyledAbout,
StyledAboutContentWrapper,
StyledAboutDescription,
StyledAboutImageWrapper,
StyledAboutItem,
StyledAboutTitle,
} from './styles/About.styled';
import { StyledAbout } from './styles/About.styled';
import { StyledCursor } from './styles/Cursor.styled';
import { StyledSectionHeader } from './styles/SectionHeader.styled';
@@ -39,18 +32,12 @@ function AboutSection() {
</span>
</StyledSectionHeader>
<ul>
<ul className="about-list">
{aboutInfo.map((about) => (
<StyledAboutItem>
<StyledAboutImageWrapper>
<img src="question.svg" alt="question" />
</StyledAboutImageWrapper>
<StyledAboutContentWrapper>
<StyledAboutTitle>{about.title}</StyledAboutTitle>
<StyledAboutDescription>{about.desc}</StyledAboutDescription>
</StyledAboutContentWrapper>
</StyledAboutItem>
<li>
<h2>{about.title}</h2>
<p>{about.desc}</p>
</li>
))}
</ul>
</StyledAbout>
src/components/Navbar.tsx
+6 -4
View File
@@ -72,11 +72,13 @@ export default function Navbar() {
return (
<StyledNavbar>
<StyledNavBrand href="#" onClick={(e) => scrollToSection(e, '#landing')}>
{t('navbar.title')}
</StyledNavBrand>
<div className="navbar-content">
<StyledNavBrand href="#" onClick={(e) => scrollToSection(e, '#landing')}>
{t('navbar.title')}
</StyledNavBrand>
<Navlinks navlinks={navlinks} />
<Navlinks navlinks={navlinks} />
</div>
</StyledNavbar>
);
}
src/components/ProjectsSection.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ function ProjectsSection() {
</span>
</StyledSectionHeader>
<h1>ROZWIJANE PROJEKTY</h1>
<h3 className="sub-header">ROZWIJANE PROJEKTY</h3>
<div className="projects-grid">
<div className="project-card">
src/components/styles/About.styled.ts
+59 -37
View File
@@ -4,52 +4,74 @@ export const StyledAbout = styled.section`
img {
max-width: 90px;
}
`;
export const StyledAboutItem = styled.li`
display: flex;
justify-content: flex-start;
ul.about-list {
display: flex;
flex-wrap: wrap;
gap: 1em;
margin-top: 50px;
li {
margin: 0.5em 0;
}
h2 {
margin: 0;
h2 {
display: inline-block;
background-color: ${({ theme }) => theme.colors['600']};
padding: 0.25em;
margin: 0;
}
p {
background-color: ${({ theme }) => theme.colors['400']};
padding: 1em;
margin: 0;
}
}
`;
export const StyledAboutImageWrapper = styled.div`
display: inline-block;
position: relative;
// export const StyledAboutItem = styled.li`
// display: flex;
// background-color: ${({ theme }) => theme.colors['400']};
&::before {
position: absolute;
top: -25px;
left: 50%;
height: calc(100% + 52px);
content: '';
width: 5px;
background-color: ${({ theme }) => theme.colors.primary};
border-radius: 2px;
// gap: 1em;
// margin-top: 50px;
z-index: -1;
transform: translateX(-50%);
}
`;
// h2 {
// margin: 0;
// }
// `;
export const StyledAboutContentWrapper = styled.div``;
// export const StyledAboutImageWrapper = styled.div`
// display: inline-block;
// position: relative;
export const StyledAboutTitle = styled.h2`
display: inline-block;
margin: 1em 0;
padding: 0.1em 2em 0.1em 0.5em;
// &::before {
// position: absolute;
// top: -25px;
// left: 50%;
// height: calc(100% + 52px);
background-color: ${({ theme }) => theme.colors.primary};
`;
// content: '';
// width: 5px;
// background-color: ${({ theme }) => theme.colors['400']};
// border-radius: 2px;
export const StyledAboutDescription = styled.p`
margin: 0;
margin-top: 1em;
text-align: justify;
`;
// 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;
// `;
src/components/styles/Button.styled.ts
+3 -3
View File
@@ -3,10 +3,10 @@ import styled from 'styled-components';
const StyledButton = styled.button<{ $primary?: boolean }>`
font-size: 1em;
padding: 0.25em 1em;
border: 2px solid ${({ theme }) => theme.colors.primary};
border: 2px solid ${({ theme }) => theme.colors.accent};
background: ${({ $primary, theme }) => ($primary ? theme.colors.primary : 'white')};
color: ${({ $primary, theme }) => ($primary ? 'white' : theme.colors.primary)};
background: ${({ $primary, theme }) => ($primary ? theme.colors.accent : 'white')};
color: ${({ $primary, theme }) => ($primary ? 'white' : theme.colors.accent)};
`;
export default StyledButton;
src/components/styles/Cursor.styled.ts
+1 -1
View File
@@ -7,7 +7,7 @@ export const StyledCursor = styled.span`
width: 15px;
height: 100%;
background-color: ${({ theme }) => theme.colors.primary};
background-color: ${({ theme }) => theme.colors.accent};
animation: blinking 1s infinite;
`;
src/components/styles/Global.styled.ts
+12 -4
View File
@@ -8,7 +8,7 @@ export const GlobalStyles = createGlobalStyle`
color-scheme: light dark;
color: white;
background-color: ${({ theme }) => theme.colors.bg};
background-color: ${({ theme }) => theme.colors['500']};
font-synthesis: none;
text-rendering: optimizeLegibility;
@@ -23,17 +23,25 @@ export const GlobalStyles = createGlobalStyle`
min-height: 100vh;
width: 100%;
overflow-x: hidden;
position: relative;
}
#root > .site-content {
margin: 0 auto;
max-width: 1500px;
padding: 0 2em;
}
.text {
&--accent {
color: ${({ theme }) => theme.colors.primary};
color: ${({ theme }) => theme.colors.accent};
}
}
section {
min-height: 100vh;
padding: 3.5em 2em;
padding: 3.5em 0;
}
a {
@@ -43,7 +51,7 @@ export const GlobalStyles = createGlobalStyle`
transition: all 0.25s;
&:hover {
color: ${({ theme }) => theme.colors.primary};
color: ${({ theme }) => theme.colors.accent};
}
}
src/components/styles/Landing.styled.ts
+3 -3
View File
@@ -47,7 +47,7 @@ export const StyledBrandName = styled.div`
height: 100%;
top: 0;
left: 0;
background-color: ${({ theme }) => theme.colors.bg};
background-color: ${({ theme }) => theme.colors['500']};
animation: typing 0.75s steps(11) forwards;
}
@@ -61,8 +61,8 @@ export const StyledBrandName = styled.div`
height: 100%;
top: 0;
left: 0;
background-color: ${({ theme }) => theme.colors.bg};
border-left: 10px solid ${({ theme }) => theme.colors.primary};
background-color: ${({ theme }) => theme.colors['500']};
border-left: 10px solid ${({ theme }) => theme.colors.accent};
animation: typing 0.75s steps(11) forwards, blinking 1.5s infinite;
}
src/components/styles/Navbar.styled.ts
+15 -9
View File
@@ -3,22 +3,28 @@ import { styled } from 'styled-components';
export const StyledNavbar = styled.nav`
position: sticky;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
background-color: ${({ theme }) => theme.colors['600']};
display: flex;
justify-content: space-between;
align-items: center;
height: 3.5em;
.navbar-content {
display: flex;
justify-content: space-between;
align-items: center;
height: 3.5em;
margin: 0 auto;
color: white;
background-color: ${({ theme }) => theme.colors.nav};
padding: 0.75em 2em;
color: white;
padding: 0.75em 2em;
max-width: 1500px;
}
`;
export const StyledNavBrand = styled.a`
opacity: 0.85;
font-weight: 700;
color: ${({ theme }) => theme.colors.primary};
color: ${({ theme }) => theme.colors.accent};
font-size: 1.3em;
`;
@@ -45,6 +51,6 @@ export const StyledLangButton = styled.button`
text-transform: uppercase;
cursor: pointer;
border: 1px solid ${({ theme }) => theme.colors.primary};
border: 1px solid ${({ theme }) => theme.colors.accent};
background: none;
`;
src/components/styles/Projects.styled.ts
+10 -5
View File
@@ -1,6 +1,11 @@
import { styled } from 'styled-components';
export const StyledProjects = styled.section`
.sub-header {
letter-spacing: 0.1em;
color: ${({ theme }) => theme.colors['200']};
}
.projects-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
@@ -8,9 +13,9 @@ export const StyledProjects = styled.section`
}
.project-card {
padding: 0.5em;
background-color: #3b3b3b;
box-shadow: #333 10px 7px 11px 0px;
padding: 1em;
background-color: ${({ theme }) => theme.colors['600']};
/* box-shadow: #333 10px 7px 11px 0px; */
h2,
h3 {
@@ -18,11 +23,11 @@ export const StyledProjects = styled.section`
}
h2 {
color: ${({ theme }) => theme.colors.primary};
color: ${({ theme }) => theme.colors.accent};
}
h3 {
color: #ddd;
color: ${({ theme }) => theme.colors['300']};
}
}
src/theme.ts
+7 -4
View File
@@ -1,11 +1,14 @@
export const theme = {
colors: {
primary: 'lightseagreen',
bg: '#242424',
nav: '#1b1b1b',
200: '#e0e1dd',
300: '#778da9',
400: '#415a77',
500: '#1b263b',
600: '#0d1b2a',
accent: '#ffbd00',
},
fonts: {
primary: 'Inter, system-ui, Arial, sans-serif',
primary: 'Manrope, system-ui, Arial, sans-serif',
monospace: 'IBM Plex Mono, monospace',
},
};