Skip to content

Commit 7c9bc66

Browse files
author
Jimmy
authored
Merge pull request #1 from jimmythecoder/develop
Gulp integration, begun layout of header. Created config file
2 parents 04fba48 + ff5f20e commit 7c9bc66

24 files changed

+523
-5
lines changed

Diff for: ‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
# jimmythecoder.github.io
2-
Dev website
2+
3+
UX Hypermedia creative

Diff for: ‎assets/Logo.sketch

336 KB
Binary file not shown.

Diff for: ‎assets/Photo.sketch

112 KB
Binary file not shown.

Diff for: ‎assets/Profile photo.psd

215 KB
Binary file not shown.

Diff for: ‎css/app.css

+67
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎gulp-tasks/brower-sync.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
module.exports = function (gulp, options, plugins) {
2+
'use strict';
3+
4+
const browserSync = require('browser-sync').create('sync-server');
5+
6+
gulp.task('browser-sync', function() {
7+
browserSync.init({
8+
server: {
9+
baseDir: "./"
10+
}
11+
});
12+
});
13+
};

Diff for: ‎gulp-tasks/default.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = function (gulp, options, plugins) {
2+
'use strict';
3+
4+
gulp.task('default', ['sass', 'typescript', 'watch'], function() {
5+
6+
});
7+
};

Diff for: ‎gulp-tasks/sass.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
module.exports = function (gulp, options, plugins) {
2+
'use strict';
3+
4+
const sass = require('gulp-sass'),
5+
sourcemaps = require('gulp-sourcemaps'),
6+
browserSync = require("browser-sync").get('sync-server');
7+
8+
gulp.task('sass', function() {
9+
return gulp.src('./scss/app.scss')
10+
.pipe(sourcemaps.init())
11+
.pipe(sass().on('error', sass.logError))
12+
.pipe(sourcemaps.write())
13+
.pipe(gulp.dest('./css'))
14+
.pipe(browserSync.stream());
15+
});
16+
};

Diff for: ‎gulp-tasks/tslint.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = function (gulp, options, plugins) {
2+
'use strict';
3+
4+
const tslint = require("gulp-tslint"),
5+
fs = require("fs"),
6+
tsconfig = JSON.parse(fs.readFileSync('./tsconfig.json'));
7+
8+
//Check tsconfig.json for this tasks source config
9+
gulp.task('tslint', function() {
10+
return gulp.src(tsconfig.include)
11+
.pipe(tslint())
12+
.pipe(tslint.report())
13+
});
14+
};

Diff for: ‎gulp-tasks/typescript.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
module.exports = function (gulp, options, plugins) {
2+
'use strict';
3+
4+
const ts = require('gulp-typescript'),
5+
notify = require('gulp-notify'),
6+
concat = require('gulp-concat'),
7+
sourcemaps = require('gulp-sourcemaps'),
8+
browserSync = require("browser-sync").get('sync-server'),
9+
tsProject = ts.createProject('./tsconfig.json');
10+
11+
//Check tsconfig.json for this tasks config
12+
gulp.task('typescript', ['tslint'], function() {
13+
var tsResult = tsProject.src()
14+
.pipe(sourcemaps.init())
15+
.pipe(tsProject())
16+
.on("error", notify.onError("<%= error.message %>"));
17+
18+
return tsResult.js
19+
.pipe(concat('app.js'))
20+
.pipe(sourcemaps.write())
21+
.pipe(gulp.dest('./js'))
22+
.pipe(browserSync.stream());
23+
});
24+
};

Diff for: ‎gulp-tasks/watch.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
module.exports = function (gulp, options, plugins) {
2+
'use strict';
3+
4+
const fs = require("fs"),
5+
tsconfig = JSON.parse(fs.readFileSync('./tsconfig.json'));
6+
7+
const sources = {
8+
9+
sass: [
10+
'./scss/*.scss',
11+
],
12+
typescript: tsconfig.include
13+
};
14+
15+
gulp.task('watch', ['browser-sync'], function() {
16+
17+
const browserSync = require("browser-sync").get('sync-server');
18+
19+
gulp.watch(sources.sass, ['sass']);
20+
gulp.watch(sources.typescript, ['typescript']);
21+
gulp.watch("./*.html").on('change', browserSync.reload);
22+
23+
});
24+
};

Diff for: ‎gulpfile.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
var gulp = require('gulp');
2+
3+
var options = {
4+
pattern: ['gulp-tasks/**/*.js'],
5+
timestamp: Date.now()
6+
};
7+
8+
require('load-gulp-tasks')(gulp, options);

Diff for: ‎img/body-background.png

28.6 KB
Loading

Diff for: ‎img/profile-photo.png

56.3 KB
Loading

Diff for: ‎index.html

+52-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,59 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en" id="ng-app">
33
<head>
4-
<title>Jimmy's website</title>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7+
<meta name="apple-mobile-web-app-capable" content="yes">
8+
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
9+
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
10+
11+
<title>Jimmythecoder | UX Creative via Hypermedia</title>
12+
13+
<link rel="stylesheet" href="node_modules/normalize.css/normalize.css">
14+
<link rel="stylesheet" href="node_modules/flexboxgrid/dist/flexboxgrid.css">
15+
<link rel="stylesheet" href="css/app.css">
16+
17+
<link href="https://fonts.googleapis.com/css?family=Karla|Montserrat|Open+Sans+Condensed:300|Open+Sans:300|Raleway|Raleway+Dots" rel="stylesheet">
518
</head>
619
<body>
7-
<h1>Hello world</h1>
820

