Members
(constant) CVDownloadLink
Styled CV download link. Matches the language button appearance
so both actions feel like peers in the sidebar footer.
(constant) CVDownloadWrapper
Centering wrapper for the CV download link.
(constant) FooterMessage
Footer area at the bottom of the sidebar containing the tagline and legal links.
(constant) GlobalStyles
CSS reset and base typography applied globally across the entire app.
Injected once at the root so all components inherit consistent defaults.
- Source:
(constant) LanguageWrapper
Language toggle button group. Subtle background separates it visually
from the navigation links above.
(constant) LegalButton
Ghost button used for Impressum and Datenschutz footer links.
Styled to look like a text link while keeping button semantics for accessibility.
(constant) Menu
Navigation link column. Hidden on mobile because the sidebar
collapses to a top header bar where vertical links don't fit.
(constant) NameTitle
Name and job title block at the top of the sidebar.
Uses clamp() on h1 so the name stays on one line within the fixed sidebar width.
(constant) SidebarContainer
Fixed full-height column that holds all sidebar content.
Becomes a static block on mobile so it doesn't obscure the scrollable content area.
(constant) SocialLinks
Social icon links with scale-and-color hover effect.
(constant) SocialLinksWrapper
Centering wrapper for the social icon row.
(constant) StyledLink
Navigation link powered by react-scroll.
Slides right on hover/active to signal the current section without a full page change.
(constant) convertRawToBlob
Converts a raw.githubusercontent.com URL to its GitHub blob viewer equivalent.
Raw URLs serve plain text; blob URLs render with GitHub's syntax highlighting
and standard file navigation UI.
(constant) fetchPinnedRepositories
Fetches the six pinned GitHub repositories for the portfolio owner via the GraphQL API.
Returns an empty array on any network or auth failure so the UI degrades gracefully.
- Source:
(constant) generatePlaceholderSVGDataUrl
Generates an inline SVG data URI to show when no real project image is found.
Escapes the title to prevent SVG text injection.
(constant) getAboutSection
Extracts and sanitizes the text under an "About" heading in a README.
Strips Markdown syntax so the result can render as plain text in a card summary.
(constant) getPrimaryImage
Resolves the best available preview image for a project.
Prefers an explicit primaryImage field, then a /projects_media/ path found in
the README, and finally falls back to the raw GitHub URL.
(constant) getProjectImageUrl
Builds the raw GitHub URL for a project's preview image.
Used as a fallback when the local /projects_media/ copy is absent.
(constant) getTechnologyWords
Parses **bold** technology names from the Technologies section of a README.
Stops collecting at the next heading that is the same level or higher than the
Technologies heading, so sibling sections are not included.
Methods
About() → {JSX.Element}
Renders developer profile and technology stack.
Displays introductory text from i18n resources alongside a profile picture
and icons for key technical skills grouped into categories.
- Source:
Returns:
About section with profile image, biography text, and tech stack icons.
- Type
- JSX.Element
App() → {JSX.Element}
Root application component.
Composes the fixed sidebar with the scrollable main content column.
Returns:
- Type
- JSX.Element
Education() → {JSX.Element}
Displays a list of educational qualifications and certifications.
Dynamically renders education entries from i18n resources with optional institution
and note fields.
- Source:
Returns:
Education section with a list of qualification cards.
- Type
- JSX.Element
Experience() → {JSX.Element}
Displays a timeline of professional work experience.
Renders job titles, employment dates, and position summaries from i18n resources.
Returns:
Experience section with a list of job cards.
- Type
- JSX.Element
Legal() → {JSX.Element}
Renders the German legal pages: Impressum and Datenschutzerklärung.
Both sections reuse the project-card layout for visual consistency with the rest of the site.
- Source:
Returns:
Fragment containing Impressum and Datenschutz sections.
- Type
- JSX.Element
ProjectCard(project, image, index, loadedImages, setLoadedImages) → {JSX.Element}
Renders a single project card with image, summary, technologies, and links.
Handles progressive image loading and a multi-step fallback chain when images fail.
Parameters:
| Name | Type | Description |
|---|---|---|
project |
object | Project data object from projects.json |
image |
string | Primary image URL resolved by the parent |
index |
number | Position in the projects array, used as the loadedImages key |
loadedImages |
object | Map of index → boolean tracking which images have loaded |
setLoadedImages |
function | Setter for loadedImages state |
Returns:
- Type
- JSX.Element
ProjectSummary(project, language, t) → {JSX.Element}
Renders the descriptive summary for a single project card.
Selects the best available text in priority order: German translation >
README About section > default summary. Falls back to a skeleton placeholder
while content is unavailable.
Parameters:
| Name | Type | Description |
|---|---|---|
project |
object | Project data object |
language |
string | Active i18n locale code (e.g. 'en', 'de') |
t |
function | i18next translation function |
Returns:
- Type
- JSX.Element
Projects() → {JSX.Element}
Renders the portfolio's Projects section.
Fetches project data via useProjects and delegates card rendering to ProjectCard.
- Source:
Returns:
Grid of project cards loaded from projects.json.
- Type
- JSX.Element
RepoDocLinks(project) → {JSX.Element}
Renders documentation links for a single project in the RepoDocs section.
Checks fields in priority order: placeholder → API docs → architecture overview →
production URL → test coverage → generic docsLink fallback.
Parameters:
| Name | Type | Description |
|---|---|---|
project |
object | Enriched project object from useRepoDocs |
Returns:
- Type
- JSX.Element
RepoDocs() → {JSX.Element}
Renders the RepoDocs section listing projects that have linked documentation.
Shows an empty-state card when no projects with docs are found.
- Source:
Returns:
- Type
- JSX.Element
Sidebar() → {JSX.Element}
Fixed left-hand navigation sidebar.
Tracks the active section via scroll position and exposes language switching,
CV download, and links to German legal pages.
- Source:
Returns:
- Type
- JSX.Element
SidebarMenu(activeSection) → {JSX.Element}
Renders the sidebar navigation links, language switcher, and CV download button.
The CV filename and label are both locale-driven to serve the correct language version.
Parameters:
| Name | Type | Description |
|---|---|---|
activeSection |
string | Id of the section currently in view |
- Source:
Returns:
- Type
- JSX.Element
SidebarSocial() → {JSX.Element}
Renders the social media and contact icon links for the sidebar.
Returns:
- Type
- JSX.Element
getActiveSection(scrollPosition) → {string}
Returns the id of the section currently most visible in the viewport.
Iterates from bottom to top so the deepest section the user has scrolled past wins.
Parameters:
| Name | Type | Description |
|---|---|---|
scrollPosition |
number | window.scrollY plus half the viewport height |
- Source:
Returns:
Section id, defaulting to 'About' when scroll is near the top
- Type
- string
useProjects() → {Object}
Fetches and caches the project list from the static /projects.json endpoint.
Also manages per-card image load tracking used for card entrance animations.
- Source:
Returns:
- Type
- Object
useRepoDocs() → {Array.<object>}
Fetches projects.json and returns only entries that have linked documentation.
Enriches each project with a normalized docs shape via enrichProject.
Returns:
Array of enriched project objects where hasDocs is true
- Type
- Array.<object>