giexpo project page added

gatsby-config.js

@@ -19,10 +19,7 @@ module.exports = {
     {
       resolve: `gatsby-plugin-google-fonts`,
       options: {
-        fonts: [
-          `Open Sans\:300,400,600,700`,
-          `Fira Mono\:400`
-        ],
+        fonts: [`Open Sans\:300,400,600,700`, `Fira Mono\:400`],
       },
     },
     {
@@ -34,6 +31,14 @@ module.exports = {
         showSpinner: false,
       },
     },
+    `gatsby-transformer-json`,
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `data`,
+        path: `${__dirname}/src/data/`,
+      },
+    },
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,

gatsby-node.js

@@ -5,3 +5,27 @@
  */
 
 // You can delete this file if you're not using it
+
+exports.createPages = async ({ actions, graphql }) => {
+  const { createPage } = actions
+
+  const result = await graphql(`
+    {
+      allProjectsJson {
+        nodes {
+          slug
+        }
+      }
+    }
+  `)
+
+  result.data.allProjectsJson.nodes.forEach(node => {
+    createPage({
+      path: `/project/${node.slug}/`,
+      component: require.resolve(`./src/templates/project.js`),
+      context: {
+        slug: node.slug,
+      },
+    })
+  })
+}

package.json

@@ -19,6 +19,7 @@
     "gatsby-plugin-styled-components": "^3.3.10",
     "gatsby-source-filesystem": "^2.3.24",
     "gatsby-telemetry": "^3.5.2",
+    "gatsby-transformer-json": "^3.0.0",
     "gatsby-transformer-sharp": "^2.5.13",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",

src/components/projects.js

@@ -168,7 +168,7 @@ const Projects = () => {
           }
         }
       }
-      imageGiexpo: file(relativePath: { eq: "projects/giexpo.png" }) {
+      imageGiexpo: file(relativePath: { eq: "projects/giexpo-01-main.png" }) {
         id
         childImageSharp {
           fixed {
@@ -223,7 +223,7 @@ const Projects = () => {
           <Text>
             <ProjectName
               rel="noreferrer"
-              href="https://www.kosko.it/"
+              href="https://www.figma.com/design/NKFRNrFLBNnTiydWFZ3jGW/KOSKO-(Copy)?node-id=1-2"
               target="_blank"
             >
               KOSKO
@@ -238,7 +238,11 @@ const Projects = () => {
               <p>graphql</p>
               <p></p>
             </Tech>
-            <a rel="noreferrer" href="https://www.kosko.it/" target="_blank">
+            <a
+              rel="noreferrer"
+              href="https://www.figma.com/design/NKFRNrFLBNnTiydWFZ3jGW/KOSKO-(Copy)?node-id=1-2"
+              target="_blank"
+            >
               <BiLinkExternal size="2em" />
             </a>
           </Text>
@@ -248,23 +252,15 @@ const Projects = () => {
         <Card>
           <Img fluid={data.imageGiexpo.childImageSharp.fluid} />
           <Text>
-            <ProjectName
-              rel="noreferrer"
-              href="https://dribbble.com/shots/24804301-GiEXPO-Blockchain-Exposition-Conference?utm_source=Clipboard_Shot&utm_campaign=mindxploit&utm_content=GiEXPO%20-%20Blockchain%20Exposition%20Conference&utm_medium=Social_Share&utm_source=Clipboard_Shot&utm_campaign=mindxploit&utm_content=GiEXPO%20-%20Blockchain%20Exposition%20Conference&utm_medium=Social_Share"
-              target="_blank"
-            >
+            <ProjectName rel="noreferrer" href="/project/giexpo">
               GiEXPO
             </ProjectName>
             <p>Landing page design for blockchain event. </p>
             <Tech>
               <p>figma</p>
               <p>ui design</p>
             </Tech>
-            <a
-              rel="noreferrer"
-              href="https://dribbble.com/shots/24804301-GiEXPO-Blockchain-Exposition-Conference?utm_source=Clipboard_Shot&utm_campaign=mindxploit&utm_content=GiEXPO%20-%20Blockchain%20Exposition%20Conference&utm_medium=Social_Share&utm_source=Clipboard_Shot&utm_campaign=mindxploit&utm_content=GiEXPO%20-%20Blockchain%20Exposition%20Conference&utm_medium=Social_Share"
-              target="_blank"
-            >
+            <a rel="noreferrer" href="/project/giexpo" target="_blank">
               <BiLinkExternal size="2em" />
             </a>
           </Text>

src/data/projects.json

@@ -0,0 +1,13 @@
+[
+  {
+    "slug": "giexpo",
+    "title": "GiEXPO - Blockchain Exposition Conference",
+    "description": "Landing page design for blockchain event",
+    "tech": ["figma", "ui design"],
+    "images": [
+      "projects/giexpo-01-main.png",
+      "projects/giexpo-02-moodboard.png",
+      "projects/giexpo-03-macpreview.png"
+    ]
+  }
+]

src/templates/project.js

@@ -0,0 +1,72 @@
+import React from "react"
+import { graphql } from "gatsby"
+import Img from "gatsby-image"
+import styled from "styled-components"
+import Layout from "../components/layout"
+
+const ProjectWrapper = styled.div`
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 4rem 2rem;
+`
+
+const ProjectImage = styled(Img)`
+  border-radius: 8px;
+  margin: 2rem 0;
+`
+
+const ProjectContent = styled.div`
+  h1 {
+    font-size: 3rem;
+    margin-bottom: 1.5rem;
+  }
+
+  p {
+    font-size: 1.2rem;
+    line-height: 1.6;
+    max-width: 800px;
+    margin: 0 auto 2rem;
+  }
+`
+
+export default function ProjectTemplate({ data }) {
+  const { images } = data
+  return (
+    <Layout>
+      <ProjectWrapper>
+        <ProjectContent>
+          <h1>GiEXPO - Blockchain Exposition Conference</h1>
+          <p>
+            Landing page design for GiEXPO, a blockchain conference event hosted
+            in Dubai.
+          </p>
+          {images.edges.map(({ node }, index) => (
+            <ProjectImage
+              key={index}
+              fluid={node.childImageSharp.fluid}
+              alt={`GiEXPO Preview ${index + 1}`}
+            />
+          ))}
+        </ProjectContent>
+      </ProjectWrapper>
+    </Layout>
+  )
+}
+export const query = graphql`
+  query {
+    images: allFile(
+      filter: { relativePath: { regex: "/projects/giexpo(-.*)?.png/" } }
+      sort: { fields: relativePath }
+    ) {
+      edges {
+        node {
+          childImageSharp {
+            fluid(maxWidth: 1200) {
+              ...GatsbyImageSharpFluid
+            }
+          }
+        }
+      }
+    }
+  }
+`