Intro - Bugfixes and Feature
Added scroll wheel support for intro Hides visible arrow keys when at first or last item fixed css bug where next is slightly visible
This commit is contained in:
parent
f47e075b66
commit
e81c1b2dc8
|
|
@ -5,164 +5,177 @@ import Topic from './subcomponents/Topic';
|
||||||
import { ChevronDoubleUp, ChevronDoubleDown } from 'react-bootstrap-icons';
|
import { ChevronDoubleUp, ChevronDoubleDown } from 'react-bootstrap-icons';
|
||||||
|
|
||||||
class Intro extends React.Component {
|
class Intro extends React.Component {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
// Defaults for the state
|
// Defaults for the state
|
||||||
this.state = {
|
this.state = {
|
||||||
start: false,
|
start: false,
|
||||||
prev: 'previous',
|
prev: 'previous',
|
||||||
curr: 'current',
|
curr: 'current',
|
||||||
next: 'next',
|
next: 'next',
|
||||||
prevLoc: -1,
|
prevLoc: -1,
|
||||||
currLoc: 0,
|
currLoc: 0,
|
||||||
nextLoc: 1,
|
nextLoc: 1,
|
||||||
moving: false,
|
moving: false,
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Topics to display in intro
|
||||||
|
// DISCLAIMER: Please add content to the topic or bugs may occur...
|
||||||
|
topics = [
|
||||||
|
<Topic link="/about" title="Welcome to My Portfolio" background="/img/background.webp">
|
||||||
|
<div>
|
||||||
|
This website helps you access the projects that I've worked on. You can navigate
|
||||||
|
at the top to different locations in the site. Within you can find information about me,
|
||||||
|
my github repositories, and articles I've posted. This website is coded with
|
||||||
|
React/Redux and hosted over Vercel. You can email me at <a href="mailto:cam@camscode.com">cam@camscode.com</a>.
|
||||||
|
</div>
|
||||||
|
</Topic>,
|
||||||
|
<Topic link="/github" title="Github" background="img/space.webp">
|
||||||
|
View a list of projects I've done right on this website. You can easily direct to github
|
||||||
|
where you can see the project code itself.
|
||||||
|
</Topic>,
|
||||||
|
<Topic link="/articles" title="Articles" background="/img/sunset.webp">
|
||||||
|
Read through some homemade articles that go over interesting topics and may teach you some skills in tech.
|
||||||
|
</Topic>
|
||||||
|
];
|
||||||
|
|
||||||
|
handleKey = (e) => {
|
||||||
|
/**
|
||||||
|
* handleKey - Handle key events and hand off to handleInput
|
||||||
|
*/
|
||||||
|
switch (e.key) {
|
||||||
|
case "ArrowUp": // If received an up Arrow
|
||||||
|
this.handleInput('up');
|
||||||
|
break;
|
||||||
|
case "ArrowDown": // If received a down Arrow
|
||||||
|
this.handleInput('down')
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleInput = (input) => {
|
||||||
|
/**
|
||||||
|
* handleInput - handle input events. A majority of the functionality is to scroll through Intro topics
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Up Arrow
|
||||||
|
if (input === "up" && !this.state.moving && this.state.currLoc > 0) {
|
||||||
|
|
||||||
|
// Activate animation going to next topic
|
||||||
|
this.setState({
|
||||||
|
prev: 'current top',
|
||||||
|
moving: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Wait 900 ms until the transition is finished
|
||||||
|
setTimeout(() => {
|
||||||
|
// Once timeout finishes, place topics in correct location without transition
|
||||||
|
let prevloc = this.state.prevLoc - 1;
|
||||||
|
let currloc = this.state.currLoc - 1;
|
||||||
|
let nextloc = this.state.nextLoc - 1;
|
||||||
|
this.setState({
|
||||||
|
prev: 'previous notrans',
|
||||||
|
currLoc: currloc,
|
||||||
|
nextLoc: nextloc,
|
||||||
|
});
|
||||||
|
|
||||||
|
// wait another 75 ms to
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setState({ // remove notrans from each div
|
||||||
|
prev: 'previous',
|
||||||
|
prevLoc: prevloc,
|
||||||
|
moving: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
}, 75);
|
||||||
|
|
||||||
|
}, 900);
|
||||||
|
} else if (input === "down" && !this.state.moving && this.state.nextLoc < this.topics.length) {
|
||||||
|
// Activate transition going to previous topic
|
||||||
|
this.setState({
|
||||||
|
//curr: 'previous',
|
||||||
|
next: 'current',
|
||||||
|
moving: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
// wait 900 ms before placing all topics into correct divs
|
||||||
|
setTimeout(() => {
|
||||||
|
// move all topics into correct divs
|
||||||
|
let prevloc = this.state.prevLoc + 1;
|
||||||
|
let currloc = this.state.currLoc + 1;
|
||||||
|
let nextloc = this.state.nextLoc + 1;
|
||||||
|
this.setState({
|
||||||
|
next: 'next notrans',
|
||||||
|
prevLoc: prevloc,
|
||||||
|
currLoc: currloc,
|
||||||
|
});
|
||||||
|
|
||||||
|
// wait 20ms and remove notrans
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setState({
|
||||||
|
next: 'next',
|
||||||
|
nextLoc: nextloc,
|
||||||
|
moving: false,
|
||||||
|
});
|
||||||
|
}, 75);
|
||||||
|
}, 900);
|
||||||
|
|
||||||
|
} else if (input === "down" && this.state.nextLoc >= this.topics.length) {
|
||||||
|
// Set something to happen when you reach the end
|
||||||
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
}
|
|
||||||
|
|
||||||
handleKey = (e) => {
|
onWheel(event) {
|
||||||
/**
|
/**
|
||||||
* handleKey - Handle key events and hand off to handleInput
|
* onScroll: Handle wheel event and moves intro up or down based on wheel scroll direction
|
||||||
*/
|
*/
|
||||||
switch(e.key) {
|
if (event.deltaY < 0) {
|
||||||
case "ArrowUp": // If received an up Arrow
|
|
||||||
this.handleInput('up');
|
this.handleInput('up');
|
||||||
break;
|
}
|
||||||
case "ArrowDown": // If received a down Arrow
|
|
||||||
this.handleInput('down')
|
if (event.deltaY > 0) {
|
||||||
break;
|
this.handleInput('down');
|
||||||
default:
|
}
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
handleInput = (input) => {
|
componentDidMount() {
|
||||||
/**
|
setTimeout(() => { // At the start, wait 100ms and enable intro
|
||||||
* handleInput - handle input events. A majority of the functionality is to scroll through Intro topics
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Up Arrow
|
|
||||||
if (input === "up" && !this.state.moving && this.state.currLoc > 0 ) {
|
|
||||||
|
|
||||||
// Activate animation going to next topic
|
|
||||||
this.setState({
|
|
||||||
prev: 'current top',
|
|
||||||
moving: true
|
|
||||||
});
|
|
||||||
|
|
||||||
// Wait 900 ms until the transition is finished
|
|
||||||
setTimeout(()=>{
|
|
||||||
// Once timeout finishes, place topics in correct location without transition
|
|
||||||
let prevloc = this.state.prevLoc-1;
|
|
||||||
let currloc = this.state.currLoc-1;
|
|
||||||
let nextloc = this.state.nextLoc-1;
|
|
||||||
this.setState({
|
this.setState({
|
||||||
prev: 'previous notrans',
|
start: true,
|
||||||
currLoc: currloc,
|
|
||||||
nextLoc: nextloc,
|
|
||||||
});
|
});
|
||||||
|
}, 100);
|
||||||
|
|
||||||
// wait another 75 ms to
|
document.title = "HomePage"; // Set document title
|
||||||
setTimeout(()=>{
|
|
||||||
this.setState({ // remove notrans from each div
|
|
||||||
prev: 'previous',
|
|
||||||
prevLoc: prevloc,
|
|
||||||
moving: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
}, 75);
|
|
||||||
|
|
||||||
}, 900);
|
|
||||||
} else if (input === "down" && !this.state.moving && this.state.nextLoc < this.topics.length) {
|
|
||||||
// Activate transition going to previous topic
|
|
||||||
this.setState({
|
|
||||||
//curr: 'previous',
|
|
||||||
next: 'current',
|
|
||||||
moving: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
// wait 900 ms before placing all topics into correct divs
|
|
||||||
setTimeout(()=>{
|
|
||||||
// move all topics into correct divs
|
|
||||||
let prevloc = this.state.prevLoc+1;
|
|
||||||
let currloc = this.state.currLoc+1;
|
|
||||||
let nextloc = this.state.nextLoc+1;
|
|
||||||
this.setState({
|
|
||||||
next: 'next notrans',
|
|
||||||
prevLoc: prevloc,
|
|
||||||
currLoc: currloc,
|
|
||||||
});
|
|
||||||
|
|
||||||
// wait 20ms and remove notrans
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.setState({
|
|
||||||
next: 'next',
|
|
||||||
nextLoc: nextloc,
|
|
||||||
moving: false,
|
|
||||||
});
|
|
||||||
}, 75);
|
|
||||||
}, 900);
|
|
||||||
|
|
||||||
} else if (input === "down" && this.state.nextLoc >= this.topics.length) {
|
|
||||||
// Set something to happen when you reach the end
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidMount() {
|
render() {
|
||||||
setTimeout(()=>{ // At the start, wait 100ms and enable intro
|
|
||||||
this.setState({
|
|
||||||
start: true,
|
|
||||||
});
|
|
||||||
}, 100);
|
|
||||||
|
|
||||||
document.title = "HomePage"; // Set document title
|
// TODO: Fix bug where scrolling too fast will allow one to exit expected topic range
|
||||||
|
|
||||||
}
|
// Render page
|
||||||
|
return (
|
||||||
// Topics to display in intro
|
<div onKeyDown={this.handleKey} tabIndex="0" className={this.state.start ? 'intro start' : 'intro'} onWheel={(event) => { this.onWheel(event) }}>
|
||||||
// DISCLAIMER: Please add content to the topic or bugs may occur...
|
<div className={'navbutton top' + (this.state.currLoc > 0 ? "" : " hidden")} onClick={() => { this.handleInput('up') }}><ChevronDoubleUp /></div>
|
||||||
topics = [
|
<div id="previous" className={this.state.prev}>
|
||||||
<Topic link="/about" title="Welcome to My Portfolio" background="/img/background.webp">
|
{this.topics[this.state.prevLoc]}
|
||||||
<div>
|
</div>
|
||||||
This website helps you access the projects that I've worked on. You can navigate
|
<div id="current" className={this.state.curr}>
|
||||||
at the top to different locations in the site. Within you can find information about me,
|
{this.topics[this.state.currLoc]}
|
||||||
my github repositories, and articles I've posted. This website is coded with
|
</div>
|
||||||
React/Redux and hosted over Vercel. You can email me at <a href="mailto:cam@camscode.com">cam@camscode.com</a>.
|
<div id="next" className={this.state.next}>
|
||||||
</div>
|
{this.topics[this.state.nextLoc]}
|
||||||
</Topic>,
|
</div>
|
||||||
<Topic link="/github" title="Github" background="img/space.webp">
|
<div className={'navbutton bottom' + (this.state.currLoc < this.topics.length - 1 ? "" : " hidden")} onClick={() => { this.handleInput('down') }}><ChevronDoubleDown /></div>
|
||||||
View a list of projects I've done right on this website. You can easily direct to github
|
|
||||||
where you can see the project code itself.
|
|
||||||
</Topic>,
|
|
||||||
<Topic link="/articles" title="Articles" background="/img/sunset.webp">
|
|
||||||
Read through some homemade articles that go over interesting topics and may teach you some skills in tech.
|
|
||||||
</Topic>
|
|
||||||
];
|
|
||||||
|
|
||||||
render() {
|
|
||||||
|
|
||||||
// TODO: Fix bug where scrolling too fast will allow one to exit expected topic range
|
|
||||||
|
|
||||||
// Render page
|
|
||||||
return (
|
|
||||||
<div onKeyDown={this.handleKey} tabIndex="0" className={this.state.start ? 'intro start':'intro'}>
|
|
||||||
<div className='navbutton top' onClick={()=>{this.handleInput('up')}}><ChevronDoubleUp/></div>
|
|
||||||
<div id="previous" className={this.state.prev}>
|
|
||||||
{this.topics[this.state.prevLoc]}
|
|
||||||
</div>
|
</div>
|
||||||
<div id="current" className={this.state.curr}>
|
);
|
||||||
{this.topics[this.state.currLoc]}
|
}
|
||||||
</div>
|
|
||||||
<div id="next" className={this.state.next}>
|
|
||||||
{this.topics[this.state.nextLoc]}
|
|
||||||
</div>
|
|
||||||
<div className='navbutton bottom' onClick={()=>{this.handleInput('down')}}><ChevronDoubleDown/></div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const mapStateToProps = (state) => {
|
const mapStateToProps = (state) => {
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
position:fixed;
|
position:fixed;
|
||||||
transition: opacity 750ms ease-out, top 750ms ease-out;
|
transition: opacity 750ms ease-out, top 750ms ease-out;
|
||||||
top:-99%;
|
top:-100%;
|
||||||
left:0;
|
left:0;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -49,7 +49,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
position:fixed;
|
position:fixed;
|
||||||
transition: opacity 750ms ease-out, top 750ms ease-out;
|
transition: opacity 750ms ease-out, top 750ms ease-out;
|
||||||
top:99%;
|
top:100%;
|
||||||
left:0;
|
left:0;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -81,6 +81,19 @@
|
||||||
color: #C4C4C4
|
color: #C4C4C4
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.intro .navbutton.hidden {
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro .navbutton.bottom {
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro .navbutton.top {
|
||||||
|
z-index: 14;
|
||||||
|
}
|
||||||
|
|
||||||
.intro .navbutton {
|
.intro .navbutton {
|
||||||
z-index: 14;
|
z-index: 14;
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
|
|
@ -92,12 +105,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
}
|
opacity: 1;
|
||||||
|
animation:none !important;
|
||||||
.intro .navbutton.bottom {
|
transition: opacity ease 0.25s;
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro .navbutton.top {
|
|
||||||
z-index: 14;
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue