Possibly finished about page

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",

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",

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

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; }

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
+

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;

views/about.pug

@@ -21,7 +21,48 @@ block nav-links
             span Contact
 
 block content
-    .container-fluid
+    .container
-        .row
+        .about-pos
-            .col(style="padding-right: 10px;padding-left: 10px;")
+            .row
-                p In development
+                .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}