arthur/arthurdanjou.fr
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/arthurdanjou.fr.git synced 2026-01-14 12:14:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Main 🏠, About 🧑 & Env 🌲 pages done 🚀

Browse Source 
Footer & Header too
This commit is contained in:
Arthur Danjou
2020-06-01 21:17:23 +02:00
parent c630b95b1c
commit c7b6e39498
57 changed files with 2461 additions and 9774 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.idea/.gitignore generated vendored Normal file
View File

@@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

12
.idea/ArthurDanjouFR - Client.iml generated Normal file
View File

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

9
.idea/discord.xml generated Normal file
View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="DiscordProjectSettings">
<option name="show" value="PROJECT" />
</component>
<component name="ProjectNotificationSettings">
<option name="askShowProject" value="false" />
</component>
</project>

6
.idea/misc.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="JSX" />
</component>
</project>

8
.idea/modules.xml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/ArthurDanjouFR - Client.iml" filepath="$PROJECT_DIR$/.idea/ArthurDanjouFR - Client.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

4
.idea/watcherTasks.xml generated Normal file
View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
</project>

59
README.md
View File

@@ -1,5 +1,3 @@
# TODO List
#### **Pages :** #### **Pages :**
- Accueil - Accueil
@@ -11,63 +9,6 @@
- Showcase a faire quand le site est en ligne - Showcase a faire quand le site est en ligne
- Service (Dev, conseil) - Service (Dev, conseil)
---
###Accueil
- Banniere Dev x Etudiant
- Présentation + lien vers /about
- Review des 3 derniers articles (1 grand, 2 petits) + lire les autres
---
### About
- Mon histoire
- Mes passions
- Mes compétences + Lien CV
---
### Blog
- Page accueil
- Route dynamique
- Template d'article (cf shema)
- Recherche d'article
- Ajouter un clap (stocker BDD + cookie)
- Fleche de partage (copier le lien | partage twitter / facebook / snapchat / instagram)
- Sidebar de lecture
- Déroulement sur la droite
- Stocker les articles mongo
- Rédiger
- Recet / Pinned
- Tag / Clap / Most Read
---
### Environnement
- Mon setup
- Applications
---
### Contact
- mailto:contact@arthurdanjou.fr
---
### Header
- Logo (Gauche) + Menu (Droite)
- animation lors du click
- effet tres beau
- Lien vers les pages + GitHub / Twitter
---
### Footer
- Lien vers les pages
- Réseaux sociaux
- Copyright
---
### Autres ### Autres
- Effet style avec l'hover - Effet style avec l'hover
- Day/Night - Day/Night

36
components/Home/about/about.js
View File

@@ -1,36 +0,0 @@
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
View File

@@ -1,123 +0,0 @@
#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);
}
}

28
components/Home/posts/loading/Loading.js
View File

@@ -1,28 +0,0 @@
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
View File

@@ -1,38 +0,0 @@
// 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
View File

@@ -1,69 +0,0 @@
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
View File

@@ -1,21 +0,0 @@
#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;
}
}

94
components/Home/process/process.scss
View File

@@ -1,94 +0,0 @@
#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
View File

@@ -1,29 +0,0 @@
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
View File

@@ -1,68 +0,0 @@
$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
View File

@@ -1,18 +0,0 @@
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;

110
components/about/about.js Normal file
View File

@@ -0,0 +1,110 @@
import React from "react";
import {BddMap, FrameWorksMap, LanguagesMap, OtherMap} from "./skill";
import Link from "next/link";
const About = () => {
return (
<div id="about">
<img src="assets/photo-round.png" alt="Photo de moi" />
<div className="about-container">
<h1>Introduction 👋</h1>
<p>
Salut, je suis Arthur Danjou !
<br />
Je suis agé de 17 ans. Je suis né au Luxembourg, j'ai vécu en Belgique et actuellement je vis en France.
Je suis passionné par l'informatique, les nouvelles technologies et la moto? Je développe des applications web, mobiles et bureautiques.
</p>
</div>
<div className="about-container">
<h1>Mon parcours 🧮</h1>
<p>
Comme dit précédemment, en 2015 j'ai commencé à développer en Java pour créer des plugins sur MineCraft.
J'ai rejoins différents projets qui m'ont appris différentes technologies et m'ont aidés à améliorer mon niveau en Java.
Puis j'ai voulu m'expertiser dans le Web, oui ce vaste domaine. J'ai donc appris de nouveaux langages. Avec ces mêmes langages,
on peut développer des applications mobiles et bureautiques. En parallèle, j'ai passé mon permis moto, le permis A1. Depuis ce moment, une nouvelle passion s'est créee en moi.
Avec mes cours, j'ai pu passer la formation PSC1 (Prévention et secours civiques de niveau 1).
</p>
</div>
<div className="about-container">
<h1>Ma formation 📚</h1>
<p>
Je suis actuellement en classe de première générale. Je fais partie de la génération du nouveau baccalauréat.
Mes spécialités sont Mathémétiques, Physique-Chimie et Sciences économiques et sociales.
Pour la classe de Terminale, je garde les deux premières spécialités listées précédemment.
J'envisage de faire une classe préparatoire MP2I (Maths / Physique / Informatique / Ingénieurie).
C'est une nouvelle classe préparatoire. Enfin, j'aimerais rejoindre une école d'ingénieur spécialisée en informatique, ou dans un autre domaine.
</p>
</div>
<div className="about-container">
<h1>Mes compétences 🎨</h1>
<p>
En développant régulièrement, j'améliore mes compétences et je découvre de nouvelles technologies augmentant donc ma stack.
réalise beaucoup de projets professionnels et personnels pour découvrir et approfondir mes connaissances.
Ma stack actuelle se compose de :
</p>
<div className="skill">
<h3>Langages de programmation</h3>
<LanguagesMap />
</div>
<div className="skill">
<h3>Bases de données</h3>
<BddMap />
</div>
<div className="skill">
<h3>Frameworks</h3>
<FrameWorksMap />
</div>
<div className="skill">
<h3>Autres</h3>
<OtherMap />
</div>
</div>
<div className="about-container">
<h1>Mes expériences 🧰</h1>
<p>
Durant ma scolarité, j'ai eu la chance de découvrir pleins de métiers en stage.
</p>
<ul className="experience-list">
<li>
<h3 className="actual">Erisium</h3>
<h5>Février 2019 - Aujourd'hui</h5>
<p>
Développement et réalisation de projets Back-End et Front-End réalisés par l’équipe GamePlay – Maintien et mise à jour des projets en production.
</p>
</li>
<li>
<h3 className="not-actual">Idemia</h3>
<h5>Juin 2019</h5>
<p>
Découverte du secteur IT, technologie de l’information – Découverte du data-center – Découverte de différents métiers de la société
(développeur, support informatique, UX/UI designer, chef de produits...)
</p>
</li>
<li>
<h3 className="not-actual">La Salle à Manger</h3>
<h5>Avril 2018</h5>
<p>
Nettoyage de la salle – Serveur – Prise de commandes – Accueil des clients
</p>
</li>
</ul>
</div>
<Link href="/resume">
<a className="about-container button">
Mon CV
</a>
</Link>
</div>
)
};
export default About;
//TODO CV
/*
Présentation
Compétences
Parcours (Education)
*/

