>> ABOUT THIS SITE <<

This site is built using Node and Express and hosted on Heroku. As well as providing a portfolio of my projects online, it also serves as a playground for utilizing different JavaScript code on the front and backend.

Current dependencies for this site, updated @ 8:47 am

axios body-parser compression dotenv ejs express express-minify highlight.js moment node-mailer pretty-print-json

Main Code Features

• JSON Data Storage
New projects are added to the portfolio through a JSON config file. This includes a number of parameters used in frontend HTML generation. For example, a project config object looks like this:
                        
                        
  "name": "TextBench",
  "imagePath": "../assets/img/textbench.png",
  "caption": "A text animation/kinetic typography playground built with p5.js",
  "url": "https://textbench.netlify.app/",
  "repo": "https://github.com/burstMembrane/typewarp",
  "languages": [
    "p5.js",
    "PostCSS",
    "Webpack",
    "Node"
  ],
  "show": "true"

                        
                    
These parameters are then used by a front-end embed script to generate the HTML for each project.
                            
function makeProject (item) {
// generate div id from project name
    const divId = item.name.split(" ")[0].toLowerCase();

// .card padded border > projectbuttons > expandproject
return `<div class="card padded border" id="${divId}">
    <div class="projectbuttons">
        <a title="Expand" class="expand" href="#${divId}">/a>
        <a title="Demo" class="" target="_blank" href="${item.url}"></a>
        <a title="GitHub" class="" target="_blank" href="${item.repo}"></i></a>
    </div>
    <h2 class="centered"> ${item.name} </h2>
    <hr>
    ${embed(item)}
    <p class="small">${item.caption} </p>
    <p class="tags">${item.languages.join(", ")}</p>
</div>`;
} 
                            
                        
This allows me to flexibly add and remove projects from the projects page using templating and dynamic scripting.
• Random Colour Palette Generation
On each page load, a random CSS colour palette is generated and updated using a Colour class object.

class Colour {
    constructor() {
        this.min = 0;
        this.max = 35;
        this.r = this.randRange(this.min, this.max);
        this.g = this.randRange(this.min, this.max);
        this.b = this.randRange(this.min, this.max);
    }
    randRange() {
        return Math.floor(Math.random() * (this.max - this.min) + this.min);
    }
    randomColor() {
        this.r = this.randRange(this.min, this.max);
        this.g = this.randRange(this.min, this.max);
        this.b = this.randRange(this.min, this.max);
        return `rgb(${this.r},${this.g},${this.b})`;
    }
    animateColour(selector, background, foreground, secondaryforeground, secondaryBackground, time) {
        $(selector).css("--main-bg", background);
        $(selector).css("--main-fg", foreground);
        $(selector).css("--sec-fg", secondaryforeground);
        $(selector).css("--sec-bg", secondaryBackground);

        $(selector).animate({
            backgroundColor: background,
            color: foreground
        }, time);
    }
} 
                                                

This allows me to call the animateColour() function on DOM load and generate a complementary colour palette by converting the CSS RGB value to HSL. The CSS --main-fg variables are generated by rotating the background colour hue 180 Degrees

// instantiate new Colour object
const c = new Colour()
// params: selector, 
// background colour, 
// main-fg(saturation, brightness), 
// sec-fg(saturation,brightness), 
// animation time

c.animateColour('body', 
c.randomColor(), 
c.opposite(25, 80),
c.opposite(40, 60),
 500)