context for color, some bugfixes and types
This commit is contained in:
parent
95d49ec986
commit
94463f673e
12
TODO.md
12
TODO.md
@ -1,17 +1,7 @@
|
||||
# Todo
|
||||
|
||||
## Fonts
|
||||
|
||||
```js
|
||||
// <!-- Google Webfonts -->
|
||||
// <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700,800,700italic,600italic' rel='stylesheet' type='text/css'>
|
||||
// <link href='https://fonts.googleapis.com/css?family=Neuton:400,200,300' rel='stylesheet' type='text/css'>
|
||||
```
|
||||
|
||||
## Colours and languages (hooks? some state thing..)
|
||||
|
||||
## favicon
|
||||
|
||||
## helmet
|
||||
|
||||
<!-- code mentions META at some points (e.g disclaimer page) -->
|
||||
@ -22,5 +12,3 @@
|
||||
|
||||
- maybe transition to markdown loader?
|
||||
- add language switcher + download for both
|
||||
- add highlight to "languages I like"
|
||||
- tech turns red when hovered over link (need to hover on text too)
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./src",
|
||||
"checkJs": true,
|
||||
"jsx": "react"
|
||||
}
|
||||
}
|
||||
3887
package-lock.json
generated
3887
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -26,6 +26,7 @@
|
||||
"gatsby-transformer-remark": "^5.19.0",
|
||||
"gatsby-transformer-sharp": "^4.19.0",
|
||||
"html-react-parser": "^3.0.1",
|
||||
"js-cookie": "^3.0.1",
|
||||
"react": "^18.2.0",
|
||||
"react-bootstrap": "^2.4.0",
|
||||
"react-cookie-consent": "^7.5.0",
|
||||
@ -35,6 +36,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@mastermindzh/prettier-config": "^1.0.0",
|
||||
"@types/js-cookie": "^3.0.2",
|
||||
"@typescript-eslint/parser": "^5.30.7",
|
||||
"eslint": "^8.20.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
import React, { FunctionComponent, ReactNode } from "react";
|
||||
|
||||
type Props = {};
|
||||
type Props = { children?: ReactNode };
|
||||
|
||||
export const FilterList: FunctionComponent<Props> = ({ children }) => {
|
||||
return (
|
||||
|
||||
3
src/context/SettingsContext.tsx
Normal file
3
src/context/SettingsContext.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
import React from "react";
|
||||
|
||||
export const SettingsContext = React.createContext(undefined);
|
||||
24
src/context/SettingsProvider.tsx
Normal file
24
src/context/SettingsProvider.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import Cookies from "js-cookie";
|
||||
import React, { FunctionComponent, ReactNode, useState } from "react";
|
||||
import { Settings } from "./settings";
|
||||
import { SettingsContext } from "./SettingsContext";
|
||||
|
||||
type Props = { children?: ReactNode };
|
||||
|
||||
export const SettingsProvider: FunctionComponent<Props> = ({ children }) => {
|
||||
const cookieValue = Cookies.get("color");
|
||||
const [color, setColor] = useState(cookieValue ?? "body-yellow");
|
||||
|
||||
const defaultSettings: Settings = {
|
||||
color,
|
||||
language: "en",
|
||||
changeColor: (newColor: string) => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(newColor);
|
||||
setColor(newColor);
|
||||
Cookies.set("color", newColor);
|
||||
},
|
||||
};
|
||||
|
||||
return <SettingsContext.Provider value={defaultSettings}>{children}</SettingsContext.Provider>;
|
||||
};
|
||||
6
src/context/settings.tsx
Normal file
6
src/context/settings.tsx
Normal file
@ -0,0 +1,6 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
export interface Settings {
|
||||
color: string;
|
||||
language: string;
|
||||
changeColor: (color: string) => void;
|
||||
}
|
||||
@ -8,40 +8,40 @@ export const techs = [
|
||||
{ link: "http://elastic.co/products/kibana", label: "Kibana" },
|
||||
{ link: "http://nodejs.org", label: "NodeJS" },
|
||||
{ link: "http://docker.com", label: "Docker" },
|
||||
{ link: "http://scala-lang.org/", label: "Scala " },
|
||||
{ link: "http://nativescript.org/", label: "Nativescript " },
|
||||
{ link: "http://php.net/manual/en/intro-whatis.php", label: "PHP " },
|
||||
{ link: "http://mysql.com", label: "MySQL " },
|
||||
{ link: "http://scala-lang.org/", label: "Scala" },
|
||||
{ link: "http://nativescript.org/", label: "Nativescript" },
|
||||
{ link: "http://php.net/manual/en/intro-whatis.php", label: "PHP" },
|
||||
{ link: "http://mysql.com", label: "MySQL" },
|
||||
{
|
||||
link: "http://microsoft.com/en-us/sql-server/sql-server-2016",
|
||||
label: "SQL Server ",
|
||||
},
|
||||
{ link: "http://en.wikipedia.org/wiki/Linux", label: "Linux " },
|
||||
{ link: "http://java.com/en/", label: "Java " },
|
||||
{ link: "http://angular.io/", label: "Angular " },
|
||||
{ link: "http://facebook.github.io/react/", label: "React " },
|
||||
{ link: "http://typescriptlang.org/", label: "Typescript " },
|
||||
{ link: "http://en.wikipedia.org/wiki/Linux", label: "Linux" },
|
||||
{ link: "http://java.com/en/", label: "Java" },
|
||||
{ link: "http://angular.io/", label: "Angular" },
|
||||
{ link: "http://facebook.github.io/react/", label: "React" },
|
||||
{ link: "http://typescriptlang.org/", label: "Typescript" },
|
||||
{ link: "https://sass-lang.com/", label: "HTML / CSS / SASS / Web tools" },
|
||||
{ link: "http://python.org/", label: "Python" },
|
||||
{ link: "http://transfollow.org/en", label: "Transfollow" },
|
||||
{ link: "http://golang.org/", label: "Golang " },
|
||||
{ link: "http://golang.org/", label: "Golang" },
|
||||
{
|
||||
link: "http://docs.microsoft.com/en-us/dotnet/visual-basic/",
|
||||
label: "Visual basic ",
|
||||
},
|
||||
{ link: "http://en.wikipedia.org/wiki/C_(programming_language)", label: "C " },
|
||||
{ link: "http://cplusplus.com/", label: "C++ " },
|
||||
{ link: "http://electron.atom.io", label: "Electron " },
|
||||
{ link: "http://en.wikipedia.org/wiki/Unified_Modeling_Language", label: "UML " },
|
||||
{ link: "http://atlassian.com/software/jira", label: "JIRA " },
|
||||
{ link: "http://atlassian.com/software/confluence", label: "Confluence " },
|
||||
{ link: "http://github.com/mastermindzh", label: "Git " },
|
||||
{ link: "http://hginit.com/", label: "Mercurial " },
|
||||
{ link: "http://en.wikipedia.org/wiki/C_(programming_language)", label: "C" },
|
||||
{ link: "http://cplusplus.com/", label: "C++" },
|
||||
{ link: "http://electron.atom.io", label: "Electron" },
|
||||
{ link: "http://en.wikipedia.org/wiki/Unified_Modeling_Language", label: "UML" },
|
||||
{ link: "http://atlassian.com/software/jira", label: "JIRA" },
|
||||
{ link: "http://atlassian.com/software/confluence", label: "Confluence" },
|
||||
{ link: "http://github.com/mastermindzh", label: "Git" },
|
||||
{ link: "http://hginit.com/", label: "Mercurial" },
|
||||
{
|
||||
link: "http://en.wikipedia.org/wiki/Scrum_(software_development)",
|
||||
label: "Scrum ",
|
||||
},
|
||||
{ link: "http://javascript.com/", label: "Javascript " },
|
||||
{ link: "http://javascript.com/", label: "Javascript" },
|
||||
{ link: "http://docs.microsoft.com/en-us/dotnet/csharp/csharp", label: "C#" },
|
||||
{ link: "http://www.gnu.org/software/bash/", label: "Bash" },
|
||||
{ link: "http://jenkins.io/doc/", label: "Jenkins" },
|
||||
|
||||
@ -6,61 +6,76 @@ import { Link } from "gatsby";
|
||||
|
||||
// import COLOR from "./../../constants/colors";
|
||||
import { ROUTES } from "../constants/routes";
|
||||
import { SettingsContext } from "../context/SettingsContext";
|
||||
import { Settings } from "../context/settings";
|
||||
// import { blue, green, lime, orange, pink, purple, red, yellow } from './../../assets/images/colors'
|
||||
|
||||
export const Footer: FunctionComponent<{}> = () => {
|
||||
return (
|
||||
<footer>
|
||||
<div className="row">
|
||||
<div className="col-md-7">
|
||||
<p className="footerText">
|
||||
© 2021 Rick van Lieshout
|
||||
<span className="links">
|
||||
<Link to={ROUTES.cookies}>cookies</Link> /{" "}
|
||||
<Link to={ROUTES.disclaimer}> disclaimer</Link>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-md-5">
|
||||
<ul className="social">
|
||||
{/* <li>
|
||||
<ButtonToolbar>
|
||||
<DropdownButton className="plain-dropdown" title={<img style={{ marginRight: "3px", width: "21px" }} src={`/assets/images/colors/${this.props.color.split("-")[1]}.png`} alt="select color" />} dropup id="split-button-dropup">
|
||||
<MenuItem onSelect={() => { this.props.changeColor(COLOR.RED); }} > <img src={red} alt="icon to change color to red" /> {colors.red}</MenuItem>
|
||||
<MenuItem onSelect={() => { this.props.changeColor(COLOR.YELLOW); }} ><img src={yellow} alt="icon to change color to yellow" /> {colors.yellow}</MenuItem>
|
||||
<MenuItem onSelect={() => { this.props.changeColor(COLOR.GREEN); }} > <img src={green} alt="icon to change color to green" /> {colors.green}</MenuItem>
|
||||
<MenuItem onSelect={() => { this.props.changeColor(COLOR.LIME); }} > <img src={lime} alt="icon to change color to lime" /> {colors.lime}</MenuItem>
|
||||
<MenuItem onSelect={() => { this.props.changeColor(COLOR.PINK); }} > <img src={pink} alt="icon to change color to pink" /> {colors.pink}</MenuItem>
|
||||
<MenuItem onSelect={() => { this.props.changeColor(COLOR.PURPLE); }} ><img src={purple} alt="icon to change color to purple" /> {colors.purple}</MenuItem>
|
||||
<MenuItem onSelect={() => { this.props.changeColor(COLOR.ORANGE); }} ><img src={orange} alt="icon to change color to orange" /> {colors.orange}</MenuItem>
|
||||
<MenuItem onSelect={() => { this.props.changeColor(COLOR.BLUE); }} > <img src={blue} alt="icon to change color to blue" /> {colors.blue}</MenuItem>
|
||||
</DropdownButton>
|
||||
</ButtonToolbar>
|
||||
</li> */}
|
||||
<li>
|
||||
<a href="https://github.com/mastermindzh" id="github-footer-image">
|
||||
<i className="fa fa-github" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.linkedin.com/in/rickvanlieshout/" id="linkedin-footer-image">
|
||||
<i className="fa fa-linkedin" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.facebook.com/rickvanlieshoutt" id="facebook-footer-image">
|
||||
<i className="fa fa-facebook" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/mastermindzh" id="twitter-footer-image">
|
||||
<i className="fa fa-twitter" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<SettingsContext.Consumer>
|
||||
{(context: Settings) => (
|
||||
<footer>
|
||||
<div className="row">
|
||||
<div className="col-md-7">
|
||||
<p className="footerText">
|
||||
© 2021 Rick van Lieshout
|
||||
<span className="links">
|
||||
<Link to={ROUTES.cookies}>cookies</Link> /{" "}
|
||||
<Link to={ROUTES.disclaimer}> disclaimer</Link>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-md-5">
|
||||
<ul className="social">
|
||||
<li>
|
||||
<button
|
||||
onClick={() => {
|
||||
context.changeColor("body-red");
|
||||
}}
|
||||
>
|
||||
red!
|
||||
</button>
|
||||
</li>
|
||||
{/* <li>
|
||||
<ButtonToolbar>
|
||||
<DropdownButton className="plain-dropdown" title={<img style={{ marginRight: "3px", width: "21px" }} src={`/assets/images/colors/${this.props.color.split("-")[1]}.png`} alt="select color" />} dropup id="split-button-dropup">
|
||||
<MenuItem onSelect={() => { this.props.changeColor(COLOR.RED); }} > <img src={red} alt="icon to change color to red" /> {colors.red}</MenuItem>
|
||||
<MenuItem onSelect={() => { this.props.changeColor(COLOR.YELLOW); }} ><img src={yellow} alt="icon to change color to yellow" /> {colors.yellow}</MenuItem>
|
||||
<MenuItem onSelect={() => { this.props.changeColor(COLOR.GREEN); }} > <img src={green} alt="icon to change color to green" /> {colors.green}</MenuItem>
|
||||
<MenuItem onSelect={() => { this.props.changeColor(COLOR.LIME); }} > <img src={lime} alt="icon to change color to lime" /> {colors.lime}</MenuItem>
|
||||
<MenuItem onSelect={() => { this.props.changeColor(COLOR.PINK); }} > <img src={pink} alt="icon to change color to pink" /> {colors.pink}</MenuItem>
|
||||
<MenuItem onSelect={() => { this.props.changeColor(COLOR.PURPLE); }} ><img src={purple} alt="icon to change color to purple" /> {colors.purple}</MenuItem>
|
||||
<MenuItem onSelect={() => { this.props.changeColor(COLOR.ORANGE); }} ><img src={orange} alt="icon to change color to orange" /> {colors.orange}</MenuItem>
|
||||
<MenuItem onSelect={() => { this.props.changeColor(COLOR.BLUE); }} > <img src={blue} alt="icon to change color to blue" /> {colors.blue}</MenuItem>
|
||||
</DropdownButton>
|
||||
</ButtonToolbar>
|
||||
</li> */}
|
||||
<li>
|
||||
<a href="https://github.com/mastermindzh" id="github-footer-image">
|
||||
<i className="fa fa-github" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.linkedin.com/in/rickvanlieshout/" id="linkedin-footer-image">
|
||||
<i className="fa fa-linkedin" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.facebook.com/rickvanlieshoutt" id="facebook-footer-image">
|
||||
<i className="fa fa-facebook" />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/mastermindzh" id="twitter-footer-image">
|
||||
<i className="fa fa-twitter" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)}
|
||||
</SettingsContext.Consumer>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,54 +1,63 @@
|
||||
import { Link } from "gatsby";
|
||||
import React, { FunctionComponent, ReactNode } from "react";
|
||||
// import CookieConsent from "react-cookie-consent";
|
||||
// import { Link } from "gatsby"
|
||||
import CookieConsent from "react-cookie-consent";
|
||||
import { Settings } from "../context/settings";
|
||||
import { SettingsContext } from "../context/SettingsContext";
|
||||
import { SettingsProvider } from "../context/SettingsProvider";
|
||||
import "./../styles/style.scss";
|
||||
import { Footer } from "./footer";
|
||||
import { NavBar } from "./navigation/navbar";
|
||||
import { ProfilePicture } from "./profile-pic";
|
||||
|
||||
type Props = { children: ReactNode[] };
|
||||
type Props = { children: ReactNode };
|
||||
|
||||
export const Layout: FunctionComponent<Props> = ({ children }) => {
|
||||
return (
|
||||
<div className="body-red">
|
||||
<div className="main-content">
|
||||
<div className="container no-padding">
|
||||
<div className="row">
|
||||
<div className="col-md-3 l-content">
|
||||
<ProfilePicture />
|
||||
<NavBar></NavBar>
|
||||
</div>
|
||||
<SettingsProvider>
|
||||
<SettingsContext.Consumer>
|
||||
{(context: Settings) => (
|
||||
<div className={context.color}>
|
||||
<div className="main-content">
|
||||
<div className="container no-padding">
|
||||
<div className="row">
|
||||
<div className="col-md-3 l-content">
|
||||
<ProfilePicture />
|
||||
<NavBar></NavBar>
|
||||
</div>
|
||||
|
||||
<div className="col-md-9 r-content">
|
||||
<div className="flexslider">
|
||||
<div className="slides">
|
||||
<div className="profile">
|
||||
{children}
|
||||
<div className="clearfix" />
|
||||
<div className="col-md-9 r-content">
|
||||
<div className="flexslider">
|
||||
<div className="slides">
|
||||
<div className="profile">
|
||||
{children}
|
||||
<div className="clearfix" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <CookieConsent
|
||||
style={{ background: "#2B373B" }}
|
||||
buttonStyle={{
|
||||
background: "#e74c3c",
|
||||
color: "white",
|
||||
fontWeight: "bolder",
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
This website uses cookies to enhance the user experience.
|
||||
<span style={{ fontSize: "10px" }}>
|
||||
{" "}
|
||||
Click <Link to="/cookies">here</Link> to learn more about cookies.
|
||||
<CookieConsent
|
||||
style={{ background: "#2B373B" }}
|
||||
buttonStyle={{
|
||||
background: "#e74c3c",
|
||||
color: "white",
|
||||
fontWeight: "bolder",
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
This website uses cookies to enhance the user experience.
|
||||
<span style={{ fontSize: "10px" }}>
|
||||
{" "}
|
||||
Click <Link to="/legal/cookies">here</Link> to learn more about cookies.
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</CookieConsent> */}
|
||||
</div>
|
||||
</CookieConsent>
|
||||
</div>
|
||||
)}
|
||||
</SettingsContext.Consumer>
|
||||
</SettingsProvider>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
import React, { FunctionComponent, ReactNode } from "react";
|
||||
|
||||
type Props = { title: string; start: string; end: string; image: string };
|
||||
type Props = { title: string; start: string; end: string; image: string; children: ReactNode };
|
||||
|
||||
export const ResumeItem: FunctionComponent<Props> = ({ title, start, end, image, children }) => {
|
||||
return (
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { FunctionComponent } from "react";
|
||||
import React, { FunctionComponent, ReactNode } from "react";
|
||||
import { SectionTitle } from "../../../components/section-title";
|
||||
|
||||
type Props = { title: string };
|
||||
type Props = { title: string; children: ReactNode };
|
||||
|
||||
export const ResumeList: FunctionComponent<Props> = ({ title, children }) => {
|
||||
return (
|
||||
|
||||
@ -14,6 +14,15 @@ $colours: (
|
||||
color: $colour !important;
|
||||
}
|
||||
|
||||
.#{$element} .filter {
|
||||
a {
|
||||
&:hover {
|
||||
// &:focus maybe
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$element} .navigation li:before {
|
||||
background: $colour !important;
|
||||
}
|
||||
@ -30,8 +39,12 @@ $colours: (
|
||||
color: $colour !important;
|
||||
}
|
||||
|
||||
.#{$element} #filter-list li:hover {
|
||||
background: $colour !important;
|
||||
.#{$element} #filter-list {
|
||||
li {
|
||||
&:hover {
|
||||
background: $colour !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$element} #filter-list li.active {
|
||||
|
||||
21
tsconfig.json
Normal file
21
tsconfig.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"baseUrl": "src",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user