78
components/about/skill.js Normal file
View File

@@ -0,0 +1,78 @@
import React from "react";
const languages = [
"Java",
"Python",
"JavaScript",
"TypeScript",
"HTML/CSS",
"NodeJS",
"Markdown",
];
const bdds = [
"MariaDB",
"Redis",
"RabbitMQ",
//"PostgreSQL",
"MongoDB"
];
const frameworks = [
"Spring",
"ElectronJS",
"ReactJS",
"NextJS",
"React Native",
"AdonisJS v5",
];
const others = [
"DevSecOps",
"Git",
"Team",
"RestAPI",
"SysAdmin",
//"Docker",
//"Kubernetes",
];
export const LanguagesMap = () => {
return (
<ul className="skill-list">
{languages.map(lang => {
return <li key={lang}>{lang}</li>
})}
</ul>
)
}
export const BddMap = () => {
return (
<ul className="skill-list">
{bdds.map(base => {
return <li key={base}>{base}</li>
})}
</ul>
)
}
export const FrameWorksMap = () => {
return (
<ul className="skill-list">
{frameworks.map(fw => {
return <li key={fw}>{fw}</li>
})}
</ul>
)
}
export const OtherMap = () => {
return (
<ul className="skill-list">
{others.map(other => {
return <li key={other}>{other}</li>
})}
</ul>
)
}

82
components/environnement/env.js Normal file
View File

@@ -0,0 +1,82 @@
import React from "react";
const Env = () => {
return (
<div id="env">
<div className="env-container">
<h1>Mon matériel 💼</h1>
<p>Ce setup m'accompagne tous les jours pour développer. Je souhaite m'acheter un ordinateur portable pour être plus mobile.</p>
<ul>
<li>
💻 Ordinateur Fixe Asus (i5, 8Go Ram, GTX 950, 1To HDD)
</li>
<li>
⌨ Clavier Microsoft & Souris Roccat Kova
</li>
<li>
🎧 Airpods
</li>
<li>
🎧 Turtle Beach PX22
</li>
<li>
📱 Samsung Note 8
</li>
</ul>
</div>
<div className="env-container">
<h1>Mes éditeurs de texte 🧰</h1>
<p>Je dispose de la license étudiante Jetbrains pour avori accès gratuitement</p>
<ul>
<li>
<a href="https://www.jetbrains.com/idea/" target="_blank">Intellij Idea Ultimate</a> pour développer en Java.
</li>
<li>
<a href="https://www.jetbrains.com/webstorm/" target="_blank">WebStorm</a> pour tout ce qui touche au Web.
</li>
<li>
<a href="https://www.jetbrains.com/pycharm/" target="_blank">PyCharm</a> pour réaliser mes scrips python.
</li>
<li>
<a href="https://www.jetbrains.com/datagrip/" target="_blank">DataGrip</a> pour manier les bases de données.
</li>
<li>
<a href="https://www.jetbrains.com/fr-fr/lp/mono/" target="_blank">JetBrains Mono</a> m'accompagne tous les jours comme police d'écriture.
</li>
<li>
<a href="https://www.jetbrains.com/toolbox-app/" target="_blank">JetBrains Toolbox</a> me permet de rassembler tous mes éditeurs en un seul endroit.
</li>
</ul>
</div>
<div className="env-container">
<h1>Mes applications 📌</h1>
<p>J'utilise ces applications pour gagner du temps. Elles sont disponible également sur mon téléphone pour être toujours connecté.</p>
<ul>
<li>
<a href="https://www.google.com/intl/fr/chrome/dev/" target="_blank">Chrome Developer</a> pour aller sur Internet.
</li>
<li>
<a href="https://affinity.serif.com/fr/designer/" target="_blank">Affinity Designer</a> pour réaliser mes maquettes et mes designs.
</li>
<li>
<a href="https://evernote.com/intl/" target="_blank">Evernote</a> pour prendre des notes et rédiger.
</li>
<li>
<a href="https://trello.com/" target="_blank">Trello</a> pour organiser mes projets.
</li>
<li>
<a href="https://github.com/" target="_blank">Github</a> pour poster les sources de mes projets.
</li>
<li>
<a href="https://discord.com/" target="_blank">Discord</a>, <a href="https://slack.com/" target="_blank">Slack</a> et <a href="https://mattermost.com/" target="_blank">Mattermost</a> pour communiquer
</li>
<li>
Les documentations me permettent d'apprendre plus sur les frameworks que j'utilise.
</li>
</ul>
</div>
</div>
)
};
export default Env;

15
components/footer/footer.js
View File

@@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import "./footer.scss";
const Footer = () => { const Footer = () => {
return ( return (
@@ -11,8 +10,8 @@ const Footer = () => {
<br /> <br />
à <span><a href="mailto:arthurdanjou@outlook.fr">contact@arthurdanjou.fr</a></span> pour que l'on en discute ensemble ! à <span><a href="mailto:arthurdanjou@outlook.fr">contact@arthurdanjou.fr</a></span> pour que l'on en discute ensemble !
</h3> </h3>
</div> <div className="spacer">ou</div>
<div className="footer-bottom"> <h2>Retrouvez moi sur</h2>
<div className="social-list"> <div className="social-list">
<a href="https://github.com/ArthurDanjou" target="_blank"> <a href="https://github.com/ArthurDanjou" target="_blank">
<img src="/assets/github.svg" height={50} alt="GitHub Icon" /> <img src="/assets/github.svg" height={50} alt="GitHub Icon" />
@@ -20,11 +19,15 @@ const Footer = () => {
<a href="https://twitter.com/ArthurDanj" target="_blank"> <a href="https://twitter.com/ArthurDanj" target="_blank">
<img src="/assets/twitter.svg" height={50} alt="Twitter Icon" /> <img src="/assets/twitter.svg" height={50} alt="Twitter Icon" />
</a> </a>
<a href="mailto:arthurdanjou@outlook.fr" target="_blank">
<img src="/assets/email.svg" height={50} alt="Mail Icon" />
</a>
</div> </div>
</div> </div>
<div className="footer-bottom">
<p>
Développé et conçu avec <span>❤</span> par Arthur Danjou
<br/>
© Copyright 2020 - Tous droits réservés
</p>
</div>
</footer> </footer>
) )
} }

65
components/footer/footer.scss
View File

@@ -1,65 +0,0 @@
#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);
}
}
}
}

0
components/header/activelink/activelink.js → components/header/activelink.js
View File

