├── .nvmrc ├── .gitignore ├── app ├── styles │ ├── _helpers.scss │ ├── main.scss │ ├── _config.scss │ ├── _baseline.scss │ ├── modules │ │ ├── _annotated-links.scss │ │ └── _data-row.scss │ └── _persistent.scss ├── favicon.ico ├── drummerhead.png └── index.html ├── README.md ├── package.json ├── gulpfile.js └── .sass-lint.yml /.nvmrc: -------------------------------------------------------------------------------- 1 | 6.3.1 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.tmp 3 | /dist 4 | .DS_Store -------------------------------------------------------------------------------- /app/styles/_helpers.scss: -------------------------------------------------------------------------------- 1 | .fn { 2 | display: none; 3 | } 4 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrummerHead/drummerhead.com/master/app/favicon.ico -------------------------------------------------------------------------------- /app/drummerhead.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrummerHead/drummerhead.com/master/app/drummerhead.png -------------------------------------------------------------------------------- /app/styles/main.scss: -------------------------------------------------------------------------------- 1 | @import 'config'; 2 | @import 'baseline'; 3 | @import 'persistent'; 4 | @import 'helpers'; 5 | @import 'modules/annotated-links'; 6 | @import 'modules/data-row'; 7 | -------------------------------------------------------------------------------- /app/styles/_config.scss: -------------------------------------------------------------------------------- 1 | // Media breakpoints 2 | ///////////////////// 3 | 4 | $alpha: '(min-width: 417px)'; 5 | $bravo: '(min-width: 577px)'; 6 | $zulu: '(min-aspect-ratio: 9 / 7) and (min-width: 730px)'; 7 | 8 | 9 | // Color scheme 10 | ///////////////////// 11 | 12 | $dark: #444; 13 | $secondary: #aaa; 14 | $actionable: #06e; 15 | $subtle: #eee; 16 | -------------------------------------------------------------------------------- /app/styles/_baseline.scss: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | font-size: 100%; 4 | text-size-adjust: 100%; 5 | } 6 | 7 | body { 8 | min-height: 100%; 9 | margin: 0; 10 | font-size: .9em; 11 | line-height: 1.4; 12 | font-family: Helvetica, Arial, sans-serif; 13 | color: $dark; 14 | } 15 | 16 | h1 { 17 | margin: 0; 18 | font-size: 1.9em; 19 | } 20 | 21 | @media #{$alpha} { 22 | body { 23 | font-size: 1em; 24 | } 25 | } 26 | 27 | @media #{$zulu} { 28 | * { 29 | box-sizing: border-box; 30 | } 31 | 32 | body { 33 | display: flex; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # drummerhead.com 2 | 3 | Contact page, personal link hub. 4 | 5 | ## Install 6 | 7 | If you have any issues with `npm install` use the recommended node version at `.nvmrc`, if you're using [nvm](https://github.com/creationix/nvm) just run `nvm use` on root folder 8 | 9 | ``` 10 | npm install -g gulp-cli 11 | npm install 12 | ``` 13 | 14 | ## Run server 15 | 16 | ``` 17 | gulp serve 18 | ``` 19 | 20 | ## Linting 21 | 22 | ``` 23 | gulp scss-lint 24 | ``` 25 | 26 | ``` 27 | gulp html-lint 28 | ``` 29 | 30 | ## Build 31 | 32 | ``` 33 | gulp build 34 | ``` 35 | 36 | And upload the contents of `dist` folder to the Information Superhighway. The grid. A digital frontier. 37 | 38 | -------------------------------------------------------------------------------- /app/styles/modules/_annotated-links.scss: -------------------------------------------------------------------------------- 1 | a, 2 | strong, 3 | em { 4 | transition: .25s linear; 5 | } 6 | 7 | a { 8 | text-decoration: none; 9 | color: $secondary; 10 | 11 | &:visited { 12 | color: $secondary; 13 | } 14 | 15 | &:hover { 16 | color: $actionable; 17 | 18 | strong { 19 | border-bottom: 1px dotted $actionable; 20 | color: inherit; 21 | } 22 | 23 | em { 24 | color: $actionable; 25 | } 26 | } 27 | 28 | &:focus { 29 | outline: thin dotted; 30 | } 31 | 32 | &:hover, 33 | &:active { 34 | outline: 0; 35 | } 36 | } 37 | 38 | strong { 39 | font-weight: normal; 40 | } 41 | 42 | em { 43 | font-style: normal; 44 | color: $dark; 45 | } 46 | -------------------------------------------------------------------------------- /app/styles/_persistent.scss: -------------------------------------------------------------------------------- 1 | .vcard { 2 | max-width: 27.5em; 3 | margin: 0 auto; 4 | padding: 0 1em 1em; 5 | } 6 | 7 | [role='banner'] { 8 | padding: 0; 9 | text-align: center; 10 | } 11 | 12 | @media #{$bravo} { 13 | .vcard { 14 | padding: 0 2em 2em; 15 | } 16 | 17 | [role='banner'] { 18 | padding: 0 0 0 6.65em; 19 | text-align: left; 20 | } 21 | } 22 | 23 | @media #{$zulu} { 24 | .vcard { 25 | display: flex; 26 | flex-flow: row nowrap; 27 | flex: 0 0 auto; 28 | max-width: none; 29 | margin: auto; 30 | padding: 0; 31 | } 32 | 33 | [role='banner'] { 34 | flex: 0 0 auto; 35 | padding: 0 4em 0 0; 36 | } 37 | 38 | main { 39 | flex: 0 0 auto; 40 | width: 27em; 41 | padding: 1.8em 0; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /app/styles/modules/_data-row.scss: -------------------------------------------------------------------------------- 1 | dl { 2 | margin: 1em 0; 3 | border-top: 1px solid $subtle; 4 | padding: 1em 0; 5 | } 6 | 7 | dt { 8 | font-weight: bold; 9 | } 10 | 11 | dd { 12 | margin: 0; 13 | padding: .2em 0; 14 | } 15 | 16 | @media #{$alpha} { 17 | dd { 18 | padding: 0; 19 | } 20 | } 21 | 22 | @media #{$bravo} { 23 | dl { 24 | display: flex; 25 | flex-flow: column nowrap; 26 | align-items: flex-end; 27 | } 28 | 29 | dt { 30 | align-self: flex-start; 31 | font-weight: normal; 32 | } 33 | 34 | dd { 35 | width: 20.75em; 36 | 37 | &:first-of-type { 38 | margin-top: -1.4em; 39 | } 40 | } 41 | } 42 | 43 | @media #{$zulu} { 44 | dl { 45 | &:first-child { 46 | margin-top: 0; 47 | border-top-width: .2em; 48 | border-top-color: $dark; 49 | } 50 | 51 | &:last-child { 52 | margin-bottom: 0; 53 | padding-bottom: 0; 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "drummerhead.com", 3 | "version": "1.0.0", 4 | "description": "Personal site of DrummerHead", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/DrummerHead/drummerhead.me.git" 12 | }, 13 | "author": "DrummerHead (drummerhead.com)", 14 | "bugs": { 15 | "url": "https://github.com/DrummerHead/drummerhead.me/issues" 16 | }, 17 | "homepage": "https://github.com/DrummerHead/drummerhead.me#readme", 18 | "devDependencies": { 19 | "browser-sync": "^2.17.3", 20 | "del": "^2.2.2", 21 | "gulp": "^3.9.1", 22 | "gulp-autoprefixer": "^3.1.1", 23 | "gulp-cssnano": "^2.1.2", 24 | "gulp-html": "^0.4.4", 25 | "gulp-htmlmin": "^3.0.0", 26 | "gulp-inline-source": "^3.0.0", 27 | "gulp-load-plugins": "^1.3.0", 28 | "gulp-plumber": "^1.1.0", 29 | "gulp-replace": "^0.5.4", 30 | "gulp-sass": "^2.3.2", 31 | "gulp-sass-lint": "^1.2.0", 32 | "gulp-size": "^2.1.0", 33 | "gulp-sourcemaps": "^2.1.1" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | DrummerHead 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 |
19 | DrummerHead 20 |

