From 2aaeeeed8b8871882588191b53ca937872985b47 Mon Sep 17 00:00:00 2001 From: Spythere Date: Fri, 23 Feb 2024 20:26:58 +0100 Subject: [PATCH] project section update --- public/generator-logo.svg | 48 +++++++++++++ public/pojazdownik-logo.svg | 24 +++++++ public/stacjownik-dev-logo.svg | 51 ++++++++++++++ public/stacjownik-logo.svg | 48 +++++++++++++ src/components/styles/Projects.styled.ts | 35 +++++++-- src/sections/ProjectsSection.tsx | 90 ++++++++++++++++++++---- 6 files changed, 276 insertions(+), 20 deletions(-) create mode 100644 public/generator-logo.svg create mode 100644 public/pojazdownik-logo.svg create mode 100644 public/stacjownik-dev-logo.svg create mode 100644 public/stacjownik-logo.svg diff --git a/public/generator-logo.svg b/public/generator-logo.svg new file mode 100644 index 0000000..c883bb4 --- /dev/null +++ b/public/generator-logo.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/pojazdownik-logo.svg b/public/pojazdownik-logo.svg new file mode 100644 index 0000000..9c15565 --- /dev/null +++ b/public/pojazdownik-logo.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/stacjownik-dev-logo.svg b/public/stacjownik-dev-logo.svg new file mode 100644 index 0000000..02a2a80 --- /dev/null +++ b/public/stacjownik-dev-logo.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/stacjownik-logo.svg b/public/stacjownik-logo.svg new file mode 100644 index 0000000..17377a7 --- /dev/null +++ b/public/stacjownik-logo.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/styles/Projects.styled.ts b/src/components/styles/Projects.styled.ts index 2a2adda..079f71e 100644 --- a/src/components/styles/Projects.styled.ts +++ b/src/components/styles/Projects.styled.ts @@ -7,16 +7,28 @@ export const StyledProjects = styled.section` margin-top: 3em; } - .projects-grid { + .showcase-container { display: flex; flex-direction: column; - gap: 2rem; + gap: 2em; + } + + .other-projects-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2em; } .project-card { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 3.5em; + background-color: ${({ theme }) => theme.colors['600']}; + padding: 0.75em; + border-radius: 1em; + + &.showcase { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3.5em; + } .project-thumbnail img, .project-badges img { @@ -40,8 +52,17 @@ export const StyledProjects = styled.section` margin: 0.5em 0; } - h2.project-title { - color: ${({ theme }) => theme.colors.accent}; + .project-title { + display: flex; + gap: 0.5em; + + h2 { + display: inline; + } + + img.project-title-icon { + max-width: 2em; + } } h3.project-subtitle { diff --git a/src/sections/ProjectsSection.tsx b/src/sections/ProjectsSection.tsx index 43d16ba..929ebb1 100644 --- a/src/sections/ProjectsSection.tsx +++ b/src/sections/ProjectsSection.tsx @@ -28,10 +28,10 @@ const badges = { }; const projects = { - frontend: [ + showcase: [ { thumbnailSrc: 'stacjownik-1.png', - iconSrc: null, + iconSrc: 'stacjownik-logo.svg', title: 'Stacjownik', subtitle: '', desc: "A tool made for the Polish railway simulator: Train Driver 2.\ @@ -44,7 +44,7 @@ const projects = { }, { thumbnailSrc: 'pojazdownik-1.png', - iconSrc: null, + iconSrc: 'pojazdownik-logo.svg', title: 'Pojazdownik', subtitle: '', desc: "Another tool made for the Train Driver 2 community, which allows players to easily create their own railway rolling stock configurations.\ @@ -56,7 +56,7 @@ const projects = { }, { thumbnailSrc: 'generator-1.png', - iconSrc: null, + iconSrc: 'generator-logo.svg', title: 'GeneraTOR', subtitle: '', desc: 'The last of the "Holy Trinity" of applications created for the TD2 simulator. It\'s a graphical interface of so-called "written orders"\ @@ -68,7 +68,7 @@ const projects = { }, { thumbnailSrc: 'stacjownik-manager-1.png', - iconSrc: null, + iconSrc: 'stacjownik-dev-logo.svg', title: 'Stacjownik Manager', subtitle: '', desc: "An additional tool made for people who work with Stacjownik and update it with the freshest data coming from the simulator which isn't automatically scraped, mainly new sceneries (maps available for the community).\ @@ -79,13 +79,34 @@ const projects = { siteLink: 'https://station-manager.web.app/', }, ], - backend: [ + other: [ { - title: 'Stacjownik API', + title: 'Stacjownik Backend + API', iconSrc: null, subtitle: '', desc: 'The backend services for Stacjownik site. Here I compute all data which is further sent to the app. Aside from the API,\ it\'s also used for storing history data about users which can be later browsed in the "Journal" tab. ', + technologies: [badges.NestJS, badges.TS, badges.Postgresql], + repoLink: 'https://github.com/Spythere/station-manager-2.0', + docsLink: 'https://stacjownik.spythere.eu/docs', + }, + { + title: 'Stacjobot', + iconSrc: null, + subtitle: '', + desc: 'The backend services for Stacjownik site. Here I compute all data which is further sent to the app. Aside from the API,\ + it\'s also used for storing history data about users which can be later browsed in the "Journal" tab. ', + technologies: [badges.NestJS, badges.Discord, badges.TS], + repoLink: 'https://github.com/Spythere/station-manager-2.0', + }, + { + title: 'TD2 Discord Presence', + iconSrc: null, + subtitle: '', + desc: 'The backend services for Stacjownik site. Here I compute all data which is further sent to the app. Aside from the API,\ + it\'s also used for storing history data about users which can be later browsed in the "Journal" tab. ', + technologies: [badges.CSharp, badges.Dotnet], + repoLink: 'https://github.com/Spythere/station-manager-2.0', }, ], }; @@ -101,17 +122,20 @@ function ProjectsSection() { -

MY FRONT-END PROJECTS

+

SHOWCASE - MAJOR PROJECTS

-
- {projects.frontend.map((p) => ( -
+
+ {projects.showcase.map((p) => ( +
-

{p.title}

+ + {p.iconSrc && } +

{p.title}

+

{p.subtitle}

@@ -139,7 +163,47 @@ function ProjectsSection() { ))}
-

MY BACK-END PROJECTS

+

OTHER PROJECTS

+ +
+ {projects.other.map((p) => ( +
+
+
+ {p.iconSrc && } +

{p.title}

+
+

{p.subtitle}

+ +
+ {p.technologies.map((tech) => ( + technology badge + ))} +
+ +
+ +

{p.desc}

+ +
+ {p.repoLink && ( + + + SOURCE + + )} + + {p.docsLink && ( + + + DOCS + + )} +
+
+
+ ))} +
); }