84
components/header/header.js
View File

@@ -1,68 +1,52 @@
import React, {useState} from 'react'; import React, {useState} from 'react';
import ActiveLink from "./activelink";
import Link from "next/link"; import Link from "next/link";
import "./header.scss";
import ActiveLink from "./activelink/activelink";
const Header = () => { const Header = () => {
const [isOpened, setOpened] = useState(false); const [isOpened, setOpened] = useState(false);
const [isActive, setActive] = useState(false);
return ( return (
<header id="header"> <header id="header">
<div className={isActive ? "active logo" : "logo"} > <div className={isOpened ? "opened logo" : "logo"}>
LOGO <Link href="/">
<a>
Arthur<span id="arrow"/> <br/>Danjou
</a>
</Link>
</div> </div>
<div className={isOpened ? "opened cross" : "cross"} onClick={() => setOpened(!isOpened)}/> <div className={isOpened ? "opened cross" : "cross"} onClick={() => setOpened(!isOpened)}/>
<div className={isOpened ? "opened menu" : "menu"} > <div className={isOpened ? "opened menu" : "menu"} >
<div className="menu-top"> <div className="pages-link">
<div className="pages-link"> <div className="title">
<div className="title"> Mes Pages
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>
<ul>
<li>
<ActiveLink href="/" activeClassName="active">
<a>Accueil</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>
<li>
<ActiveLink href="/resume" activeClassName="active">
<a>Résumé</a>
</ActiveLink>
</li>
</ul>
</div> </div>
<div className="menu-bottom"> <div className="contact-links">
<ul> <ul>
<li> <li>
<a href="mailto:arthurdanjou@outlook.fr" target='_blank'>Mail</a> <a href="mailto:arthurdanjou@outlook.fr" target='_blank'>Mail</a>

37
components/home/about.js Normal file
View File

@@ -0,0 +1,37 @@
import React from "react";
import Link from "next/link";
const AboutHome = () => {
return (
<section id="about-home">
<div className="tag left">
Qui suis-je ?
</div>
<div className="about-content">
<div className="content">
<h1>C'est moi !</h1>
<p>
Je m'appelle <span className="color">Arthur DANJOU</span>. J'ai 17 ans, je suis né au <span className="color">Luxembourg</span> et j'habite actuellement à <span className="color">Paris</span>.
<br/>
<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>.
<br />
<br />
Ayant la <span className="color">volonté</span> d'apprendre, je cherche à découvrir pleins de <span className="color">technologies</span> pour agrandir ma stack et mes <span className="color">connaissances</span>.
</p>
</div>
<Link href="/about">
<div className="page-button">
<a>
En savoir plus
</a>
</div>
</Link>
</div>
</section>
)
};
export default AboutHome;

9
components/Home/banner/banner.js → components/home/banner.js
View File

@@ -1,9 +1,8 @@
import React from 'react'; import React from 'react';
import "./banner.scss";
const Banner = () => { const BannerHome = () => {
return ( return (
<section id="banner"> <section id="banner-home">
<div className="banner-container"> <div className="banner-container">
<div className="name"> <div className="name">
Arthur <span id="rainbow">Danjou</span> Arthur <span id="rainbow">Danjou</span>
@@ -11,7 +10,7 @@ const Banner = () => {
<div className="role"> <div className="role">
creative developer <span id="spacer">&</span> author of myself creative developer <span id="spacer">&</span> author of myself
</div> </div>
<a href="#about" className="scroller"> <a href="#about-home" className="scroller">
<p>Scroll</p> <p>Scroll</p>
<div className="scroller-animation"/> <div className="scroller-animation"/>
</a> </a>
@@ -20,4 +19,4 @@ const Banner = () => {
) )
} }
export default Banner; export default BannerHome;

76
components/home/contact.js Normal file
View File

@@ -0,0 +1,76 @@
import React from "react";
const Contact = () => {
const submitForm = (ev) => {
ev.preventDefault();
const form = ev.target;
const data = new FormData(form);
const xhr = new XMLHttpRequest();
xhr.open(form.method, form.action);
xhr.setRequestHeader("Accept", "application/json");
xhr.onreadystatechange = () => {
if (xhr.readyState !== XMLHttpRequest.DONE) return;
if (xhr.status === 200) {
form.reset();
}
};
xhr.send(data);
}
return (
<section id="contact">
<div className="tag right">
Me contacter
</div>
<div className="contact-container">
<div className="title">
<h1>Envoyez moi un message !</h1>
<p>
Vous avez une question, besoin d'aide, une proposition ou <br/>
simplement envie de parler ? Ecrivez moi.
</p>
</div>
<form
onSubmit={submitForm}
action="https://formspree.io/xeqraenv"
method="POST">
<div className="form-top">
<div className="left">
<label htmlFor="name">Votre nom</label>
<input
placeholder="Arthur DANJOU"
id="name"
name="name"
required="required"
>
</input>
</div>
<div className="right">
<label htmlFor="email">Votre adresse mail</label>
<input
placeholder="contact@arthurdanjou.fr"
id="email"
name="email"
required="required"
type="email">
</input>
</div>
</div>
<div className="form-bottom">
<label htmlFor="message">Votre message</label>
<textarea
placeholder="Bonjour, J'aimerais travailler avec vous. J'ai une super idée de logiciel web et mobile ! Pouvons-nous en discuter ?"
id="message" name="message" required="required" rows="7" minLength="30">
</textarea>
</div>
<div className="form-submit">
<input type="submit" className="button disabled" value="Envoyer le message" />
</div>
</form>
</div>
</section>
)
};
export default Contact;

47
components/home/passions.js Normal file
View File

@@ -0,0 +1,47 @@
import React from "react";
const PassionsHome = () => {
return (
<section id="passions-home">
<div className="tag right">
Ce que j'aime
</div>
<div className="passions-container">
<div className="passions-top">
<div className="passions-left passion">
<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 mobiles et bureautiques. Je développe également des scripts pour la sécurité de mes applications et je réalise des tests d'intrusion pour tester l'efficacité de ma sécurité
</p>
</div>
<div className="passions-right passion">
<h1>La Technologie</h1>
<p>
J'adore le DevSecOps, c'est un mixe de développement, de sécurité et d'opérations qui consistent à automatiser le développement donc à gagner du temps, et les machines, en effet, j'aimerais concevoir une infrastructure propre à mes besoins que l'héberge et que je déploie moi même..
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>
<div className="passions-bottom">
<div className="passions-left passion">
<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 mobiles et bureautiques. Je développe également des scripts pour la sécurité de mes applications et je réalise des tests d'intrusion pour tester l'efficacité de ma sécurité
</p>
</div>
<div className="passions-right passion">
<h1>La Technologie</h1>
<p>
J'adore le DevSecOps, c'est un mixe de développement, de sécurité et d'opérations qui consistent à automatiser le développement donc à gagner du temps, et les machines, en effet, j'aimerais concevoir une infrastructure propre à mes besoins que l'héberge et que je déploie moi même..
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>
</div>
</section>
)
};
export default PassionsHome;

18
components/Home/process/process.js → components/home/process.js
View File

@@ -1,15 +1,12 @@
import React from "react"; import React from "react";
import "./process.scss";
import Tag from "../tag/tag";
const Process = () => { const ProcessHome = () => {
return ( return (
<section id="process"> <section id="process-home">
<Tag color="#ff00f2" background="#fac0ff" left={true}>Mon procédé</Tag> <div className="tag left">
Mon procédé
</div>
<div className="process-container"> <div className="process-container">
<div className="process-right">
<img src="/assets/process.png" alt="Process Photo" />
</div>
<div className="process-left"> <div className="process-left">
<div className="processus"> <div className="processus">
<h1>1. Réception</h1> <h1>1. Réception</h1>
@@ -22,6 +19,9 @@ const Process = () => {
<p>Je conçois la <span className="color">maquette</span> de votre projet afin d'avoir un rapide aperçu. <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> Une fois <span className="color">satisfait</span> de celle-ci, je commence le <span className="color">développement</span>.</p>
</div> </div>
</div>
<div className="process-middle" />
<div className="process-right">
<div className="processus"> <div className="processus">
<h1>3. Réalisation</h1> <h1>3. Réalisation</h1>
<p>Je développe avec les <span className="color">technologies</span> précédemment choisies. <p>Je développe avec les <span className="color">technologies</span> précédemment choisies.
@@ -39,4 +39,4 @@ const Process = () => {
) )
}; };
export default Process; export default ProcessHome;

22
components/template/template.js Normal file
View File

@@ -0,0 +1,22 @@
import React from "react";
const Template = (props) => {
return (
<div id="template">
<div className="spacer"/>
<div className="template-container">
<div className="template-title">
<div className="question">{props.question}</div>
<h1 className="title">{props.title}</h1>
<div className="description">{props.description}</div>
</div>
<div className="template-content">
{props.children}
</div>
</div>
<div className="spacer"/>
</div>
)
}
export default Template;

8284
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

11
package.json
View File

@@ -5,19 +5,16 @@
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",
"build": "next build", "build": "next build",
"start": "next start" "start": "next start",
"sass": "sass ./public/style/style.scss:./dist/app.scss"
}, },
"dependencies": { "dependencies": {
"@zeit/next-sass": "^1.0.1", "@zeit/next-sass": "^1.0.1",
"axios": "^0.19.2",
"baffle": "^0.3.6",
"moment": "^2.25.3",
"moment-timezone": "^0.5.28",
"next": "9.3.5", "next": "9.3.5",
"next-images": "^1.4.0", "next-images": "^1.4.0",
"node-sass": "^4.14.0", "node-sass": "^4.14.0",
"react": "16.13.1", "react": "^16.13.1",
"react-dom": "16.13.1", "react-dom": "16.13.1",
"react-moment": "^0.9.7" "sass": "^1.26.5"
} }
} }

11
pages/about.js
View File

@@ -2,6 +2,9 @@ import React from "react";
import "../public/style/style.scss"; import "../public/style/style.scss";
import Head from "next/head"; import Head from "next/head";
import Header from "../components/header/header"; import Header from "../components/header/header";
import Template from "../components/template/template";
import Footer from "../components/footer/footer";
import About from "../components/about/about";
const AboutPage = () => { const AboutPage = () => {
return ( return (
@@ -10,6 +13,14 @@ const AboutPage = () => {
<title>Arthur Danjou | A propos</title> <title>Arthur Danjou | A propos</title>
</Head> </Head>
<Header /> <Header />
<Template
question="Qui suis-je ?"
title="Jeune développeur et passionné par l'informatique"
description="Vous allez tout apprendre sur moi, ma présentation, mes compétences, mes passions, mon parcours, comment je me suis formé... "
>
<About />
</Template>
<Footer />
</div> </div>
) )
} }

30
pages/env.js Normal file
View File

@@ -0,0 +1,30 @@
import React from "react";
import "../public/style/style.scss";
import Head from "next/head";
import Header from "../components/header/header";
import Footer from "../components/footer/footer";
import Template from "../components/template/template";
import Env from "../components/environnement/env";
const EnvPage = () => {
return (
<div className="env">
<Head>
<title>Arthur Danjou | Environnement</title>
</Head>
<Header />
<Template
question="Ce que j'utilise pour le développement !"
title="Mon Environnement"
description="Mon environnement de développement permet de gagner en productivité.
En effet, je m'organise de la sorte à toujours optimiser mon temps de réflexion et de développement.
Cette page liste donc tous mes logiciels et mon setup."
>
<Env />
</Template>
<Footer />
</div>
)
}
export default EnvPage;

12
pages/index.js
View File

@@ -2,12 +2,12 @@ import React from "react";
import "../public/style/style.scss"; import "../public/style/style.scss";
import Head from "next/head"; import Head from "next/head";
import Footer from "../components/footer/footer"; import Footer from "../components/footer/footer";
import Banner from "../components/Home/banner/banner"; import Banner from "../components/home/banner";
import Header from "../components/header/header"; import Header from "../components/header/header";
import About from "../components/Home/about/about"; import About from "../components/home/about";
import Skills from "../components/Home/skills/skills"; import Skills from "../components/home/passions";
import Process from "../components/Home/process/process"; import Process from "../components/home/process";
import Posts from "../components/Home/posts/posts"; import Contact from "../components/home/contact";
const HomePage = () => { const HomePage = () => {
return ( return (
@@ -20,7 +20,7 @@ const HomePage = () => {
<About /> <About />
<Skills /> <Skills />
<Process /> <Process />
<Posts /> <Contact />
<Footer /> <Footer />
</div> </div>
) )

149
pages/resume.js Normal file
View File

@@ -0,0 +1,149 @@
import React from "react";
import "../public/style/style.scss";
const Resume = () => {
return (
<section id="resume">
<div className="sidebar">
<div className="links">
<ul>
<li>
<a href="https://arthurdanjou.fr" target="_blank">arthurdanjou.fr</a>
</li>
<li>
<a href="mailto:contact@arthurdanjou.fr" target="_blank">contact@arthurdanjou.fr</a>
</li>
<li>
06 février 2003
</li>
<li>
<a href="https://twitter.com/ArthurDanj" target="_blank">@ArthurDanj</a>
</li>
<li>
<a href="https://github.com/ArthurDanjou" target="_blank">@ArthurDanjou</a>
</li>
<li>
Paris, France
</li>
</ul>
</div>
<div className="tech">
<h1>
Technologies principales
</h1>
<ul>
<li>JavaScript</li>
<li>Java</li>
<li>Python</li>
<li>TypeScript</li>
<li>HTML/CSS</li>
<li>NodeJS</li>
<li>React</li>
<li>Next.JS</li>
<li>React Native</li>
</ul>
</div>
<div className="others">
<h1>
Autres technologies
</h1>
<ul>
<li>DevSecOps</li>
<li>SQL</li>
<li>NoSQL</li>
<li>Scaling</li>
<li>Responsive</li>
<li>SEO</li>
</ul>
</div>
<div className="languages">
<h1>Langues</h1>
<ul>
<li>Français ➡ Langue natale</li>
<li>Anglais ➡ Ecrit, lu et parlé</li>
</ul>
</div>
</div>
<div className="container">
<div className="header">
<h1>
Arthur<br/>
Danjou
</h1>
<h2>
FullStack & Software Developer
</h2>
<p>
Passionné par l’informatique et la technologie, j'ai appris le développement en 2015.
En pratiquant chaque jour, je me forme et j’acquiers de nouvelles compétences au travers de différents projets personnels et professionnels.
Je cherche à m'expertiser et à maîtriser les domaines du développement, des nouvelles technologies et du DevSecOps.
</p>
</div>
<div className="content">
<div className="content-section">
<h3>Formations</h3>
<ul>
<li>
<h4>Formation en développement | Internet | 2015 - Aujourd'hui</h4>
<p>Je me forme en autodidacte avec des projets professionnels et personnels sur Internet. <br/></p>
</li>
<li>
<h4>Permis A1 | Rueil Conduite, 92500 | 2019</h4>
<p>Possibilité de conduire une moto allant jusqu'à 125cc. Un total de 21 / 27 points.</p>
</li>
<li>
<h4>Diplôme National du Brevet | La Salle Passy Buzenval, 92500 | 2018</h4>
<p>Mention très bien</p>
</li>
<li>
<h4>Formation PSC1 | La Salle Passy Buzenval, 92500 | 2015</h4>
<p>Cette formation certifie mon niveau de prévention et secours civique de niveau 1.</p>
</li>
</ul>
</div>
<div className="content-section">
<h3>Expériences professionnelles</h3>
<ul>
<li>
<h4>Prestation | Erisium SAS, Pontoise | Février 2019 - Aujourd'hui</h4>
<p>
Développement et réalisation de projets Back-End et Front-End réalisés par l’équipe GamePlay
– Maintien et mise à jour des projets en production.
</p>
</li>
<li>
<h4>Stage de découverte | Idemia, Courbevoie | Juin 2019</h4>
<p>
Découverte du secteur IT, technologie de l’information – Découverte du data-center –
Découverte de différents métiers de la société
</p>
</li>
<li>
<h4>Stage Restauration | La Salle à Manger, Boulogne | Avril 2018</h4>
<p>Nettoyage de la salle – Serveur – Prise de commandes – Accueil des clients</p>
</li>
</ul>
</div>
<div className="content-section">
<h3>Activités & Centres d'intérets</h3>
<ul>
<li>Informatique</li>
<li>Développement🧑</li>
<li>Cuisine</li>
<li>Rugby</li>
<li>Musculation</li>
<li>Moto</li>
<li>Sécurité</li>
<li>Serveurs</li>
</ul>
</div>
</div>
<div className="footer">
footer
</div>
</div>
</section>
)
}
export default Resume;

BIN
public/assets/CV.pdf Normal file
View File

Binary file not shown.

BIN
public/assets/photo-round.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

BIN
public/assets/process.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 793 KiB

BIN
public/favicon/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 125 KiB

112
public/style/components/footer.scss Normal file
View File

@@ -0,0 +1,112 @@
$spacer-color: #a0a0a0;
#footer {
color: $white;
height: 420px;
.footer-top {
height: 80%;
background-color: $black-1;
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: 25px;
}
}
h3 {
color: $spacer-color;
span {
text-decoration: underline;
&:hover {
color: $white;
}
}
@media screen and (max-width: 700px) {
font-size: 15px;
}
@media screen and (max-width: 700px) {
padding: 0 10px;
text-align: center;
}
}
.spacer {
color: $white;
padding: 20px;
font-weight: bold;
&:before, &:after {
background-color: $spacer-color;
display: inline-block;
content: "";
height: 2px;
width: 100px;
}
&:before {
transform: translate(-10px, -3px);
}
&:after {
transform: translate(10px, -3px);
}
}
h2 {
padding-bottom: 15px;
@media screen and (max-width: 700px) {
font-size: 20px;
}
}
.social-list {
display: flex;
justify-content: space-evenly;
margin: 0 auto;
width: 20%;
@media screen and (max-width: 700px) {
width: 50%;
}
}
img {
height: 40px;
transition: .2s;
&:hover {
transform: scale(1.1);
}
}
}
.footer-bottom {
height: 20%;
background-color: #0a0a0a;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
line-height: 1.2rem;
@media screen and (max-width: 700px) {
font-size: 12px;
}
span {
color: red;
}
}
}

112
components/header/header.scss → public/style/components/header.scss
View File

@@ -1,7 +1,6 @@
$cross-closed: black; $cross-closed: black;
$cross-opened: red; $cross-opened: red;
$menu-background: #111111; $menu-background: rgb(38, 38, 38);
$menu-color: white;
$hover-color: rgba(205, 205, 205, 0.3); $hover-color: rgba(205, 205, 205, 0.3);
#header { #header {
@@ -13,33 +12,41 @@ $hover-color: rgba(205, 205, 205, 0.3);
ul { ul {
list-style: none; list-style: none;
} }
/*@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
height: 80px; height: 75px;
width: 100%; width: 100%;
background-color: rgba(54, 54, 54, 0.95); background-color: rgba(49, 49, 49, 0.8);
}*/ }
.logo { .logo {
z-index: 100; z-index: 100;
position: fixed; position: fixed;
top: 5%; top: 6%;
left: 5%; left: 5%;
width: 64px; font-size: $web-h1;
height: 64px;
font-size: 24px;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
display: flex; transition: .3s;
flex-direction: column; text-align: center;
justify-content: center; line-height: 1.5rem;
@media screen and (max-width: 700px) { &:active {
top: 1%; transform: scale(0.85);
} }
.active { &:hover {
color: grey;
}
@media screen and (max-width: 700px) {
font-size: $mobile-h1;
top: 3%;
left: 4%;
&.opened {
display: none;
}
} }
} }
@@ -57,6 +64,8 @@ $hover-color: rgba(205, 205, 205, 0.3);
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
top: 1%; top: 1%;
width: 48px;
right: 5%;
} }
&:active::before, &:active::after { &:active::before, &:active::after {
@@ -71,6 +80,10 @@ $hover-color: rgba(205, 205, 205, 0.3);
height: 5px; height: 5px;
width: 100%; width: 100%;
background-color: $cross-closed; background-color: $cross-closed;
@media screen and (max-width: 700px) {
height: 3px;
}
} }
&:before { &:before {
@@ -120,50 +133,31 @@ $hover-color: rgba(205, 205, 205, 0.3);
padding: 2px 3px; padding: 2px 3px;
box-shadow: inset 0 -10px 0 $hover-color; box-shadow: inset 0 -10px 0 $hover-color;
transition: box-shadow 0.2s ease-in-out; transition: box-shadow 0.2s ease-in-out;
&:hover {
&:hover, &.active {
box-shadow: inset 0 -100px 0 $hover-color; box-shadow: inset 0 -100px 0 $hover-color;
} }
&.active {
box-shadow: inset 0 -100px 0 rgba(184, 184, 184, 0.8);
}
} }
.menu-top { .pages-link {
margin-top: 40px; margin-top: 40px;
.pages-link { transition: transform .5s;
transition: transform .6s; transform: translateY(60px);
transform: translateY(60px); .title {
.title { font-size: 22px;
font-size: 22px; font-weight: 700;
font-weight: 700;
}
li {
font-size: 20px;
padding: 7px 20px;
}
} }
li {
.contact-link { font-size: 20px;
margin-top: 40px; padding: 7px 20px;
transition: transform .7s;
transform: translateY(60px);
.title {
font-size: 20px;
font-weight: 600;
}
li {
font-size: 18px;
padding: 7px 20px;
}
} }
} }
.menu-bottom { .contact-links {
margin-top: 50px; margin-top: 50px;
transition: transform .8s; transition: transform .5s;
transform: translateY(60px); transform: translateY(80px);
border-top: solid 1px $menu-color; border-top: solid 1px $white;
ul { ul {
margin-top: 20px; margin-top: 20px;
@@ -179,9 +173,9 @@ $hover-color: rgba(205, 205, 205, 0.3);
&.opened { &.opened {
z-index: 99; z-index: 99;
height: 500px; height: 375px;
width: 350px; width: 350px;
color: $menu-color; color: $white;
background-color: $menu-background; background-color: $menu-background;
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
@@ -194,17 +188,11 @@ $hover-color: rgba(205, 205, 205, 0.3);
height: 150vh; height: 150vh;
} }
.menu-top { .pages-link {
.pages-link { transform: translateY(0);
transform: translateY(0);
}
.contact-link {
transform: translateY(0);
}
} }
.menu-bottom { .contact-links {
transform: translateY(0); transform: translateY(0);
} }
} }

113
public/style/components/pages/about.scss Normal file
View File

@@ -0,0 +1,113 @@
#about {
background-color: $white;
img {
display: block;
height: 30vh;
margin: 0 auto 10px;
}
.about-container {
margin-bottom: 60px;
h1 {
font-size: $web-h1;
@media screen and (max-width: 700px) {
font-size: $mobile-h1;
}
}
p {
text-align: justify;
line-height: $web-h1;
font-size: $web-p;
margin: 20px 0;
color: $black-3;
@media screen and (max-width: 700px) {
font-size: $mobile-p;
line-height: $mobile-h1;
}
}
&.button {
display: flex;
justify-content: center;
border-radius: 30px;
padding: 15px 20px;
background-color: $black-1;
color: $white;
transition: .3s;
&:hover {
cursor: pointer;
background-color: $black-2;
}
}
.experience-list {
list-style: none;
li {
margin-bottom: 30px;
width: 55%;
margin-left: 20px;
@media screen and (max-width: 700px) {
width: 95%;
margin: 0 0 30px;
}
h3 {
font-size: $web-h3;
@media screen and (max-width: 700px) {
font-size: $mobile-h3;
}
&:before {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50%;
content: "";
border: solid 2px $black-2;
margin-right: 7px;
}
&.actual:before {
background-color: $green-color;
}
&.not-actual:before {
background-color: grey;
}
}
h5 {
font-style: italic;
margin-bottom: 5px;
font-size: $web-h5;
@media screen and (max-width: 700px) {
font-size: $mobile-h5;
}
}
p {
font-size: $web-p;
margin: 0;
@media screen and (max-width: 700px) {
font-size: $mobile-p;
}
}
}
}
.skill {
margin-bottom: 20px;
}
}
}

40
public/style/components/pages/env.scss Normal file
View File

@@ -0,0 +1,40 @@
#env .env-container {
width: 100%;
margin-bottom: 60px;
h1 {
margin-top: 40px;
font-size: $web-h1;
@media screen and (max-width: 700px) {
font-size: $mobile-h1;
}
}
p {
margin: 20px 0;
color: $black-3;
font-size: $web-p;
@media screen and (max-width: 700px) {
font-size: $mobile-p;
}
}
ul {
margin-left: 2rem;
li {
padding: 5px 10px;
color: $black-3;
a {
color: $black-1;
font-weight: bold;
&:hover {
text-decoration: underline;
}
}
}
}
}

84
public/style/components/pages/home/about.scss Normal file
View File

@@ -0,0 +1,84 @@
#about-home {
background-color: $black-1;
width: 100%;
padding: $padding-content;
@media screen and (max-width: 700px) {
padding: $padding-content-mobile;
}
.tag{
color: $red-color;
background-color: $red-bg;
}
.about-content {
padding: $padding-container;
width: 100%;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
text-align: center;
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-self: center;
width: 60%;
@media screen and (max-width: 700px) {
width: 95%;
}
h1 {
font-size: $web-h1;
color: $white;
margin-bottom: 30px;
@media screen and (max-width: 700px) {
margin-bottom: 30px;
font-size: $mobile-h1;
}
}
p {
color: $grey;
font-size: $web-p;
@media screen and (max-width: 700px) {
font-size: $mobile-p;
}
.color {
color: $red-bg;
}
}
}
.page-button {
margin: 20px 0;
background-color: $grey;
color: $white;
border-radius: 7px;
padding: 20px 25px;
transition: .3s;
text-align: center;
font-size: $web-h3;
display: flex;
justify-content: center;
align-self: center;
@media screen and (max-width: 700px) {
padding: 10px 13px;
font-size: $mobile-h3;
}
&:hover {
cursor: pointer;
background-color: $black-2;
}
}
}
}

