65 lines
2.8 KiB
JavaScript
65 lines
2.8 KiB
JavaScript
import { Fragment, useEffect } from 'react';
|
|
import SwipeableViews from 'react-swipeable-views';
|
|
import { autoPlay } from 'react-swipeable-views-utils';
|
|
import Link from 'next/link';
|
|
import HeadTag from '../components/HeadTag';
|
|
import Loader from '../components/Loader';
|
|
import '../public/css/pages/index.css';
|
|
|
|
const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
|
|
|
|
const Home = () => {
|
|
|
|
useEffect(() => {
|
|
console.log(
|
|
'%c ⚙️ FunctionProject',
|
|
'color: #ffd800; font-weight: bold; background-color: #181818;padding: 10px;border-radius: 10px;font-size: 20px'
|
|
);
|
|
}, []);
|
|
|
|
return (
|
|
<Fragment>
|
|
<HeadTag />
|
|
<div className="Home__container container-fluid text-center">
|
|
|
|
<AutoPlaySwipeableViews enableMouseEvents interval={15000}>
|
|
|
|
{/* Slide 1 */}
|
|
<div className="row align-items-center justify-content-center">
|
|
<div className="col-24">
|
|
<h1 className="title-important">FunctionProject</h1>
|
|
<p className="Home__description">
|
|
Apprenez la programmation grâce à l'apprentissage par projet alias fonction (en <span className="important">JavaScript</span>).<br/>
|
|
Découvrez la liste des fonctions disponibles :
|
|
</p>
|
|
</div>
|
|
<div className="col-24 Home__logo-spin">
|
|
<Link href={"/functions"}>
|
|
<a><Loader width="100%" height="13em" speed="5s" /></a>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Slide 2 */}
|
|
<div className="row align-items-center justify-content-center">
|
|
<div className="col-24">
|
|
<h1 className="title-important">Code Source</h1>
|
|
<p className="Home__description">
|
|
Le partage est essentiel afin de progresser. <br/>
|
|
Par conséquent chaque fonction a un article expliquant comment elle fonctionne et <br/>
|
|
le code source du projet est disponible sur mon profil GitHub :
|
|
</p>
|
|
</div>
|
|
<div className="col-24">
|
|
<a target="_blank" rel="noopener noreferrer" href="https://github.com/Divlo/FunctionProject"> <img className="Home__image-width" src="/images/GitHub.png" alt="GitHub"/> </a>
|
|
</div>
|
|
</div>
|
|
|
|
</AutoPlaySwipeableViews>
|
|
|
|
</div>
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
export default Home; |