m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-22 09:13:19 +01:00
Code Releases Activity

drop da base 🍷

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-03-18 20:39:18 +01:00
commit ca0e18518a
Signed by: m
GPG Key ID: 606EEEF3C479A91F
22 changed files with 7735 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.editorconfig Normal file
View File

@ -0,0 +1,16 @@
# EditorConfig is awesome: http://EditorConfig.org
[*]
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
charset = utf-8
trim_trailing_whitespace = true
[*.scss]
indent_size = 4
[*.css]
indent_size = 4

24
.eslintrc Normal file
View File

@ -0,0 +1,24 @@
{
"plugins": [
"react"
],
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true
}
},
"env": {
"browser": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
"quotes": [ "error", "single" ],
"semi": [ "error", "never" ]
}
}

22
.gitignore vendored Normal file
View File

@ -0,0 +1,22 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
package-lock.json

10
.stylelintrc Normal file
View File

@ -0,0 +1,10 @@
{
"extends": [
"stylelint-config-standard"
],
"syntax": "scss",
"rules": {
"indentation": 4,
"number-leading-zero": "never"
}
}

11
README.md Normal file
View File

@ -0,0 +1,11 @@
# matthiaskretschmann.com
> Portfolio of Matthias Kretschmann
[![build status](https://www.git.berlin/kremalicious/portfolio/badges/master/build.svg)](https://www.git.berlin/kremalicious/portfolio/commits/master)
## Development
```bash
npm i
npm start
```

34
package.json Normal file
View File

@ -0,0 +1,34 @@
{
"name": "portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"node-sass-chokidar": "^1.1.0",
"npm-run-all": "^4.1.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1"
},
"devDependencies": {
"babel-eslint": "^8.2.2",
"eslint": "^4.19.0",
"eslint-plugin-react": "^7.7.0",
"jest-cli": "^22.1.4",
"stylelint": "^9.0.0",
"stylelint-config-standard": "^18.1.0"
},
"scripts": {
"lint:js": "eslint ./{src,public}/**/*.js",
"lint:css": "stylelint ./src/**/*.scss",
"lint": "npm run lint:js && npm run lint:css",
"build-css": "node-sass-chokidar --include-path src/stylesheets/ src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path src/stylesheets/ src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "npm run lint && react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

20
public/index.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/dtg3zui.css">
<title>Portfolio</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>

15
public/manifest.json Normal file
View File

@ -0,0 +1,15 @@
{
"short_name": "Portfolio",
"name": "Portfolio",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

12
src/App.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react'
import Header from './components/molecules/Header.js'
import Routes from './Routes'
const App = () => (
<div className="app">
<Header />
<Routes />
</div>
)
export default App

11
src/App.test.js Normal file
View File

@ -0,0 +1,11 @@
/* global it */
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
it('renders without crashing', () => {
const div = document.createElement('div')
ReactDOM.render(<App />, div)
ReactDOM.unmountComponentAtNode(div)
})

13
src/Routes.js Normal file
View File

@ -0,0 +1,13 @@
import React from 'react'
import { Route, Switch } from 'react-router-dom'
import Home from './components/pages/Home'
import NotFound from './components/pages/NotFound'
const Routes = () => (
<Switch>
<Route exact component={Home} path="/" />
<Route component={NotFound} />
</Switch>
)
export default Routes

15
src/components/molecules/Header.css Normal file
View File

@ -0,0 +1,15 @@
.header {
padding: 0.375rem 0.75rem; }
.header__title,
.header__description {
display: inline-block; }
.header__title {
margin-bottom: 0;
font-size: 2rem;
margin-right: 0.75rem; }
.header__description {
margin-bottom: 0;
font-size: 1.45rem; }

11
src/components/molecules/Header.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react'
import './Header.css'
const Header = () => (
<header className="header">
<h1 className="header__title">Matthias Kretschmann</h1>
<p className="header__description">Designer & Developer</p>
</header>
)
export default Header

21
src/components/molecules/Header.scss Normal file
View File

@ -0,0 +1,21 @@
@import 'variables';
.header {
padding: $spacer / 4 $spacer / 2;
}
.header__title,
.header__description {
display: inline-block;
}
.header__title {
margin-bottom: 0;
font-size: $font-size-h2;
margin-right: $spacer / 2;
}
.header__description {
margin-bottom: 0;
font-size: $font-size-large;
}

11
src/components/pages/Home.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react'
const Start = () => (
<main className="screen screen--start">
</main>
)
export default Start

9
src/components/pages/NotFound.js Normal file
View File

@ -0,0 +1,9 @@
import React from 'react'
const NotFound = () => (
<main className="screen screen--404">
<h1>Shenanigans, page not found.</h1>
</main>
)
export default NotFound

38
src/index.css Normal file
View File

@ -0,0 +1,38 @@
html,
body {
margin: 0;
padding: 0;
height: 100%; }
html {
font-size: 16px; }
body {
background: #e7eef4;
font-family: "ff-tisa-sans-web-pro", "futura-pt", "le-havre", "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
color: #6b7f88;
text-rendering: optimizeLegibility;
font-display: swap;
font-feature-settings: 'liga', 'kern';
letter-spacing: -.01em; }
p,
ul,
ol {
margin: 0 0 1.5rem; }
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "brandon-grotesque", "futura-pt", "le-havre", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.1;
color: #015565;
font-weight: 700;
letter-spacing: -.04rem;
margin: 0 0 1.5rem; }

14
src/index.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import './index.css'
import App from './App'
import registerServiceWorker from './registerServiceWorker'
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root')
)
registerServiceWorker()

48
src/index.scss Normal file
View File

@ -0,0 +1,48 @@
@import 'variables';
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
html {
font-size: $font-size-root;
}
body {
background: $brand-light;
font-family: $font-family-base;
font-weight: $font-weight-base;
font-size: $font-size-base;
line-height: $line-height;
color: $font-color-base;
text-rendering: optimizeLegibility;
font-display: swap;
font-feature-settings: 'liga', 'kern';
letter-spacing: -.01em;
}
p,
ul,
ol {
margin: 0 0 $spacer;
}
// Headings
/////////////////////////////////////
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $font-family-headings;
line-height: $line-height-headings;
color: $color-headings;
font-weight: $font-weight-headings;
letter-spacing: -.04rem;
margin: 0 0 $spacer;
}

112
src/registerServiceWorker.js Normal file
View File

@ -0,0 +1,112 @@
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
)
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location)
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
return
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
if (isLocalhost) {
// This is running on localhost. Lets check if a service worker still exists or not.
checkValidServiceWorker(swUrl)
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log('This web app is being served cache-first by a service worker. To learn more, visit https://goo.gl/SC7cgQ') // eslint-disable-line no-console
})
} else {
// Is not local host. Just register service worker
registerValidSW(swUrl)
}
})
}
}
function registerValidSW(swUrl) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.') // eslint-disable-line no-console
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.') // eslint-disable-line no-console
}
}
}
}
})
.catch(error => {
console.error('Error during service worker registration:', error) // eslint-disable-line no-console
})
}
function checkValidServiceWorker(swUrl) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
if (
response.status === 404 ||
response.headers.get('content-type').indexOf('javascript') === -1
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload()
})
})
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl)
}
})
.catch(() => {
console.log('No internet connection found. App is running in offline mode.') // eslint-disable-line no-console
})
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister()
})
}
}