70
components/Home/banner/banner.scss → public/style/components/pages/home/banner.scss
View File

@@ -1,6 +1,6 @@
$title-color: #37383F; $title-color: #37383F;
#banner { #banner-home {
height: 100vh; height: 100vh;
background: url("/assets/background.png") no-repeat center; background: url("/assets/background.png") no-repeat center;
background-size: cover; background-size: cover;
@@ -30,22 +30,25 @@ $title-color: #37383F;
border-radius: 5px; border-radius: 5px;
font-weight: bold; font-weight: bold;
padding: 3px 5px; padding: 3px 5px;
background-color: #FFEED9; background-color: $orange-bg;
color: #FF9900; color: $orange-color;
animation: rainbowAnimation 60s infinite; animation: rainbowAnimation 20s infinite;
} }
} }
.role { .role {
font-size: 30px; font-size: $web-h2;
margin-top: 20px; margin-top: 20px;
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
font-size: 20px; font-size: $mobile-h3;
} text-align: center;
width: 60%;
@media screen and (max-width: 500px) { span:after {
font-size: 17px; content: "\A";
display: block;
}
} }
#spacer { #spacer {
@@ -64,50 +67,63 @@ $title-color: #37383F;
.scroller-animation { .scroller-animation {
height: 80px; height: 80px;
position: inherit;
width: 1px; width: 1px;
content: ""; content: "";
display: block; display: block;
background-color: $title-color; background-color: $black-1;
bottom: 0;
animation: scrollAnimation 1.5s infinite ease;
} }
p { p {
padding: 4px; padding: 10px;
transform: translateY(-50px);
} }
} }
} }
} }
@keyframes scrollAnimation {
from {
height: 80px;
}
to {
height: 0px;
}
}
@keyframes rainbowAnimation { @keyframes rainbowAnimation {
0% { 0% {
background-color: #FFEED9; background-color: $orange-bg;
color: #FF9900; color: $orange-color;
} }
16% { 16% {
background-color: #fff6d9; background-color: $yellow-bg;
color: #ffe600; color: $yellow-color;
} }
32% { 32% {
background-color: #e0ffd9; background-color: $green-bg;
color: #59ff00; color: $green-color;
} }
48% { 48% {
background-color: #d9fcff; background-color: $cyan-bg;
color: #00d9ff; color: $cyan-color;
} }
64% { 64% {
background-color: #e4d9ff; background-color: $purple-bg;
color: #6a00ff; color: $purple-color;
} }
72% { 72% {
background-color: #fcd9ff; background-color: $pink-bg;
color: #ff00f2; color: $pink-color;
} }
88% { 88% {
background-color: #ffd9d9; background-color: $red-bg;
color: #ff0000; color: $red-color;
} }
100% { 100% {
background-color: #FFEED9; background-color: $orange-bg;
color: #FF9900; color: $orange-color;
} }
} }