9-
<p>So much potential, so little time.</p>
21+
<!--[if lte IE 8]>
22+
<p class="browsehappy">You're using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
23+
<![endif]-->
24+
<noscript><div class="alert alert-danger" role="alert">Sorry, but javascript is required and must be enabled to use this application.</div></noscript>
25+
26+
<div class="container">
27+
28+
<div class="row">
29+
30+
<div class="col-xs-12 col-sm-3">
31+
<nav>
32+
<img src="img/profile-photo.png" class="img-responsive profile-photo" alt="Profile photo">
33+
34+
<h3>Contact Me</h3>
35+
</nav>
36+
</div>
37+
38+
<div class="col-xs-12 col-sm-9 col-lg-7 col-lg-offset-1">
39+
40+
<main >
41+
<header>
42+
<img src="svg/logo.svg" alt="JH" width="100">
43+
44+
<h1>James<br />Harris</h1>
45+
<hr class="thin">
46+
<h2>Web Architect UX</h2>
47+
</header>
48+
49+
<h3>WHO AM I?</h3>
50+
51+
<p>I&rsquo;m a full stack web developer / architect specializing in front-end UI who loves innovation, creativity and making great user experiences. Having over 10 years industry experience in a diverse range of applications and frameworks I am self- motivated and passionate about quality.</p>
52+
</main>
53+
</div>
54+
</div>
55+
</div>
56+
57+
1058
</body>
1159
</html>

Diff for: ‎js/app.js

+3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "jimmythecoder-github",
3+
"version": "1.0.0",
4+
"private": true,
5+
"description": "UX Creative via Hypermedia",
6+
"repository": {
7+
"type": "git",
8+
"url": "https://github.com/jimmythecoder/jimmythecoder.github.io"
9+
},
10+
"scripts": {
11+
"start": "gulp"
12+
},
13+
"main": "index.html",
14+
"author": "James Harris",
15+
"license": "Standard",
16+
"dependencies": {
17+
"@types/jquery": "^2.0.34",
18+
"jquery": "^3.1.1"
19+
},
20+
"devDependencies": {
21+
"browser-sync": "^2.18.2",
22+
"flexboxgrid": "^6.3.1",
23+
"gulp": "^3.9.1",
24+
"gulp-concat": "^2.6.1",
25+
"gulp-notify": "^2.2.0",
26+
"gulp-sass": "^2.3.2",
27+
"gulp-sourcemaps": "^1.9.1",
28+
"gulp-tslint": "^7.0.1",
29+
"gulp-typescript": "^3.1.3",
30+
"load-gulp-tasks": "^0.1.0",
31+
"normalize.css": "^5.0.0",
32+
"sass": "^0.5.0",
33+
"tslint": "^4.0.1",
34+
"typescript": "^2.1.1"
35+
}
36+
}

Diff for: ‎scss/_config.scss

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
2+
$colors: (
3+
pink: #E1D6CE,
4+
dark-grey: #383838,
5+
body-font: #666
6+
);
7+
8+
$fonts: (
9+
montserrat: ('Montserrat', sans-serif),
10+
body: ('Open Sans', sans-serif),
11+
raleway: ('Raleway', sans-serif),
12+
karla: ('Karla', sans-serif)
13+
);

Diff for: ‎scss/app.scss

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
@import 'config';
2+
3+
html, body {
4+
font-family: map-get($fonts, body);
5+
background-image: url('../img/body-background.png');
6+
color: map-get($colors, body-font);
7+
text-rendering: optimizeLegibility;
8+
}
9+
10+
.img-responsive {
11+
max-width: 100%;
12+
}
13+
14+
.container {
15+
background-color: white;
16+
}
17+
18+
h1 {
19+
margin: 0.5em 0 0 0;
20+
color: white;
21+
font-family: map-get($fonts, raleway);
22+
font-size: 2.5em;
23+
letter-spacing: 1em;
24+
font-weight: 300;
25+
text-transform: uppercase;
26+
text-rendering: optimizeLegibility;
27+
line-height: 1.5em;
28+
}
29+
30+
h2 {
31+
font-family: map-get($fonts, raleway);
32+
color: map-get($colors, pink);
33+
font-size: 1em;
34+
letter-spacing: 1em;
35+
text-transform: uppercase;
36+
font-weight: 300;
37+
}
38+
39+
h3 {
40+
font-family: map-get($fonts, raleway);
41+
color: map-get($colors, pink);
42+
text-transform: uppercase;
43+
background-color: map-get($colors, dark-grey);
44+
font-size: 0.8em;
45+
text-align: center;
46+
font-weight: 300;
47+
margin: 2em 0 0 0;
48+
padding: 0.6em 0;
49+
letter-spacing: 0.4em;
50+
}
51+
52+
nav {
53+
background-color: map-get($colors, pink);
54+
margin-left: 2em;
55+
padding: 0 1em;
56+
height: 100%;
57+
58+
.profile-photo {
59+
margin-top: 5em;
60+
}
61+
62+
h2 {
63+
64+
}
65+
}
66+
67+
main {
68+
margin-right: 2em;
69+
margin-left: 1em;
70+
71+
hr.thin {
72+
width: 100px;
73+
border-color: map-get($colors, pink);
74+
}
75+
76+
p {
77+
font-family: map-get($fonts, body);
78+
font-size: 0.9em;
79+
}
80+
}
81+
82+
header {
83+
padding: 1em;
84+
text-align: center;
85+
background-color: map-get($colors, dark-grey);
86+
}

0 commit comments

Comments
 (0)