mirror of
https://github.com/ArthurDanjou/arthurdanjou.fr.git
synced 2026-02-04 21:57:50 +01:00
Initial commit 🚀
This commit is contained in:
36
components/Home/about/about.js
Normal file
36
components/Home/about/about.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import React from "react";
|
||||
import "./about.scss";
|
||||
import Tag from "../tag/tag";
|
||||
import Link from "next/link";
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<section id="about">
|
||||
<Tag color="red" background="#fa7878" left={true}>Qui suis-je ?</Tag>
|
||||
<div className="about-content">
|
||||
<div className="about-right">
|
||||
<img src="/assets/photo.png" alt="My photo"/>
|
||||
</div>
|
||||
<div className="about-left">
|
||||
<div className="left-content">
|
||||
<h1>C'est moi !</h1>
|
||||
<p>
|
||||
Je m'appelle Arthur DANJOU. J'ai 17 ans, je suis né au <span className="color">Luxembourg</span> et j'habite actuellement à <span className="color">Paris</span>.<br/>
|
||||
Depuis tout jeune, je suis passionné d'<span className="color">informatique</span>. C'est en 2015 que j'ai commencé à <span className="color">développer</span>.<br/>
|
||||
C'est en pratiquant chaque jour que je me forme et que j'acquiers de nouvelles <span className="color">compétences</span> au travers de mes différents projets <span className="color">personnels</span> et <span className="color">professionnels</span>.
|
||||
</p>
|
||||
</div>
|
||||
<Link href="/env">
|
||||
<div className="page-button">
|
||||
<a>
|
||||
En savoir plus
|
||||
</a>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
};
|
||||
|
||||
export default About;
|
||||
123
components/Home/about/about.scss
Normal file
123
components/Home/about/about.scss
Normal file
@@ -0,0 +1,123 @@
|
||||
#about {
|
||||
background-color: #1c1c1c;
|
||||
height: 80vh;
|
||||
width: 100%;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.about-content {
|
||||
padding: 40px;
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
position: absolute;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.about-left {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
color: white;
|
||||
margin-left: 30px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
margin-bottom: 30px;
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
font-size: 1.3rem;
|
||||
|
||||
.color {
|
||||
color: #fa7878;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-button {
|
||||
margin-top: 40px;
|
||||
width: 50%;
|
||||
background-color: #4d4d4d;
|
||||
color: white;
|
||||
border-radius: 7px;
|
||||
padding: 20px 15px;
|
||||
transition: .3s;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: #313030;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about-right {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
|
||||
img {
|
||||
margin: 0 auto;
|
||||
width: 50%;
|
||||
animation: infinite linear imgAnimation 10s;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes imgAnimation {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
23
components/Home/banner/banner.js
Normal file
23
components/Home/banner/banner.js
Normal file
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import "./banner.scss";
|
||||
|
||||
const Banner = () => {
|
||||
return (
|
||||
<section id="banner">
|
||||
<div className="banner-container">
|
||||
<div className="name">
|
||||
Arthur <span id="rainbow">Danjou</span>
|
||||
</div>
|
||||
<div className="role">
|
||||
creative developer <span id="spacer">&</span> author of myself
|
||||
</div>
|
||||
<a href="#about" className="scroller">
|
||||
<p>Scroll</p>
|
||||
<div className="scroller-animation"/>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Banner;
|
||||
113
components/Home/banner/banner.scss
Normal file
113
components/Home/banner/banner.scss
Normal file
@@ -0,0 +1,113 @@
|
||||
$title-color: #37383F;
|
||||
|
||||
#banner {
|
||||
height: 100vh;
|
||||
background: url("/assets/background.png") no-repeat center;
|
||||
background-size: cover;
|
||||
|
||||
.banner-container {
|
||||
height: 100%;
|
||||
color: $title-color;
|
||||
text-transform: capitalize;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.name {
|
||||
font-size: 100px;
|
||||
font-weight: 900;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
font-size: 70px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
#rainbow {
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
padding: 3px 5px;
|
||||
background-color: #FFEED9;
|
||||
color: #FF9900;
|
||||
animation: rainbowAnimation 60s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.role {
|
||||
font-size: 30px;
|
||||
margin-top: 20px;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
#spacer {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
}
|
||||
|
||||
.scroller {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
.scroller-animation {
|
||||
height: 80px;
|
||||
width: 1px;
|
||||
content: "";
|
||||
display: block;
|
||||
background-color: $title-color;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbowAnimation {
|
||||
0% {
|
||||
background-color: #FFEED9;
|
||||
color: #FF9900;
|
||||
}
|
||||
16% {
|
||||
background-color: #fff6d9;
|
||||
color: #ffe600;
|
||||
}
|
||||
32% {
|
||||
background-color: #e0ffd9;
|
||||
color: #59ff00;
|
||||
}
|
||||
48% {
|
||||
background-color: #d9fcff;
|
||||
color: #00d9ff;
|
||||
}
|
||||
64% {
|
||||
background-color: #e4d9ff;
|
||||
color: #6a00ff;
|
||||
}
|
||||
72% {
|
||||
background-color: #fcd9ff;
|
||||
color: #ff00f2;
|
||||
}
|
||||
88% {
|
||||
background-color: #ffd9d9;
|
||||
color: #ff0000;
|
||||
}
|
||||
100% {
|
||||
background-color: #FFEED9;
|
||||
color: #FF9900;
|
||||
}
|
||||
}
|
||||
28
components/Home/posts/loading/Loading.js
Normal file
28
components/Home/posts/loading/Loading.js
Normal file
@@ -0,0 +1,28 @@
|
||||
import React from "react";
|
||||
import "./loading.scss";
|
||||
|
||||
const Loading = (props) => {
|
||||
return (
|
||||
<div className={`loading ${props.class}`}>
|
||||
<svg
|
||||
className="spinner"
|
||||
width="60px"
|
||||
height="60px"
|
||||
viewBox="0 0 132 132"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
className="path"
|
||||
fill="none"
|
||||
strokeWidth="6"
|
||||
strokeLinecap="round"
|
||||
cx="66"
|
||||
cy="66"
|
||||
r="60"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
export default Loading;
|
||||
38
components/Home/posts/loading/loading.scss
Normal file
38
components/Home/posts/loading/loading.scss
Normal file
@@ -0,0 +1,38 @@
|
||||
// loading
|
||||
$offset: 374;
|
||||
$duration: 1.4s;
|
||||
|
||||
.spinner {
|
||||
animation: rotator $duration linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotator {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
|
||||
.path {
|
||||
stroke-dasharray: $offset;
|
||||
stroke-dashoffset: 0;
|
||||
transform-origin: center;
|
||||
animation: dash $duration ease-in-out infinite;
|
||||
stroke: black;
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
0% {
|
||||
stroke-dashoffset: $offset;
|
||||
}
|
||||
50% {
|
||||
stroke-dashoffset: $offset/4;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: $offset;
|
||||
transform: rotate(450deg);
|
||||
}
|
||||
}
|
||||
69
components/Home/posts/posts.js
Normal file
69
components/Home/posts/posts.js
Normal file
@@ -0,0 +1,69 @@
|
||||
import React, {useEffect, useState} from "react";
|
||||
import "./posts.scss";
|
||||
import Tag from "../tag/tag";
|
||||
import * as axios from "axios";
|
||||
import Loading from "./loading/Loading";
|
||||
import Link from "next/link";
|
||||
import 'moment/locale/fr';
|
||||
import Moment, { now } from 'react-moment';
|
||||
|
||||
const Posts = () => {
|
||||
|
||||
const [isLoading, setLoading] = useState(true);
|
||||
const [getPosts, setPosts] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
loadPosts()
|
||||
.then(() => {
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => console.log(error));
|
||||
}, []);
|
||||
|
||||
const loadPosts = async () => {
|
||||
await axios.get("https://localhost:8080/api/posts")
|
||||
.then(response => {
|
||||
setPosts(response);
|
||||
})
|
||||
.catch(error => console.log(error));
|
||||
}
|
||||
|
||||
const renderPosts = () => {
|
||||
if (getPosts.length) {
|
||||
return (
|
||||
<div className="post-container container">
|
||||
{getPosts.map(post => {
|
||||
return (
|
||||
<div className="post">
|
||||
<Link href={`/blog/${post.id}`}>
|
||||
<a>
|
||||
<div className="post-cover" style={{backgroundImage: `url(${post.image})`}}/>
|
||||
<h3>{post.title}</h3>
|
||||
</a>
|
||||
</Link>
|
||||
<div className="post-date">
|
||||
<Moment to={post.date}>{now}</Moment>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<div className="no-post container">
|
||||
<h1>Il n'y a malheureusement aucun article de posté pour le moment. 😕</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="posts">
|
||||
<Tag color="#FF9900" background="#FFEED9" left={false}>Mon blog</Tag>
|
||||
{isLoading ? <Loading class="loader container" /> : renderPosts()}
|
||||
</section>
|
||||
)
|
||||
};
|
||||
|
||||
export default Posts;
|
||||
21
components/Home/posts/posts.scss
Normal file
21
components/Home/posts/posts.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
#posts {
|
||||
height: 70vh;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
color: #37383F;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
}
|
||||
42
components/Home/process/process.js
Normal file
42
components/Home/process/process.js
Normal file
@@ -0,0 +1,42 @@
|
||||
import React from "react";
|
||||
import "./process.scss";
|
||||
import Tag from "../tag/tag";
|
||||
|
||||
const Process = () => {
|
||||
return (
|
||||
<section id="process">
|
||||
<Tag color="#ff00f2" background="#fac0ff" left={true}>Mon procédé</Tag>
|
||||
<div className="process-container">
|
||||
<div className="process-right">
|
||||
<img src="/assets/process.png" alt="Process Photo" />
|
||||
</div>
|
||||
<div className="process-left">
|
||||
<div className="processus">
|
||||
<h1>1. Réception</h1>
|
||||
<p>J'examine votre commande et nous discutons de vos <span className="color">attentes</span>,
|
||||
vos <span className="color">contraintes</span>, votre <span className="color">délais</span> et votre <span className="color">budget</span>.
|
||||
Une fois que nous sommes en <span className="color">accord</span>, je commence le <span className="color">brainstorming</span> autour de votre commande.</p>
|
||||
</div>
|
||||
<div className="processus">
|
||||
<h1>2. Brainstorming</h1>
|
||||
<p>Je conçois la <span className="color">maquette</span> de votre projet afin d'avoir un rapide aperçu.
|
||||
Une fois <span className="color">satisfait</span> de celle-ci, je commence le <span className="color">développement</span>.</p>
|
||||
</div>
|
||||
<div className="processus">
|
||||
<h1>3. Réalisation</h1>
|
||||
<p>Je développe avec les <span className="color">technologies</span> précédemment choisies.
|
||||
Avant la livraison, une <span className="color">vision en direct</span> vous sera disponible pour voir le résultat
|
||||
afin de corriger les petits <span className="color">détails</span> vous dérangeant.</p>
|
||||
</div>
|
||||
<div className="processus">
|
||||
<h1>4. Livraison</h1>
|
||||
<p>Une fois le projet fini, je vous le <span className="color">livre</span>.
|
||||
Je fournis également un <span className="color">service d'installation</span> du site web sur votre machine, avec un coût supplémentaire.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
};
|
||||
|
||||
export default Process;
|
||||
94
components/Home/process/process.scss
Normal file
94
components/Home/process/process.scss
Normal file
@@ -0,0 +1,94 @@
|
||||
#process {
|
||||
height: 90vh;
|
||||
width: 100%;
|
||||
background-color: #1c1c1c;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
height: 130vh;
|
||||
}
|
||||
|
||||
.process-container {
|
||||
width: 100%;
|
||||
height: 90vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
flex-direction: row;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
height: 130vh;
|
||||
padding: 10px;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.process-left {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
width: 100%;
|
||||
height: 130vh;
|
||||
}
|
||||
|
||||
.processus {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
padding-bottom: 30px;
|
||||
|
||||
.color {
|
||||
color: #fcd9ff;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
align-self: center;
|
||||
|
||||
&:after {
|
||||
margin: 7px auto;
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
display: block;
|
||||
content: "";
|
||||
background-color: #ff00f2;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
align-self: center;
|
||||
text-align: justify;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.process-right {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 auto;
|
||||
width: 65%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
29
components/Home/skills/skills.js
Normal file
29
components/Home/skills/skills.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import React from "react";
|
||||
import "./skills.scss";
|
||||
import Tag from "../tag/tag";
|
||||
|
||||
const Skills = () => {
|
||||
return (
|
||||
<section id="skills">
|
||||
<Tag color="#00d9ff" background="#d9fcff" left={false}>Ce que j'aime</Tag>
|
||||
<div className="skills-container">
|
||||
<div className="skills-left skill">
|
||||
<h1>Le Développement</h1>
|
||||
<p>
|
||||
Je suis développeur Web FullStack, c'est à dire que je maîtrise le BackEnd et le FrontEnd.
|
||||
Je réalise des sites pour des projets personnels ou professionnels. En parallèle, je développe des logiciels Mobile et Desktop.
|
||||
</p>
|
||||
</div>
|
||||
<div className="skills-right skill">
|
||||
<h1>La Technologie</h1>
|
||||
<p>
|
||||
J'adore la sécurité, le DevOps, et les machines.
|
||||
Ce sont des domaines très importants qu'il ne faut pas négliger sur un projet ! Je me documente au quotidien pour respecter la vie privée de mes clients.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
};
|
||||
|
||||
export default Skills;
|
||||
68
components/Home/skills/skills.scss
Normal file
68
components/Home/skills/skills.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
$text-color: #37383F;
|
||||
|
||||
#skills {
|
||||
height: 60vh;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
color:$text-color;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.skills-container {
|
||||
padding: 40px;
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
position: absolute;
|
||||
flex-direction: row;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
height: 90vh;
|
||||
padding: 10px;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.skill {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 10%;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.color {
|
||||
color: #d9fcff;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 1.7rem;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:after {
|
||||
margin: 7px auto;
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
display: block;
|
||||
content: "";
|
||||
background-color: #00d9ff;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
18
components/Home/tag/tag.js
Normal file
18
components/Home/tag/tag.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from "react";
|
||||
import "./tag.scss";
|
||||
|
||||
const Tag = (props) => {
|
||||
return (
|
||||
<div className={props.left ? "tag left": "tag right"}>
|
||||
<h1>{props.children}</h1>
|
||||
<style jsx>{`
|
||||
.tag {
|
||||
color: ${props.color};
|
||||
background-color: ${props.background};
|
||||
transform: rotate(${props.left ? "-20deg": "20deg"});
|
||||
}`}</style>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
export default Tag;
|
||||
32
components/Home/tag/tag.scss
Normal file
32
components/Home/tag/tag.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
.tag {
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 5rem;
|
||||
padding: 5px 7px;
|
||||
font-weight: 900;
|
||||
font-size: 130%;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
font-size: 1rem;
|
||||
top: 3rem
|
||||
}
|
||||
|
||||
&.left {
|
||||
left: 9%;
|
||||
float: left;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
left: 5%;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
right: 9%;
|
||||
float: right;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
right: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
32
components/footer/footer.js
Normal file
32
components/footer/footer.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import "./footer.scss";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer id="footer">
|
||||
<div className="footer-top">
|
||||
<h1>Travaillons ensemble !</h1>
|
||||
<h3>
|
||||
Envoyez moi votre projet en détaillant votre délais, votre budget et vos attentes
|
||||
<br />
|
||||
à <span><a href="mailto:arthurdanjou@outlook.fr">contact@arthurdanjou.fr</a></span> pour que l'on en discute ensemble !
|
||||
</h3>
|
||||
</div>
|
||||
<div className="footer-bottom">
|
||||
<div className="social-list">
|
||||
<a href="https://github.com/ArthurDanjou" target="_blank">
|
||||
<img src="/assets/github.svg" height={50} alt="GitHub Icon" />
|
||||
</a>
|
||||
<a href="https://twitter.com/ArthurDanj" target="_blank">
|
||||
<img src="/assets/twitter.svg" height={50} alt="Twitter Icon" />
|
||||
</a>
|
||||
<a href="mailto:arthurdanjou@outlook.fr" target="_blank">
|
||||
<img src="/assets/email.svg" height={50} alt="Mail Icon" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
65
components/footer/footer.scss
Normal file
65
components/footer/footer.scss
Normal file
@@ -0,0 +1,65 @@
|
||||
#footer {
|
||||
color: white;
|
||||
height: 450px;
|
||||
|
||||
.footer-top {
|
||||
height: 80%;
|
||||
background-color: #1c1c1c;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
margin: 0 auto;
|
||||
|
||||
h1 {
|
||||
margin-bottom: 20px;
|
||||
font-weight: 900;
|
||||
font-size: 50px;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #a0a0a0;
|
||||
span {
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
height: 20%;
|
||||
background-color: #111111;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.social-list {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
width: 30%;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
img {
|
||||
height: 40px;
|
||||
transition: .2s;
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
components/header/activelink/activelink.js
Normal file
18
components/header/activelink/activelink.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import { withRouter } from 'next/router'
|
||||
import Link from 'next/link'
|
||||
import React, { Children } from 'react'
|
||||
|
||||
const ActiveLink = ({ router, children, ...props }) => {
|
||||
const child = Children.only(children)
|
||||
|
||||
let className = child.props.className || null
|
||||
if (router.pathname === props.href && props.activeClassName) {
|
||||
className = `${className !== null ? className : ''} ${props.activeClassName}`.trim()
|
||||
}
|
||||
|
||||
delete props.activeClassName
|
||||
|
||||
return <Link {...props}>{React.cloneElement(child, { className })}</Link>
|
||||
}
|
||||
|
||||
export default withRouter(ActiveLink)
|
||||
83
components/header/header.js
Normal file
83
components/header/header.js
Normal file
@@ -0,0 +1,83 @@
|
||||
import React, {useState} from 'react';
|
||||
import Link from "next/link";
|
||||
import "./header.scss";
|
||||
import ActiveLink from "./activelink/activelink";
|
||||
|
||||
const Header = () => {
|
||||
|
||||
const [isOpened, setOpened] = useState(false);
|
||||
const [isActive, setActive] = useState(false);
|
||||
|
||||
return (
|
||||
<header id="header">
|
||||
<div className={isActive ? "active logo" : "logo"} >
|
||||
LOGO
|
||||
</div>
|
||||
<div className={isOpened ? "opened cross" : "cross"} onClick={() => setOpened(!isOpened)}/>
|
||||
|
||||
<div className={isOpened ? "opened menu" : "menu"} >
|
||||
<div className="menu-top">
|
||||
<div className="pages-link">
|
||||
<div className="title">
|
||||
Mes Pages
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<ActiveLink href="/" activeClassName="active">
|
||||
<a>Accueil</a>
|
||||
</ActiveLink>
|
||||
</li>
|
||||
<li>
|
||||
<ActiveLink href="/blog" activeClassName="active">
|
||||
<a>Mon blog</a>
|
||||
</ActiveLink>
|
||||
</li>
|
||||
<li>
|
||||
<ActiveLink href="/about" activeClassName="active">
|
||||
<a>A propos</a>
|
||||
</ActiveLink>
|
||||
</li>
|
||||
<li>
|
||||
<ActiveLink href="/env" activeClassName="active">
|
||||
<a>Mon environnement</a>
|
||||
</ActiveLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="contact-link">
|
||||
<div className="title">
|
||||
Les autres
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/resume">
|
||||
<a>Résumé</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/cli">
|
||||
<a>Console</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="menu-bottom">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="mailto:arthurdanjou@outlook.fr" target='_blank'>Mail</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/ArthurDanjou" target="_blank">Github</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/ArthurDanj" target="_blank">Twitter</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
};
|
||||
|
||||
export default Header;
|
||||
212
components/header/header.scss
Normal file
212
components/header/header.scss
Normal file
@@ -0,0 +1,212 @@
|
||||
$cross-closed: black;
|
||||
$cross-opened: red;
|
||||
$menu-background: #111111;
|
||||
$menu-color: white;
|
||||
$hover-color: rgba(205, 205, 205, 0.3);
|
||||
|
||||
#header {
|
||||
z-index: 100;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/*@media screen and (max-width: 700px) {
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
background-color: rgba(54, 54, 54, 0.95);
|
||||
}*/
|
||||
|
||||
.logo {
|
||||
z-index: 100;
|
||||
position: fixed;
|
||||
top: 5%;
|
||||
left: 5%;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
top: 1%;
|
||||
}
|
||||
|
||||
.active {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.cross {
|
||||
z-index: 100;
|
||||
position: fixed;
|
||||
top: 5%;
|
||||
right: 5%;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
top: 1%;
|
||||
}
|
||||
|
||||
&:active::before, &:active::after {
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
transition: transform .3s;
|
||||
display: block;
|
||||
content: "";
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
background-color: $cross-closed;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: 22px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 22px;
|
||||
right: 0;
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
&.opened {
|
||||
&:before, &:after {
|
||||
width: 100%;
|
||||
background-color: $cross-opened;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: 30px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 30px;
|
||||
left: 0;
|
||||
transform: rotate(45deg);
|
||||
box-shadow: 0 0 0 4px $menu-background, 0 0 12px 8px $menu-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
user-select: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
right: 4.5%;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
transition: opacity .3s;
|
||||
padding: 25px;
|
||||
border-radius: 5px;
|
||||
|
||||
a {
|
||||
padding: 2px 3px;
|
||||
box-shadow: inset 0 -10px 0 $hover-color;
|
||||
transition: box-shadow 0.2s ease-in-out;
|
||||
&:hover {
|
||||
box-shadow: inset 0 -100px 0 $hover-color;
|
||||
}
|
||||
&.active {
|
||||
box-shadow: inset 0 -100px 0 rgba(184, 184, 184, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-top {
|
||||
margin-top: 40px;
|
||||
.pages-link {
|
||||
transition: transform .6s;
|
||||
transform: translateY(60px);
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
}
|
||||
li {
|
||||
font-size: 20px;
|
||||
padding: 7px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-link {
|
||||
margin-top: 40px;
|
||||
transition: transform .7s;
|
||||
transform: translateY(60px);
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
li {
|
||||
font-size: 18px;
|
||||
padding: 7px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bottom {
|
||||
margin-top: 50px;
|
||||
transition: transform .8s;
|
||||
transform: translateY(60px);
|
||||
border-top: solid 1px $menu-color;
|
||||
|
||||
ul {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
|
||||
li {
|
||||
padding: 3px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.opened {
|
||||
z-index: 99;
|
||||
height: 500px;
|
||||
width: 350px;
|
||||
color: $menu-color;
|
||||
background-color: $menu-background;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
border-radius: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 150vh;
|
||||
}
|
||||
|
||||
.menu-top {
|
||||
.pages-link {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.contact-link {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bottom {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user