,
-
-
- );
- }
-}
-
-export default Contact;
\ No newline at end of file
diff --git a/src/components/Content.tsx b/src/components/Content.tsx
deleted file mode 100644
index 2fe6ed3e..00000000
--- a/src/components/Content.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import { Route, Switch, Redirect } from 'react-router-dom';
-import Gallery from './Gallery';
-import Contact from './Contact';
-import Shop from './Shop';
-import ErrorPage from './ErrorPage';
-
-const Content = (): JSX.Element => (
-
-
-
-
-
- say hello...
- -
-
-
-
- Please feel free to contact me with any questions. I'm open to commissions and exhibitions so do get in touch.
-social
-You can find me on these social platforms:
--
- {socialItems.map(s => (
-
- - - {s.name} - - - ))} -
coding
-I designed and coded this website. For more information please visit my web development portfolio here
-
-
-);
-
-export default ErrorPage;
\ No newline at end of file
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 8d7ea3dd..06c14d9e 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,16 +1,15 @@
import React from 'react';
-import Navbar from './Navbar';
-import socialItems from '../globals/socialItems';
-import navData from '../globals/navData';
+import Navbar from './navbar';
+import SocialIcons from './social-icons';
const Footer = () => (
);
diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx
deleted file mode 100644
index 7d694e29..00000000
--- a/src/components/Gallery.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import GalleryItem from './GalleryItem';
-import CallToAction from './CallToAction';
-import Modal from './Modal';
-import { galleryData } from '../globals/galleryData';
-
-import imageImport from '../helpers/imageImport';
-
-const images = imageImport(require.context('../images/thumbs', false, /\.jpg$/)) as { [key: string]: string };
-
-const Gallery = () => {
- const [selectedGalleryItemId, setSelectedGalleryItemId] = useState(0);
- const [isModalShowing, setIsModalShowing] = useState(false);
- const modalLimit = galleryData.length - 1;
-
- useEffect(() => {
- window.scrollTo(0, 0);
- }, [])
-
- const selectGalleryItem = (id: number): void => {
- setSelectedGalleryItemId(id);
- setIsModalShowing(true);
- }
-
- const modalHandler = (command: string): void => {
- switch (command) {
- case "next":
- if (selectedGalleryItemId < modalLimit) setSelectedGalleryItemId(selectedGalleryItemId + 1);
- break;
- case "prev":
- if (selectedGalleryItemId > 0) setSelectedGalleryItemId(selectedGalleryItemId - 1);
- break;
- default:
- setIsModalShowing(false);
- break;
- }
- }
-
- if (isModalShowing) {
- return (
-
-
- 404 Error: Page does not exist!
-
-
-
-
- )
-}
-
-export default Gallery
\ No newline at end of file
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 12283eae..f4c8c04b 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,29 +1,40 @@
import React, { useState, useEffect } from 'react';
-import logo from '../images/hclogo.png';
-import Navbar from './Navbar';
-import navData from '../globals/navData';
+import Navbar from './navbar';
+import { useStaticQuery, graphql } from 'gatsby';
+import Img from 'gatsby-image';
-const Header = () => {
+const Header = (): JSX.Element => {
const [burgerOpen, setBurgerOpen] = useState(false);
- const [width, setWidth] = useState(0);
-
- const updateWindowSize = () => setWidth(window.innerWidth);
+ const [width, setWidth] = useState(640);
+
+ const { image } = useStaticQuery(graphql`
+ query {
+ image: file(relativePath: { eq: "hclogo.png" }) {
+ childImageSharp {
+ fixed(width: 45) {
+ ...GatsbyImageSharpFixed
+ }
+ }
+ }
+ }
+ `);
useEffect(() => {
+ const updateWindowSize = () => setWidth(window.innerWidth);
updateWindowSize();
window.addEventListener('resize', updateWindowSize);
return () => {
window.removeEventListener('resize', updateWindowSize);
};
- }, [])
+ }, []);
const burgerClass = `hamburger hamburger-spin ${burgerOpen ? 'is-active' : ''}`;
const showHamburger = width < 640;
- const showNavBar = width > 640 || burgerOpen;
+ const showNavBar = width >= 640 || burgerOpen;
return (
- {galleryData.map(item => (
-
- setBurgerOpen(!burgerOpen)} className="hamburger-container">
@@ -35,9 +46,9 @@ const Header = () => {
)}
- {showNavBar &&
- 
+ ![]()
{name}
-{modalInfo[id].desc}
+{desc}
{shop && Buy in shop} modalHandler('prev')}>
- = 1 ? null : "inactive"}`}/>
+ = 1 ? '#000' : 'lightgrey' }} />
- modalHandler('close')}>
+ modalHandler('close')}>
+
modalHandler('next')}>
-
+
{message}
; - - return ( -
-
- );
-}
-
-export default Shop;
diff --git a/src/components/Site.tsx b/src/components/Site.tsx
deleted file mode 100644
index 8968ebe0..00000000
--- a/src/components/Site.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { Fragment } from 'react';
-import { BrowserRouter } from 'react-router-dom';
-
-import Header from './Header';
-import Content from './Content';
-import Footer from './Footer';
-
-const Site = () => (
-
- {shopItems.map((shopItem) => (
-
-
-
-
- Be the first to know about new items
- {statusMsg} -
-
-
-
-
diff --git a/src/components/GalleryItem.tsx b/src/components/gallery-item.tsx
similarity index 62%
rename from src/components/GalleryItem.tsx
rename to src/components/gallery-item.tsx
index ef376926..7ccf24f6 100644
--- a/src/components/GalleryItem.tsx
+++ b/src/components/gallery-item.tsx
@@ -1,10 +1,12 @@
import React from 'react';
-import { IGalleryItem } from '../globals/galleryData';
+import BackgroundImage from 'gatsby-background-image';
+import { GalleryItemData } from '../pages/gallery';
+import { FluidObject } from 'gatsby-image';
interface GalleryItemProps {
- galleryItemData: IGalleryItem;
+ galleryItemData: GalleryItemData;
selectGalleryItem: (id: number) => void;
- imgData: string;
+ imgData: FluidObject;
}
const GalleryItem = ({
@@ -12,16 +14,16 @@ const GalleryItem = ({
selectGalleryItem,
imgData,
}: GalleryItemProps): JSX.Element => {
- const itemClass = `grid-item ${galleryItemData ? galleryItemData.size : null}`;
+ const itemClass = `grid-item ${galleryItemData ? galleryItemData.size : ''}`;
return (
-
+ {children}
+
+
+ );
+}
+
+
+
+export default Layout;
diff --git a/src/components/mailing-list-form.tsx b/src/components/mailing-list-form.tsx
new file mode 100644
index 00000000..9a997537
--- /dev/null
+++ b/src/components/mailing-list-form.tsx
@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { validateEmail } from '../helpers/validators';
+
+const MailingListForm = (): JSX.Element => {
+ const [email, setEmail] = useState('');
+ const [message, setMsg] = useState('');
+
+ const mailListSubmit = async (): Promise => {
+ const isEmailValid = validateEmail(email);
+ let newMessage = '';
+
+ if (!isEmailValid) {
+ try {
+ const messageRequest = await fetch('https://ct-core-api.herokuapp.com/hc-mailer', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ email }),
+ });
+
+ if (messageRequest.ok) {
+ newMessage = 'You\'ve been added to the mailing list';
+ }
+ } catch (error) {
+ newMessage = 'Something went wrong, please try again.';
+ }
+ }
+
+ setMsg(newMessage);
+ }
+
+ const mailListChange = (e: React.FormEvent): void => setEmail(e.currentTarget.value);
+
+ const statusMsg = message &&
selectGalleryItem(galleryItemData.id)}
className={itemClass}
- style={{ backgroundImage: `url('${imgData}')`}}
+ fluid={imgData}
>
-
+
);
}
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
new file mode 100644
index 00000000..9c307aba
--- /dev/null
+++ b/src/components/layout.tsx
@@ -0,0 +1,31 @@
+import React, { Fragment, ReactNode, useEffect } from "react";
+import Header from "./header";
+import Footer from "./footer";
+import "../styles/main.sass";
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { fab } from '@fortawesome/free-brands-svg-icons'
+
+library.add(fab);
+
+interface LayoutProps {
+ children: ReactNode | ReactNode[];
+}
+
+const Layout = ({ children }: LayoutProps): JSX.Element => {
+ useEffect(() => {
+ window.scrollTo(0, 0);
+ }, []);
+
+ return (
+ {galleryItemData.name}
{message}
; + + return ( +
+
+ );
+}
+
+
+export default MailingListForm;
\ No newline at end of file
diff --git a/src/components/seo.tsx b/src/components/seo.tsx
new file mode 100644
index 00000000..5055fe69
--- /dev/null
+++ b/src/components/seo.tsx
@@ -0,0 +1,79 @@
+import React from "react"
+import Helmet from "react-helmet"
+import { useStaticQuery, graphql } from "gatsby"
+
+interface SEOProps {
+ description?: string;
+ lang?: string;
+ meta?: any[];
+ title: string;
+}
+
+function SEO({
+ description = ``,
+ lang = `en`,
+ meta = [],
+ title,
+}: SEOProps) {
+ const { site } = useStaticQuery(
+ graphql`
+ query {
+ site {
+ siteMetadata {
+ title
+ description
+ author
+ }
+ }
+ }
+ `,
+ )
+
+ const metaDescription = description || site.siteMetadata.description
+
+ return (
+ Be the first to know about new items
+ {statusMsg} +
+
+
+
+
- 
+ ![]()
+ {data.social.map((item: SocialItem) => (
+
+
+ );
+}
+
+export default SocialIcons;
\ No newline at end of file
diff --git a/src/content/gallery.yaml b/src/content/gallery.yaml
new file mode 100644
index 00000000..47420cc4
--- /dev/null
+++ b/src/content/gallery.yaml
@@ -0,0 +1,216 @@
+- gallery:
+ - id: 0
+ name: choose life
+ src: thumbs-022.jpg
+ size: large
+ shop: false
+ desc: The result of working in an office for too long. Made using ink, brush and pigment ink pens.
+ modalImage: modal-000.jpg
+
+ - id: 1
+ name: desert eyes
+ src: thumbs-002.jpg
+ size: wide
+ shop: false
+ desc: Part of my desert tryptich illustration. Pen and ink drawings coloured using mixed media and finished on Photoshop.
+ modalImage: modal-001.jpg
+
+ - id: 2
+ name: bardo pond
+ src: thumbs-003.jpg
+ size: wide
+ shop: false
+ desc: Gig poster for american space rock band Bardo Pond. Created for Room237 promotions using pen and ink, coloured using Photoshop.
+ modalImage: modal-002.jpg
+
+ - id: 3
+ name: angled pike
+ src: thumbs-004.jpg
+ size: small
+ shop: false
+ desc: An angular pike drawn for Wharf Chambers gig Man Forever. Pen and ink coloured using Photoshop.
+ modalImage: modal-003.jpg
+
+ - id: 4
+ name: mission of burma
+ src: thumbs-005.jpg
+ size: small
+ shop: false
+ desc: Gig poster for legendary post punk band Mission Burma gig. created for Room237 and Brudenell Social Club. Created using pen and ink and coloured on Photoshop and Illustrator.
+ modalImage: modal-004.jpg
+
+ - id: 5
+ name: mushroomjack
+ src: thumbs-021.jpg
+ size: tall
+ shop: true
+ desc: Mushroom lumberjack detailed illustration. I used pigment pens, a quill, a brush and platinum carbon ink, on heavy duty art paper. This is a available to buy in screenprint form.
+ modalImage: modal-005.jpg
+
+ - id: 6
+ name: folläkzoid
+ src: thumbs-007.jpg
+ size: tall
+ shop: false
+ desc: Gig poster for Chilean space rock band Föllakzoid produced for Third Eye and Karma promotions. Created using pen and ink, coloured pencil and Photoshop.
+ modalImage: modal-006.jpg
+
+ - id: 7
+ name: patterned butterfly
+ src: thumbs-015.jpg
+ size: large
+ shop: true
+ desc: Butterfly illustration created using pen and ink, coloured on illustrator. Screenprints available to buy 5 colours on heavy duty paper.
+ modalImage: modal-007.jpg
+
+ - id: 8
+ name: angler fish
+ src: thumbs-009.jpg
+ size: wide
+ shop: false
+ desc: Computer illustrated picture of an deep sea Angler Fish. Created using Adobe Illustrator and Photoshop.
+ modalImage: modal-008.jpg
+
+ - id: 9
+ name: patterned bug
+ src: thumbs-010.jpg
+ size: wide
+ shop: true
+ desc: Beetle illustration created using pen and ink, coloured on illustrator. Screenprints available to buy 5 colours on heavy duty paper.
+ modalImage: modal-009.jpg
+
+ - id: 10
+ name: you mug
+ src: thumbs-011.jpg
+ size: small
+ shop: false
+ desc: Comedy mug illustration computer drawn. This was made using Adobe Illustrator and Photoshop.
+ modalImage: modal-010.jpg
+
+ - id: 11
+ name: mutant bmx
+ src: thumbs-012.jpg
+ size: small
+ shop: false
+ desc: A crazy hand drawn illustration of a mutant riding a BMX. Created using water colour and ink
+ modalImage: modal-011.jpg
+
+ - id: 12
+ name: nf fly
+ src: thumbs-013.jpg
+ size: tall
+ shop: false
+ desc: Debut gig poster for Leeds based gig promoters Northern Flowerhouse. Hand drawn illustration texture and colour done with Photoshop.
+ modalImage: modal-012.jpg
+
+ - id: 13
+ name: desert smoker
+ src: thumbs-014.jpg
+ size: tall
+ shop: true
+ desc: Part of my desert tryptich illustration. Pen and ink drawings coloured using mixed media and finished on Photoshop.
+ modalImage: modal-013.jpg
+
+ - id: 14
+ name: robot workshop
+ src: thumbs-008.jpg
+ size: large
+ shop: true
+ desc: Hand drawn illustration of a robot being built. This was exhibited at North Bar for an exhibition titled 'Under Construction'. Created using pigment pens and water colour. Giclee prints on art paper available to buy.
+ modalImage: modal-014.jpg
+
+ - id: 15
+ name: dylan carlson
+ src: thumbs-016.jpg
+ size: wide
+ shop: false
+ desc: Gig poster for drone legend Dylan Carlson, created for Room237. Created using pen and ink and coloured on Photoshop and Illustrator.
+ modalImage: modal-015.jpg
+
+ - id: 16
+ name: octopsss
+ src: thumbs-017.jpg
+ size: wide
+ shop: false
+ desc: Computer illustrated picture of an Octopussssss. Created using Adobe Illustrator and Photoshop.
+ modalImage: modal-016.jpg
+
+ - id: 17
+ name: collapse
+ src: thumbs-018.jpg
+ size: small
+ shop: false
+ desc: Hand drawn illustration of head collapsing together in a circle with varying degrees of torment. Created using pen and ink
+ modalImage: modal-017.jpg
+
+ - id: 18
+ name: rat race
+ src: thumbs-019.jpg
+ size: small
+ shop: false
+ desc: Computer illustrated picture of a rat working in the rat race. Created using Adobe Illustrator and Photoshop.
+ modalImage: modal-018.jpg
+
+ - id: 19
+ name: papa m house
+ src: thumbs-020.jpg
+ size: tall
+ shop: false
+ desc: Gig poster for Slint legend Papa M, created for Room237. Created using Photoshop and Illustrator. I have massive screen printed posters of this for sale
+ modalImage: modal-019.jpg
+
+ - id: 20
+ name: bass overload
+ src: thumbs-006.jpg
+ size: tall
+ shop: false
+ desc: Computer illustrated picture of what happens with too much bass. Created using Adobe Illustrator and Photoshop.
+ modalImage: modal-020.jpg
+
+ - id: 21
+ name: leaf insect
+ src: thumbs-001.jpg
+ size: large
+ shop: false
+ desc: Another gig poster for Leeds based gig promoters Northern Flowerhouse. This time featuring a leaf insect. Created using Illustrator and Photoshop.
+ modalImage: modal-021.jpg
+
+ - id: 22
+ name: crab man
+ src: thumbs-023.jpg
+ size: wide
+ shop: false
+ desc: Crazy crab military bird nest something or other man illustration. I used pigment pens, a quill, a brush and platinum carbon ink, on heavy duty art paper.
+ modalImage: modal-022.jpg
+
+ - id: 23
+ name: tree man
+ src: thumbs-024.jpg
+ size: large
+ shop: false
+ desc: Hand drawn illustration of a colourful tree man. Created using pigment pens and water colour.
+ modalImage: modal-023.jpg
+
+ - id: 24
+ name: cosmic tree
+ src: thumbs-025.jpg
+ size: small
+ shop: false
+ desc: Hand drawn detailed illustration of cosmic creature living a tree stump. I used pigment pens, a quill, a brush and platinum carbon ink, on heavy duty art paper.
+ modalImage: modal-024.jpg
+
+ - id: 25
+ name: stump creep
+ src: thumbs-026.jpg
+ size: small
+ shop: false
+ desc: Hand drawn illustration of a creepy dude living in a tree stump. Created using pen, ink and watercolours.
+ modalImage: modal-025.jpg
+
+ - id: 26
+ name: tree head
+ src: thumbs-027.jpg
+ size: wide
+ shop: false
+ desc: Hand drawn illustration of a guy with a tree stump growing from his head. Created using pen, ink and colouring pencils.
+ modalImage: modal-026.jpg
diff --git a/src/content/nav.yaml b/src/content/nav.yaml
new file mode 100644
index 00000000..fb247340
--- /dev/null
+++ b/src/content/nav.yaml
@@ -0,0 +1,13 @@
+- nav:
+ - id: 0
+ name: gallery
+ url: /gallery
+
+ - id: 1
+ name: contact
+ url: /contact
+
+ - id: 2
+ name: shop
+ url: /shop
+
diff --git a/src/content/shop.yaml b/src/content/shop.yaml
new file mode 100644
index 00000000..2bd0a4fe
--- /dev/null
+++ b/src/content/shop.yaml
@@ -0,0 +1,48 @@
+- shop:
+ - id: 1
+ url: shop01.jpg
+ title: Mushroom Lumberjack
+ price: 9.95
+ desc: monochrome screenprint
+ soldOut: false
+ shopUrl: mushroomjack
+
+ - id: 2
+ url: shop02.jpg
+ title: Patterned Beetle
+ price: 22.50
+ desc: five colour screenprint
+ soldOut: false
+ shopUrl: patterned-beetle
+
+ - id: 3
+ url: shop03.jpg
+ title: Desert Smoker
+ price: 3.95
+ desc: glossy giclee full colour
+ soldOut: false
+ shopUrl: desert-smoker
+
+ - id: 4
+ url: shop04.jpg
+ title: Robot Workshop
+ price: 12.95
+ desc: art stock giclee
+ soldOut: false
+ shopUrl: robot-workshop
+
+ - id: 5
+ url: shop05.jpg
+ title: Patterned Butterfly
+ price: 22.50
+ desc: five colour screenprint
+ soldOut: false
+ shopUrl: patterned-butterfly
+
+ - id: 6
+ url: shop06.jpg
+ title: Desert Portrait
+ price: 3.95
+ desc: glossy giclee full colour
+ soldOut: true
+ shopUrl: desert-portrait
diff --git a/src/content/social.yaml b/src/content/social.yaml
new file mode 100644
index 00000000..240af44e
--- /dev/null
+++ b/src/content/social.yaml
@@ -0,0 +1,12 @@
+- social:
+ - id: 0
+ url: http://twitter.com/hurricanechaz
+ name: twitter
+
+ - id: 2
+ url: http://www.instagram.com/hurricane.charlie
+ name: instagram
+
+ - id: 3
+ url: http://www.behance.net/chazhurricane
+ name: behance
\ No newline at end of file
diff --git a/src/globals/galleryData.ts b/src/globals/galleryData.ts
deleted file mode 100644
index f4659998..00000000
--- a/src/globals/galleryData.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-export interface IGalleryItem {
- id: number;
- name: string;
- src: string;
- size: string;
- shop: boolean;
-}
-
-export interface ModalItem {
- id: number;
- desc: string;
-}
-
-// large wide wide small small tall tall
-
-export const galleryData = [
- { id: 0, name: "choose life", src: "thumbs-022.jpg", size: "large", shop: false },
- { id: 1, name: "desert eyes", src: "thumbs-002.jpg", size: "wide", shop: false },
- { id: 2, name: "bardo pond", src: "thumbs-003.jpg", size: "wide", shop: false },
- { id: 3, name: "angled pike", src: "thumbs-004.jpg", size: "small", shop: false },
- { id: 4, name: "mission of burma", src: "thumbs-005.jpg", size: "small", shop: false },
- { id: 5, name: "mushroomjack", src: "thumbs-021.jpg", size: "tall", shop: true },
- { id: 6, name: "folläkzoid", src: "thumbs-007.jpg", size: "tall", shop: false },
- { id: 7, name: "patterned butterfly", src: "thumbs-015.jpg", size: "large", shop: true },
- { id: 8, name: "angler fish", src: "thumbs-009.jpg", size: "wide", shop: false },
- { id: 9, name: "patterned bug", src: "thumbs-010.jpg", size: "wide", shop: true },
- { id: 10, name: "you mug", src: "thumbs-011.jpg", size: "small", shop: false },
- { id: 11, name: "mutant bmx", src: "thumbs-012.jpg", size: "small", shop: false },
- { id: 12, name: "nf fly", src: "thumbs-013.jpg", size: "tall", shop: false },
- { id: 13, name: "desert smoker", src: "thumbs-014.jpg", size: "tall", shop: true },
- { id: 14, name: "robot workshop", src: "thumbs-008.jpg", size: "large", shop: true },
- { id: 15, name: "dylan carlson", src: "thumbs-016.jpg", size: "wide", shop: false },
- { id: 16, name: "octopsss", src: "thumbs-017.jpg", size: "wide", shop: false },
- { id: 17, name: "collapse", src: "thumbs-018.jpg", size: "small", shop: false },
- { id: 18, name: "rat race", src: "thumbs-019.jpg", size: "small", shop: false },
- { id: 19, name: "papa m house", src: "thumbs-020.jpg", size: "tall", shop: false },
- { id: 20, name: "bass overload", src: "thumbs-006.jpg", size: "tall", shop: false },
- { id: 21, name: "leaf insect", src: "thumbs-001.jpg", size: "large", shop: false },
- { id: 22, name: "crab man", src: "thumbs-023.jpg", size: "wide", shop: false },
- { id: 23, name: "tree man", src: "thumbs-024.jpg", size: "large", shop: false },
- { id: 24, name: "cosmic tree", src: "thumbs-025.jpg", size: "small", shop: false },
- { id: 25, name: "stump creep", src: "thumbs-026.jpg", size: "small", shop: false },
- { id: 26, name: "tree head", src: "thumbs-027.jpg", size: "wide", shop: false },
-];
-
-export const modalInfo = [
- { id: 0, desc: "The result of working in an office for too long. Made using ink, brush and pigment ink pens." },
- { id: 1, desc: "Part of my desert tryptich illustration. Pen and ink drawings coloured using mixed media and finished on Photoshop." },
- { id: 2, desc: "Gig poster for american space rock band Bardo Pond. Created for Room237 promotions using pen and ink, coloured using Photoshop." },
- { id: 3, desc: "An angular pike drawn for Wharf Chambers gig Man Forever. Pen and ink coloured using Photoshop." },
- { id: 4, desc: "Gig poster for legendary post punk band Mission Burma gig. created for Room237 and Brudenell Social Club. Created using pen and ink and coloured on Photoshop and Illustrator." },
- { id: 5, desc: "Mushroom lumberjack detailed illustration. I used pigment pens, a quill, a brush and platinum carbon ink, on heavy duty art paper. This is a available to buy in screenprint form." },
- { id: 6, desc: "Gig poster for Chilean space rock band Föllakzoid produced for Third Eye and Karma promotions. Created using pen and ink, coloured pencil and Photoshop" },
- { id: 7, desc: "Butterfly illustration created using pen and ink, coloured on illustrator. Screenprints available to buy 5 colours on heavy duty paper." },
- { id: 8, desc: "Computer illustrated picture of an deep sea Angler Fish. Created using Adobe Illustrator and Photoshop." },
- { id: 9, desc: "Beetle illustration created using pen and ink, coloured on illustrator. Screenprints available to buy 5 colours on heavy duty paper." },
- { id: 10, desc: "Comedy mug illustration computer drawn. This was made using Adobe Illustrator and Photoshop. " },
- { id: 11, desc: "A crazy hand drawn illustration of a mutant riding a BMX. Created using water colour and ink" },
- { id: 12, desc: "Debut gig poster for Leeds based gig promoters Northern Flowerhouse. Hand drawn illustration texture and colour done with Photoshop." },
- { id: 13, desc: "Part of my desert tryptich illustration. Pen and ink drawings coloured using mixed media and finished on Photoshop." },
- { id: 14, desc: "Hand drawn illustration of a robot being built. This was exhibited at North Bar for an exhibition titled 'Under Construction'. Created using pigment pens and water colour. Giclee prints on art paper available to buy." },
- { id: 15, desc: "Gig poster for drone legend Dylan Carlson, created for Room237. Created using pen and ink and coloured on Photoshop and Illustrator." },
- { id: 16, desc: "Computer illustrated picture of an Octopussssss. Created using Adobe Illustrator and Photoshop." },
- { id: 17, desc: "Hand drawn illustration of head collapsing together in a circle with varying degrees of torment. Created using pen and ink" },
- { id: 18, desc: "Computer illustrated picture of a rat working in the rat race. Created using Adobe Illustrator and Photoshop." },
- { id: 19, desc: "Gig poster for Slint legend Papa M, created for Room237. Created using Photoshop and Illustrator. I have massive screen printed posters of this for sale" },
- { id: 20, desc: "Computer illustrated picture of what happens with too much bass. Created using Adobe Illustrator and Photoshop." },
- { id: 21, desc: "Another gig poster for Leeds based gig promoters Northern Flowerhouse. This time featuring a leaf insect. Created using Illustrator and Photoshop." },
- { id: 22, desc: "Crazy crab military bird nest something or other man illustration. I used pigment pens, a quill, a brush and platinum carbon ink, on heavy duty art paper." },
- { id: 23, desc: "Hand drawn illustration of a colourful tree man. Created using pigment pens and water colour." },
- { id: 24, desc: "Hand drawn detailed illustration of cosmic creature living a tree stump. I used pigment pens, a quill, a brush and platinum carbon ink, on heavy duty art paper." },
- { id: 25, desc: "Hand drawn illustration of a creepy dude living in a tree stump. Created using pen, ink and watercolours." },
- { id: 26, desc: "Hand drawn illustration of a guy with a tree stump growing from his head. Created using pen, ink and colouring pencils." },
-];
\ No newline at end of file
diff --git a/src/globals/navData.ts b/src/globals/navData.ts
deleted file mode 100644
index 88e6e805..00000000
--- a/src/globals/navData.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default [
- { id: 0, name: 'gallery', url: '/gallery' },
- { id: 1, name: 'contact', url: '/contact' },
- { id: 2, name: 'shop', url: '/shop' },
-]
-
-export interface NavData {
- id: number;
- name: string;
- url: string;
-}
\ No newline at end of file
diff --git a/src/globals/shopItems.ts b/src/globals/shopItems.ts
deleted file mode 100644
index 3f25ec13..00000000
--- a/src/globals/shopItems.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export interface IShopItem {
- id: number;
- url: string;
- title: string;
- price: number;
- desc: string;
- soldOut: boolean;
- shopUrl: string;
-}
-
-export const shopItems = [
- { id: 1, url: "shop01.jpg", title: "Mushroom Lumberjack", price: 9.95, desc: "monochrome screenprint", soldOut: false, shopUrl: "mushroomjack" },
- { id: 2, url: "shop02.jpg", title: "Patterned Beetle", price: 22.50, desc: "five colour screenprint", soldOut: false, shopUrl: "patterned-beetle" },
- { id: 3, url: "shop03.jpg", title: "Desert Smoker", price: 3.95, desc: "glossy giclee full colour", soldOut: false, shopUrl: "desert-smoker" },
- { id: 4, url: "shop04.jpg", title: "Robot Workshop", price: 12.95, desc: "art stock giclee", soldOut: false, shopUrl: "robot-workshop" },
- { id: 5, url: "shop05.jpg", title: "Patterned Butterfly", price: 22.50, desc: "five colour screenprint", soldOut: false, shopUrl: "patterned-butterfly" },
- { id: 6, url: "shop06.jpg", title: "Desert Portrait", price: 3.95, desc: "glossy giclee full colour", soldOut: true, shopUrl: "desert-portrait" },
-];
diff --git a/src/globals/socialItems.ts b/src/globals/socialItems.ts
deleted file mode 100644
index dfe9e092..00000000
--- a/src/globals/socialItems.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-
-const socialItems = [
- { id: 0, url: 'http://twitter.com/hurricanechaz', name: 'twitter' },
- { id: 1, url: 'http://www.instagram.com/hurricane.charlie', name: 'instagram' },
- { id: 2, url: 'http://www.behance.net/chazhurricane', name: 'behance' },
-];
-
-export default socialItems;
\ No newline at end of file
diff --git a/src/helpers/imageImport.ts b/src/helpers/imageImport.ts
deleted file mode 100644
index 02e39a7e..00000000
--- a/src/helpers/imageImport.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export default function imageImport(r: __WebpackModuleApi.RequireContext) {
- let images = {} as { [key: string]: string };
- r.keys().map(item => images[item.replace('./', '')] = r(item));
- return images;
-}
\ No newline at end of file
diff --git a/src/helpers/imageObjectFromArray.ts b/src/helpers/imageObjectFromArray.ts
new file mode 100644
index 00000000..7472c89c
--- /dev/null
+++ b/src/helpers/imageObjectFromArray.ts
@@ -0,0 +1,19 @@
+import { FluidObject } from "gatsby-image";
+
+type FlattenedReturn = { [key: string]: FluidObject };
+
+interface GatsbyFluidReturn extends FluidObject {
+ originalName: string;
+}
+
+interface GatsbyImageNode {
+ childImageSharp: {
+ fluid: GatsbyFluidReturn;
+ };
+}
+
+export const imageObjectFromArray = (imageNodes: GatsbyImageNode[]): FlattenedReturn =>
+ imageNodes.reduce((acc: FlattenedReturn, cur: GatsbyImageNode) => {
+ const { originalName, ...rest } = cur.childImageSharp.fluid;
+ return { [originalName]: rest, ...acc };
+ }, {});
\ No newline at end of file
diff --git a/src/helpers/validators.ts b/src/helpers/validators.ts
index ef86d4f6..c1a62081 100644
--- a/src/helpers/validators.ts
+++ b/src/helpers/validators.ts
@@ -37,7 +37,7 @@ export function validateEmail(email: string): string {
export function formValidator(data: FormValidatorData): FormValidatorReturn {
const { name, email, message } = data;
- let errorMessages = { name: '', email: '', message: '' } as FormValidatorData;
+ const errorMessages = { name: '', email: '', message: '' } as FormValidatorData;
// check name
if (name.length === 0) {
diff --git a/src/index.tsx b/src/index.tsx
deleted file mode 100644
index 1672c982..00000000
--- a/src/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './main.sass';
-import Site from './components/Site';
-import * as serviceWorker from './serviceWorker';
-
-ReactDOM.render(
+
+)
+
+export default NotFoundPage
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
new file mode 100644
index 00000000..ec5ee7c8
--- /dev/null
+++ b/src/pages/contact.tsx
@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import CallToAction from '../components/call-to-action';
+import { formValidator } from '../helpers/validators';
+import Layout from '../components/layout';
+import SocialIcons from '../components/social-icons';
+import SEO from '../components/seo';
+
+const DEFAULT_MESSAGE_STATE = { name: '', email: '', message: '' };
+
+const Contact = () => {
+ const [data, setData] = useState(DEFAULT_MESSAGE_STATE);
+ const [errorMessages, setErrorMessages] = useState(DEFAULT_MESSAGE_STATE);
+ const [msgStatus, setMsgStatus] = useState({ msg: '', status: '' });
+
+ const handleInput = (e: React.FormEvent | React.ChangeEvent) => {
+ setData({ ...data, [e.currentTarget.name]: e.currentTarget.value });
+ }
+
+ const handleSubmit = async (e: React.MouseEvent) => {
+ e.preventDefault();
+ const { errorMessages, isValid } = formValidator(data);
+
+ if (isValid) {
+ let newMessageStatus = { ...msgStatus };
+
+ try {
+ const { ok } = await fetch('https://ct-core-api.herokuapp.com/hc-contact', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(data),
+ });
+
+ if (ok) {
+ newMessageStatus = {
+ msg: 'message sent, speak to you soon...',
+ status: 'green',
+ };
+ }
+ } catch (err) {
+ newMessageStatus = {
+ msg: 'message failed! please retry.',
+ status: 'red',
+ };
+ }
+
+ setData(DEFAULT_MESSAGE_STATE);
+ setMsgStatus(newMessageStatus);
+ }
+
+ setErrorMessages(errorMessages);
+ }
+
+ const { name, email, message } = data;
+
+ return (
+
+
+ );
+}
+
+export default Contact;
\ No newline at end of file
diff --git a/src/pages/gallery.tsx b/src/pages/gallery.tsx
new file mode 100644
index 00000000..c5ec5821
--- /dev/null
+++ b/src/pages/gallery.tsx
@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+import { useStaticQuery, graphql } from 'gatsby';
+
+import CallToAction from '../components/call-to-action';
+import GalleryItem from '../components/gallery-item';
+import Modal from '../components/modal';
+import Layout from '../components/layout';
+import { imageObjectFromArray } from '../helpers/imageObjectFromArray';
+import SEO from '../components/seo';
+
+export interface GalleryItemData {
+ id: number;
+ name: string;
+ src: string;
+ size: string;
+ shop: boolean;
+ desc: string;
+ modalImage: string;
+}
+
+const Gallery = () => {
+ const [selectedGalleryItemId, setSelectedGalleryItemId] = useState(0);
+ const [isModalShowing, setIsModalShowing] = useState(false);
+
+ const {data, images, modalImages} = useStaticQuery(graphql`
+ query {
+ data: galleryYaml {
+ gallery {
+ id
+ name
+ shop
+ size
+ src
+ desc
+ modalImage
+ }
+ }
+ images: allFile(filter: { relativeDirectory: { eq: "thumbs" } }) {
+ nodes {
+ childImageSharp {
+ fluid {
+ originalName
+ ...GatsbyImageSharpFluid
+ }
+ }
+ }
+ }
+ modalImages: allFile(filter: { relativeDirectory: { eq: "modal-images" } }) {
+ nodes {
+ childImageSharp {
+ fluid {
+ originalName
+ ...GatsbyImageSharpFluid
+ }
+ }
+ }
+ }
+ }
+ `);
+
+ const modalLimit = data.gallery.length - 1;
+ const flattendImageData = imageObjectFromArray(images.nodes);
+ const flattendModalImageData = imageObjectFromArray(modalImages.nodes);
+
+ const selectGalleryItem = (id: number): void => {
+ setSelectedGalleryItemId(id);
+ setIsModalShowing(true);
+ }
+
+ const modalHandler = (command: string): void => {
+ switch (command) {
+ case "next":
+ if (selectedGalleryItemId < modalLimit) setSelectedGalleryItemId(selectedGalleryItemId + 1);
+ break;
+ case "prev":
+ if (selectedGalleryItemId > 0) setSelectedGalleryItemId(selectedGalleryItemId - 1);
+ break;
+ default:
+ setIsModalShowing(false);
+ break;
+ }
+ }
+
+ if (isModalShowing) {
+ const { modalImage, ...selectedGalleryItem } = data.gallery[selectedGalleryItemId];
+ return (
+
+
+ )
+ }
+
+ return (
+
+
+
+
+ )
+}
+
+export default Gallery;
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
new file mode 100644
index 00000000..be370b1f
--- /dev/null
+++ b/src/pages/index.tsx
@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+import { navigate } from 'gatsby';
+
+export default () => {
+ useEffect(() => {
+ navigate('/gallery/');
+ }, []);
+ return null;
+};
\ No newline at end of file
diff --git a/src/pages/shop.tsx b/src/pages/shop.tsx
new file mode 100644
index 00000000..a1ede7f7
--- /dev/null
+++ b/src/pages/shop.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { useStaticQuery, graphql } from 'gatsby';
+import ShopItem, { ShopItemData } from '../components/shop-item';
+import Layout from '../components/layout';
+import { imageObjectFromArray } from '../helpers/imageObjectFromArray';
+import SEO from '../components/seo';
+import MailingListForm from '../components/mailing-list-form';
+
+const Shop = (): JSX.Element => {
+ const { images, data } = useStaticQuery(graphql`
+ query {
+ images: allFile(filter: { relativeDirectory: { eq: "shop" } }) {
+ nodes {
+ childImageSharp {
+ fluid {
+ originalName
+ ...GatsbyImageSharpFluid
+ }
+ }
+ }
+ }
+ data: shopYaml {
+ shop {
+ desc
+ id
+ price
+ shopUrl
+ soldOut
+ title
+ url
+ }
+ }
+ }
+ `);
+
+ const flattendImageData = imageObjectFromArray(images.nodes);
+
+ return (
+
+
+ );
+}
+
+export default Shop;
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5f..00000000
--- a/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-///
{product.title}
{product.desc}
diff --git a/src/components/social-icons.tsx b/src/components/social-icons.tsx new file mode 100644 index 00000000..8c243408 --- /dev/null +++ b/src/components/social-icons.tsx @@ -0,0 +1,35 @@ +import React, { Fragment } from 'react'; +import { useStaticQuery, graphql } from 'gatsby'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +export interface SocialItem { + id: number; + url: string; + name: 'instagram' | 'twitter' | 'behance'; +} + +const SocialIcons = () => { + const { data } = useStaticQuery(graphql` + query { + data: socialYaml { + social { + id + name + url + } + } + } + `); + + return ( +
+
+
+
+ 404 Error: Page does not exist!
+
+
+
+
+
+
+ say hello...
+ +
+
+
+
+ {`Please feel free to contact me with any questions. I'm open to commissions and exhibitions so do get in touch.`}
+social
+You can find me on these social platforms:
+
+
+ coding
+I designed and coded this website. For more information please visit my web development portfolio here
+
+ {data.gallery.map((item: GalleryItemData) => (
+
+
+ {data.shop.map((shopItem: ShopItemData) => (
+
+
+