diff --git a/content/data/sections/strengths/services/consulting.de.md b/content/data/sections/strengths/services/consulting.de.md index 7dc283d9..bb7d0f3f 100755 --- a/content/data/sections/strengths/services/consulting.de.md +++ b/content/data/sections/strengths/services/consulting.de.md @@ -1,6 +1,7 @@ --- title: Beraten sprite: consulting +skills: ['../skills/project-management.de.md', '../skills/requirements-engineering.de.md'] order: 3 --- diff --git a/content/data/sections/strengths/services/consulting.en.md b/content/data/sections/strengths/services/consulting.en.md index 7a306d9c..40a5c3df 100755 --- a/content/data/sections/strengths/services/consulting.en.md +++ b/content/data/sections/strengths/services/consulting.en.md @@ -1,6 +1,7 @@ --- title: Consulting sprite: consulting +skills: ['../skills/project-management.en.md', '../skills/requirements-engineering.en.md'] order: 3 --- diff --git a/content/data/sections/strengths/services/education.de.md b/content/data/sections/strengths/services/education.de.md index 4fb897af..b8d564ae 100755 --- a/content/data/sections/strengths/services/education.de.md +++ b/content/data/sections/strengths/services/education.de.md @@ -1,6 +1,7 @@ --- title: Schulung sprite: education +skills: [../skills/courses.de.md, ../skills/trial-apprenticeship.de.md] order: 2 --- diff --git a/content/data/sections/strengths/services/education.en.md b/content/data/sections/strengths/services/education.en.md index d5cd0579..9632507c 100755 --- a/content/data/sections/strengths/services/education.en.md +++ b/content/data/sections/strengths/services/education.en.md @@ -1,6 +1,7 @@ --- title: Education sprite: education +skills: [../skills/courses.en.md, ../skills/trial-apprenticeship.en.md] order: 2 --- diff --git a/content/data/sections/strengths/skills/apis.de.md b/content/data/sections/strengths/skills/apis.de.md index 7c40a45d..241deeac 100755 --- a/content/data/sections/strengths/skills/apis.de.md +++ b/content/data/sections/strengths/skills/apis.de.md @@ -1,5 +1,5 @@ --- title: Schnittstellen -icon: ./apis.svg +sprite: apis link: /present/strengths#apis --- diff --git a/content/data/sections/strengths/skills/apis.en.md b/content/data/sections/strengths/skills/apis.en.md index 94d93690..47461d00 100755 --- a/content/data/sections/strengths/skills/apis.en.md +++ b/content/data/sections/strengths/skills/apis.en.md @@ -1,5 +1,5 @@ --- title: Interfaces -icon: ./apis.svg +sprite: apis link: /present/strengths#apis --- diff --git a/content/data/sections/strengths/skills/calendar.de.md b/content/data/sections/strengths/skills/calendar.de.md index a719c440..7ed15232 100755 --- a/content/data/sections/strengths/skills/calendar.de.md +++ b/content/data/sections/strengths/skills/calendar.de.md @@ -1,5 +1,5 @@ --- title: Kalender-Funktionalität -icon: ./calendar.svg +sprite: calendar link: /present/strengths#calendar --- diff --git a/content/data/sections/strengths/skills/calendar.en.md b/content/data/sections/strengths/skills/calendar.en.md index 3001d88b..64441649 100755 --- a/content/data/sections/strengths/skills/calendar.en.md +++ b/content/data/sections/strengths/skills/calendar.en.md @@ -1,5 +1,5 @@ --- title: Calendar functionality -icon: ./calendar.svg +sprite: calendar link: /present/strengths#calendar --- diff --git a/content/data/sections/strengths/skills/courses.de.md b/content/data/sections/strengths/skills/courses.de.md new file mode 100644 index 00000000..a2c3f2b4 --- /dev/null +++ b/content/data/sections/strengths/skills/courses.de.md @@ -0,0 +1,5 @@ +--- +title: Kurse +sprite: education +link: /present/strengths#courses +--- diff --git a/content/data/sections/strengths/skills/courses.en.md b/content/data/sections/strengths/skills/courses.en.md new file mode 100644 index 00000000..482f6ee0 --- /dev/null +++ b/content/data/sections/strengths/skills/courses.en.md @@ -0,0 +1,5 @@ +--- +title: Courses +sprite: education +link: /present/strengths#courses +--- diff --git a/content/data/sections/strengths/skills/iam.de.md b/content/data/sections/strengths/skills/iam.de.md index fc69a2e5..11233cae 100755 --- a/content/data/sections/strengths/skills/iam.de.md +++ b/content/data/sections/strengths/skills/iam.de.md @@ -1,5 +1,5 @@ --- title: Benutzer und Zugriff -icon: ./iam.svg +sprite: iam link: /present/strengths#iam --- diff --git a/content/data/sections/strengths/skills/iam.en.md b/content/data/sections/strengths/skills/iam.en.md index 637e63e8..89266b2f 100755 --- a/content/data/sections/strengths/skills/iam.en.md +++ b/content/data/sections/strengths/skills/iam.en.md @@ -1,5 +1,5 @@ --- title: Users and access -icon: ./iam.svg +sprite: iam link: /present/strengths#iam --- diff --git a/content/data/sections/strengths/skills/project-management.de.md b/content/data/sections/strengths/skills/project-management.de.md new file mode 100644 index 00000000..21069465 --- /dev/null +++ b/content/data/sections/strengths/skills/project-management.de.md @@ -0,0 +1,5 @@ +--- +title: Projektleitung +sprite: project-management +link: /present/strengths#project-management +--- diff --git a/content/data/sections/strengths/skills/project-management.en.md b/content/data/sections/strengths/skills/project-management.en.md new file mode 100644 index 00000000..eb3739e3 --- /dev/null +++ b/content/data/sections/strengths/skills/project-management.en.md @@ -0,0 +1,5 @@ +--- +title: Project Management +sprite: project-management +link: /present/strengths#project-management +--- diff --git a/content/data/sections/strengths/skills/requirements-engineering.de.md b/content/data/sections/strengths/skills/requirements-engineering.de.md new file mode 100644 index 00000000..f0bd6e1b --- /dev/null +++ b/content/data/sections/strengths/skills/requirements-engineering.de.md @@ -0,0 +1,5 @@ +--- +title: Anforderungs-Analysen +sprite: check +link: /present/strengths#requirements-engineering +--- diff --git a/content/data/sections/strengths/skills/requirements-engineering.en.md b/content/data/sections/strengths/skills/requirements-engineering.en.md new file mode 100644 index 00000000..83042a3d --- /dev/null +++ b/content/data/sections/strengths/skills/requirements-engineering.en.md @@ -0,0 +1,5 @@ +--- +title: Requirements engineering +sprite: check +link: /present/strengths#requirements-engineering +--- diff --git a/content/data/sections/strengths/skills/trial-apprenticeship.de.md b/content/data/sections/strengths/skills/trial-apprenticeship.de.md new file mode 100644 index 00000000..053e9fb7 --- /dev/null +++ b/content/data/sections/strengths/skills/trial-apprenticeship.de.md @@ -0,0 +1,5 @@ +--- +title: Schnupperlehre +sprite: education +link: /present/strengths#trial-apprenticeship +--- diff --git a/content/data/sections/strengths/skills/trial-apprenticeship.en.md b/content/data/sections/strengths/skills/trial-apprenticeship.en.md new file mode 100644 index 00000000..a901f043 --- /dev/null +++ b/content/data/sections/strengths/skills/trial-apprenticeship.en.md @@ -0,0 +1,5 @@ +--- +title: Trial apprenticeship +sprite: education +link: /present/strengths#trial-apprenticeship +--- diff --git a/content/data/sections/strengths/skills/web-applications.de.md b/content/data/sections/strengths/skills/web-applications.de.md index 28b6cdf1..10faad00 100755 --- a/content/data/sections/strengths/skills/web-applications.de.md +++ b/content/data/sections/strengths/skills/web-applications.de.md @@ -1,5 +1,5 @@ --- title: Web-Applikationen -icon: ./web-applications.svg +sprite: web-applications link: /present/strengths#web-applications --- diff --git a/content/data/sections/strengths/skills/web-applications.en.md b/content/data/sections/strengths/skills/web-applications.en.md index e033ad36..ab4c17a8 100755 --- a/content/data/sections/strengths/skills/web-applications.en.md +++ b/content/data/sections/strengths/skills/web-applications.en.md @@ -1,5 +1,5 @@ --- title: Web applications -icon: ./web-applications.svg +sprite: web-applications link: /present/strengths#web-applications --- diff --git a/content/data/sections/strengths/skills/apis.svg b/content/images/apis.svg similarity index 94% rename from content/data/sections/strengths/skills/apis.svg rename to content/images/apis.svg index 75c8f7d9..9e6f488c 100644 --- a/content/data/sections/strengths/skills/apis.svg +++ b/content/images/apis.svg @@ -1,5 +1,5 @@ - + diff --git a/content/data/sections/strengths/skills/calendar.svg b/content/images/calendar.svg similarity index 85% rename from content/data/sections/strengths/skills/calendar.svg rename to content/images/calendar.svg index 179d66e6..5877a0d4 100644 --- a/content/data/sections/strengths/skills/calendar.svg +++ b/content/images/calendar.svg @@ -3,18 +3,18 @@ - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/content/images/check.svg b/content/images/check.svg new file mode 100644 index 00000000..88887d14 --- /dev/null +++ b/content/images/check.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/content/data/sections/strengths/skills/iam.svg b/content/images/iam.svg similarity index 91% rename from content/data/sections/strengths/skills/iam.svg rename to content/images/iam.svg index 9631a365..8dc4b95e 100644 --- a/content/data/sections/strengths/skills/iam.svg +++ b/content/images/iam.svg @@ -3,8 +3,9 @@ - - + + diff --git a/content/images/project-management.svg b/content/images/project-management.svg new file mode 100644 index 00000000..19236fca --- /dev/null +++ b/content/images/project-management.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/content/images/sprite.json b/content/images/sprite.json index 3f7d930d..8e3db9ea 100644 --- a/content/images/sprite.json +++ b/content/images/sprite.json @@ -1,4 +1,8 @@ { + "apis": { + "width": "73", + "height": "73" + }, "arrow": { "width": "9.387", "height": "10" @@ -7,6 +11,14 @@ "width": "52.089", "height": "35.334" }, + "calendar": { + "width": "896", + "height": "981" + }, + "check": { + "width": "800", + "height": "800" + }, "consulting": { "width": "711", "height": "655" @@ -23,6 +35,10 @@ "width": "66.234", "height": "64.4" }, + "iam": { + "width": "67", + "height": "81" + }, "illustration": { "width": "2000", "height": "668.01" @@ -91,6 +107,10 @@ "width": "21", "height": "20" }, + "project-management": { + "width": "1073", + "height": "1307" + }, "singleColorDivider": { "width": "1600", "height": "40" @@ -102,5 +122,9 @@ "twoColorDivider": { "width": "1600", "height": "46" + }, + "web-applications": { + "width": "18", + "height": "18" } } diff --git a/content/data/sections/strengths/skills/web-applications.svg b/content/images/web-applications.svg similarity index 96% rename from content/data/sections/strengths/skills/web-applications.svg rename to content/images/web-applications.svg index e532563e..2a3f687b 100644 --- a/content/data/sections/strengths/skills/web-applications.svg +++ b/content/images/web-applications.svg @@ -2,6 +2,6 @@ - + diff --git a/graphql-types.ts b/graphql-types.ts index 0703e5d3..98a8be3e 100644 --- a/graphql-types.ts +++ b/graphql-types.ts @@ -2175,12 +2175,14 @@ type Query_siteArgs = { buildTime: InputMaybe; children: InputMaybe; graphqlTypegen: InputMaybe; + host: InputMaybe; id: InputMaybe; internal: InputMaybe; jsxRuntime: InputMaybe; parent: InputMaybe; pathPrefix: InputMaybe; polyfill: InputMaybe; + port: InputMaybe; siteMetadata: InputMaybe; trailingSlash: InputMaybe; }; @@ -2257,12 +2259,14 @@ type Site = Node & { readonly buildTime: Maybe; readonly children: ReadonlyArray; readonly graphqlTypegen: Maybe; + readonly host: Maybe; readonly id: Scalars['ID']; readonly internal: Internal; readonly jsxRuntime: Maybe; readonly parent: Maybe; readonly pathPrefix: Maybe; readonly polyfill: Maybe; + readonly port: Maybe; readonly siteMetadata: Maybe; readonly trailingSlash: Maybe; }; @@ -2450,12 +2454,14 @@ type SiteFieldSelector = { readonly buildTime: InputMaybe; readonly children: InputMaybe; readonly graphqlTypegen: InputMaybe; + readonly host: InputMaybe; readonly id: InputMaybe; readonly internal: InputMaybe; readonly jsxRuntime: InputMaybe; readonly parent: InputMaybe; readonly pathPrefix: InputMaybe; readonly polyfill: InputMaybe; + readonly port: InputMaybe; readonly siteMetadata: InputMaybe; readonly trailingSlash: InputMaybe; }; @@ -2464,12 +2470,14 @@ type SiteFilterInput = { readonly buildTime: InputMaybe; readonly children: InputMaybe; readonly graphqlTypegen: InputMaybe; + readonly host: InputMaybe; readonly id: InputMaybe; readonly internal: InputMaybe; readonly jsxRuntime: InputMaybe; readonly parent: InputMaybe; readonly pathPrefix: InputMaybe; readonly polyfill: InputMaybe; + readonly port: InputMaybe; readonly siteMetadata: InputMaybe; readonly trailingSlash: InputMaybe; }; @@ -3077,12 +3085,14 @@ type SiteSortInput = { readonly buildTime: InputMaybe; readonly children: InputMaybe; readonly graphqlTypegen: InputMaybe; + readonly host: InputMaybe; readonly id: InputMaybe; readonly internal: InputMaybe; readonly jsxRuntime: InputMaybe; readonly parent: InputMaybe; readonly pathPrefix: InputMaybe; readonly polyfill: InputMaybe; + readonly port: InputMaybe; readonly siteMetadata: InputMaybe; readonly trailingSlash: InputMaybe; }; @@ -3282,7 +3292,14 @@ type IndexPageQueryVariables = Exact<{ }>; -type IndexPageQuery = { readonly values: { readonly nodes: ReadonlyArray<{ readonly html: string | null, readonly frontmatter: { readonly link: string | null, readonly title: string | null } | null }> }, readonly cooperationYou: { readonly html: string | null, readonly frontmatter: { readonly title: string | null } | null } | null, readonly cooperationUs: { readonly html: string | null, readonly frontmatter: { readonly title: string | null } | null } | null, readonly exchange: { readonly html: string | null, readonly frontmatter: { readonly title: string | null } | null } | null, readonly strengths: { readonly nodes: ReadonlyArray<{ readonly html: string | null, readonly frontmatter: { readonly title: string | null, readonly order: number | null, readonly sprite: string | null, readonly skills: ReadonlyArray<{ readonly childMarkdownRemark: { readonly html: string | null, readonly frontmatter: { readonly title: string | null, readonly link: string | null, readonly icon: { readonly publicURL: string | null } | null } | null } | null } | null> | null } | null }> }, readonly questions: { readonly nodes: ReadonlyArray<{ readonly html: string | null, readonly frontmatter: { readonly answeredBy: string | null, readonly title: string | null } | null }> }, readonly softwareReferences: { readonly nodes: ReadonlyArray<{ readonly html: string | null, readonly frontmatter: { readonly title: string | null, readonly icon: { readonly publicURL: string | null } | null } | null }> }, readonly companyReferences: { readonly nodes: ReadonlyArray<{ readonly html: string | null, readonly frontmatter: { readonly title: string | null, readonly link: string | null, readonly logo: { readonly publicURL: string | null } | null } | null }> } }; +type IndexPageQuery = { readonly values: { readonly nodes: ReadonlyArray<{ readonly html: string | null, readonly frontmatter: { readonly link: string | null, readonly title: string | null } | null }> }, readonly cooperationYou: { readonly html: string | null, readonly frontmatter: { readonly title: string | null } | null } | null, readonly cooperationUs: { readonly html: string | null, readonly frontmatter: { readonly title: string | null } | null } | null, readonly exchange: { readonly html: string | null, readonly frontmatter: { readonly title: string | null } | null } | null, readonly strengths: { readonly nodes: ReadonlyArray<{ readonly html: string | null, readonly frontmatter: { readonly title: string | null, readonly order: number | null, readonly sprite: string | null, readonly skills: ReadonlyArray<{ readonly childMarkdownRemark: { readonly html: string | null, readonly frontmatter: { readonly title: string | null, readonly link: string | null, readonly sprite: string | null } | null } | null } | null> | null } | null }> }, readonly questions: { readonly nodes: ReadonlyArray<{ readonly html: string | null, readonly frontmatter: { readonly answeredBy: string | null, readonly title: string | null } | null }> }, readonly softwareReferences: { readonly nodes: ReadonlyArray<{ readonly html: string | null, readonly frontmatter: { readonly title: string | null, readonly icon: { readonly publicURL: string | null } | null } | null }> }, readonly companyReferences: { readonly nodes: ReadonlyArray<{ readonly html: string | null, readonly frontmatter: { readonly title: string | null, readonly link: string | null, readonly logo: { readonly publicURL: string | null } | null } | null }> } }; + +type StrengthsPageQueryVariables = Exact<{ + locale: InputMaybe; +}>; + + +type StrengthsPageQuery = { readonly strengths: { readonly nodes: ReadonlyArray<{ readonly html: string | null, readonly frontmatter: { readonly title: string | null, readonly order: number | null, readonly sprite: string | null, readonly skills: ReadonlyArray<{ readonly childMarkdownRemark: { readonly html: string | null, readonly frontmatter: { readonly title: string | null, readonly link: string | null, readonly sprite: string | null } | null } | null } | null> | null } | null }> } }; type AllGenericPagesQueryVariables = Exact<{ [key: string]: never; }>; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 11127e47..e3bc50d2 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -65,9 +65,7 @@ export const query = graphql` frontmatter { title link - icon { - publicURL - } + sprite } } } diff --git a/src/pages/present/strengths.tsx b/src/pages/present/strengths.tsx index eb23848e..2f22d1bc 100644 --- a/src/pages/present/strengths.tsx +++ b/src/pages/present/strengths.tsx @@ -1,9 +1,10 @@ -import { HeadProps } from 'gatsby'; +import { graphql, PageProps, HeadProps } from 'gatsby'; import { FormattedMessage } from 'react-intl'; import { Document } from '../../layouts/default/Document'; import { DefaultLayout } from '../../layouts/DefaultLayout'; +import { StrengthsDetailSection } from '../../sections/StrengthsDetailSection'; -export default function StrengthsPage() { +export default function StrengthsPage({ data }: PageProps) { return (
@@ -11,10 +12,40 @@ export default function StrengthsPage() {
+ {data.strengths.nodes.map((strength, index) => ( + + ))} ); } +export const query = graphql` + query StrengthsPage($locale: String) { + strengths: allMarkdownRemark( + filter: { fields: { locale: { eq: $locale }, kind: { eq: "sections/strengths/services" } } } + sort: { frontmatter: { order: ASC } } + ) { + nodes { + html + frontmatter { + title + order + sprite + skills { + childMarkdownRemark { + html + frontmatter { + title + link + sprite + } + } + } + } + } + } + } +`; export function Head({ pageContext }: HeadProps) { return ; } diff --git a/src/sections/StrenghtsSection.tsx b/src/sections/StrenghtsSection.tsx index 8c15dec6..40249c8f 100755 --- a/src/sections/StrenghtsSection.tsx +++ b/src/sections/StrenghtsSection.tsx @@ -71,8 +71,10 @@ const strengthContentContainerStyle = (theme: Theme) => css` background-color: var(${theme.variables.backgroundColor}); padding: 1rem; - img { - max-height: 5rem; + > svg { + height: 5rem; + width: auto; + fill: ${theme.whiteColor}; margin-bottom: 0.5rem; } @@ -131,10 +133,10 @@ export function StrengthsSection({ strengths }: Props) {
    {selectedStrength?.frontmatter?.skills?.map(skill => { - const { title, icon, link } = skill?.childMarkdownRemark?.frontmatter ?? {}; + const { title, sprite, link } = skill?.childMarkdownRemark?.frontmatter ?? {}; return ( -
  • - {`${title}-icon`} +
  • +

    {title}

    {formatMessage({ id: 'action.learnMore' })} diff --git a/src/sections/StrengthsDetailSection.tsx b/src/sections/StrengthsDetailSection.tsx new file mode 100644 index 00000000..608e006a --- /dev/null +++ b/src/sections/StrengthsDetailSection.tsx @@ -0,0 +1,104 @@ +import { PropsWithChildren } from 'react'; +import { IterableElement } from 'type-fest'; +import { css, Theme, useTheme } from '@emotion/react'; +import { Markup } from 'interweave'; +import { DividedSection } from '../components/DividedSection'; +import { Sprite, SpriteProps } from '../components/Sprite'; + +const sectionStyle = (theme: Theme) => css` + position: relative; + z-index: 0; + overflow: hidden; + + &:nth-of-type(odd) { + background-color: ${theme.whiteColor}; + > svg { + fill: ${theme.backgroundColor}; + right: 0; + left: unset; + } + } + + > svg { + position: absolute; + top: 0; + left: 0; + height: 90%; + width: auto; + fill: ${theme.whiteColor}; + opacity: 0.5; + z-index: -1; + } + + &:last-of-type + svg { + display: none; + } +`; + +const skillStyles = (isWhiteSection: boolean) => (theme: Theme) => + css` + padding: ${theme.gutter}; + list-style: none; + display: flex; + gap: ${theme.gutter}; + + background-color: ${isWhiteSection ? theme.backgroundColor : theme.whiteColor}; + + &:not(:last-child) { + margin-bottom: ${theme.gutter}; + } + + --offset-size: 10rem; + + &:nth-of-type(even) { + margin-left: var(--offset-size); + flex-direction: row-reverse; + } + + &:nth-of-type(odd) { + margin-right: var(--offset-size); + } + + > div { + flex: 1; + + h3 { + margin-top: 0; + } + } + + svg { + width: var(--offset-size); + height: auto; + fill: ${isWhiteSection ? theme.whiteColor : theme.backgroundColor}; + } + `; + +type StrengthsDetailSectionProps = { + strength: IterableElement; + index: number; +}; + +export function StrengthsDetailSection({ strength, index }: StrengthsDetailSectionProps) { + const theme = useTheme(); + + const isWhiteSection = index % 2 === 1; + + return ( + + + +
      + {strength.frontmatter?.skills?.map(skill => ( +
    • + +
      +

      {skill?.childMarkdownRemark?.frontmatter?.title}

      + +
      +
      • + ))} +
    +     + ); +} pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy