From dd37e2e22c1d7d9a34990e33cbb74c83ca3c6dd3 Mon Sep 17 00:00:00 2001 From: Esther Date: Sat, 27 Jun 2020 17:46:21 +0100 Subject: [PATCH] Possibly finished about page --- package-lock.json | 31 ++++++++++++++++++++++ package.json | 1 + pastel-codes.service | 1 + public/stylesheets/style.css | 35 +++++++++++++++++++++++-- public/stylesheets/style.sass | 43 ++++++++++++++++++++++++++---- routes/about.js | 21 ++++++++++++++- views/about.pug | 49 ++++++++++++++++++++++++++++++++--- 7 files changed, 169 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 07d51b7..2955e15 100644 --- a/package-lock.json +++ b/package-lock.json @@ -156,6 +156,14 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz", "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==" }, + "axios": { + "version": "0.19.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz", + "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==", + "requires": { + "follow-redirects": "1.5.10" + } + }, "babel-walk": { "version": "3.0.0-canary-5", "resolved": "https://registry.npmjs.org/babel-walk/-/babel-walk-3.0.0-canary-5.tgz", @@ -699,6 +707,29 @@ "resolved": "https://registry.npmjs.org/fn.name/-/fn.name-1.1.0.tgz", "integrity": "sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==" }, + "follow-redirects": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "requires": { + "debug": "=3.1.0" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + } + } + }, "forever-agent": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz", diff --git a/package.json b/package.json index e49a58d..7ec59ce 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ }, "dependencies": { "app-root-path": "^3.0.0", + "axios": "^0.19.2", "cookie-parser": "1.4.4", "debug": "4.1.1", "express": "4.17.1", diff --git a/pastel-codes.service b/pastel-codes.service index 01a6865..e75967e 100644 --- a/pastel-codes.service +++ b/pastel-codes.service @@ -6,6 +6,7 @@ After=network.target [Service] Environment=PORT=7000 Environment=NODE_ENV=production +Environment=GHOST_KEY=key StandardOutput=syslog SyslogIdentifier=pastel-codes User=web diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index d196c34..6ad8ad1 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -120,6 +120,33 @@ footer { .logo-container { cursor: pointer; } +.about-pos p { + font-size: 3vh; + margin-bottom: 3vh; } + +.pr { + margin-bottom: 3vh; + margin-top: 1vh; } + .pr img { + width: 100%; + border: 2vh solid #CC7A98; } + +.pr-text a { + color: #CC7A98; } + .pr-text a h1 { + font-size: 4vh; + margin-bottom: 0; + padding-bottom: 0; } + +.pr-text a:hover { + color: #CDE7B0; } + +.pr-text p { + font-size: 3vh; } + +.start { + margin-top: 3vh; } + .ham { width: 30px; height: 20px; @@ -164,7 +191,7 @@ footer { .ham.open span:nth-child(1) { top: 11px; - width: 0%; + width: 0; left: 50%; } .ham.open span:nth-child(2) { @@ -179,11 +206,15 @@ footer { -o-transform: rotate(-45deg); transform: rotate(-45deg); } -.ham.open span:nth-child(4)none { +.ham.open span:nth-child(4) { top: 11px; width: 0; left: 50%; } +@media only screen and (max-height: 421px) { + .pr-text { + margin-bottom: 5vh !important; } } + @media only screen and (max-width: 575px) { .logo { height: 5rem; } diff --git a/public/stylesheets/style.sass b/public/stylesheets/style.sass index 585d434..bdb67bf 100644 --- a/public/stylesheets/style.sass +++ b/public/stylesheets/style.sass @@ -23,14 +23,14 @@ body color: $pink h1 - font-family: "Gilroy" + font-family: "Gilroy", sans-serif h2 font-weight: bold - font-family: "Apercu Mono" + font-family: "Apercu Mono", monospace p - font-family: "Apercu Mono" + font-family: "Apercu Mono", monospace a:hover color: $green @@ -47,7 +47,7 @@ header a span font-size: 2rem - font-family: 'Titling Gothic FB' + font-family: 'Titling Gothic FB', sans-serif color: $pink #navbarSupportedContent23 @@ -61,7 +61,7 @@ header span transition: 0.2s color: $black - font-family: "Apercu Mono" + font-family: "Apercu Mono", monospace li:hover background-color: $black @@ -137,6 +137,35 @@ footer .logo-container cursor: pointer +.about-pos + p + font-size: 3vh + margin-bottom: 3vh + +.pr + img + width: 100% + border: 2vh solid $pink + margin-bottom: 3vh + margin-top: 1vh + + +.pr-text + a + color: $pink + h1 + + font-size: 4vh + margin-bottom: 0 + padding-bottom: 0 + a:hover + color: $green + p + font-size: 3vh + +.start + margin-top: 3vh + // Nav stuff .ham @@ -203,6 +232,9 @@ footer width: 0 left: 50% +@media only screen and (max-height: 421px) + .pr-text + margin-bottom: 5vh !important @media only screen and (max-width: 575px) .logo @@ -224,3 +256,4 @@ footer .ef max-height: none !important min-height: 0 !important + diff --git a/routes/about.js b/routes/about.js index 8cb7fb0..4a7222d 100644 --- a/routes/about.js +++ b/routes/about.js @@ -1,9 +1,28 @@ var express = require('express'); +const axios = require('axios'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res, next) { - res.render('about', { title: 'About', description: "Who??? What??? AAAAaaa, about me." }); + const ghost_key = process.env.GHOST_KEY + const base_url = `https://blog.pastel.codes/ghost/api/v3/content/posts/?key=${ghost_key}` + + axios.all([ + axios.get(`${base_url}&limit=3`), + axios.get(`${base_url}&limit=3&filter=tag:Project`), + ]) + .then(axios.spread((response1, response2) => { + var base = { title: 'About', description: 'Who??? What??? AAAAaaa, about me.'}; + var blog = JSON.parse(JSON.stringify(response1.data).split('"posts":').join('"blog":')); + var projects = JSON.parse(JSON.stringify(response2.data).split('"posts":').join('"project":')); + var out = Object.assign(base, blog, projects); + + res.render('about', out); + })) + .catch(error => { + console.log(error); + }); + // https://blog.pastel.codes/ghost/api/v3/content/posts/?key= }); module.exports = router; diff --git a/views/about.pug b/views/about.pug index 8bf095d..b084a90 100644 --- a/views/about.pug +++ b/views/about.pug @@ -21,7 +21,48 @@ block nav-links span Contact block content - .container-fluid - .row - .col(style="padding-right: 10px;padding-left: 10px;") - p In development \ No newline at end of file + .container + .about-pos + .row + .col + h1 + span Hello. + p I’m Esther, a 19 year old student in 2nd year of university, who studies computer science & artificial intelligence. + p In my free time, I create small projects to learn new skills and for them to function well for others to use; additionally, I do some graphic design / art as a hobby but has helped me create catching designs. + p I focus on developing secure, well designed, efficient programs. + .row + .col.start + h1 + span Projects. + .row + + each val in project + .col + .pr + a(href=val.url) + if val.feature_image + img(src=val.feature_image) + else + img(src="/images/logo.png") + .pr-text + a(href=val.url) + h1 #{val.title} + p #{val.excerpt} + + .row + .col.start + h1 + span Blog. + .row + each val in blog + .col + .pr + a(href=val.url) + if val.feature_image + img(src=val.feature_image) + else + img(src="/images/logo.png") + .pr-text + a(href=val.url) + h1 #{val.title} + p #{val.excerpt} \ No newline at end of file