From a0de34f5700415e4ad32de21cda4703e5eaf8a0e Mon Sep 17 00:00:00 2001
From: Jeffrey Phillips Freeman <the@jeffreyfreeman.me>
Date: Sun, 1 Mar 2020 17:52:36 +0100
Subject: [PATCH] Added nebula cloud section with shooting star.
---
package.json | 127 +++++++++++++++--------------
src/components/Layout.tsx | 1 -
src/pages/index.tsx | 107 +++++++++++++++++++-----
src/styles/scroll-animate.scss | 41 ++++++++++
static/comet.png | Bin 0 -> 2941 bytes
static/{clouds3.png => nebula.png} | Bin
6 files changed, 193 insertions(+), 83 deletions(-)
create mode 100644 src/styles/scroll-animate.scss
create mode 100644 static/comet.png
rename static/{clouds3.png => nebula.png} (100%)
diff --git a/package.json b/package.json
index fb003db..087bfb7 100644
--- a/package.json
+++ b/package.json
@@ -4,100 +4,103 @@
"version": "1.0.0",
"author": "LuÃs Rodrigues <hello@goblindegook.com>",
"dependencies": {
- "@emotion/core": "^10.0.4",
- "@emotion/styled": "^10.0.4",
- "@mdx-js/mdx": "^1.0.20",
- "@mdx-js/react": "^1.0.20",
- "@pacote/react-use-outside": "^1.0.2",
- "@reach/router": "^1.2.0",
+ "@emotion/core": "^10.0.28",
+ "@emotion/styled": "^10.0.27",
+ "@mdx-js/mdx": "^1.5.7",
+ "@mdx-js/react": "^1.5.7",
+ "@pacote/react-use-outside": "^1.1.1",
+ "@reach/router": "^1.3.3",
"@types/lunr": "^2.1.6",
"compass-sass-stylesheets": "^1.0.3",
- "core-js": "^3.1.4",
- "emotion": "^10.0.4",
- "emotion-server": "^10.0.4",
- "gatsby": "^2.0.7",
- "gatsby-plugin-catch-links": "^2.0.2",
- "gatsby-plugin-emotion": "^4.0.4",
- "gatsby-plugin-feed": "^2.0.5",
+ "core-js": "^3.6.4",
+ "emotion": "^10.0.27",
+ "emotion-server": "^10.0.27",
+ "gatsby": "^2.19.23",
+ "gatsby-plugin-catch-links": "^2.1.26",
+ "gatsby-plugin-emotion": "^4.1.22",
+ "gatsby-plugin-feed": "^2.3.27",
"gatsby-plugin-lunr": "^1.2.0",
- "gatsby-plugin-manifest": "^2.0.2",
- "gatsby-plugin-mdx": "^1.0.17",
- "gatsby-plugin-netlify": "^2.0.0",
- "gatsby-plugin-nprogress": "^2.0.5",
- "gatsby-plugin-offline": "^3.0.8",
- "gatsby-plugin-react-helmet": "^3.0.0",
- "gatsby-plugin-sass": "^2.1.28",
- "gatsby-plugin-sharp": "^2.0.5",
- "gatsby-plugin-sitemap": "^2.0.1",
+ "gatsby-plugin-manifest": "^2.2.42",
+ "gatsby-plugin-mdx": "^1.0.74",
+ "gatsby-plugin-netlify": "^2.1.33",
+ "gatsby-plugin-nprogress": "^2.1.19",
+ "gatsby-plugin-offline": "^3.0.35",
+ "gatsby-plugin-react-helmet": "^3.1.22",
+ "gatsby-plugin-sass": "^2.1.29",
+ "gatsby-plugin-sharp": "^2.4.5",
+ "gatsby-plugin-sitemap": "^2.2.27",
"gatsby-plugin-typegen": "^0.2.0",
- "gatsby-plugin-typescript": "^2.0.0",
- "gatsby-plugin-typography": "^2.2.0",
- "gatsby-remark-copy-linked-files": "^2.0.9",
- "gatsby-remark-images": "^3.0.6",
- "gatsby-remark-prismjs": "^3.2.6",
- "gatsby-remark-smartypants": "^2.0.8",
- "gatsby-source-filesystem": "^2.0.1",
- "gatsby-transformer-remark": "^2.6.10",
- "gatsby-transformer-sharp": "^2.1.1",
- "graphql": "^14.5.8",
- "graphql-tag-pluck": "^0.8.5",
+ "gatsby-plugin-typescript": "^2.1.27",
+ "gatsby-plugin-typography": "^2.3.22",
+ "gatsby-remark-copy-linked-files": "^2.1.37",
+ "gatsby-remark-images": "^3.1.44",
+ "gatsby-remark-prismjs": "^3.3.31",
+ "gatsby-remark-smartypants": "^2.1.21",
+ "gatsby-source-filesystem": "^2.1.48",
+ "gatsby-transformer-remark": "^2.6.53",
+ "gatsby-transformer-sharp": "^2.3.16",
+ "graphql": "^14.6.0",
+ "graphql-tag-pluck": "^0.8.7",
"gray-percentage": "^2.0.0",
"lodash": "^4.17.5",
- "lunr": "^2.3.3",
+ "lunr": "^2.3.8",
"node-sass": "^4.13.1",
"normalize.css": "^8.0.0",
- "prismjs": "^1.15.0",
+ "prismjs": "^1.19.0",
"ramda": "^0.26.1",
- "react": "^16.5.2",
- "react-dom": "^16.2.0",
+ "react": "^16.13.0",
+ "react-dom": "^16.13.0",
"react-helmet": "^5.2.0",
"react-typography": "^0.16.13",
"regenerator-runtime": "^0.13.2",
+ "react-scrollmagic": "^2.1.1",
+ "react-gsap": "^1.2.0",
+ "styled-components": "^5.0.1",
"typeface-domine": "^0.0.72",
"typeface-montserrat": "^0.0.75",
"typography": "^0.16.17",
"typography-breakpoint-constants": "^0.16.18"
},
"devDependencies": {
- "@babel/core": "^7.1.0",
- "@babel/polyfill": "^7.2.5",
+ "@babel/core": "^7.8.6",
+ "@babel/polyfill": "^7.8.3",
"@pacote/eslint-config": "^2.0.0",
"@pacote/eslint-config-jest": "^1.0.0",
"@pacote/eslint-config-react": "^1.0.0",
- "@testing-library/jest-dom": "^5.0.2",
- "@testing-library/react": "^9.0.2",
+ "@testing-library/jest-dom": "^5.1.1",
+ "@testing-library/react": "^9.4.1",
"@types/compass-vertical-rhythm": "^1.4.0",
"@types/gray-percentage": "^2.0.0",
- "@types/jest": "^24.0.9",
- "@types/lodash": "^4.14.104",
- "@types/node": "^13.1.4",
- "@types/ramda": "^0.26.3",
- "@types/react": "^16.4.14",
- "@types/react-dom": "^16.0.7",
- "@types/react-helmet": "^5.0.5",
+ "@types/jest": "^24.9.1",
+ "@types/lodash": "^4.14.149",
+ "@types/node": "^13.7.7",
+ "@types/ramda": "^0.26.43",
+ "@types/react": "^16.9.23",
+ "@types/react-dom": "^16.9.5",
+ "@types/react-helmet": "^5.0.15",
"@types/typography": "^0.16.0",
"@types/typography-breakpoint-constants": "^0.16.0",
- "@typescript-eslint/eslint-plugin": "^2.0.0",
- "@typescript-eslint/parser": "^2.0.0",
- "eslint": "^6.0.1",
- "eslint-config-prettier": "^6.0.0",
+ "@typescript-eslint/eslint-plugin": "^2.21.0",
+ "@typescript-eslint/parser": "^2.21.0",
+ "eslint": "^6.8.0",
+ "eslint-config-prettier": "^6.10.0",
"eslint-config-standard": "^14.0.0",
- "eslint-plugin-import": "^2.18.0",
+ "eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-node": "^11.0.0",
- "eslint-plugin-prettier": "^3.1.0",
+ "eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-promise": "^4.2.1",
- "eslint-plugin-react": "^7.14.2",
- "eslint-plugin-react-hooks": "^2.1.2",
+ "eslint-plugin-react": "^7.18.3",
+ "eslint-plugin-react-hooks": "^2.5.0",
"eslint-plugin-standard": "^4.0.0",
- "husky": "^4.2.1",
+ "husky": "^4.2.3",
"identity-obj-proxy": "^3.0.0",
"jest": "^25.1.0",
- "lint-staged": "^10.0.2",
- "prettier": "^1.11.1",
- "ts-jest": "^25.0.0",
- "typescript": "^3.0.3",
- "webpack": "^4.19.1"
+ "lint-staged": "^10.0.8",
+ "prettier": "^1.19.1",
+ "ts-jest": "^25.2.1",
+ "typescript": "^3.8.3",
+ "webpack": "^4.41.6"
},
"keywords": [
"gatsby",
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 8e62e22..3cad170 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -7,7 +7,6 @@ import { Header } from './Header'
const wrapper = css`
margin: 0 auto;
- max-width: 960px;
padding: 0 1.0875rem 1.45rem;
`
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e2eb680..005928c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,35 +1,102 @@
import React from 'react'
import { css } from '@emotion/core'
-import { Link } from 'gatsby'
+import { withPrefix, Link } from 'gatsby'
import { Layout } from '../components/Layout'
import '../styles/title-animate.scss'
import '../styles/stars.scss'
+import '../styles/scroll-animate.scss'
+import Helmet from 'react-helmet'
+import { Controller, Scene } from 'react-scrollmagic'
+import { Tween, Timeline } from 'react-gsap'
+import styled from 'styled-components'
const style = {
- emphesis: css`
- color: yellow;
- `
+ emphesis: css`
+ color: yellow;
+ `
}
+const TweenStyled = styled.div`
+ .section {
+ height: 100vh;
+ }
+
+ .tween {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ margin: 0 !important;
+ position: relative;
+ left: calc(50% - 50px);
+ }
+
+ .stagger {
+ width: 50px;
+ height: 50px;
+ left: 700px;
+ background-color: green;
+ position: relative;
+ }
+`
+
export const IndexPage = () => (
<>
- <div class='stars'></div>
- <div class='stars1'></div>
- <div class='stars2'></div>
- <div class='stars3'></div>
- <div class='twinkling'></div>
- <div class='title-content'>
- <div class="title-content__container">
- <div class="title-content__container__text">
- Clever
- </div>
- <ul class="title-content__container__list">
- <li class="tite-content__container__list__item">Me</li>
- <li class="title-content__container__list__item">You</li>
- <li class="title-content__container__list__item">Us</li>
- <li class="title-content__container__list__item logo-emphesis">This</li>
- </ul>
+ <div className="stars"></div>
+ <div className="stars1"></div>
+ <div className="stars2"></div>
+ <div className="stars3"></div>
+ <div className="twinkling"></div>
+ <div className="title-content">
+ <div className="title-content__container">
+ <div className="title-content__container__text">Clever</div>
+ <ul className="title-content__container__list">
+ <li className="tite-content__container__list__item">Me</li>
+ <li className="title-content__container__list__item">You</li>
+ <li className="title-content__container__list__item">Us</li>
+ <li className="title-content__container__list__item logo-emphesis">This</li>
+ </ul>
+ </div>
+ </div>
+ <div>
+ <TweenStyled>
+ <div id="trigger-comet" />
+ <Controller>
+ <Scene triggerElement="#trigger-comet" duration={1200} pin={false}>
+ {progress => (
+ <Tween
+ from={{
+ css: {
+ left: '-150px',
+ top: '-35vh'
+ }
+ }}
+ to={{
+ css: {
+ left: '120vw',
+ top: '30vh'
+ }
+ }}
+ totalProgress={progress}
+ paused
+ >
+ <div className="comet"></div>
+ </Tween>
+ )}
+ </Scene>
+ </Controller>
+ </TweenStyled>
+ <div className="nebula" />
+ <div className="textcard textcard-cloud">
+ <div className="textcard-content">
+ <h2>The Cloud</h2>
+ <p>
+ The cloud is a place of fluffiness with things of fluff and rain and rainbows.
+ Fluffiness is how soft something is, rocks arent fluffy, clouds are. So buy our product
+ and be fluffy!
+ </p>
</div>
+ </div>
+ <div id="animation-end"></div>
</div>
{/* <div>
<h2>Hi people</h2>
diff --git a/src/styles/scroll-animate.scss b/src/styles/scroll-animate.scss
new file mode 100644
index 0000000..2304b0a
--- /dev/null
+++ b/src/styles/scroll-animate.scss
@@ -0,0 +1,41 @@
+.comet {
+ background:url(/comet.png) no-repeat;
+ z-index:0;
+ width: 93px;
+ height: 43px;
+ margin: 0 !important;
+ position: relative;
+ left: -150px;
+}
+
+.nebula {
+ background:url(/nebula.png) no-repeat;
+ z-index:0;
+ width: 1985px;
+ height: 669px;
+ margin: 0 !important;
+ position: relative;
+ left: -500px;
+}
+
+.textcard {
+ background: #ffffff;
+ color: #000000;
+ border-radius: 10px;
+ width: 40vh;
+}
+
+.textcard-cloud {
+ position: relative;
+ top: -300px;
+ float: right;
+ margin-right: 100px;
+}
+
+.textcard-content {
+ margin: 25px;
+}
+
+#animation-end {
+ margin-top: 10000px;
+}
diff --git a/static/comet.png b/static/comet.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a4b7d0e728874d4486be8c419b5dc79a43ffc39
GIT binary patch
literal 2941
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
literal 0
HcmV?d00001
diff --git a/static/clouds3.png b/static/nebula.png
similarity index 100%
rename from static/clouds3.png
rename to static/nebula.png
--
GitLab