1
0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-23 01:29:41 +01:00

Merge pull request #42 from kremalicious/feature/scrollbar

custom scrollbar for project nav
This commit is contained in:
Matthias Kretschmann 2018-10-17 21:08:18 +02:00 committed by GitHub
commit db469c4315
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 82 additions and 58 deletions

View File

@ -45,36 +45,57 @@ The whole [portfolio](https://matthiaskretschmann.com) is a React-based Single P
### 💍 One data file to rule all pages ### 💍 One data file to rule all pages
All content is powered by one YAML file, [`data/projects.yml`](data/projects.yml) where all the portfolio's projects are defined. The project description itself is transformed from Markdown. All content is powered by one YAML file where all the portfolio's projects are defined. The project description itself is transformed from Markdown written inside the YAML file.
Gatsby automatically creates pages from each item in that file utilizing the [`src/templates/Project.jsx`](src/templates/Project.jsx) template. Gatsby automatically creates pages from each item in that file utilizing the [`Project.jsx`](src/templates/Project.jsx) template.
- [`data/projects.yml`](data/projects.yml)
- [`src/templates/Project.jsx`](src/templates/Project.jsx)
### 💅 Theme switcher ### 💅 Theme switcher
Includes a theme switcher which allows user to toggle between a light and a dark theme. Switching between them also happens automatically based on user's local sunset and sunrise times. Uses Cloudflare's geo location HTTP header functionality. Includes a theme switcher which allows user to toggle between a light and a dark theme. Switching between them also happens automatically based on user's local sunset and sunrise times. Uses Cloudflare's geo location HTTP header functionality.
If you want to know how, have a look at the respective component under [`src/components/molecules/ThemeSwitch.jsx`](src/components/molecules/ThemeSwitch.jsx) If a visitor has set the theme manually that selection is remembered in localStorage, and is restored on next visit.
If you want to know how, have a look at the respective components:
- [`src/components/molecules/ThemeSwitch.jsx`](src/components/molecules/ThemeSwitch.jsx)
- [`src/store/provider.jsx`](src/store/provider.jsx)
### 🏆 SEO component ### 🏆 SEO component
Includes a SEO component which automatically switches all required `meta` tags for search engines, Twitter Cards, and Facebook OpenGraph tags based on the browsed route/page. Includes a SEO component which automatically switches all required `meta` tags for search engines, Twitter Cards, and Facebook OpenGraph tags based on the browsed route/page.
If you want to know how, have a look at the respective component under [`src/components/atoms/SEO.jsx`](src/components/atoms/SEO.jsx) If you want to know how, have a look at the respective component:
- [`src/components/atoms/SEO.jsx`](src/components/atoms/SEO.jsx)
### 📇 Client-side vCard creation ### 📇 Client-side vCard creation
The _Add to addressbook_ link in the footer automatically creates a downloadable vCard file on the client-side, based on data defined in `data/meta.yml`. The _Add to addressbook_ link in the footer automatically creates a downloadable vCard file on the client-side, based on data defined in `data/meta.yml`.
If you want to know how, have a look at the respective component under [`src/components/atoms/Vcard.jsx`](src/components/atoms/Vcard.jsx) If you want to know how, have a look at the respective component:
- [`src/components/atoms/Vcard.jsx`](src/components/atoms/Vcard.jsx)
### 💫 Page transitions ### 💫 Page transitions
Includes mechanism for transitioning between route changes with full page transitions defined with [react-pose](https://popmotion.io/pose/). Mechanism ~~stolen~~ inspired by [gatsby-universal](https://github.com/fabe/gatsby-universal). Includes mechanism for transitioning between route changes with full page transitions defined with [react-pose](https://popmotion.io/pose/). Mechanism ~~stolen~~ inspired by [gatsby-universal](https://github.com/fabe/gatsby-universal).
If you want to know how, have a look at the respective components:
- [`src/components/Layout.jsx`](src/components/Layout.jsx)
- [`src/helpers/wrapPageElement.jsx`](src/helpers/wrapPageElement.jsx)
- [`gatsby-browser.js`](gatsby-browser.js)
- [`gatsby-ssr.js`](gatsby-ssr.js)
### 📈 Matomo (formerly Piwik) analytics tracking ### 📈 Matomo (formerly Piwik) analytics tracking
Site sends usage statistics to my own [Matomo](https://matomo.org) installation. To make this work in Gatsby, I created and open sourced a plugin, [gatsby-plugin-matomo](https://github.com/kremalicious/gatsby-plugin-matomo), which is in use on this site. Site sends usage statistics to my own [Matomo](https://matomo.org) installation. To make this work in Gatsby, I created and open sourced a plugin, [gatsby-plugin-matomo](https://github.com/kremalicious/gatsby-plugin-matomo), which is in use on this site.
- [gatsby-plugin-matomo](https://github.com/kremalicious/gatsby-plugin-matomo)
### 🖼 Project images ### 🖼 Project images
All project images live under `src/images` and are automatically attached to each project based on the inclusion of the project's `slug` in their filenames. All project images live under `src/images` and are automatically attached to each project based on the inclusion of the project's `slug` in their filenames.
@ -83,7 +104,9 @@ All project images make use of the excellent [gatsby-image](https://github.com/g
All together, Gatsby automatically generates all required image sizes for delivering responsible, responsive images to visitors, including lazy loading of all images. Also includes the [intersection-observer polyfill](https://github.com/w3c/IntersectionObserver) to make lazy loading work properly in Safari. All together, Gatsby automatically generates all required image sizes for delivering responsible, responsive images to visitors, including lazy loading of all images. Also includes the [intersection-observer polyfill](https://github.com/w3c/IntersectionObserver) to make lazy loading work properly in Safari.
All project images use one single component defined in [`src/components/molecules/ProjectImage.jsx`](src/components/molecules/ProjectImage.jsx). In there, one main GraphQL query fragment is defined, which then gets used throughout other GraphQL queries. All project images use one single component where one main GraphQL query fragment is defined, which then gets used throughout other GraphQL queries.
- [`src/components/molecules/ProjectImage.jsx`](src/components/molecules/ProjectImage.jsx)
### 💎 Importing SVG assets ### 💎 Importing SVG assets
@ -99,7 +122,9 @@ import { ReactComponent as Logo } from './components/svg/Logo'
Includes a component for adding the Typekit snippet. Includes a component for adding the Typekit snippet.
If you want to know how, have a look at the respective component under [`src/components/atoms/Typekit.jsx`](src/components/atoms/Typekit.jsx) If you want to know how, have a look at the respective component:
- [`src/components/atoms/Typekit.jsx`](src/components/atoms/Typekit.jsx)
## ✨ Development ## ✨ Development

View File

@ -21,14 +21,5 @@
} }
.title { .title {
font-size: $font-size-h3; composes: metaTitle from '../../templates/Project.module.scss';
margin-bottom: $spacer * 1.5;
span {
display: block;
margin-top: $spacer / 3;
font-size: $font-size-base;
font-family: $font-family-base;
color: $brand-grey-light;
}
} }

View File

@ -2,7 +2,6 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Link, graphql, StaticQuery } from 'gatsby' import { Link, graphql, StaticQuery } from 'gatsby'
import Img from 'gatsby-image' import Img from 'gatsby-image'
import FullWidth from '../atoms/FullWidth'
import styles from './ProjectNav.module.scss' import styles from './ProjectNav.module.scss'
const query = graphql` const query = graphql`
@ -73,7 +72,6 @@ export default class ProjectNav extends Component {
const projects = data.allProjectsYaml.edges const projects = data.allProjectsYaml.edges
return ( return (
<FullWidth>
<nav <nav
className={styles.projectNav} className={styles.projectNav}
ref={node => (this.scrollContainer = node)} ref={node => (this.scrollContainer = node)}
@ -92,7 +90,6 @@ export default class ProjectNav extends Component {
) )
})} })}
</nav> </nav>
</FullWidth>
) )
}} }}
/> />

