Design challenge

package.json

@@ -7,6 +7,8 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "bootstrap": "^4.5.3",
+    "circletype": "^2.3.0",
     "hex-rgb": "^4.1.0",
     "imagesloaded": "^4.1.4",
     "ios-inner-height": "^1.1.1",

src/App.css

@@ -1,5 +1,10 @@
 @import url("https://use.typekit.net/gyk8zus.css");
 @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+@font-face{
+  font-family: "iAWriterMono";
+  src: url("./fonts/iAWriterMonoS-Regular.woff2") format('woff2');
+  font-weight: normal;
+}
 .content{
   height: auto;
 }
@@ -2226,6 +2231,7 @@ a.event-subtitle{
   margin-left: auto;
   margin-right: 10%;
 }
+<<<<<<< HEAD
 .button-small{
   background-color: transparent;
   font-family: "Poppins";
@@ -2245,4 +2251,7 @@ a.event-subtitle{
   line-height: 1;
   padding: 8px 24px 8px;
   border-radius: 45px;
-}
+}
+=======
+
+>>>>>>> 921effddf1d36e4e3b8e0f69e914e837959d65c3

src/App.js

@@ -1,13 +1,14 @@
 import React, { Component } from 'react'
 import {Route} from "react-router-dom";
-import './App.css'
+import './main.css'
 import Home from './Components/Home'
 import Menu from './Components/Menu'
 import Oops from './Components/Oops'
 import About from './Components/About'
 import Resources from './Components/Resources'
 import Events from './Components/Events'
 import ReactGA from 'react-ga'
