Updated CodePen & Spinner

gatsby-config.js

@@ -18,13 +18,14 @@ module.exports = {
  {
  resolve: `gatsby-plugin-manifest`,
  options: {
- name: `gatsby-starter-default`,
- short_name: `starter`,
- start_url: `/`,
- background_color: `#663399`,
- theme_color: `#663399`,
- display: `minimal-ui`,
- icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+ name: 'bntnam',
+ short_name: 'bntnam',
+ start_url: '/',
+ background_color: '#F19066',
+ theme_color: '#F19066',
+ display: 'standalone',
+ icon: 'src/images/logo.png', // This path is relative to the root of the site.
+ include_favicon: false,
  },
  },
  `gatsby-plugin-less`,

package.json

@@ -20,8 +20,11 @@
  "node-sass": "^4.14.0",
  "prop-types": "^15.7.2",
  "react": "^16.12.0",
+ "react-codepen-embed": "^1.0.1",
  "react-dom": "^16.12.0",
  "react-helmet": "^6.0.0",
+ "semantic-ui-css": "^2.4.1",
+ "semantic-ui-react": "^0.88.2",
  "styled-components": "^5.1.0",
  "styled-media-query": "^2.1.2",
  "styled-system": "^5.1.5",

src/components/codepen/CodePen.js

@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+import Codepen from "react-codepen-embed";
+
+import { Spinner } from "../../components";
+import { media } from "../../utils";
+
+const Container = styled.div`
+ margin-top: 50px;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-column-gap: 100px;
+ grid-row-gap: 100px;
+
+ ${media.lessThan("tablet")`
+ grid-template-columns: 1fr 1fr;
+ grid-column-gap: 50px;
+ grid-row-gap: 50px;
+ `}
+
+ ${media.lessThan("mobile")`
+ grid-template-columns: 1fr;
+ grid-row-gap: 50px;
+ `}
+`;
+
+export const CodePen = () => {
+ const [isLoading, setIsLoading] = useState(true);
+
+ useEffect(() => {
+ setTimeout(() => setIsLoading(false), 3000);
+ }, []);
+
+ return (
+ <Container>
+ {isLoading && <Spinner />}
+ <Codepen
+ hash="ZEbKzPj"
+ user="bntnam"
+ title="3Circles"
+ defaultTab="result"
+ preview="true"
+ />
+ <Codepen
+ hash="ZEbKzPj"
+ user="bntnam"
+ title="3Circles"
+ defaultTab="result"
+ preview="true"
+ />
+ <Codepen
+ hash="ZEbKzPj"
+ user="bntnam"
+ title="3Circles"
+ defaultTab="result"
+ preview="true"
+ />
+ <Codepen
+ hash="ZEbKzPj"
+ user="bntnam"
+ title="3Circles"
+ defaultTab="result"
+ preview="true"
+ />
+ <Codepen
+ hash="ZEbKzPj"
+ user="bntnam"
+ title="3Circles"
+ defaultTab="result"
+ preview="true"
+ />
+ <Codepen
+ hash="ZEbKzPj"
+ user="bntnam"
+ title="3Circles"
+ defaultTab="result"
+ preview="true"
+ />
+ </Container>
+ );
+};

src/components/codepen/index.js

@@ -0,0 +1 @@
+export * from "./CodePen";

src/components/common/Head.js

@@ -27,6 +27,7 @@ export const Head = ({ description, lang, meta, title }) => {
  }}
  title={title}
  titleTemplate={`%s | ${site.siteMetadata.title}`}
+ link={[{ rel: 'shortcut icon', href: '/logo.ico' }]}
  meta={[
  {
  name: `description`,

src/components/gallery/Gallery.js

@@ -2,34 +2,56 @@ import React from "react";
 import styled from "styled-components";
 
 import { Subheading, Text } from "../../utils";
-import { Heart } from "../../components";
+import { Heart, CodePen } from "../../components";
 
 const Container = styled.div`
- background: ${props => props.theme.colors.tolopea};
- height: 800px;
+ background: ${(props) => props.theme.colors.tolopea};
  padding: 80px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
 `;
 
 const Box = styled.div`
- background: ${props => props.theme.colors.blackcurrant};
+ background: ${(props) => props.theme.colors.blackcurrant};
  height: 60px;
  width: 100vw;
  position: relative;
-`
+`;
 
-export const Gallery = () => (
- <>
- <Box>
- <Heart />
- </Box>
- <Container>
- <Subheading>Welcome to my CSS Galary!</Subheading>
- <Text pt={"10px"}>The Galary consists of various CSS images from my <a href="https://codepen.io/bntnam" target="_blank">CodePen</a>.</Text>
- <Text pt={"5px"}>If you have any idea or feedback, feel free to get in touch at my <a href="mailto:[email protected]" target="_blank">email</a>. :)</Text>
- <Text pt={"5px"}>Now, hope you have fun. Cheers! &hearts;</Text>
- </Container>
- </>
-);
+export const Gallery = () => {
+ return (
+ <>
+ <Box>
+ <Heart />
+ </Box>
+ <Container>
+ <Subheading>Welcome to my CSS Galary!</Subheading>
+ <Text pt={"10px"}>
+ The Galary consists of various CSS images from my{" "}
+ <a
+ href="https://codepen.io/bntnam"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ CodePen
+ </a>
+ .
+ </Text>
+ <Text pt={"5px"}>
+ If you have any idea or feedback, feel free to get in touch at my{" "}
+ <a
+ href="mailto:[email protected]"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ email
+ </a>
+ .
+ </Text>
+ <Text pt={"5px"}>Now, hope you have fun. Cheers! &hearts;</Text>
+ <CodePen />
+ </Container>
+ </>
+ );
+};

src/components/index.js

@@ -2,4 +2,6 @@ export * from "./common";
 export * from "./header";
 export * from "./gallery"
 export * from "./footer";
-export * from "./walking";
+export * from "./heart";
+export * from "./codepen";
+export * from "./spinner";

src/components/spinner/Spinner.js

@@ -0,0 +1,42 @@
+import React from "react";
+import styled from "styled-components";
+
+const Loading = styled.div`
+ position: fixed;
+ width: 100%;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.8);
+ z-index: 9999;
+ display: block;
+
+ @keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ }
+
+ :after {
+ content: "";
+ display: block;
+ position: absolute;
+ left: 48%;
+ top: 40%;
+ width: 40px;
+ height: 40px;
+ border-style: solid;
+ border-color: white;
+ border-top-color: transparent;
+ border-width: 4px;
+ border-radius: 50%;
+ -webkit-animation: spin 0.8s linear infinite;
+ animation: spin 0.8s linear infinite;
+ }
+`;
+
+export const Spinner = () => <Loading />;

src/components/spinner/index.js

@@ -0,0 +1 @@
+export * from "./Spinner";

src/utils/token/index.js

@@ -1,4 +1,4 @@
-export * from "./media";
+export { default as media } from "./media";
 export * from "./style";
 export * from "./theme";
 export * from "./typography";