View File

@ -1,7 +1,6 @@
@import 'variables'; @import 'variables';
.projectNav { .projectNav {
// composes: fullWidth from '../atoms/FullWidth.module.scss';
white-space: nowrap; white-space: nowrap;
overflow-y: hidden; overflow-y: hidden;
overflow-x: auto; overflow-x: auto;
@ -11,6 +10,28 @@
&::-moz-scrollbar { &::-moz-scrollbar {
display: none; display: none;
} }
&::-webkit-scrollbar {
width: 6px;
height: 6px;
}
&::-webkit-scrollbar-thumb {
background: lighten($brand-grey-light, 25%);
:global(.dark) & {
background: lighten($body-background-color--dark, 15%);
}
}
// stylelint-disable-next-line no-descending-specificity
&::-webkit-scrollbar-track {
background: darken($body-background-color, 2%);
:global(.dark) & {
background: lighten($body-background-color--dark, 2%);
}
}
} }
.item { .item {

View File

@ -28,14 +28,5 @@
} }
.title { .title {
font-size: $font-size-h3; composes: metaTitle from '../../templates/Project.module.scss';
margin-bottom: $spacer * 1.5;
span {
display: block;
margin-top: $spacer / 3;
font-size: $font-size-base;
font-family: $font-family-base;
color: $brand-grey-light;
}
} }

