diff --git a/.gitignore b/.gitignore index 1b33e4f..fc7da12 100644 --- a/.gitignore +++ b/.gitignore @@ -62,4 +62,6 @@ dist/ /package-lock.json /dist src/private/data -/nbproject/private/ \ No newline at end of file +/nbproject/private/ +public/ +.cache \ No newline at end of file diff --git a/gatsby-browser.js b/gatsby-browser.js new file mode 100644 index 0000000..55a9428 --- /dev/null +++ b/gatsby-browser.js @@ -0,0 +1 @@ +import 'normalize.css'; \ No newline at end of file diff --git a/gatsby-config.js b/gatsby-config.js new file mode 100644 index 0000000..4d01f3d --- /dev/null +++ b/gatsby-config.js @@ -0,0 +1,42 @@ +const path = require('path'); +const TSConfig = require('./tsconfig.json'); + +module.exports = { + plugins: [ + { + resolve: `gatsby-source-filesystem`, + options: { + path: path.join(__dirname, 'src', 'assets', 'images'), + name: 'images' + } + }, + + 'gatsby-plugin-typescript', + 'gatsby-plugin-react-helmet', + 'gatsby-plugin-styled-components', + 'gatsby-transformer-sharp', + 'gatsby-plugin-sharp', + + { + resolve: 'gatsby-plugin-alias-imports', + options: { + alias: Object.entries(TSConfig.compilerOptions.paths).reduce((x, [key, value]) => { + let k = key.split('/').filter(f => f && f != '*').join('/'); + let v = value.find(v => v).split('/').filter(f => f && f != '*'); + return { ...x, [k]: path.resolve(__dirname, TSConfig.compilerOptions.baseUrl, ...v) }; + }, {}) + } + }, + + { + resolve: 'gatsby-plugin-google-fonts', + options: { + fonts: [ + 'Bitter', + 'Nanum Gothic' + ], + display: 'swap' + } + } + ] +} diff --git a/package.json b/package.json index 51cfa65..13f5ae8 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,11 @@ "version": "7.0.0", "description": "Personal website for Dominic \"YourWishes\" Masters.", "scripts": { + "build": "gatsby build", + "develop": "gatsby develop", + "start": "npm run develop", + "serve": "gatsby serve", + "clean": "gatsby clean" }, "repository": { "type": "git", @@ -21,7 +26,37 @@ }, "homepage": "https://domsplace.com", "dependencies": { + "@types/react-helmet": "^5.0.15", + "babel-plugin-styled-components": "^1.10.7", + "gatsby": "^2.18.12", + "gatsby-image": "^2.2.39", + "gatsby-plugin-alias-imports": "^1.0.5", + "gatsby-plugin-google-fonts": "^1.0.1", + "gatsby-plugin-react-helmet": "^3.1.21", + "gatsby-plugin-sharp": "^2.4.3", + "gatsby-plugin-styled-components": "^3.1.18", + "gatsby-plugin-typescript": "^2.1.26", + "gatsby-source-filesystem": "^2.1.46", + "gatsby-transformer-sharp": "^2.3.13", + "normalize.css": "^8.0.1", + "react": "^16.12.0", + "react-dom": "^16.12.0", + "react-helmet": "^5.2.1", + "react-hook-form": "^4.8.0", + "styled-components": "^5.0.0", + "yup": "^0.28.1" }, "devDependencies": { - } + "@types/node": "^13.5.0", + "@types/react": "^16.9.19", + "@types/react-dom": "^16.9.5", + "@types/styled-components": "^4.4.2", + "@types/yup": "^0.26.29" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] } diff --git a/src/assets/images/branding/cpp/cpp-logo.svg b/src/assets/images/branding/cpp/cpp-logo.svg new file mode 100644 index 0000000..5e11707 --- /dev/null +++ b/src/assets/images/branding/cpp/cpp-logo.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/branding/csharp/csharp-logo.svg b/src/assets/images/branding/csharp/csharp-logo.svg new file mode 100644 index 0000000..ddc79cd --- /dev/null +++ b/src/assets/images/branding/csharp/csharp-logo.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/branding/digitalocean/digitalocean-logo.svg b/src/assets/images/branding/digitalocean/digitalocean-logo.svg new file mode 100644 index 0000000..0026c1b --- /dev/null +++ b/src/assets/images/branding/digitalocean/digitalocean-logo.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/branding/discord/discord-logo.svg b/src/assets/images/branding/discord/discord-logo.svg new file mode 100644 index 0000000..65c9fcc --- /dev/null +++ b/src/assets/images/branding/discord/discord-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/branding/google-cloud/google-cloud-logo.svg b/src/assets/images/branding/google-cloud/google-cloud-logo.svg new file mode 100644 index 0000000..6fd725f --- /dev/null +++ b/src/assets/images/branding/google-cloud/google-cloud-logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/images/branding/graphql/graphql-logo.svg b/src/assets/images/branding/graphql/graphql-logo.svg new file mode 100644 index 0000000..14082a5 --- /dev/null +++ b/src/assets/images/branding/graphql/graphql-logo.svg @@ -0,0 +1,64 @@ + + + + \ No newline at end of file diff --git a/src/assets/images/branding/heroku/heroku-logo.svg b/src/assets/images/branding/heroku/heroku-logo.svg new file mode 100644 index 0000000..c287cd8 --- /dev/null +++ b/src/assets/images/branding/heroku/heroku-logo.svg @@ -0,0 +1,18 @@ + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/src/assets/images/branding/java/java-logo.svg b/src/assets/images/branding/java/java-logo.svg new file mode 100644 index 0000000..28d4a95 --- /dev/null +++ b/src/assets/images/branding/java/java-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/branding/jquery/jquery-logo.svg b/src/assets/images/branding/jquery/jquery-logo.svg new file mode 100644 index 0000000..621989a --- /dev/null +++ b/src/assets/images/branding/jquery/jquery-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/branding/lwjgl/lwjgl-logo.svg b/src/assets/images/branding/lwjgl/lwjgl-logo.svg new file mode 100644 index 0000000..3410765 --- /dev/null +++ b/src/assets/images/branding/lwjgl/lwjgl-logo.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/branding/monogame/monogame-logo.svg b/src/assets/images/branding/monogame/monogame-logo.svg new file mode 100644 index 0000000..226a1d2 --- /dev/null +++ b/src/assets/images/branding/monogame/monogame-logo.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/branding/mysql/mysql-logo.svg b/src/assets/images/branding/mysql/mysql-logo.svg new file mode 100644 index 0000000..98ebde9 --- /dev/null +++ b/src/assets/images/branding/mysql/mysql-logo.svg @@ -0,0 +1,47 @@ + + + + + + + + + diff --git a/src/assets/images/branding/neto/neto-logo.svg b/src/assets/images/branding/neto/neto-logo.svg new file mode 100644 index 0000000..fad1b20 --- /dev/null +++ b/src/assets/images/branding/neto/neto-logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/branding/nodejs/nodejs-logo.svg b/src/assets/images/branding/nodejs/nodejs-logo.svg new file mode 100644 index 0000000..b51f302 --- /dev/null +++ b/src/assets/images/branding/nodejs/nodejs-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/branding/opengl/opengl-logo.svg b/src/assets/images/branding/opengl/opengl-logo.svg new file mode 100644 index 0000000..84c5d12 --- /dev/null +++ b/src/assets/images/branding/opengl/opengl-logo.svg @@ -0,0 +1,18 @@ + + + + + + + diff --git a/src/assets/images/branding/pgsql/pgsql-logo.svg b/src/assets/images/branding/pgsql/pgsql-logo.svg new file mode 100644 index 0000000..8666f75 --- /dev/null +++ b/src/assets/images/branding/pgsql/pgsql-logo.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/branding/php/php-logo.svg b/src/assets/images/branding/php/php-logo.svg new file mode 100644 index 0000000..e4f137c --- /dev/null +++ b/src/assets/images/branding/php/php-logo.svg @@ -0,0 +1,96 @@ + + + Official PHP Logo + + + + image/svg+xml + + Official PHP Logo + + + Colin Viebrock + + + + + + + + + + + + Copyright Colin Viebrock 1997 - All rights reserved. + + + 1997 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/branding/react/react-logo.svg b/src/assets/images/branding/react/react-logo.svg new file mode 100644 index 0000000..b3887f3 --- /dev/null +++ b/src/assets/images/branding/react/react-logo.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + diff --git a/src/assets/images/branding/redux/redux-logo.svg b/src/assets/images/branding/redux/redux-logo.svg new file mode 100644 index 0000000..62f4d5c --- /dev/null +++ b/src/assets/images/branding/redux/redux-logo.svg @@ -0,0 +1,22 @@ + + + + + + + + + + diff --git a/src/assets/images/branding/shopify/shopify-logo.svg b/src/assets/images/branding/shopify/shopify-logo.svg new file mode 100644 index 0000000..7c88138 --- /dev/null +++ b/src/assets/images/branding/shopify/shopify-logo.svg @@ -0,0 +1,23 @@ + + + + + + + + + + diff --git a/src/assets/images/branding/twitch/twitch-logo.svg b/src/assets/images/branding/twitch/twitch-logo.svg new file mode 100644 index 0000000..905e364 --- /dev/null +++ b/src/assets/images/branding/twitch/twitch-logo.svg @@ -0,0 +1 @@ +Glitch \ No newline at end of file diff --git a/src/assets/images/branding/twitter/twitter-logo.svg b/src/assets/images/branding/twitter/twitter-logo.svg new file mode 100644 index 0000000..2832e7b --- /dev/null +++ b/src/assets/images/branding/twitter/twitter-logo.svg @@ -0,0 +1 @@ +Twitter_Logo_Blue \ No newline at end of file diff --git a/src/assets/images/branding/typescript/typescript-logo.svg b/src/assets/images/branding/typescript/typescript-logo.svg new file mode 100644 index 0000000..bbf2809 --- /dev/null +++ b/src/assets/images/branding/typescript/typescript-logo.svg @@ -0,0 +1,40 @@ + + + + + + diff --git a/src/assets/images/branding/unity/unity-logo.svg b/src/assets/images/branding/unity/unity-logo.svg new file mode 100644 index 0000000..88622dd --- /dev/null +++ b/src/assets/images/branding/unity/unity-logo.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/src/assets/images/branding/webpack/webpack-logo.svg b/src/assets/images/branding/webpack/webpack-logo.svg new file mode 100644 index 0000000..8f7eaa5 --- /dev/null +++ b/src/assets/images/branding/webpack/webpack-logo.svg @@ -0,0 +1 @@ +icon \ No newline at end of file diff --git a/src/assets/images/people/dominic/head.png b/src/assets/images/people/dominic/head.png new file mode 100644 index 0000000..7451356 Binary files /dev/null and b/src/assets/images/people/dominic/head.png differ diff --git a/src/assets/images/websites/bundlfresh.jpg b/src/assets/images/websites/bundlfresh.jpg new file mode 100644 index 0000000..407ee02 Binary files /dev/null and b/src/assets/images/websites/bundlfresh.jpg differ diff --git a/src/assets/images/websites/cocksox.jpg b/src/assets/images/websites/cocksox.jpg new file mode 100644 index 0000000..a9d4e5d Binary files /dev/null and b/src/assets/images/websites/cocksox.jpg differ diff --git a/src/assets/images/websites/domsPlace.jpg b/src/assets/images/websites/domsPlace.jpg new file mode 100644 index 0000000..e568b28 Binary files /dev/null and b/src/assets/images/websites/domsPlace.jpg differ diff --git a/src/assets/images/websites/earjobs.jpg b/src/assets/images/websites/earjobs.jpg new file mode 100644 index 0000000..2df533c Binary files /dev/null and b/src/assets/images/websites/earjobs.jpg differ diff --git a/src/assets/images/websites/kopalife.jpg b/src/assets/images/websites/kopalife.jpg new file mode 100644 index 0000000..55377de Binary files /dev/null and b/src/assets/images/websites/kopalife.jpg differ diff --git a/src/assets/images/websites/solinvictus.jpg b/src/assets/images/websites/solinvictus.jpg new file mode 100644 index 0000000..76388d6 Binary files /dev/null and b/src/assets/images/websites/solinvictus.jpg differ diff --git a/src/assets/images/websites/stateofescape.jpg b/src/assets/images/websites/stateofescape.jpg new file mode 100644 index 0000000..5fdb7bc Binary files /dev/null and b/src/assets/images/websites/stateofescape.jpg differ diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx new file mode 100644 index 0000000..fbc0d01 --- /dev/null +++ b/src/components/Layout.tsx @@ -0,0 +1,31 @@ +import * as React from 'react'; +import { Header } from '@components/navigation/Header'; +import { Background } from './layout/Background'; +import { Footer } from './navigation/Footer'; +import styled, { createGlobalStyle } from 'styled-components'; +import { Colors, Fonts, FontWeights, FontSizes, Gutters } from '@settings/all'; +import { graphql } from 'gatsby'; +import { BodyStyles, AllElementStyles } from '@styles'; +import { AnchorStyles } from '@styles/anchor'; + +const GlobalStyles = createGlobalStyle` + ${AllElementStyles} + ${BodyStyles} + ${AnchorStyles} +`; + +const LayoutMain = styled.main` + margin-top: ${Gutters.extraExtraLarge}; +`; + +export const Layout = (props:{children:React.ReactNode}) => ( +
+ + +
+ + { props.children } + +
+); \ No newline at end of file diff --git a/src/components/effects/Observe.tsx b/src/components/effects/Observe.tsx new file mode 100644 index 0000000..7532649 --- /dev/null +++ b/src/components/effects/Observe.tsx @@ -0,0 +1,29 @@ + +//Intersection Observer +export type ObserveCallback = (e:IntersectionObserverEntry)=>void; +export type Observation = {element:HTMLElement,callback:ObserveCallback}; +export const observations:Observation[] = []; + +export const observer = typeof IntersectionObserver === "function" ? ( + new IntersectionObserver((entries, observer) => { + [...observations].forEach(ob => { + entries.forEach(e => { + if(ob.element != e.target) return; + ob.callback(e); + }); + }); + },{}) +) : null; + +export const addObserve = (ob:Observation) => { + if(!observer) return; + observations.push(ob); + observer.observe(ob.element);//TODO: "Is observing" +} + +export const removeObserve = (ob:Observation) => { + if(!observer) return; + let i = observations.indexOf(ob); + if(i !== -1) observations.splice(i, 1); + observer.unobserve(ob.element); +} \ No newline at end of file diff --git a/src/components/effects/ScrollFade.tsx b/src/components/effects/ScrollFade.tsx new file mode 100644 index 0000000..781a75f --- /dev/null +++ b/src/components/effects/ScrollFade.tsx @@ -0,0 +1,74 @@ +import * as React from 'react'; +import styled from 'styled-components'; +import { Durations, Easings } from '@settings/all'; +import { Observation, addObserve, observer, removeObserve } from './Observe'; + +export type ScrollFadeDirection = 'bottom' | 'top' | 'left' | 'right'; +export type ScrollFadeDelay = 'short' | 'medium' | 'long'; + +export interface ScrollFadeProps { + from?:ScrollFadeDirection; + delay?:ScrollFadeDelay; + amount?:number; + visible?:boolean; + children?:React.ReactNode; +} + +export interface ScrollFadeState { + visible:boolean; canFade:boolean; +} + +const ScrollFadeWrapper = styled.div(({ visible, ...props }) => { + const { delay, from, amount } = { from: 'bottom', delay: 'long', amount: 4, ...props }; + const time = delay == 'long' ? Durations.timeLong : delay == 'medium' ? Durations.timeMedium : Durations.timeShort; + + return ` + display: inline-block; + opacity: 0; + transition: + opacity ${time}s ${Easings.easeOut}, + transform ${time}s ${Easings.easeOut}, + -webkit-transform ${time}s ${Easings.easeOut} + ; + transform: translate( + ${from == 'left' ? -amount : from == 'right' ? amount : 0}rem, + ${from == 'top' ? -amount : from == 'bottom' ? amount : 0}rem + ); + + ${visible?` + opacity: 1; + transform: translate(0,0); + `:''} + ` +}); + + +export class ScrollFade extends React.Component { + element:HTMLDivElement | null = null; + observation:Observation | null = null; + + constructor(props:ScrollFadeProps) { + super(props); + this.state = { visible: false, canFade: !!observer }; + } + + componentDidMount() { + if(!this.element) return; + addObserve(this.observation = { element: this.element, callback: e => { + this.setState({ visible: e.isIntersecting }); + if(this.state.visible && this.observation) removeObserve(this.observation); + }}); + } + + componentWillUnmount() { + if(this.observation) removeObserve(this.observation); + } + + render() { + return this.element = e}> + + { this.props.children } + + + } +} \ No newline at end of file diff --git a/src/components/forms/ContactForm.tsx b/src/components/forms/ContactForm.tsx new file mode 100644 index 0000000..6934859 --- /dev/null +++ b/src/components/forms/ContactForm.tsx @@ -0,0 +1,78 @@ +import * as React from 'react'; +import { useForm } from 'react-hook-form'; +import { Input, TextArea } from '@objects/interactive/Input'; +import { Button, ButtonGroup } from '@objects/interactive/Button'; +import * as yup from 'yup'; +import { Panel } from '@objects/feedback/Panel'; +import { Heading2 } from '@objects/typography/Heading'; + +export interface ContactFormProps { + +} + +const FormValidator = yup.object().shape({ + name: yup.string().max(128).required(), + email: yup.string().email().required(), + message: yup.string().required() +}) + +export const ContactForm = (props:ContactFormProps) => { + const { register, handleSubmit, errors, formState } = useForm({ + validationSchema: FormValidator, mode: 'onChange' + }); + + const [ pending, setPending ] = React.useState(false); + const [ success, setSuccess ] = React.useState(false); + + const onSubmit = async (data:any) => { + setPending(true); + + await new Promise(resolve => setTimeout(resolve, 3000)); + + setPending(false); + setSuccess(true); + console.log('Send', pending); + }; + + return success ? <> + + Thanks for contacting + +

+ Thank you for your message, I will be in touch shortly to follow up + (generally within a couple of days). +

+

+ In the meantime why not check out my social channels? +

+ : ( +
+ + + + +