camerin
/
portfolio
mirror of https://github.com/RaspberryProgramming/portfolio.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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:
Camerin Figueroa 2023-08-26 09:54:23 -04:00
parent f47e075b66
commit e81c1b2dc8
2 changed files with 173 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/Intro.js
View File

@ -22,6 +22,26 @@ class Intro extends React.Component {
};
}
// 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
@ -111,6 +131,19 @@ class Intro extends React.Component {
};
onWheel(event) {
/**
* onScroll: Handle wheel event and moves intro up or down based on wheel scroll direction
*/
if (event.deltaY < 0) {
this.handleInput('up');
}
if (event.deltaY > 0) {
this.handleInput('down');
}
}
componentDidMount() {
setTimeout(() => { // At the start, wait 100ms and enable intro
this.setState({
@ -122,34 +155,14 @@ class Intro extends React.Component {
}
// 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>
];
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 onKeyDown={this.handleKey} tabIndex="0" className={this.state.start ? 'intro start' : 'intro'} onWheel={(event) => { this.onWheel(event) }}>
<div className={'navbutton top' + (this.state.currLoc > 0 ? "" : " hidden")} onClick={() => { this.handleInput('up') }}><ChevronDoubleUp /></div>
<div id="previous" className={this.state.prev}>
{this.topics[this.state.prevLoc]}
</div>
@ -159,7 +172,7 @@ class Intro extends React.Component {
<div id="next" className={this.state.next}>
{this.topics[this.state.nextLoc]}
</div>
<div className='navbutton bottom' onClick={()=>{this.handleInput('down')}}><ChevronDoubleDown/></div>
<div className={'navbutton bottom' + (this.state.currLoc < this.topics.length - 1 ? "" : " hidden")} onClick={() => { this.handleInput('down') }}><ChevronDoubleDown /></div>
</div>
);
}

28
src/components/css/Intro.css
View File

@ -21,7 +21,7 @@
display: flex;
position:fixed;
transition: opacity 750ms ease-out, top 750ms ease-out;
top:-99%;
top:-100%;
left:0;
justify-content: center;
align-items: center;
@ -49,7 +49,7 @@
display: flex;
position:fixed;
transition: opacity 750ms ease-out, top 750ms ease-out;
top:99%;
top:100%;
left:0;
justify-content: center;
align-items: center;
@ -81,6 +81,19 @@
color: #C4C4C4
}
.intro .navbutton.hidden {
opacity: 0;
}
.intro .navbutton.bottom {
margin-top: auto;
}
.intro .navbutton.top {
z-index: 14;
}
.intro .navbutton {
z-index: 14;
font-size: 48px;
@ -92,12 +105,7 @@
align-items: center;
justify-content: center;
}
.intro .navbutton.bottom {
margin-top: auto;
}
.intro .navbutton.top {
z-index: 14;
opacity: 1;
animation:none !important;
transition: opacity ease 0.25s;
}