138
public/style/components/pages/home/contact.scss Normal file
View File

@@ -0,0 +1,138 @@
#contact {
width: 100%;
background-color: $white;
color: $black-2;
padding: $padding-content;
@media screen and (max-width: 700px) {
padding: $padding-content-mobile;
}
.tag {
color: $orange-color;
background-color: $orange-bg;
}
.contact-container {
padding: $padding-container;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.title {
text-align: center;
h1 {
margin-bottom: 10px;
font-size: $web-h1;
@media screen and (max-width: 700px) {
font-size: $mobile-h1;
}
}
p {
font-size: $web-p;
font-style: italic;
margin-bottom: 30px;
@media screen and (max-width: 700px) {
font-size: $mobile-p;
}
}
}
form {
width: 50%;
background: transparent;
box-shadow: none;
@media screen and (max-width: 700px) {
width: 90%;
}
label {
color: #ffb460;
font-size: .9rem;
padding: 5px 0;
}
.form-top {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
@media screen and (max-width: 700px) {
flex-direction: column;
}
input {
border: 0;
border-bottom: 1px solid $orange-color;
font-size: $web-h5;
}
.left {
display: flex;
flex-direction: column;
width: 40%;
float: left;
@media screen and (max-width: 700px) {
width: 100%;
margin-bottom: 5px;
}
}
.right {
display: flex;
flex-direction: column;
width: 40%;
float: right;
@media screen and (max-width: 700px) {
width: 100%;
}
}
}
.form-bottom {
display: flex;
flex-direction: column;
margin-bottom: 30px;
textarea {
font-size: $web-h5;
resize: none;
border: 0;
border-bottom: 1px solid $orange-color;
color: $orange-color;
@media screen and (max-width: 700px) {
height: 9em;
}
}
}
.form-submit {
display: flex;
justify-content: center;
.button {
padding: 20px 15px;
background-color: $white;
color: #FF9900;
border: 1px solid $orange-color;
transition: .2s;
&:hover {
background-color: $orange-color;
color: $white;
cursor: pointer;
}
}
}
}
}
}

