mirror of
https://github.com/kogakure/website-astro-stefanimhoff.de.git
synced 2026-02-03 12:05:28 +00:00
feat(cv): add CV page
This commit is contained in:
Stefan Imhoff
250
src/data/cv.json
Normal file
250
src/data/cv.json
Normal file
@@ -0,0 +1,250 @@
|
||||
{
|
||||
"personal": {
|
||||
"name": "Stefan Imhoff",
|
||||
"tagline": "Front-End Web Developer & UX/UI Designer"
|
||||
},
|
||||
"summary": {
|
||||
"headline": "Professional Summary"
|
||||
},
|
||||
"experience": {
|
||||
"headline": "Professional Experience",
|
||||
"items": [
|
||||
{
|
||||
"company": "NEW WORK SE",
|
||||
"url": "https://www.xing.com",
|
||||
"title": "Senior Software Engineer",
|
||||
"location": "Hamburg, Germany",
|
||||
"duration": "03/2020-current",
|
||||
"tasks": [
|
||||
"Programming of central components for the XING Platform with React and CSS.",
|
||||
"Development, maintenance and documentation of the XING Design System.",
|
||||
"Support for the product teams with the integration of new interfaces from components of the Design System.",
|
||||
"Conception of new components in collaboration with designers and developers.",
|
||||
"Evaluation of coding challenges and interviews for hiring new Frontend Developers.",
|
||||
"Administration of a Slack workspace with over 800 participants."
|
||||
]
|
||||
},
|
||||
{
|
||||
"company": "XING",
|
||||
"url": "https://www.xing.com",
|
||||
"location": "Hamburg, Germany",
|
||||
"title": "Front-End Engineer",
|
||||
"duration": "01/2011-02/2020",
|
||||
"tasks": [
|
||||
"Development, deployment and monitoring of multiple XING products.",
|
||||
"Concept, idea and development of user interface improvements on the job marketplace, which lead to 59 % more visitors on job ads.",
|
||||
"Idea and conception of a freelancer marketplace in a Hack Week, which lead to a new product on the platform.",
|
||||
"Development of an iPad hybrid app with Backbone.js.",
|
||||
"Creation of a screencast series in cooperation with User Care.",
|
||||
"Development of multiple products as the logged out profile, public search, onboarding user flow and profile-filling widget with React, Redux and GraphQL."
|
||||
]
|
||||
},
|
||||
{
|
||||
"company": "Dumrath & Fassnacht",
|
||||
"location": "Hamburg, Germany",
|
||||
"title": "Web Designer",
|
||||
"duration": "09/2005-12/2010",
|
||||
"tasks": [
|
||||
"Planning, design, and layout of websites.",
|
||||
"Implementation in W3C standard with HTML and CSS.",
|
||||
"Programming websites with content management systems and blog systems.",
|
||||
"Revision and update of existing customer websites.",
|
||||
"Customer advisory"
|
||||
]
|
||||
},
|
||||
{
|
||||
"company": "IGS Development",
|
||||
"location": "Harbke, Germany",
|
||||
"title": "Media Designer",
|
||||
"duration": "02/2002-01/2005",
|
||||
"tasks": [
|
||||
"Creation of Internet and Intranet pages with HTML, CSS, PHP, MySQL, and Typo3.",
|
||||
"Filming of industrial processes and production facilities in Germany and France.",
|
||||
"Editing and Postproduction with Premiere, Avid, and After Effect.",
|
||||
"Creation of 3D models and animations with 3ds max, and Cinema 4D."
|
||||
]
|
||||
},
|
||||
{
|
||||
"company": "Schmitz Kommunikation",
|
||||
"location": "Hamburg, Germany",
|
||||
"title": "Intern Web Design",
|
||||
"duration": "03/2001-04/2001",
|
||||
"tasks": [
|
||||
"Relaunch, conception, and realization of websites with Dreamweaver, Fireworks, Photoshop, and Flash 5 & ActionScript."
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"education": {
|
||||
"headline": "Education",
|
||||
"items": [
|
||||
{
|
||||
"school": "bib International College",
|
||||
"url": "https://www.bib.de",
|
||||
"degree": "Computer Scientist",
|
||||
"location": "Hanover, Germany",
|
||||
"duration": "10/1999-09/2001"
|
||||
}
|
||||
]
|
||||
},
|
||||
"skills": {
|
||||
"headline": "Key Skills",
|
||||
"items": [
|
||||
{
|
||||
"headline": "Fontend",
|
||||
"tags": [
|
||||
"HTML",
|
||||
"CSS",
|
||||
"JavaScript",
|
||||
"TypeScript",
|
||||
"SVG",
|
||||
"Web API & DOM",
|
||||
"Responsive Webdesign (RWD)",
|
||||
"Adaptive Webdesign (AWD)",
|
||||
"CSS Grid Layout",
|
||||
"Flexbox",
|
||||
"Markdown",
|
||||
"Progressive Web Apps (PWA)",
|
||||
"Service Worker",
|
||||
"Critical Render Path",
|
||||
"Performance",
|
||||
"Styled Components",
|
||||
"PostCSS",
|
||||
"CSS Modules",
|
||||
"Sass/SCSS",
|
||||
"Stylelint",
|
||||
"ESlint",
|
||||
"React",
|
||||
"Redux",
|
||||
"Apollo",
|
||||
"Web3.js",
|
||||
"Babel",
|
||||
"Webpack",
|
||||
"Gulp",
|
||||
"Jest",
|
||||
"Cypress",
|
||||
"SEO",
|
||||
"Accessibility (A11Y)",
|
||||
"Usability"
|
||||
]
|
||||
},
|
||||
{
|
||||
"headline": "Design",
|
||||
"tags": [
|
||||
"UX/UI Design",
|
||||
"Information Architecture",
|
||||
"Affinity Designer",
|
||||
"Affinity Photo",
|
||||
"Affinity Publisher",
|
||||
"Figma",
|
||||
"Sketch",
|
||||
"Abstract",
|
||||
"Adobe Photoshop",
|
||||
"Adobe Illustrator"
|
||||
]
|
||||
},
|
||||
{
|
||||
"headline": "Backend",
|
||||
"tags": [
|
||||
"Node.js",
|
||||
"Express",
|
||||
"RESTful Services",
|
||||
"GraphQL",
|
||||
"Ruby",
|
||||
"Ruby on Rails",
|
||||
"Solidity",
|
||||
"MySQL",
|
||||
"PostgreSQL",
|
||||
"SQLite"
|
||||
]
|
||||
},
|
||||
{
|
||||
"headline": "Dev Ops",
|
||||
"tags": [
|
||||
"Jenkins",
|
||||
"Travis CI",
|
||||
"Docker",
|
||||
"Kubernetes",
|
||||
"Apache",
|
||||
"NGINX",
|
||||
"SSH",
|
||||
"FTP"
|
||||
]
|
||||
},
|
||||
{
|
||||
"headline": "Collaboration",
|
||||
"tags": [
|
||||
"Git",
|
||||
"GitHub",
|
||||
"GitLab",
|
||||
"Slack",
|
||||
"Confluence",
|
||||
"Jira",
|
||||
"Notion",
|
||||
"Basecamp"
|
||||
]
|
||||
},
|
||||
{
|
||||
"headline": "Agile Methods & Productivity",
|
||||
"tags": [
|
||||
"Kanban",
|
||||
"Scrum",
|
||||
"Miro",
|
||||
"OKR",
|
||||
"GTD",
|
||||
"Pomodoro",
|
||||
"DEVONthink",
|
||||
"Obsidian",
|
||||
"Zettelkasten Method"
|
||||
]
|
||||
},
|
||||
{
|
||||
"headline": "Miscellaneous",
|
||||
"tags": [
|
||||
"Eleventy",
|
||||
"Gatsby",
|
||||
"Jekyll",
|
||||
"Zsh",
|
||||
"Bash",
|
||||
"Vim",
|
||||
"Neovim",
|
||||
"Visual Studio Code",
|
||||
"tmux",
|
||||
"Mac OS",
|
||||
"Linux"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"languages": {
|
||||
"headline": "Languages",
|
||||
"items": [
|
||||
{
|
||||
"language": "German",
|
||||
"level": "native language"
|
||||
},
|
||||
{
|
||||
"language": "English",
|
||||
"level": "fluently spoken and written"
|
||||
},
|
||||
{
|
||||
"language": "Japanese",
|
||||
"level": "advanced-beginner"
|
||||
},
|
||||
{
|
||||
"language": "Spanish",
|
||||
"level": "advanced-beginner"
|
||||
}
|
||||
]
|
||||
},
|
||||
"awards": {
|
||||
"headline": "Awards",
|
||||
"items": [
|
||||
"Three times winner of the yearly company-wide innovation award of XING Prototyping Days (2013, 2015, 2017).",
|
||||
"SEMY Award \u2013 German Search Marketing Award 2015."
|
||||
]
|
||||
},
|
||||
"interests": {
|
||||
"headline": "Interests & Hobbies"
|
||||
}
|
||||
}
|
||||
147
src/pages/cv.astro
Normal file
147
src/pages/cv.astro
Normal file
@@ -0,0 +1,147 @@
|
||||
---
|
||||
import GridLayout from '../layouts/GridLayout.astro';
|
||||
import PageTitle from '../components/PageTitle.astro';
|
||||
import DownloadLink from '../components/DownloadLink.astro';
|
||||
import EmailLink from '../components/EmailLink.astro';
|
||||
import {
|
||||
Divider,
|
||||
Headline,
|
||||
ListItem,
|
||||
Subheadline,
|
||||
Text,
|
||||
TextLink,
|
||||
UnorderedList,
|
||||
} from '../components';
|
||||
|
||||
import cv from '../data/cv.json';
|
||||
|
||||
import { Content as Intro } from '../text/cv/intro.mdx';
|
||||
import { Content as InterestsHobbies } from '../text/cv/interests-hobbies.mdx';
|
||||
|
||||
import { mapping } from '../mdx-components';
|
||||
|
||||
const title = 'CV';
|
||||
const description = '';
|
||||
---
|
||||
|
||||
<GridLayout title={title} description={description} grid="wide" class="grid" innerGrid>
|
||||
<PageTitle grid="wide" innerGrid>Curriculum Vitae</PageTitle>
|
||||
|
||||
<article class="col-span-full md:col-start-1 md:col-end-9">
|
||||
<Headline class="!mbs-0">{cv.summary.headline}</Headline>
|
||||
<Intro components={mapping} />
|
||||
</article>
|
||||
|
||||
<article class="col-span-full md:col-start-10 md:col-end-18">
|
||||
<Headline class="!mbs-0">Personal Information</Headline>
|
||||
<Subheadline class="font-semibold !mbs-0">{cv.personal.name}</Subheadline>
|
||||
<Text class="!mbe-0">{cv.personal.tagline}</Text>
|
||||
<TextLink href="https://www.stefanimhoff.de">Website</TextLink> •
|
||||
<EmailLink data-domain="stefanimhoff" data-name="cv" data-tld="de" icon={false} /> •
|
||||
<DownloadLink href="/downloads/cv-stefan-imhoff.zip" text="CV" /> •
|
||||
<DownloadLink href="/downloads/business-card-stefan-imhoff.zip" text="VCard" />
|
||||
</article>
|
||||
|
||||
<Divider class="col-span-full w-[90] !mbe-0 !mbs-0" />
|
||||
|
||||
<article class="col-span-full md:col-start-1 md:col-end-9">
|
||||
<Headline class="!mbs-0">{cv.experience.headline}</Headline>
|
||||
{
|
||||
cv.experience.items.map((item) => (
|
||||
<div>
|
||||
<div class="mbe-10">
|
||||
<Subheadline class="font-semibold">{item.title}</Subheadline>
|
||||
<div class="italic mbe-2 no-common-ligatures">{item.duration}</div>
|
||||
<div class="leading-none">
|
||||
<strong>{item.company}</strong> / {item.location}
|
||||
</div>
|
||||
{item.url && (
|
||||
<div>
|
||||
<TextLink href={item.url}>
|
||||
{item.url.replace(/https?:\/\//, '')}
|
||||
</TextLink>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{item.tasks.length > 0 && (
|
||||
<UnorderedList>
|
||||
{item.tasks.map((task) => (
|
||||
<ListItem>{task}</ListItem>
|
||||
))}
|
||||
</UnorderedList>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
<Headline class="!mbs-0">{cv.education.headline}</Headline>
|
||||
{
|
||||
cv.education.items.map((item) => (
|
||||
<div class="mbe-12">
|
||||
<Subheadline class="font-semibold">{item.degree}</Subheadline>
|
||||
<div class="italic mbe-2 no-common-ligatures">{item.duration}</div>
|
||||
<div class="leading-none">
|
||||
<strong>{item.school}</strong> / {item.location}
|
||||
</div>
|
||||
{item.url && (
|
||||
<div>
|
||||
<TextLink href={item.url}>
|
||||
{item.url.replace(/https?:\/\//, '')}
|
||||
</TextLink>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</article>
|
||||
|
||||
<aside class="col-span-full md:col-start-10 md:col-end-18">
|
||||
<article>
|
||||
<Headline class="!mbs-0">{cv.skills.headline}</Headline>
|
||||
{
|
||||
cv.skills.items.map((item) => (
|
||||
<div>
|
||||
<Subheadline class="font-semibold">{item.headline}</Subheadline>
|
||||
<UnorderedList class="!list-none p-0 mbe-10 mbs-5">
|
||||
{item.tags.map((tag, index) => (
|
||||
<ListItem class="inline">
|
||||
{index === item.tags.length - 1
|
||||
? tag.concat('')
|
||||
: tag.concat(', ')}
|
||||
</ListItem>
|
||||
))}
|
||||
</UnorderedList>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<Headline class="!mbs-0">{cv.languages.headline}</Headline>
|
||||
<UnorderedList>
|
||||
{
|
||||
cv.languages.items.map((item) => (
|
||||
<ListItem>
|
||||
<strong>{item.language}</strong> ({item.level})
|
||||
</ListItem>
|
||||
))
|
||||
}
|
||||
</UnorderedList>
|
||||
|
||||
<article>
|
||||
<Headline class="!mbs-0">{cv.awards.headline}</Headline>
|
||||
<UnorderedList>
|
||||
{cv.awards.items.map((item) => <ListItem>{item}</ListItem>)}
|
||||
</UnorderedList>
|
||||
</article>
|
||||
</article>
|
||||
</aside>
|
||||
<Divider class="col-span-full w-[90] !mbe-0 !mbs-0" />
|
||||
|
||||
<article class="col-span-full">
|
||||
<Headline class="!mbs-0">{cv.interests.headline}</Headline>
|
||||
<ul class="columns-1 gap-gap md:columns-2">
|
||||
<InterestsHobbies components={mapping} />
|
||||
</ul>
|
||||
</article>
|
||||
</GridLayout>
|
||||
7
src/text/cv/interests-hobbies.mdx
Normal file
7
src/text/cv/interests-hobbies.mdx
Normal file
@@ -0,0 +1,7 @@
|
||||
- I do [Calisthenics](/calisthenics/) (Body Weight Training), like walking long distances, and regularly do Meditation to keep my body and mind fresh and stay in a growth mindset.
|
||||
- I do [Sketchnotes](/sketchnotes/) and love _Visual Thinking_. With these skills, I collect and visualize my ideas to deepen my understanding.
|
||||
- I have a passion for **writing**. Besides writing essays, I wrote a [book](https://www.kogakure.de/en/) and follow the _[Zettelkasten](/zettelkasten-note-taking-devonthink/)_ method of note-taking.
|
||||
- I have a high interest in **design and art**, and related topics such as architecture, interior design, and typography.
|
||||
- I’m a regular reader and love **[books](https://www.goodreads.com/kogakure/)**. Whenever possible I read books about philosophy, science, history, or related topics. My library has around 1,000 books.
|
||||
- **Japanese things** fascinate me a lot. Be it the language, Kanji character, Japanese aesthetics and design (_wabi-sabi_, _iki_, _shibui_), or art forms like _shodō_, _sumi-e_, _ukiyo-e_, or _irezumi_, to name just a few. I also write my own [Haiku](/haiku/).
|
||||
- I started learning manual **photography**. My camera is a _Fuji X100T_, with its fixed lens, the perfect tool for city photography, sports, or people.
|
||||
1
src/text/cv/intro.mdx
Normal file
1
src/text/cv/intro.mdx
Normal file
@@ -0,0 +1 @@
|
||||
I’m a Front-End Web Developer and Designer with nearly two decades of experience in creating and building beautiful, user-centric layouts for devices of all sizes on the web. My passion is creating sophisticated, but easy to use UI and remarkable UX. I love bringing simplicity and minimalism to everything I create.
|
||||
Reference in New Issue
Block a user