DrummerHead

21 | Nicolas Barrera 22 |
23 | 24 |
25 |
26 |
Contact
27 |
28 | 29 |
30 |
31 | 32 |
33 |
Social
34 |
35 | https://twitter.com/DrummerHead 36 |
37 |
38 | 39 |
40 |
Teach
41 |
42 | http://aprend.io/ 43 |
44 |
45 | 46 |
47 |
Labs
48 |
49 | http://mcdlr.com 50 |
51 |
52 | https://github.com/DrummerHead 53 |
54 |
55 | https://www.npmjs.com/~drummerhead 56 |
57 |
58 | 59 |
60 |
Job
61 |
62 | http://nicolas-barrera.com 63 |
64 |
65 | http://www.linkedin.com/in/nbarrera 66 |
67 |
68 |
69 | 70 |
71 | 72 | 73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const gulpLoadPlugins = require('gulp-load-plugins'); 3 | const browserSync = require('browser-sync'); 4 | const del = require('del'); 5 | 6 | const $ = gulpLoadPlugins(); 7 | const reload = browserSync.reload; 8 | 9 | 10 | // Style 11 | // ======================= 12 | 13 | gulp.task('styles', () => { 14 | return gulp.src('app/styles/*.scss') 15 | .pipe($.plumber()) 16 | .pipe($.sourcemaps.init()) 17 | .pipe($.sass.sync({ 18 | outputStyle: 'expanded', 19 | precision: 10, 20 | includePaths: ['.'] 21 | }).on('error', $.sass.logError)) 22 | .pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']})) 23 | .pipe($.sourcemaps.write()) 24 | .pipe(gulp.dest('.tmp/styles')) 25 | .pipe(reload({stream: true})); 26 | }); 27 | 28 | 29 | // Style minification 30 | // ----------------------- 31 | 32 | gulp.task('styles-minify', ['styles'], () => 33 | gulp.src('.tmp/styles/*.css') 34 | .pipe($.cssnano({ safe: true, autoprefixer: false })) 35 | .pipe(gulp.dest('dist/styles')) 36 | ); 37 | 38 | 39 | // Style linting 40 | // ----------------------- 41 | 42 | gulp.task('sass-lint', () => 43 | gulp.src('app/styles/**/*.scss') 44 | .pipe($.sassLint({ 45 | configFile: '.sass-lint.yml', 46 | })) 47 | .pipe($.sassLint.format()) 48 | .pipe($.sassLint.failOnError()) 49 | ); 50 | 51 | gulp.task('scss-lint', ['sass-lint']); 52 | 53 | 54 | // HTML 55 | // ======================= 56 | 57 | 58 | // HTML minification 59 | // ----------------------- 60 | 61 | gulp.task('html-inline-minify-comment', ['styles-minify', 'copy'], () => 62 | gulp.src('dist/index.html') 63 | .pipe($.inlineSource()) 64 | .pipe($.htmlmin({ 65 | collapseWhitespace: true, 66 | quoteCharacter: "'", 67 | })) 68 | .pipe($.replace( 69 | //, 70 | "\n\n\n\n" 71 | )) 72 | .pipe(gulp.dest('dist')) 73 | ); 74 | 75 | 76 | // HTML linting 77 | // ----------------------- 78 | 79 | gulp.task('html-lint', () => 80 | gulp.src('app/*.html') 81 | .pipe($.html()) 82 | ); 83 | 84 | 85 | // Helper 86 | // ======================= 87 | 88 | gulp.task('clean', del.bind(null, ['.tmp', 'dist'])); 89 | 90 | gulp.task('delete-inlined-files', ['html-inline-minify-comment'], del.bind(null, ['dist/styles'])); 91 | 92 | 93 | // Serving 94 | // ======================= 95 | 96 | gulp.task('serve', ['styles'], () => { 97 | browserSync({ 98 | notify: false, 99 | port: 9000, 100 | server: { 101 | baseDir: ['.tmp', 'app'], 102 | } 103 | }); 104 | 105 | gulp.watch([ 106 | 'app/*.html', 107 | 'app/images/**/*', 108 | ]).on('change', reload); 109 | 110 | gulp.watch('app/styles/**/*.scss', ['styles']); 111 | }); 112 | 113 | 114 | // Building 115 | // ======================= 116 | 117 | gulp.task('copy', () => { 118 | return gulp.src([ 119 | 'app/*' 120 | ], { 121 | dot: true 122 | }).pipe(gulp.dest('dist')); 123 | }); 124 | 125 | gulp.task('build', ['delete-inlined-files'], () => { 126 | return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true})); 127 | }); 128 | -------------------------------------------------------------------------------- /.sass-lint.yml: -------------------------------------------------------------------------------- 1 | options: 2 | formatter: stylish 3 | files: 4 | include: '**/*.s+(a|c)ss' 5 | rules: 6 | # Extends 7 | extends-before-mixins: 1 8 | extends-before-declarations: 1 9 | placeholder-in-extend: 1 10 | 11 | # Mixins 12 | mixins-before-declarations: 1 13 | 14 | # Line Spacing 15 | one-declaration-per-line: 1 16 | empty-line-between-blocks: 1 17 | single-line-per-selector: 1 18 | 19 | # Disallows 20 | no-attribute-selectors: 0 21 | no-color-keywords: 1 22 | no-color-literals: 23 | - 1 24 | - 25 | allow-rgba: true 26 | no-combinators: 0 27 | no-css-comments: 1 28 | no-debug: 1 29 | no-disallowed-properties: 0 30 | no-duplicate-properties: 31 | - 1 32 | - 33 | exclude: src 34 | no-empty-rulesets: 1 35 | no-extends: 0 36 | no-ids: 1 37 | no-important: 1 38 | no-invalid-hex: 1 39 | no-mergeable-selectors: 1 40 | no-misspelled-properties: 1 41 | no-qualifying-elements: 1 42 | no-trailing-whitespace: 1 43 | no-trailing-zero: 1 44 | no-transition-all: 1 45 | no-universal-selectors: 0 46 | no-url-protocols: 1 47 | no-vendor-prefixes: 1 48 | no-warn: 1 49 | property-units: 0 50 | 51 | # Nesting 52 | force-attribute-nesting: 1 53 | force-element-nesting: 0 54 | force-pseudo-nesting: 1 55 | 56 | # Name Formats 57 | class-name-format: 1 58 | function-name-format: 1 59 | id-name-format: 0 60 | mixin-name-format: 1 61 | placeholder-name-format: 1 62 | variable-name-format: 1 63 | 64 | # Style Guide 65 | attribute-quotes: 1 66 | bem-depth: 0 67 | border-zero: 1 68 | brace-style: 1 69 | clean-import-paths: 1 70 | empty-args: 1 71 | hex-length: 1 72 | hex-notation: 1 73 | indentation: 1 74 | leading-zero: 1 75 | nesting-depth: 1 76 | property-sort-order: 77 | - 1 78 | - order: 79 | - 'display' 80 | - 'box-sizing' 81 | - 'position' 82 | - 'top' 83 | - 'right' 84 | - 'bottom' 85 | - 'left' 86 | 87 | - 'flex-flow' 88 | - 'flex-direction' 89 | - 'flex-wrap' 90 | - 'justify-content' 91 | - 'align-items' 92 | - 'align-content' 93 | - 'flex' 94 | - 'flex-grow' 95 | - 'flex-shrink' 96 | - 'flex-basis' 97 | - 'align-self' 98 | - 'order' 99 | 100 | - 'float' 101 | - 'clear' 102 | 103 | - 'width' 104 | - 'min-width' 105 | - 'max-width' 106 | 107 | - 'height' 108 | - 'min-height' 109 | - 'max-height' 110 | 111 | - 'margin' 112 | - 'margin-top' 113 | - 'margin-right' 114 | - 'margin-bottom' 115 | - 'margin-left' 116 | 117 | - 'border' 118 | - 'border-top' 119 | - 'border-right' 120 | - 'border-bottom' 121 | - 'border-left' 122 | - 'border-width' 123 | - 'border-top-width' 124 | - 'border-right-width' 125 | - 'border-bottom-width' 126 | - 'border-left-width' 127 | 128 | - 'padding' 129 | - 'padding-top' 130 | - 'padding-right' 131 | - 'padding-bottom' 132 | - 'padding-left' 133 | 134 | - 'font-size' 135 | - 'line-height' 136 | 137 | - 'columns' 138 | - 'column-width' 139 | - 'column-count' 140 | - 'column-gap' 141 | - 'column-fill' 142 | - 'column-rule' 143 | - 'column-span' 144 | 145 | - 'transform' 146 | - 'transform-box' 147 | - 'transform-origin' 148 | - 'transform-style' 149 | 150 | - 'transition' 151 | - 'transition-delay' 152 | - 'transition-duration' 153 | - 'transition-property' 154 | - 'transition-timing-function' 155 | 156 | - 'border-style' 157 | - 'border-top-style' 158 | - 'border-right-style' 159 | - 'border-bottom-style' 160 | - 'border-left-style' 161 | 162 | - 'border-color' 163 | - 'border-top-color' 164 | - 'border-right-color' 165 | - 'border-bottom-color' 166 | - 'border-left-color' 167 | 168 | - 'border-radius' 169 | - 'border-top-left-radius' 170 | - 'border-top-right-radius' 171 | - 'border-bottom-left-radius' 172 | - 'border-bottom-right-radius' 173 | 174 | - 'outline' 175 | - 'outline-color' 176 | - 'outline-offset' 177 | - 'outline-style' 178 | - 'outline-width' 179 | 180 | - 'font' 181 | - 'font-family' 182 | - 'src' 183 | - 'font-smoothing' 184 | - 'font-weight' 185 | - 'font-style' 186 | - 'font-variant' 187 | 188 | 189 | - 'letter-spacing' 190 | - 'list-style' 191 | 192 | - 'text-align' 193 | - 'text-decoration' 194 | - 'text-indent' 195 | - 'text-overflow' 196 | - 'text-rendering' 197 | - 'text-shadow' 198 | - 'text-transform' 199 | - 'text-wrap' 200 | - 'text-size-adjust' 201 | 202 | - 'white-space' 203 | - 'word-spacing' 204 | 205 | - 'color' 206 | 207 | - 'background' 208 | - 'background-attachment' 209 | - 'background-clip' 210 | - 'background-color' 211 | - 'background-image' 212 | - 'background-repeat' 213 | - 'background-position' 214 | - 'background-size' 215 | 216 | - 'border-collapse' 217 | - 'border-spacing' 218 | - 'box-shadow' 219 | - 'caption-side' 220 | - 'content' 221 | - 'cursor' 222 | - 'empty-cells' 223 | - 'opacity' 224 | - 'overflow' 225 | - 'quotes' 226 | - 'speak' 227 | - 'table-layout' 228 | - 'vertical-align' 229 | - 'visibility' 230 | - 'z-index' 231 | pseudo-element: 1 232 | quotes: 1 233 | shorthand-values: 1 234 | url-quotes: 1 235 | variable-for-property: 1 236 | zero-unit: 1 237 | 238 | # Inner Spacing 239 | space-after-comma: 1 240 | space-before-colon: 1 241 | space-after-colon: 1 242 | space-before-brace: 1 243 | space-before-bang: 1 244 | space-after-bang: 1 245 | space-between-parens: 1 246 | space-around-operator: 1 247 | 248 | # Final Items 249 | trailing-semicolon: 1 250 | final-newline: 1 251 | --------------------------------------------------------------------------------