My personal website featuring some projects I worked on and some photos I made.
Switch branches/tags
Nothing to show
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.
src
static
.babelrc
.eslintrc
.firebaserc
.gitignore
.tern-project
LICENSE
README.md
compileDev.js
database.rules.json
devServer.js
firebase.json
package.json
webpack.config.js
yarn.lock

README.md

amann.me

If you're interested in how this website works, I've published an article explaning it on my website.

Development

Setup

  1. Install node.js.
  2. Install an editor that accepts eslint (e. g. Atom with the plugin linter-eslint), so you get warnings about syntax or code style errors.
  3. Install dependencies with npm install.

Run

  1. Start the development server with npm run dev.
  2. Check the console to see the URL the server runs on.

Use in production

Setup

  1. Install node.js

Build

  1. Build the app with npm run build.
  2. Find the built files in the folder public. Upload them to the root folder of a web server that can serve static files.

You can test the built files by navigating to public and run python -m SimpleHTTPServer. Then open the shown URL in the browser.

Every route (e.g. /about) contains all the prerendered HTML code and loads the rest of web site with the JavaScript code. Therefore subsequent route changes will load instantly without communication with the server.

Conventions

JS

  • ECMAScript stage 0 (bleeding edge yay)
  • React with ES6 classes
  • JSX

ESLint takes care of the rest.

CSS

CSS is written with SASS and CSS modules.

The only thing used from the CSS modules are the local classnames. Other features like compose are avoided and solved with well-known SASS features.

Example:

// Component ('B' of BEM)
.root {
  padding: 12px;
}

// Elements used within component ('E' of BEM)
.button {
  color: blue;

  // Modifiers ('M' of BEM)
  &_isInactive {
    opacity: 0.25;
  }
}