View File

@ -9,11 +9,10 @@ import ProjectTechstack from '../components/molecules/ProjectTechstack'
import ProjectLinks from '../components/molecules/ProjectLinks' import ProjectLinks from '../components/molecules/ProjectLinks'
import ProjectNav from '../components/molecules/ProjectNav' import ProjectNav from '../components/molecules/ProjectNav'
import SEO from '../components/atoms/SEO' import SEO from '../components/atoms/SEO'
import styles from './Project.module.scss' import styles from './Project.module.scss'
const ProjectMeta = ({ links, techstack }) => ( const ProjectMeta = ({ links, techstack }) => (
<footer className={styles.project__meta}> <footer className={styles.meta}>
{!!links && <ProjectLinks links={links} />} {!!links && <ProjectLinks links={links} />}
{!!techstack && <ProjectTechstack techstack={techstack} />} {!!techstack && <ProjectTechstack techstack={techstack} />}
</footer> </footer>
@ -22,7 +21,7 @@ const ProjectMeta = ({ links, techstack }) => (
const ProjectImages = ({ projectImages, title }) => ( const ProjectImages = ({ projectImages, title }) => (
<FullWidth> <FullWidth>
{projectImages.map(({ node }) => ( {projectImages.map(({ node }) => (
<div className={styles.spacer} key={node.id}> <div className={styles.imageWrap} key={node.id}>
<ProjectImage fluid={node.fluid} alt={title} /> <ProjectImage fluid={node.fluid} alt={title} />
</div> </div>
))} ))}
@ -44,11 +43,11 @@ const Project = ({ data }) => {
<article> <article>
<header> <header>
<h1 className={styles.project__title}>{title}</h1> <h1 className={styles.title}>{title}</h1>
</header> </header>
<ReactMarkdown <ReactMarkdown
source={descriptionWithLineBreaks} source={descriptionWithLineBreaks}
className={styles.project__description} className={styles.description}
/> />
<ProjectImages projectImages={projectImages} title={title} /> <ProjectImages projectImages={projectImages} title={title} />
<ProjectMeta links={links} techstack={techstack} /> <ProjectMeta links={links} techstack={techstack} />

View File

@ -1,7 +1,7 @@
@import 'variables'; @import 'variables';
@import '../components/molecules/ProjectImage.module'; @import '../components/molecules/ProjectImage.module';
.spacer { .imageWrap {
margin-bottom: $spacer * 3; margin-bottom: $spacer * 3;
@media (min-width: $screen-xs) { @media (min-width: $screen-xs) {
@ -9,7 +9,7 @@
} }
} }
.project__title { .title {
font-size: $font-size-h2; font-size: $font-size-h2;
@media (min-width: $screen-xs) { @media (min-width: $screen-xs) {
@ -17,12 +17,12 @@
} }
} }
.project__description { .description {
font-size: $font-size-base; font-size: $font-size-base;
margin-bottom: $spacer * 2; margin-bottom: $spacer * 2;
} }
.project__meta { .meta {
margin-top: -($spacer); margin-top: -($spacer);
margin-bottom: $spacer * 5; margin-bottom: $spacer * 5;
display: grid; display: grid;
@ -35,7 +35,7 @@
} }
} }
.project__meta__title { .metaTitle {
font-size: $font-size-h3; font-size: $font-size-h3;
margin-bottom: $spacer * 1.5; margin-bottom: $spacer * 1.5;