Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 1f80dde2 authored by Martin Déclert's avatar Martin Déclert
Browse files

Passage des vues sur ejs et du style sur sass

parent 170420e0
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 523 additions and 158 deletions
Dockerfile
+ 1
− 0
View file @ 1f80dde2
......@@ -17,6 +17,7 @@ RUN apt install -y git vim curl wget software-properties-common unzip tar
RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -
RUN apt install -y nodejs
RUN npm install -g sass
RUN useradd -G www-data,root -u $uid -d /home/$user $user
RUN mkdir -p /home/${user} && chown -R ${user}:${user} /home/${user}
......
package-lock.json
+ 70
− 0
View file @ 1f80dde2
......@@ -78,6 +78,11 @@
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
"integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
},
"async": {
"version": "0.9.2",
"resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
"integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0="
},
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
......@@ -351,6 +356,14 @@
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
},
"ejs": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.5.tgz",
"integrity": "sha512-dldq3ZfFtgVTJMLjOe+/3sROTzALlL9E34V4/sDtUd/KlBSS0s6U1/+WPE1B4sj9CXHJpL1M6rhNJnc9Wbal9w==",
"requires": {
"jake": "^10.6.1"
}
},
"emoji-regex": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
......@@ -379,6 +392,11 @@
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
},
"escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
},
"etag": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
......@@ -421,6 +439,14 @@
"vary": "~1.1.2"
}
},
"filelist": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.1.tgz",
"integrity": "sha512-8zSK6Nu0DQIC08mUC46sWGXi+q3GGpKydAG36k+JDba6VRpkevvOWUW5a/PhShij4+vHT9M+ghgG7eM+a9JDUQ==",
"requires": {
"minimatch": "^3.0.4"
}
},
"fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
......@@ -644,6 +670,50 @@
"resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
"integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw=="
},
"jake": {
"version": "10.8.2",
"resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz",
"integrity": "sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==",
"requires": {
"async": "0.9.x",
"chalk": "^2.4.2",
"filelist": "^1.0.1",
"minimatch": "^3.0.4"
},
"dependencies": {
"ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"requires": {
"color-convert": "^1.9.0"
}
},
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
}
},
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"requires": {
"color-name": "1.1.3"
}
},
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
}
}
},
"json-buffer": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
......
package.json
+ 1
− 0
View file @ 1f80dde2
......@@ -19,6 +19,7 @@
"homepage": "https://github.com/MartDec/MartDec.github.io#readme",
"dependencies": {
"dotenv": "^8.2.0",
"ejs": "^3.1.5",
"express": "^4.17.1",
"nodemon": "^2.0.4",
"path": "^0.12.7"
......
router.js
+ 1
− 1
View file @ 1f80dde2
......@@ -5,7 +5,7 @@ class Router {
home () {
this.router.get('/', async (req, res) => {
return res.sendFile('views/index.html')
return res.render('views/base', {template: 'home'})
})
}
......
server.js
+ 3
− 2
View file @ 1f80dde2
......@@ -14,8 +14,9 @@ class Server {
init () {
this.server.use(express.static('www'))
this.server.set('views', __dirname + '/www/views')
this.server.use(express.static(path.join(__dirname, 'www/views')))
this.server.set('view engine', 'ejs');
this.server.set('views', __dirname + '/www')
this.server.use(express.static(path.join(__dirname, 'www')))
this.server.use('/', this.router.listen())
......
www/skin/css/main.css 0 → 100644
+ 148
− 0
View file @ 1f80dde2
@import url("https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Oxygen+Mono&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: normal;
font-family: "Oxygen Mono";
color: #202020;
}
.white {
color: #EBEBEB;
}
body {
width: 100%;
}
h1, h2, h3 {
font-family: "Hammersmith One";
}
header, section {
max-width: 1200px;
margin: 0 auto;
}
section {
max-width: 988px;
}
section h3 {
font-size: 2rem;
}
header {
position: relative;
margin-top: 2rem;
margin-bottom: 12rem;
height: 686px;
}
.home-page header .flex-wrapper {
display: grid;
grid-template-columns: 101px 9fr;
column-gap: 1rem;
height: 100%;
}
.home-page header .flex-wrapper .content {
width: calc(100% - (111px));
height: calc(100% - 3rem);
background: url("/assets/backgrounds/primary-bg.jpg");
}
.home-page header .flex-wrapper .content .links {
display: flex;
justify-content: center;
margin-top: 8%;
}
.home-page header .flex-wrapper .content .links img {
width: 2rem;
}
.home-page header .flex-wrapper .content .links .separator {
width: 7rem;
height: 1px;
background: #EBEBEB;
margin: 0 2rem;
align-self: center;
}
.home-page header h1 {
margin-bottom: 1rem;
letter-spacing: 10px;
font-size: 2.5rem;
}
.home-page header h2 {
padding-top: 15%;
}
.home-page header h2 span {
display: block;
text-align: center;
}
.home-page header > img {
position: absolute;
bottom: -7rem;
right: 0;
}
.home-page header nav {
position: absolute;
right: calc(111px);
bottom: -3rem;
}
.home-page header nav a {
text-decoration: none;
}
.home-page header nav a:not(:last-child) {
margin-right: 2rem;
}
.home-page header nav a.current {
text-decoration: underline;
}
.home-page .hello-section {
background-image: url("/assets/backgrounds/hello-world-bg.jpg");
background-repeat: no-repeat;
background-position: right;
}
.home-page .hello-section .content {
width: 700px;
margin-top: 1.5rem;
}
.home-page .hello-section .content .paragraph:last-child {
margin-top: 1rem;
}
.home-page .skills-section {
height: 346px;
margin-top: 4rem;
background-image: url("/assets/backgrounds/skills-bg.jpg");
background-repeat: no-repeat;
background-position: 0 18px;
}
.home-page .skills-section .content {
width: 100%;
display: flex;
justify-content: space-around;
}
.home-page .skills-section .content .skill {
width: 22%;
border: solid 1px black;
border-radius: 5px;
padding: 1rem;
}
.home-page .skills-section .content .skill .title {
text-align: center;
}
.home-page .skills-section .content .skill .title h4 {
font-family: "Hammersmith One";
color: #0A5797;
}
.home-page .skills-section .content .skill .description li {
list-style-type: none;
text-align: center;
margin-top: 1rem;
}
.home-page footer {
margin-top: 4rem;
background: #202020;
text-align: center;
padding: 2rem;
}
/*# sourceMappingURL=main.css.map */
www/skin/css/main.css.map 0 → 100644
+ 1
− 0
View file @ 1f80dde2
{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/atoms/home.scss"],"names":[],"mappings":"AAAQ;AAER;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;;;AAIR;EACI;EACA;EACA;EACA;;;ACrCI;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAMhB;EACI;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;;AAMhB;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;;AAMhB;EACI;EACA;EACA;EACA","file":"main.css"}
\ No newline at end of file
www/skin/scss/atoms/home.scss 0 → 100644
+ 132
− 0
View file @ 1f80dde2
.home-page {
header {
.flex-wrapper {
display: grid;
grid-template-columns: 101px 9fr;
column-gap: 1rem;
height: 100%;
.content {
width: calc(100% - (111px));
height: calc(100% - 3rem);
background: url('/assets/backgrounds/primary-bg.jpg');
.links {
display: flex;
justify-content: center;
margin-top: 8%;
img {
width: 2rem;
}
.separator {
width: 7rem;
height: 1px;
background: #EBEBEB;
margin: 0 2rem;
align-self: center;
}
}
}
}
h1 {
margin-bottom: 1rem;
letter-spacing: 10px;
font-size: 2.5rem;
}
h2 {
padding-top: 15%;
span {
display: block;
text-align: center;
}
}
& > img {
position: absolute;
bottom: -7rem;
right: 0;
}
nav {
position: absolute;
right: calc(111px);
bottom: -3rem;
a {
text-decoration: none;
&:not(:last-child) {
margin-right: 2rem;
}
&.current {
text-decoration: underline;
}
}
}
}
.hello-section {
background-image: url('/assets/backgrounds/hello-world-bg.jpg');
background-repeat: no-repeat;
background-position: right;
.content {
width: 700px;
margin-top: 1.5rem;
.paragraph:last-child {
margin-top: 1rem;
}
}
}
.skills-section {
height: 346px;
margin-top: 4rem;
background-image: url('/assets/backgrounds/skills-bg.jpg');
background-repeat: no-repeat;
background-position: 0 18px;
.content {
width: 100%;
display: flex;
justify-content: space-around;
.skill {
width: 22%;
border: solid 1px black;
border-radius: 5px;
padding: 1rem;
.title {
text-align: center;
h4 {
font-family: 'Hammersmith One';
color: #0A5797;
}
}
.description li {
list-style-type: none;
text-align: center;
margin-top: 1rem;
}
}
}
}
footer {
margin-top: 4rem;
background: #202020;
text-align: center;
padding: 2rem;
}
}
\ No newline at end of file
www/skin/scss/main.scss 0 → 100644
+ 44
− 0
View file @ 1f80dde2
@import url('https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Oxygen+Mono&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: normal;
font-family: 'Oxygen Mono';
color: #202020;
}
.white {
color: #EBEBEB;
}
body {
width: 100%;
}
h1, h2, h3 {
font-family: 'Hammersmith One';
}
header, section {
max-width: 1200px;
margin: 0 auto;
}
section {
max-width: 988px;
h3 {
font-size: 2rem;
}
}
header {
position: relative;
margin-top: 2rem;
margin-bottom: 12rem;
height: 686px;
}
@import 'atoms/home';
\ No newline at end of file
www/style/style.css deleted 100644 → 0
+ 0
− 154
View file @ 170420e0
@import url('https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Oxygen+Mono&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: normal;
font-family: 'Oxygen Mono';
color: #202020;
}
.white {
color: #EBEBEB;
}
body {
width: 100%;
}
h1, h2, h3 {
font-family: 'Hammersmith One';
}
header, section {
max-width: 1200px;
margin: 0 auto;
}
section {
max-width: 988px;
}
header {
position: relative;
margin-top: 2rem;
margin-bottom: 12rem;
height: 686px;
}
header .flex-wrapper {
display: grid;
grid-template-columns: 101px 9fr;
column-gap: 1rem;
height: 100%;
}
header h1 {
margin-bottom: 1rem;
letter-spacing: 10px;
font-size: 2.5rem;
}
header h2 {
padding-top: 15%;
}
header h2 span {
display: block;
text-align: center;
}
header .flex-wrapper .content {
width: calc(100% - (111px));
height: calc(100% - 3rem);
background: url('/assets/backgrounds/primary-bg.jpg');
}
header .flex-wrapper .content .links {
display: flex;
justify-content: center;
margin-top: 8%;
}
header .flex-wrapper .content .links img {
width: 2rem;
}
header .flex-wrapper .content .links .separator {
width: 7rem;
height: 1px;
background: #EBEBEB;
margin: 0 2rem;
align-self: center;
}
header > img {
position: absolute;
bottom: -7rem;
right: 0;
}
header nav {
position: absolute;
right: calc(111px);
bottom: -3rem;
}
header nav a:not(:last-child) {
margin-right: 2rem;
}
section h3 {
font-size: 2rem;
}
.hello-section {
background-image: url('/assets/backgrounds/hello-world-bg.jpg');
background-repeat: no-repeat;
background-position: right;
}
section .content {
width: 700px;
margin-top: 1.5rem;
}
section .content .paragraph:last-child {
margin-top: 1rem;
}
.skills-section {
height: 346px;
margin-top: 4rem;
background-image: url('/assets/backgrounds/skills-bg.jpg');
background-repeat: no-repeat;
background-position: 0 18px;
}
.skills-section .content {
width: 100%;
display: flex;
justify-content: space-around;
}
.skills-section .content .skill {
width: 22%;
border: solid 1px black;
border-radius: 5px;
padding: 1rem;
}
.skills-section .content .skill .title {
text-align: center;
}
.skills-section .content .skill .title h4 {
font-family: 'Hammersmith One';
}
.skills-section .content .skill .description li {
list-style-type: none;
text-align: center;
margin-top: 1rem;
}
\ No newline at end of file
www/views/base.ejs 0 → 100644
+ 15
− 0
View file @ 1f80dde2
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Martin Déclert - Développeur web Back-end</title>
<link rel="stylesheet" href="skin/css/main.css">
</head>
<body class="<%- template %>-page">
<%- include('pages/' + template) -%>
</body>
</html>
\ No newline at end of file
www/views/index.html
+ 1
− 1
View file @ 1f80dde2
......@@ -35,7 +35,7 @@
</div>
<img src="assets/icons/secondary-logo.svg" alt="">
<nav>
<a href="#home" class="selected">home</a>
<a href="#home" class="selected current">home</a>
<a href="#projects">projects</a>
<a href="#resume">resume</a>
<a href="#contact">contact</a>
......
www/views/pages/home.ejs 0 → 100644
+ 106
− 0
View file @ 1f80dde2
<header>
<div class="flex-wrapper">
<div class="left">
<img src="assets/icons/logo.svg" alt="DEC logo">
</div>
<div class="right">
<h1>Martin Déclert</h1>
<div class="content">
<h2>
<span class="white">Développement Web Back-end</span>
<span class="white">PHP - Node.js</span>
</h2>
<div class="links">
<a href="#gitlab">
<img src="assets/icons/gitlab.svg" alt="gitlab">
</a>
<span class="separator"></span>
<a href="#linkedin">
<img src="assets/icons/linkedin.svg" alt="linkedin">
</a>
</div>
</div>
</div>
</div>
<img src="assets/icons/secondary-logo.svg" alt="">
<nav>
<a href="#home" class="selected current">home</a>
<a href="#projects">projects</a>
<a href="#resume">resume</a>
<a href="#contact">contact</a>
</nav>
</header>
<section class="hello-section">
<h3>Hello World!</h3>
<div class="content">
<div class="paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat porta justo, in aliquam justo
viverra vel.
In hac habitasse platea dictumst. Etiam et purus libero. Curabitur eget metus ex. Orci varius natoque
penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Sed porta, nisl tincidunt lacinia egestas, massa
nunc tincidunt
libero, et dignissim neque neque ac metus.
</div>
<div class="paragraph">
Suspendisse potenti. Curabitur at elit sit amet augue suscipit vehicula.
Mauris vitae vulputate neque. Aenean nec venenatis lacus. Aliquam tempus augue non augue aliquam tempus.
Etiam fermentum
felis sit amet nulla scelerisque, ut fermentum nulla semper.
</div>
</div>
</section>
<section class="skills-section">
<h3>Skills</h3>
<div class="content">
<div class="skill">
<div class="title">
<img src="assets/icons/html.svg" alt="HTML">
<h4>HTML/CSS</h4>
</div>
<ul class="description">
<li>Intégration web</li>
<li>SEO</li>
</ul>
</div>
<div class="skill">
<div class="title">
<img src="assets/icons/javascript.svg" alt="JavaScript">
<h4>JavaScript</h4>
</div>
<ul class="description">
<li>développement front-end</li>
<li>Vanilla - jQuery</li>
</ul>
</div>
<div class="skill">
<div class="title">
<img src="assets/icons/backend.svg" alt="Back-end">
<h4>Back-end</h4>
</div>
<ul class="description">
<li>
<span>PHP</span><br>
<span>Magento 1.9 / Laravel</span>
</li>
<li>
<span>Node.js</span><br>
<span>Express / Adonis</span>
</li>
</ul>
</div>
<div class="skill">
<div class="title">
<img src="assets/icons/administration.svg" alt="Administration">
<h4>Administration</h4>
</div>
<ul class="description">
<li>Linux Git Docker</li>
<li>Apache2 NGINX</li>
</ul>
</div>
</div>
</section>
<footer>
<span class="white">Copyright - Martin Déclert - 2020</span>
</footer>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service