93
public/style/components/pages/home/passions.scss Normal file
View File

@@ -0,0 +1,93 @@
#passions-home {
width: 100%;
background-color: $white;
color: $black-2;
padding: $padding-content;
@media screen and (max-width: 700px) {
padding: $padding-content-mobile;
}
.tag {
color: $cyan-color;
background-color: $cyan-bg;
}
.passions-container {
padding: $padding-container;
width: 100%;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
@media screen and (max-width: 700px) {
padding: 10px;
text-align: center;
}
.passions-top {
margin-bottom: 30px;
@media screen and (max-width: 700px) {
margin-bottom: 0;
}
}
.passions-top, .passions-bottom {
display: flex;
@media screen and (max-width: 700px) {
padding: 10px;
flex-direction: column;
}
}
.passion {
width: 65%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 5%;
letter-spacing: 1px;
@media screen and (max-width: 700px) {
width: 100%;
padding: 20px;
}
.color {
color: #d9fcff;
}
h1 {
text-align: center;
font-size: $web-h1;
margin-bottom: 20px;
@media screen and (max-width: 700px) {
font-size: $mobile-h1;
}
&:after {
margin: 7px auto;
width: 40px;
height: 2px;
display: block;
content: "";
background-color: $cyan-color;
}
}
p {
font-size: $web-p;
text-align: justify;
@media screen and (max-width: 700px) {
font-size: $mobile-p;
}
}
}
}
}

