From 83d62c109b2dd0301ae2748550f1586810a12921 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 13 Nov 2019 14:50:48 +0100 Subject: [PATCH] content tweaks --- content/resume.json | 17 +++++-------- src/pages/resume/ResumeItem.module.scss | 32 +++++++++++++++++++++---- src/pages/resume/index.jsx | 11 +++++---- src/pages/resume/index.module.scss | 28 +++++++++++++++++++++- 4 files changed, 66 insertions(+), 22 deletions(-) diff --git a/content/resume.json b/content/resume.json index 5ce0dd4..7b1bfaa 100644 --- a/content/resume.json +++ b/content/resume.json @@ -43,8 +43,7 @@ "position": "Lead UI Designer & Developer", "website": "https://oceanprotocol.com", "startDate": "2017-01-01", - "summary": "Leading the UI design & development of Ocean Protocol's user interfaces, iterating on a components-based UI design system spanning all of Ocean Protocol's web properties. \n\nConceptualize, execute and iterate on the creative and visual direction of the Ocean Protocol brand.\n\nAs a core developer leading the execution of [multiple user interfaces](/oceanprotocol) and core components.", - "highlights": ["Started the company"] + "summary": "Co-Founded the Ocean Protocol project and as a core developer leading the execution of [multiple user interfaces](/oceanprotocol) and core components.\n\nIn general, leading the UI design & development of Ocean Protocol's user interfaces, iterating on a components-based UI design system spanning all of Ocean Protocol's web properties. This also includes the conceptualization, execution and iteration of the creative and visual direction of the Ocean Protocol brand." }, { "company": "BigchainDB GmbH", @@ -52,8 +51,7 @@ "website": "https://bigchaindb.com", "startDate": "2016-12-01", "endDate": "2018-12-31", - "summary": "Leading the UI design & development of all BigchainDB web properties. I created the initial BigchainDB brand and further conceptualized, executed and iterated on the creative and visual direction of BigchainDB. This included creating and iterating on a components-based UI design system for all of [BigchainDB's user interfaces](/bigchaindb).", - "highlights": ["Started the company"] + "summary": "Led the UI design & development of all BigchainDB web properties. I created the initial BigchainDB brand and further conceptualized, executed and iterated on the creative and visual direction of BigchainDB. This included creating and iterating on a components-based UI design system for all of [BigchainDB's user interfaces](/bigchaindb)." }, { "company": "ascribe GmbH", @@ -61,8 +59,7 @@ "website": "https://ascribe.io", "startDate": "2016-01-01", "endDate": "2017-12-31", - "summary": "Description...", - "highlights": ["Started the company"] + "summary": "Description..." }, { "company": "ChartMogul Ltd.", @@ -70,8 +67,7 @@ "website": "https://chartmogul.com", "startDate": "2015-07-15", "endDate": "2017-02-01", - "summary": "Co-designing and leading the UI design & development of various [ChartMogul web properties](/chartmogul). This included the creation of a components-based UI design system and implementing it across all web touch points.\n\nBesides designing and implementing new features, I maintained the front-end of the ChartMogul application and implemented the UI design system by refactoring most of its front-end codebase.", - "highlights": ["Started the company"] + "summary": "Co-designed and led the UI design & development of various [ChartMogul web properties](/chartmogul), helping the company to position itself as a market leader. This included the creation of a components-based UI design system and implementing it across all web touch points.\n\nBesides designing and implementing new features, I maintained the front-end of the ChartMogul application and implemented the UI design system by refactoring most of its front-end codebase." }, { "company": "UN World Food Programme/ShareTheMeal", @@ -79,8 +75,7 @@ "website": "https://sharethemeal.org", "startDate": "2014-10-01", "endDate": "2015-06-01", - "summary": "[app and website](/sharethemeal)", - "highlights": ["Started the company"] + "summary": "[app and website](/sharethemeal)" }, { "company": "ezeep GmbH", @@ -88,7 +83,7 @@ "website": "https://ezeep.com", "startDate": "2012-01-01", "endDate": "2014-09-01", - "summary": "Creating an unprecedented, market-leading & award-winning user experience around printing based on the principles of emotional design way ahead of all competitors.\n\nThis included defining the product based on user & market research in an iterative process and designing & building [ezeep’s numerous touch points](/ezeep), like the web app, web site, desktop apps for Windows & Mac OS X and apps for iOS & Android.\n\nOn top of that I created the corporate identity and a consistent visual branding, including the logo." + "summary": "Created an unprecedented, market-leading & award-winning user experience around printing based on the principles of emotional design way ahead of all competitors.\n\nThis included defining the product based on user & market research in an iterative process and designing & building [ezeep’s numerous touch points](/ezeep), like the web app, web site, desktop apps for Windows & Mac OS X and apps for iOS & Android.\n\nOn top of that I created the corporate identity and a consistent visual branding, including the logo." }, { "company": "Martin Luther University Halle-Wittenberg", diff --git a/src/pages/resume/ResumeItem.module.scss b/src/pages/resume/ResumeItem.module.scss index 69c0c4b..d343945 100644 --- a/src/pages/resume/ResumeItem.module.scss +++ b/src/pages/resume/ResumeItem.module.scss @@ -9,13 +9,19 @@ &::before { content: ''; display: block; - width: $font-size-small; - height: $font-size-small; + width: $font-size-base; + height: $font-size-base; border-radius: 50%; - background: $brand-grey-light; + background: $body-background-color; + border: 0.1rem solid $color-headings; position: absolute; - left: -($font-size-small / 1.8); - top: 0.1rem; + left: -($font-size-base / 1.8); + top: 0; + + :global(.dark) & { + background: $body-background-color--dark; + border-color: $color-headings--dark; + } } p:last-child { @@ -47,6 +53,7 @@ display: block; margin-bottom: $spacer / 2; white-space: nowrap; + font-style: italic; @media (min-width: $screen-md) { text-align: right; @@ -55,3 +62,18 @@ right: 105%; } } + +@media print { + .time { + @media (min-width: $screen-md) { + text-align: left; + position: relative; + top: auto; + right: auto; + } + } + + :global(html) { + font-size: 10pt; + } +} diff --git a/src/pages/resume/index.jsx b/src/pages/resume/index.jsx index 9cd2b0a..68b6234 100644 --- a/src/pages/resume/index.jsx +++ b/src/pages/resume/index.jsx @@ -37,12 +37,13 @@ export default function Resume() { {location.city}, {location.countryCode} -
  • - +
  • + {languages.map(item => ( - {`${item.language} (${item.fluency})`} +

    + {item.language} + {item.fluency} +

    ))}
    • diff --git a/src/pages/resume/index.module.scss b/src/pages/resume/index.module.scss index b7b5302..f1e10a5 100644 --- a/src/pages/resume/index.module.scss +++ b/src/pages/resume/index.module.scss @@ -33,7 +33,8 @@ list-style: none; padding: 0; - li { + li, + p { margin-bottom: $spacer / 4; } @@ -65,6 +66,31 @@ } } +.languages { + svg { + display: inline-block; + } + + p { + margin-left: $spacer / 1.1; + + &:first-of-type { + margin-left: 0; + display: inline-block; + } + } + + span { + font-size: $font-size-small; + margin-left: $spacer / 4; + color: $brand-grey-light; + + :global(.dark) & { + color: $brand-grey; + } + } +} + @media print { .resume { grid-template-columns: 1fr;