+import Challenge from './Components/Challenge';
 
 export class App extends Component {
   constructor(props){
@@ -36,6 +37,7 @@ export class App extends Component {
         </head>
           <div className="main-body">
               <Route exact path="/" render={(props) => <Home {...props}/>}/>
+              <Route exact path="/challenge" render={(props) => <Challenge {...props}/>}/>
               <Route exact path="/oops" render={(props) => <Oops {...props}/>}/>
               <Route exact path="/about" render={(props) => <About {...props}/>}/>
               <Route exact path="/resources" render={(props) => <Resources {...props}/>}/>

src/Components/Challenge.jsx

@@ -0,0 +1,98 @@
+import React, { Component } from 'react';
+import ChallengeItem from './ChallengeItem';
+import ReactGA from 'react-ga'
+import { ReactComponent as Logo } from "./logo.svg";
+// import PictureHover from './PictureHover';
+const gsap = window.gsap;
+
+export default class Challenge extends Component {
+    constructor(props){
+        super(props);
+    }
+    initializeReactGA() {
+        ReactGA.initialize('UA-178117149-1');
+        ReactGA.pageview('/challenge');
+    }
+    componentDidMount(){
+        // this.DOM = document.body;
+        // this.DOM.menuItems = this.DOM.querySelectorAll('.menu__item');
+        // this.animatableProperties = {
+        //     // translationX
+        //     tx: {previous: 0, current: 0, amt: 0.08},
+        //     // translationY
+        //     ty: {previous: 0, current: 0, amt: 0.08},
+        //     // Rotation angle
+        //     rotation: {previous: 0, current: 0, amt: 0.08},
+        //     // CSS filter (brightness) value
+        //     brightness: {previous: 1, current: 1, amt: 0.08}
+        // };
+        // this.menuItems = [];
+        // // initialize the MenuItems
+        // [...this.DOM.menuItems].forEach((item, pos) => this.menuItems.push(new PictureHover(item, pos, this.animatableProperties)));
+        // this.showMenuItems();
+        const tl = gsap.timeline();
+        tl.fromTo('.challengeHeader', .6, {y: '40', opacity: 0}, {y:0, opacity: 1, delay: 0})
+        tl.fromTo('.challengeTitle', .6, {y: '40', opacity: 0}, {y:0, opacity: 1, delay: .1})
+        tl.fromTo('.date', .6, {y: '40', opacity: 0}, {y:0, opacity: 1, delay: .1});
+        tl.fromTo('.challengeSubtitle', .6, { opacity: 0}, {y:0, opacity: 1, delay: 0});
+        tl.fromTo('.challengeDetails', .6, {opacity: 0}, {opacity: 1, delay: 0}, '-=.6');
+        this.initializeReactGA();
+    }
+    // showMenuItems() {
+    //     gsap.to(this.menuItems.map(item => item.DOM.textInner), {
+    //         duration: 1.2,
+    //         ease: 'Expo.easeOut',
+    //         startAt: {y: '100%'},
+    //         y: 0,
+    //         delay: pos => pos*0.06
+    //     });
+    // }
+    render() {
+        return(
+            <div className="container-fluid design-challenge">
+                <div className="row d-flex justify-content-center">
+                    <div className="col-10 col-sm-6">
+                            <div className="b1 challengeHeader">Welcome to SB Creative Lab's...</div>
+                            <div className="h1 challengeTitle">Winter Design</div><div className="h1 challengeTitle">Challenge</div>
+                            <div className="date">1.7.21 / 2.7.21</div>
+                            <div className="b1 col-12 p-0 mt-2 challengeSubtitle">Choose from a playlist cover Graphic Design Challenge or an editorial Illustration Challenge. Or take on both!</div>
+                    </div>
+                </div>
+                <div style={{marginTop: "156px"}} className="row d-flex justify-content-center challengeDetails">
+                    <div className="col-10 col-sm-7">
+                        <ChallengeItem type="Graphic Design" title="Playlist Cover" imgURL="/images/saxophone.svg" caption="Your challenge is to design an album and tracklist cover that embodies the essence of the curated jazz playlist." />
+                        <ChallengeItem type="Illustration" title="Editorial" imgURL="/images/newspaper.svg" caption="Your challenge is to design an illustration for one of three Santa Barbara Independent article that will visually exemplify the article." />
+                    </div>
+                </div>
+                <div className="row d-flex justify-content-center mt-5">
+                    <div className="col-11 col-sm-8 d-flex flex-column align-items-center">
+                        <div className="h2 text-center">Mentors</div>
+                        <div className="b1 col-12 col-sm-6 text-center">Get 1:1 sessions with industry mentors before you submit your work.</div>
+                        <div class="menu__item b1 text-center">
+                            {/* <span class="menu__item-text"><span class="menu__item-textinner rainbow-text">coming soon!</span></span> */}
+                            Details coming soon!
+                        </div>
+                    </div>
+                </div>
+                <div style={{marginTop: "132px", paddingBottom: "96px"}} className="row d-flex justify-content-center">
+                    <div className="col-10 col-sm-8 d-flex flex-column align-items-center">
+                        <div className="b1 col-12 col-sm-6 text-center">Submissions are due before or by Sunday, February 7 @ 11:59 pm PT. </div>
+                        <div className="row mt-5 justify-space-between">
+                            <a href="https://forms.gle/ABJpGNTXsCvkiMxG9" className="button col-12 col-sm text-center">
+                                Submit Graphic Design
+                            </a>
+                            <div className="col-1 d-none d-sm-block"></div>
+                            <a href="https://forms.gle/LGHSRocpxJmmb44R7"className="button col-12 col-sm text-center mt-3 mt-sm-0">
+                                Submit Illustration
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div className="d-flex justify-content-center pb-5">
+                    <a href="/"><Logo height="80px"></Logo></a>
+                </div>
+            </div>
+        )
+    }
+};
+

src/Components/ChallengeItem.jsx

@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import CircleType from 'circletype';
+
+export default class ChallengeItem extends Component {
+
+    constructor(props){
+        super(props);
+
+        this.state = {
+            type: this.props.type,
+            imgURL: this.props.imgURL,
+            title: this.props.title,
+            caption: this.props.caption,
+            alt: this.props.alt,
+        }
+    }
+    componentDidMount(){
+        var circleType = new CircleType(document.getElementById(this.props.type)).radius(70);
+    }
+
+    render() {
+
+      let image = (
+        <img src={this.props.imgURL}/>
+      )
+
+      return (
+          <div className="row d-flex align-items-center mb-5 pb-4">
+              <div className="d-flex col-md-3 offset-md-1 justify-content-center align-items-center">
+                <a target="_blank" href={ this.props.type === "Illustration" ? "https://www.notion.so/Editorial-Illustration-Challenge-204f2e627b7c4178a3ea0d75cddb83ee" : "https://www.notion.so/Playlist-Cover-Design-Challenge-e7504148e300435684e1c1dfc3fa264d"} className={`circle-container ${this.props.type}`}>
+                    <div className="reverse-rotate">
+                        <div className="rotate">
+<<<<<<< HEAD
+                            <div className="mono" id={this.props.type}>&nbsp;{this.props.type} · {this.props.type} · {this.props.type} · {this.props.type} ·</div>
+=======
+                            <div className="mono" id={this.props.type}>{' '}{this.props.type} · {this.props.type} · {this.props.type} · {this.props.type} · </div>
+>>>>>>> 921effddf1d36e4e3b8e0f69e914e837959d65c3
+                        </div>
+                    </div>
+                    {image}
+                </a>
+              </div>
+              <div className="col-12 col-sm-8">
+                <div className="h2">{this.props.title}</div>
+                <div className="b1 mb-3">{this.props.caption}</div>
+                <a target="_blank" href={ this.props.type === "Illustration" ? "https://www.notion.so/Editorial-Illustration-Challenge-204f2e627b7c4178a3ea0d75cddb83ee" : "https://www.notion.so/Playlist-Cover-Design-Challenge-e7504148e300435684e1c1dfc3fa264d"} className="button-small">More Details</a>
+              </div>
+          </div>
+      );
+    }
+}

src/Components/Home.js

@@ -372,7 +372,7 @@ export default class Home extends Component {
                                     <div className="shortCaption mb-4" style={{color: "white"}}>
                                         Communicate your visual identity.
                                     </div>
-                                        <a className="button-small">
+                                        <a href="/challenge" className="button-small">
                                              Go to Design Challenge&nbsp;&nbsp;<i class="fas fa-palette fa-lg"></i></a>
                                 </div>
                                 <div id="graphScene" className="imageContainer">
@@ -421,7 +421,7 @@ export default class Home extends Component {
                                     <div className="shortCaption mb-4" style={{color: "white"}}>
                                         Bring concepts and stories to life.
                                     </div>
-                                    <a className="button-small">
+                                    <a href="/challenge" className="button-small">
                                              Go to Design Challenge&nbsp;&nbsp;<i class="fas fa-palette fa-lg"></i></a>
                                 </div>
                                 <div id="illusScene" className="imageContainer">

src/Components/PictureHover.js

@@ -42,6 +42,7 @@ export default class MenuItem {
         // adding an extra wrapper (revealInner) around the image element with overflow hidden, gives us the possibility to scale the image inside
         this.DOM.revealInner = document.createElement('div');
         this.DOM.revealInner.className = 'hover-reveal__inner';
+        this.DOM.revealInner.style.overflow ='hidden';
         this.DOM.revealImage = document.createElement('div');
         this.DOM.revealImage.className = 'hover-reveal__img';
         this.DOM.revealImage.style.backgroundImage = `url(/images/cat.jpg)`;