54
src/stylesheets/_variables.scss Normal file
View File

@ -0,0 +1,54 @@
// Colors
/////////////////////////////////////
$brand-main: #015565;
$brand-cyan: #43a699;
$brand-light: #e7eef4;
$brand-grey: #6b7f88;
$brand-grey-light: lighten($brand-grey, 20%);
$brand-grey-dimmed: lighten($brand-grey, 60%);
// Text Colors
/////////////////////////////////////
$text-color: $brand-grey;
$text-color-light: $brand-grey-light;
// Typography
/////////////////////////////////////
$font-size-root : 16px;
$font-size-base : 1rem;
$font-size-large : 1.45rem;
$font-size-small : .8rem;
$font-size-mini : .6rem;
$font-size-h1 : 3rem;
$font-size-h2 : 2rem;
$font-size-h3 : 1.75rem;
$font-size-h4 : $font-size-large;
$font-size-h5 : $font-size-base;
$font-size-h6 : $font-size-small;
$line-height : 1.5;
$line-height-small : 1.1428571429;
$font-family-base : 'ff-tisa-sans-web-pro', 'futura-pt', 'le-havre', 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-weight-base : 400;
$font-color-base : $text-color;
$font-family-monospace : Menlo, Monaco, Consolas, 'Courier New', monospace;
$font-family-headings : 'brandon-grotesque', 'futura-pt', 'le-havre', 'Avenir Next', 'Helvetica Neue',Helvetica,Arial,sans-serif;
$font-weight-headings : 700;
$line-height-headings : 1.1;
$color-headings: $brand-main;
// Components spacing
/////////////////////////////////////
$spacer: ($font-size-base * $line-height);

7214
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff