This website is a Node.js application built from scratch. It is a redesign of my portfolio website, which had previously been built on WordPress. The entire site is deployed on a Digital Ocean droplet which was itself a cool way to learn how to set up servers. The code can be found on Github, although the repository excludes certain components, such as all of the portfolio items and their respective pictures and content. The README file includes a summary of how to set up the application, as well as additional notes!
On homepage load, an SVG animation runs. The menu features CSS transitions to create a unique interaction.Express is a great and minimalist web application framework. Assets are compiled using modular Grunt tasks to transform SASS, JavaScript, and images into production-ready, public-facing files, and puts them in the /public/ folder. Bower is used specifically to grab any front-end specific libraries and places these vendor files within /app/src/vendor/. Handlebars, a JavaScript templating engine, is used for to create the views for this application.
Application Structure
The app's entry point is the server.js file, as defined in package.json. This application runs on port 8000, so if spinning this up locally you will be able to access the site by going to http://localhost:8000/.
The application code is exported in the /app/app.js/ file, inside of which are creations of Handlebar partials, helper functions, routes, and endpoints. The core of the application lives within the /app/includes/ folder. Any assets (eg: images, js, or sass) exist within /app/src/, and all of the frontend views are within /app/views/.
Routes
Routes for each page are defined inside /app/includes/config/ and executed inside /app/includes/routes.js. Each page has its own respective js and css files, apart from globals. They are loaded into the Handlebars template based on whether its page property within the Pages object (/app/includes/config.pages.js) has the "hasScript" or "hasStyle" property set to true.
Other routes include each Portfolio Item as defined within /app/includes/config/portfolio-items/. In the repo, you will only see 1 sample file.
Endpoints
There are 3 endpoints created: an email endpoint, a portfolio loader, and one to load a carousel. The email endpoint is for the Contact Us form and if you are spinning up a local copy from the repository, will not send any emails since the login credential file is blank for privacy/security purposes. The javascript that calls this endpoint can be found within /app/src/js/modules/contact-form.js and will be discussed further down below.
The Portfolio Loader returns all portfolio items as seen on the Portfolio page and will display filtered results, based off of passed "type" data. The frontend javascript for this is at /app/src/js/modules/portfolio-loader.js. The portfolio.hbs file initially loads all of the portfolio items through a saved property in pages.js called "portfolioThumbs".
Lastly, the carousel endpoint loads the slide images stored within /app/src/img/portfolio/ based off what folder data-attribute is passed to the endpoint via the frontend javascript.
The Frontend
Each page, ie: About, Contact, Home, 404, Portfolio, and each Portfolio Item, have their own respective CSS and JS file loaded on top of the global asset files. If you check inside of /app/src/js/ or /app/src/scss/, you will see that the actual javascript and sass are written into modular components that can then be imported on an as-needed basis. All javascript is written in ES6, and all styles are mobile-first.