99
public/style/components/pages/home/process.scss Normal file
View File

@@ -0,0 +1,99 @@
#process-home {
width: 100%;
background-color: $black-1;
color: $grey;
padding: $padding-content;
@media screen and (max-width: 700px) {
padding: $padding-content-mobile;
}
.tag {
color: $pink-color;
background-color: $pink-bg;
}
.process-container {
padding: $padding-container;
width: 100%;
display: flex;
justify-content: center;
@media screen and (max-width: 700px) {
padding: 10px;
flex-direction: column;
text-align: center;
margin-top: 50px;
}
.process-left, .process-right {
display: flex;
flex-direction: column;
justify-content: center;
}
.process-left {
border-right: 1px solid $white;
@media screen and (max-width: 700px) {
border: 0;
}
}
.process-right {
border-left: 1px solid $white;
@media screen and (max-width: 700px) {
border: 0;
}
}
.processus {
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
align-self: center;
padding-bottom: 30px;
margin-bottom: 30px;
@media screen and (max-width: 700px) {
width: 95%;
}
.color {
color: $pink-bg;
}
h1 {
color: $white;
font-size: $web-h1;
align-self: center;
@media screen and (max-width: 700px) {
font-size: $mobile-h1;
}
&:after {
margin: 7px auto;
width: 40px;
height: 2px;
display: block;
content: "";
background-color: $pink-color;
}
}
p {
text-align: center;
align-self: center;
font-size: $web-p;
@media screen and (max-width: 700px) {
font-size: $mobile-p;
}
}
}
}
}

