🌐 Personal website showcasing posts, projects, and the like
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.eslintrc
.gitignore
.sass-lint.yml
README.md
index.js
package.json
routes.js
yarn-error.log
yarn.lock

README.md

Personal Website

Application developed in Node with Handlebars, Express, and SCSS. The site leverages local JSON files for storing data on my education, posts, experience, and work. This is also a place for various spin-off projects. The app is hosted on Heroku.

Screenshot


Architecture

│
├─ public               # Files accessible from the frontend
│  ├─ img               # Images
│  │  └─ ...
│  ├─ js                # Frontend scripts
│  │  └─ ...
│  ├─ index.css         # Compiled CSS file
│  └─ ...               # Favicon files
│
├─ src                  # Assets, data, and content
│  ├─ assets
│  │  └─ scss           # Styles written in SCSS
│  │     └─ ...
│  ├─ json              # Data for posts, projects, etc.
│  │  └─ ...
│  └─ views             # Handlebars files
│     ├─ layouts        # Data for posts, projects, etc.
│     │  └─ layout.hbs  # Wrapper HTML for all pages
│     ├─ partials       # Data for posts, projects, etc.
│     │  ├─ posts       # HTML partial for each post
│     │  │  └─ ...
│     │  └─ ...         # Other partials
│     └─ ...            # Page components
│
├─ .eslintrc            # Documentation
├─ .gitignore           # Files not included in git repo
├─ index.js             # Configure express server
├─ package.json         # Layout dependencies
├─ routes.js            # App API's and routing
├─ ...                  # Yarn config files
└─ README.md            # Documentation

Posts system design

Each post is represented by a JSON file of the form:

{
  "createdAt": "123...",
  "updatedAt": "123...",
  "title": "Title of the post",
  "slug": "title-of-the-post",
  "image": "...",
  "subtitle": "Subtitle of the post",
  "topics": [ "..." ]
}

There is a corresponding Handlebars file in the /src/views/partials/posts directory indexed by the post's slug, in this case title-of-the-post. This works to determine the URL for the post along with the HTML content rendered.


Planned features

  • Write about projects on their own pages
  • Better optimize production build
  • Include share links on posts

Completed features

  • Add images to homepage content
  • Add meta tags
  • Projects
  • Freelancing info
  • Posts
  • Art/Design
  • Mobile responsive nav
  • Add linter
  • Contact form frontend
  • Contact form functionality
  • Add timestamps to posts
  • Lower screenshot quality for quicker loading time
  • Remove gray padding on mobile?
  • Remove modal on smaller screens
  • Favicon
  • Next and previous links for posts
  • Preview posts and projects on homepage
  • Update how links look in posts (underline only?)
  • Smooth transitions between pages
  • Build out README with file architecture, features, etc.
  • Page background styling
  • Generic background image for link sharing
  • Replace font awesome icons with local images
  • Add topics/tags to posts
  • Google Analytics