Meteor Portfolio App

A minimal, mobile-first portfolio app. Built with Meteor.

Demo here: husammachlovi.com.

• Roadmap
  • Features
• How to use
  • Requirements
  • Installation
  • Deployments
  • SEO and other concerns
  • Adding allow rules for external URLs
• Structure
  • Packages used
  • Folder structure
• License

Roadmap

• 'Now' component
• Cases view
• Case study
• Refactor mobile menu
• Landing page
• WYSWIG
• React UI layer
• Event-based modals
• Accessibility settings
• Night mode

How to use

Requirements

Make sure Meteor is installed and up to date or run:

curl https://install.meteor.com/ | sh

Installation

git clone git@github.com:hudat/Meteor-portfolio.git
cd Meteor-portfolio
meteor

Deployments

It is highly recommended to use Meteor Up for easy deployments. Have a look at the repository for more information.

SEO and other concerns

Meteor cannot do SEO

This statement is only partially true, since there is a package called ms-seo, which has a lot of neat little tricks to help web crawlers notice your app the way you want them to. Use constants under client/lib/constants.js for the app. Change SEO settings inside the routes like that.

Router.route('/about', function () {
  this.render('about');
  // Using the app constants
  SEO.set({ title: 'About -' + Meteor.App.NAME, og: {...} });
});

Adding allow rules for external URLs

The browser-policy adds rules to deny all operations from external URLs. This helps dealing with clickjacking and other XSS methods used to attack the client. To whitelist a url, add following to server/config/security.js

BrowserPolicy.content.allowOriginForAll(YOUR_URL);

Other security enforcing packages like audit-argument-checks and matteodem:easy-security have also been added.

Structure

Packages used

• Meteor Core
  • standard-app-packages
• Routing
  • iron:router
  • zimme:iron-router-active
• UI and UX
  • semantic:ui-css
  • chrismbeckett:fontawesome4
  • linto:fontawesome
  • jQuery

The "insecure" and "autopublish" packages are removed by default (they make your app vulnerable).

Folder structure

client/ 				# Client folder (All views)
  main
  stylesheets           # LESS stylesheets
  templates             # Contains all templates
    layouts             # Router layouts
    modules             # UI components (common elements)
    views               # All the views
public/                 # Public files
lib/                    # Collections & routes
server/				          # Server folder
    fixtures/           # Meteor.Collection fixtures defined
    publications/       # All publications
    startup/            # On server startup

(*) = the command line tool creates files in these folders

License

This project has an MIT License, see the LICENSE.txt for more information.