19
components/Home/tag/tag.scss → public/style/components/pages/home/tag.scss
View File

@@ -1,32 +1,31 @@
.tag { .tag {
border-radius: 5px; border-radius: 5px;
display: inline-block; display: block;
position: relative;
top: 5rem;
padding: 5px 7px; padding: 5px 7px;
font-weight: 900; font-weight: 900;
font-size: 130%; font-size: $web-h2;
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
font-size: 1rem; font-size: $mobile-h4;
top: 3rem
} }
&.left { &.left {
left: 9%;
float: left; float: left;
margin-left: 7rem;
transform: rotate(-20deg);
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
left: 5%; margin-left: 1rem;
} }
} }
&.right { &.right {
right: 9%;
float: right; float: right;
margin-right: 7rem;
transform: rotate(20deg);
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
right: 5%; margin-right: 1rem;
} }
} }
} }

104
public/style/components/pages/resume.scss Normal file
View File

@@ -0,0 +1,104 @@
$name: 5rem;
$title: 1.6rem;
$orange: #ffcda1;
#resume {
margin: 5%;
display: grid;
grid-template-areas:
"sb content";
grid-template-rows: 1fr;
grid-template-columns: 1fr 4fr;
padding: 5% 2%;
background-color: rgb(222, 255, 254);
.sidebar {
grid-area: sb;
width: 100%;
h1 {
font-size: $web-h3;
}
.links, .tech, .others, .languages {
margin-bottom: 15px;
}
.links {
li {
line-height: 1.5;
}
a {
box-shadow: inset 0 -5px 0 $orange;
&:hover {
box-shadow: inset 0 -100px 0 $orange;
}
}
ul {
list-style: none;
}
}
ul {
list-style: square inside;
margin-left: 15px;
li {
font-size: $web-p;
color: $black-2;
}
}
}
.container {
grid-area: content;
width: 100%;
.header {
&:after {
content: "";
display: block;
height: 1px;
background-color: $black-1;
}
h1 {
color: $cyan-color;
font-size: $name;
line-height: 1;
margin-bottom: 20px;
}
h2 {
font-size: $title;
line-height: 1;
margin-bottom: 40px;
}
p {
color: $black-2;
width: 75%;
font-size: 1.2rem;
line-height: 1;
margin-bottom: 20px;
text-align: justify;
}
}
.content {
.content-section {
padding: 20px 0;
h3 {
padding: 15px 0;
color: $cyan-color;
font-size: $title;
}
}
}
}
}

17
public/style/components/pages/skills.scss Normal file
View File

@@ -0,0 +1,17 @@
.skill-list {
list-style: none;
display: flex;
flex-wrap: wrap;
li {
margin: 5px;
padding: 7px 10px;
background-color: $black-1;
color: $white;
border-radius: 7px;
@media screen and (max-width: 700px) {
padding: 3px 5px;
}
}
}

100
public/style/components/template.scss Normal file
View File

@@ -0,0 +1,100 @@
#template {
display: grid;
grid-template-areas:
"left top right"
"left content right"
"left bottom right";
grid-template-columns: 20% 3fr 20%;
grid-template-rows: 1fr;
@media screen and (max-width: 700px) {
grid-template-columns: 1fr 95% 1fr;
grid-template-rows: 1fr;
}
.spacer:first-child {
grid-area: top;
height: 20vh;
width: 100%;
@media screen and (max-width: 700px) {
height: 15vh;
}
}
.spacer:last-child {
grid-area: bottom;
height: 100px;
width: 100%;
@media screen and (max-width: 700px) {
height: 20px
}
}
.column:first-child {
grid-area: left;
@media screen and (max-width: 700px) {
display: none;
}
}
.column:last-child {
grid-area: left;
@media screen and (max-width: 700px) {
display: none;
}
}
.template-container {
grid-area: content;
margin-bottom: 50px;
border-bottom: 1px solid $black-1;
@media screen and (max-width: 700px) {
padding: 0;
}
.template-title {
margin-bottom: 100px;
@media screen and (max-width: 700px) {
margin-bottom: 30px;
}
.question{
color: #4a5568;
font-style: italic;
}
.title {
width: 40%;
margin-top: 4px;
font-size: $web-h1;
font-weight: bold;
letter-spacing: 3px;
@media screen and (max-width: 700px) {
font-size: $mobile-h1;
width: 80%;
}
}
.description {
margin-top: 20px;
color: #4a5568;
width: 75%;
line-height: 1.5rem;
text-align: justify;
font-size: $web-p;
@media screen and (max-width: 700px) {
font-size: $mobile-p;
width: 100%;
}
}
}
}
}

47
public/style/constant.scss Normal file
View File

@@ -0,0 +1,47 @@
$web-h1: 2em;
$web-h2: 1.5em;
$web-h3: 1.17em;
$web-h4: 1em;
$web-h5: .83em;
$web-p: 1em;
$mobile-h1: 25px;
$mobile-h2: 23px;
$mobile-h3: 21px;
$mobile-h4: 16px;
$mobile-h5: 14px;
$mobile-p: 16px;
$padding-content: 40px;
$padding-content-mobile: 40px 0;
$padding-container: 40px 5px;
$black-1: #1c1c1c;
$black-2: #353535;
$black-3: #4a5568;
$grey: rgba(255, 255, 255, 0.3);
$white: #fff;
$red-bg: #ffaaaa;
$red-color: red;
$orange-bg: #ffdfac;
$orange-color: orange;
$yellow-bg: #ffffc0;
$yellow-color: #ffe600;
$green-bg: #cdffc4;
$green-color: #59ff00;
$cyan-bg: #d9fcff;
$cyan-color: #00d9ff;
$purple-bg: #e4d9ff;
$purple-color: #6a00ff;
$pink-bg: #fcd9ff;
$pink-color: #ff00f2;

34
public/style/style.scss
View File

@@ -1,4 +1,22 @@
@import url("https://fonts.googleapis.com/css?family=Raleway&display=swap"); @import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");
@import "./constant";
@import "components/pages/home/tag";
@import "components/header";
@import "components/footer";
@import "components/template";
@import "components/pages/skills";
@import 'components/pages/about';
@import 'components/pages/env';
@import 'components/pages/resume';
@import "components/pages/home/about";
@import "components/pages/home/process";
@import "components/pages/home/contact";
@import "components/pages/home/banner";
@import "components/pages/home/passions";
* { * {
font-family: "Raleway", sans-serif; font-family: "Raleway", sans-serif;
@@ -12,22 +30,6 @@
} }
} }
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: white;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
a { a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;

1280
yarn.lock
View File

File diff suppressed because it is too large Load Diff