-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
8d2c1d7
commit 41865ff
Showing
17 changed files
with
601 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,6 +5,7 @@ | |
| "react" | ||
| ], | ||
| "plugins": [ | ||
| "react-hot-loader/babel" | ||
| "react-hot-loader/babel", | ||
| "transform-function-bind" | ||
| ] | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| module.exports = { | ||
| plugins: [ | ||
| require('precss'), | ||
| require('autoprefixer'), | ||
| require('postcss-scss') | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,112 @@ | ||
| @import url('https://fonts.googleapis.com/css?family=Signika'); | ||
|
|
||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .background { | ||
| background: linear-gradient(40deg,#134E5E,transparent 100%), | ||
| linear-gradient(230deg, #71B280, transparent), | ||
| #ffa949 url('../../static/img/bg2.jpg') center; | ||
| background-size: cover; | ||
| height: 96.9vh; | ||
| width: 98vw; | ||
| margin: 10px; | ||
| overflow: hidden; | ||
| background: linear-gradient(40deg,#1F1C2C,transparent 100%), | ||
| linear-gradient(230deg, #928DAB, transparent), | ||
| #ffa949 url('../../static/img/bg.jpg') center; | ||
| background-size: cover; | ||
| height: calc(100vh - 10px); | ||
| width: calc(100vw - 10px); | ||
| border: 10px solid white; | ||
| } | ||
|
|
||
| .container { | ||
| overflow: auto; | ||
| padding: 20px; | ||
| height: 100%; | ||
| height: calc(100% - 30px); | ||
| width: calc(100% - 20px); | ||
| position: fixed; | ||
| top: 10px; | ||
| left: 20px; | ||
| right: -15px; | ||
| } | ||
|
|
||
| .highlight { | ||
| color: mediumturquoise; | ||
| } | ||
|
|
||
| .content { | ||
| min-height: 2000px; | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
|
|
||
| .heading { | ||
| overflow: hidden; | ||
| color: darkturquoise; | ||
| font-family: 'Signika', sans-serif; | ||
| font-weight: bold; | ||
| font-size: 85px; | ||
| margin-left: 30px; | ||
| animation-name: heading; | ||
| animation-duration: 0.4s; | ||
| animation-timing-function: ease; | ||
| animation-fill-mode: forwards; | ||
| } | ||
|
|
||
| .about { | ||
| margin-top: 105px; | ||
| overflow: hidden; | ||
| margin-left: 50px; | ||
| color: white; | ||
| font-family: 'Signika', sans-serif; | ||
| font-weight: 300; | ||
| width: 45%; | ||
| font-size: 50px; | ||
| } | ||
|
|
||
| .staybold { | ||
| overflow: hidden; | ||
| margin-left: 50px; | ||
| color: mediumturquoise; | ||
| font-family: 'Signika', sans-serif; | ||
| font-weight: 200; | ||
| width: 57%; | ||
| font-size: 54px; | ||
| } | ||
|
|
||
| @keyframes heading { | ||
| from { | ||
| margin-top: 8%; | ||
| opacity: 0; | ||
| } | ||
| to { | ||
| margin-top: 14%; | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| .box { | ||
| position: relative; | ||
| } | ||
|
|
||
| .container::-webkit-scrollbar-track | ||
| { | ||
| box-shadow: inset 0 0 6px rgba(0,0,0,0.3); | ||
| background-color: #F5F5F5; | ||
| border-radius: 10px; | ||
| } | ||
|
|
||
| .container::-webkit-scrollbar | ||
| { | ||
| width: 10px; | ||
| background-color: #F5F5F5; | ||
| } | ||
|
|
||
| .container::-webkit-scrollbar-thumb | ||
| { | ||
| border-radius: 10px; | ||
| background-image: -webkit-gradient(linear, | ||
| left bottom, | ||
| left top, | ||
| color-stop(0.44, #908CA7), | ||
| color-stop(0.72, #565462), | ||
| color-stop(0.86, #747281)); | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,101 @@ | ||
| import React from 'react'; | ||
| import styles from './App.css'; | ||
| import React, { Component } from 'react' | ||
| import styles from './App.css' | ||
| import Subhead from '../utils/subtitle' | ||
| import superb from 'superb' | ||
| import transformText from '../utils/textEffect' | ||
|
|
||
| const App = () => ( | ||
| <div> | ||
| <div className={styles.background}> </div> | ||
| <div className={styles.container} > | ||
| <div className={styles.content}> | ||
| s | ||
| class App extends Component { | ||
| constructor(props) { | ||
| super(props) | ||
| this.handleScroll = this.handleScroll.bind(this) | ||
| let date = new Date() | ||
| let day = date.getDay() | ||
| switch(day) { | ||
| case 0: | ||
| this.day = 'Sunday' | ||
| break | ||
| case 1: | ||
| this.day = 'Monday' | ||
| break | ||
| case 2: | ||
| this.day = 'Tuesday' | ||
| break | ||
| case 3: | ||
| this.day = 'Wednesday' | ||
| break | ||
| case 4: | ||
| this.day = 'Thrusday' | ||
| break | ||
| case 5: | ||
| this.day = 'Friday' | ||
| break | ||
| case 6: | ||
| this.day = 'Saturday' | ||
| break | ||
| } | ||
| } | ||
| componentDidMount() { | ||
| this.refs.content.addEventListener('scroll',this.handleScroll) | ||
| this.nextCycle() | ||
|
|
||
| } | ||
| componentWillUnmount() { | ||
| this.refs.content.removeEventListener('scroll', this.handleScroll) | ||
| if (this._cycleTimeout) { | ||
| clearTimeout(this._cycleTimeout) | ||
| } | ||
| } | ||
| nextCycle() { | ||
| if (this._cycleTimeout) clearTimeout(this._cycleTimeout) | ||
| this._cycleTimeout = setTimeout(::this.cycle, 3500 + Math.random() * 900) | ||
| } | ||
| cycle() { | ||
| this.nextCycle() | ||
| transformText(this.refs.word, superb()) | ||
| } | ||
| handleScroll(event) { | ||
| let height = this.refs.heading.getBoundingClientRect().top | ||
| console.log(height) | ||
| if(height < 100) { | ||
| this.refs.background.style.filter = 'blur(2px)' | ||
| } else { | ||
| this.refs.background.style.filter = 'blur(0px)' | ||
| } | ||
| } | ||
| render() { | ||
| return ( | ||
| <div> | ||
| <div className={styles.background} ref='background'></div> | ||
| <div className={styles.container} ref='content'> | ||
| <div className={styles.content}> | ||
| <span className={styles.heading} ref='heading'> | ||
| Rohan Malhotra | ||
| </span> | ||
| <Subhead words={['Coder','Designer','JS Lover','Wizard','Indian','Geek','Startup Enthusiast','Web Developer','Student','Casual Nerd', 'Developer', 'Casual Pentester', 'FOSS Enthusiast']} /> | ||
| </div> | ||
| <div className={styles.about}> | ||
| <p> | ||
| <span className={styles.highlight}>Cheers</span>, I am a computer science engineering student currently in final year at <span className={styles.highlight}>JECRC</span>, Jaipur. | ||
| </p> | ||
| <p> | ||
| You are currently looking at my <span className={styles.highlight}>site</span>, that's awesome. | ||
| </p> | ||
| <p> | ||
| This site uses <span className={styles.highlight}>React</span>, GSAP, CSS3, postcss and some other magical stuff. | ||
| </p> | ||
| <p>Pretty neat, <span className={styles.highlight}>huh?</span></p> | ||
| </div> | ||
| <div className={styles.staybold}> | ||
| <span> | ||
| {'Stay bold & Have a '} | ||
| <span ref="word">{superb()}</span> | ||
| {` ${this.day}`} | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export default App; | ||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| export default function shuffle(array) { | ||
| let counter = array.length | ||
|
|
||
| while (counter > 0) { | ||
| let index = Math.floor(Math.random() * counter) | ||
| counter-- | ||
|
|
||
| let temp = array[counter] | ||
| array[counter] = array[index] | ||
| array[index] = temp | ||
| } | ||
|
|
||
| return array | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| .heading { | ||
| color: white; | ||
| font-family: 'Signika', sans-serif; | ||
| font-size: 40px; | ||
| margin-top: 10px; | ||
| margin-left: 34px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import React, { Component } from 'react'; | ||
| import shuffle from './shuffle' | ||
| import transformText from './textEffect' | ||
| import styles from './subtitle.css' | ||
|
|
||
| class Claims extends Component { | ||
| componentDidMount() { | ||
| this.list = [] | ||
| this.nextCycle(true) | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| if (this._cycleTimeout) { | ||
| clearTimeout(this._cycleTimeout) | ||
| } | ||
| } | ||
|
|
||
| getListItem() { | ||
| if (this.list.length === 0) { | ||
| this.list = shuffle(this.props.words.concat([])) | ||
| } | ||
|
|
||
| return this.list.shift() | ||
| } | ||
|
|
||
| nextCycle(longDelay) { | ||
| if (this._cycleTimeout) clearTimeout(this._cycleTimeout) | ||
| this._cycleTimeout = setTimeout(::this.cycle, (longDelay ? 3000 : 2500) + Math.random() * 900) | ||
| } | ||
|
|
||
| cycle() { | ||
| this.nextCycle() | ||
|
|
||
| setTimeout(::this.cycle1, 17 + Math.random() * 1100) | ||
| setTimeout(::this.cycle2, 600 + Math.random() * 1100) | ||
| setTimeout(::this.cycle3, 900 + Math.random() * 1100) | ||
| } | ||
|
|
||
| cycle1() { | ||
| transformText(this.refs.word1, this.getListItem()) | ||
| } | ||
|
|
||
| cycle2() { | ||
| transformText(this.refs.word2, this.getListItem()) | ||
| } | ||
|
|
||
| cycle3() { | ||
| transformText(this.refs.word3, this.getListItem()) | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <span className={styles.heading}> | ||
| <span ref="word1">{this.props.words[0]}</span>, <span ref="word2">{this.props.words[1]}</span>, <span ref="word3">{this.props.words[2]}</span> | ||
| </span> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export default Claims |
Oops, something went wrong.