Skip to content

Commit

Permalink
First design iteration
Browse files Browse the repository at this point in the history
  • Loading branch information
@sunchayn
sunchayn committed Nov 28, 2018
1 parent 7653a4f commit 29ef20f
Show file tree
Hide file tree
Showing 10 changed files with 427 additions and 231 deletions.
79 changes: 56 additions & 23 deletions 404.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,57 +2,89 @@
<html lang="en" prefix="og: http://ogp.me/ns#">

<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-68131021-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-68131021-2');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Oops it's 404 !</title>
<!-- Search Engine -->
<meta name="description" content="I'm 22 old minimalistic full-stack web developer from Tunisia. I carry both technical and academic knowledge. Throughout the years, I acquired the ability to solve problems and to adapt to changes.">
<meta name="description" content="I'm full-stack web developer. Through the years, I've acquired the ability to solve problems and adapt to changes. Also, I've created multiple open source projects.">
<meta name="image" content="https://mazentouati.github.io/public/static/preview.jpg">
<meta name="author" content="Mazen Touati">
<link rel="canonical" href="https://mazentouati.github.io/" />
<meta name="thumbnail" content="https://mazentouati.github.io/public/static/preview.jpg">
<!--
<PageMap>
<DataObject type="thumbnail">
<Attribute name="src" value="https://mazentouati.github.io/public/static/preview.jpg"/>
<Attribute name="width" value="150"/>
<Attribute name="height" value="150"/>
</DataObject>
</PageMap>
-->

<!-- Schema.org for Google -->
<meta itemprop="name" content="Mazen Touati — Full-stack web developer">
<meta itemprop="description" content="I'm 22 old minimalistic full-stack web developer from Tunisia. I carry both technical and academic knowledge. Throughout the years, I acquired the ability to solve problems and to adapt to changes.">
<meta itemprop="name" content="Oops it's 404 !">
<meta itemprop="description" content="I'm full-stack web developer. Through the years, I've acquired the ability to solve problems and adapt to changes. Also, I've created multiple open source projects.">
<meta itemprop="image" content="https://mazentouati.github.io/public/static/preview.jpg">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Mazen Touati — Full-stack web developer">
<meta name="twitter:description" content="I'm 22 old minimalistic full-stack web developer from Tunisia. I carry both technical and academic knowledge. Throughout the years, I acquired the ability to solve problems and to adapt to changes.">
<meta name="twitter:title" content="Oops it's 404 !">
<meta name="twitter:description" content="I'm full-stack web developer. Through the years, I've acquired the ability to solve problems and adapt to changes. Also, I've created multiple open source projects.">
<meta name="twitter:site" content="@mazen_touati">
<meta name="twitter:creator" content="@mazen_touati">
<meta name="twitter:image:src" content="https://mazentouati.github.io/public/static/preview.jpg">
<meta name="twitter:image" content="https://mazentouati.github.io/public/static/preview.jpg">
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta property="og:title" content="Mazen Touati — Full-stack web developer">
<meta property="og:description" content="I'm 22 old minimalistic full-stack web developer from Tunisia. I carry both technical and academic knowledge. Throughout the years, I acquired the ability to solve problems and to adapt to changes.">
<meta property="og:title" content="Oops it's 404 !">
<meta property="og:description" content="I'm full-stack web developer. Through the years, I've acquired the ability to solve problems and adapt to changes. Also, I've created multiple open source projects.">
<meta property="og:image" content="https://mazentouati.github.io/public/static/preview.jpg">
<meta property="og:url" content="https://mazentouati.github.io/">
<meta property="og:site_name" content="Mazen Touati — Full-stack web developer">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">

<link rel="apple-touch-icon" sizes="180x180" href="public/static/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="public/static/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="public/static/favicons/favicon-16x16.png">
<link rel="manifest" href="public/static/favicons/site.webmanifest">
<link rel="mask-icon" href="public/static/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="theme-color" content="#0000ff">
<meta name="msapplication-TileColor" content="#2f2fe9">

<meta name="theme-color" content="#2f2fe9">
<style>
*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}html{-webkit-box-sizing:border-box;box-sizing:border-box}input[type=email],input[type=password],input[type=search],input[type=text]{-webkit-appearance:none;-moz-appearance:none}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}html,body{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}a{color:#2f2fe9;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{font-family:"Alegreya",serif;color:#000;font-weight:400}body{font-family:"Inconsolata",monospace;color:#000;font-size:14px;font-weight:400}@media only screen and (min-width: 768px){body{font-size:14px}}.l-slide{min-height:100vh;display:flex;background-color:#fff}.l-slide>.container{align-self:stretch;display:flex;flex-direction:column}.l-slide--black{background-color:#000}.l-slide--blue{background-color:#2f2fe9}.l-slide--divider{border-top:1px solid #d4d4d5}.l-slide-content{flex:1px}.l-slide-content--centered{display:flex;flex-direction:column;justify-content:center}.container{width:1100px;max-width:100%;padding:0 1rem}.container.container--half{width:550px}.container--relative{position:relative}@media only screen and (min-width: 768px){.container{padding:0;max-width:95%;margin:0 auto}}.rgbStripe{display:none;z-index:444;position:relative}.rgbStripe-element{height:5px}@media only screen and (min-width: 768px){.rgbStripe-element{width:60px}.rgbStripe{display:flex;justify-content:flex-end}}.rgbStripe-element--red{background-color:red}.rgbStripe-element--green{background-color:lime}.rgbStripe-element--blue{background-color:#2f2fe9}.navbar{display:flex;user-select:none;font-size:15px;transition:transform 100ms ease}.navbar-links{margin-left:auto;display:none}.navbar-mobile{margin-left:auto}@media only screen and (min-width: 768px){.navbar-links{display:block}.navbar-mobile{display:none}}.navbar-item,.navbar-title{padding:1rem 0;display:inline-block}.navbar-item{color:inherit}.navbar-item>a{color:inherit;text-decoration:none}.navbar-item>a:hover{text-decoration:underline}.navbar-item.active>a{color:red}.navbar-item:after{content:"-";margin-left:.25rem;margin-right:.25rem}.navbar-item:last-child:after{content:"";margin:0}.navbar-title{padding-left:0}.navbar-title-username{font-weight:bold;user-select:none;color:#E198FF}.overlay{position:fixed;top:0;bottom:0;right:0;left:0;background:rgba(0,0,0,0.8);z-index:888;display:none}.overlay.active{display:block}.mobile-menu{position:fixed;z-index:999;background-color:#fff;min-height:100vh;width:250px;transform:translateX(-100%);will-change:transform;transition:transform 300ms ease}.mobile-menu>header,.mobile-menu footer{padding:1rem}.mobile-menu.open{transform:translateX(0)}.mobile-item{display:block;padding:.5rem 1rem;font-size:16px}.mobile-item:last-child{border-bottom:1px solid #d4d4d5}.hero-name{color:#fff;margin:0;font-size:3.5em}.hero-post{color:#fff;margin:0;font-family:"Inconsolata",monospace;font-size:2em;color:lime;text-shadow:0 0 5px rgba(0,255,0,0.5);visibility:hidden}.hero-desc{color:#fff;margin:0;font-size:1.2em;line-height:1.5;font-weight:300;visibility:hidden}@media only screen and (min-width: 768px){.hero-name{font-size:60px}.hero-post{font-size:40px}.hero-desc{font-size:16px}.hero-name-breaker{display:none}}.keyboard-xp-hint{position:absolute;right:0;bottom:0;display:none}.keyboard-xp-hint>i.icon{z-index:444;display:inline-block;font-size:2em;color:#fff;margin:0;opacity:0.9;transition:opacity 200ms ease}.keyboard-xp-hint>i.icon:hover{opacity:1}.keyboard-xp-hint>i.icon:hover+.keyboard-xp-hint-content{opacity:1}.keyboard-xp-hint-content{max-width:300px;min-width:300px;background-color:#fff;opacity:0;transition:opacity 300ms ease;padding:.5rem;position:absolute;bottom:105%;right:0}.keyboard-xp-hint-content>h3,.keyboard-xp-hint-content>p{margin-top:0;margin-bottom:.25rem;vertical-align:middle}#beta{font-weight:300;color:red;font-size:0.9rem}@media only screen and (min-width: 768px){.keyboard-xp-hint{display:inline-block}}.sticky{position:fixed;width:100%;top:0;color:#fff;z-index:777;background-color:transparent;box-shadow:0px 1px 5px 0 rgba(0,0,0,0.5);border-top:1px solid #1616cf}.sticky::before{content:"";position:absolute;z-index:-1;top:0;right:0;left:0;bottom:0;transition:background,opacity 100ms ease;background-color:#2f2fe9}@media only screen and (min-width: 768px){.sticky{box-shadow:none;border-top:0}.sticky::before{background-color:rgba(0,0,0,0.8)}.sticky--inverted{color:#000}.sticky--inverted::before{background:linear-gradient(to bottom, rgba(255,255,255,0.9) 60%, rgba(255,255,255,0.1))}}.sticky--hidden{visibility:hidden}

</style>
<link rel="stylesheet" href="public/css/app.min.css">
</head>

<body>
<div class="l-slide l-slide--blue">
<div class="container">
<div class="contact">
<h1 class="contact-smile">404</h1>
<h1 class="contact-heading">Wow, the blue screen of death</h1>
<p class="contact-paragraph">01001001 01110100 00100111 01110011 00100000 01101111 01101011 01100001 01111001 00100000 01110100 01101111 00100000 01100110 01100001 01101001 01101100 00100000 01110011 01101111 01101101 01100101 01110100 01101001 01101101 01100101 01110011 00101110 00100000 01000011 01101000 01100101 01100101 01110010 01110011 00100000 00100001 <br>
<a href="/" style="color: inherit;">[H]ome page</a>
</p>
<footer class="contact-footer">
<img src="public/static/qr.png" alt="QR signature" class="contact-qr">
<div class="contact-copyright">
<p>Designed and developed by Mazen Touati @2018 – GNU GPLv3 License<br>feel free to contact me for any question</p>
<p>Stop code PAGE_NOT_FOUND</p>
</div>
</footer>
<div class="l-slide-content l-slide-content--centered">
<div class="BSOD">
<h1 class="BSOD-smile">404</h1>
<h1 class="BSOD-heading">Wow, you're lost</h1>
<p class="BSOD-paragraph">01001001 01110100 00100111 01110011 00100000 01101111 01101011 01100001 01111001 00100000 01110100 01101111 00100000 01100110 01100001 01101001 01101100 00100000 01110011 01101111 01101101 01100101 01110100 01101001 01101101 01100101 01110011 00101110 00100000 01000011 01101000 01100101 01100101 01110010 01110011 00100000 00100001
</p>
<p class="BSOD-heading">
<a href="/" style="color: inherit;">[H]ome page</a>
</p>
<footer class="BSOD-footer">
<img src="public/static/qr.png" alt="QR signature" class="BSOD-qr">
<div class="BSOD-copyright">
<p>Designed and developed by Mazen Touati @2018 – GNU GPLv3 License<br>feel free to contact me with any questions</p>
<p>Stop code PAGE_NOT_FOUND</p>
</div>
</footer>
</div>
</div>
</div>
</div>
Expand All @@ -61,7 +93,8 @@ <h1 class="contact-heading">Wow, the blue screen of death</h1>
<script>
WebFont.load({
google: {
families: ['Raleway', 'lato']
// families: ['Raleway', 'lato']
families: ['Alegreya', 'Inconsolata']
}
});
</script>
Expand Down
13 changes: 13 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,18 @@
# CHANGELOG

## [0.2.0] - 2018-11-28
### Added
- Keyboard friendly experience
- A separate contact section
### Changed
- Typography (font families, sizes)
- Enhanced the layout a little bit
- Add More Articles button to the blog section
- Reformulate the textual content
- Make the green text glowing ( in the hero section )
- Make the signature self-drawing
- Add a percentage counter in the BSOD

## 0.1.0

- initial version
48 changes: 33 additions & 15 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,16 @@ global.srcDir = './src';

const

gulp = require('gulp'),
browserSync = require('browser-sync').create()
gulp = require('gulp'),
browserSync = require('browser-sync').create(),
del = require('del'),
// sequence = require('gulp-sequence'),
sequence = require('run-sequence'),

buildSASS = require('./tasks/build/sass'),
buildJS = require('./tasks/build/js'),
buildHTML = require('./tasks/build/html'),
buildStatic = require('./tasks/build/static')
buildSASS = require('./tasks/build/sass'),
buildJS = require('./tasks/build/js'),
buildHTML = require('./tasks/build/html'),
buildStatic = require('./tasks/build/static')

exportJS = require('./tasks/export/js'),
exportHTML = require('./tasks/export/html'),
Expand All @@ -35,14 +38,27 @@ gulp.task('build:js', buildJS);
gulp.task('build:html', buildHTML);
gulp.task('build:static', buildStatic);


gulp.task('build', function() {
buildSASS();
buildJS();
buildHTML();
buildStatic();
del([global.destDir + '/**/*']).then(function() {
sequence('build:sass', 'build:js', 'build:static', 'build:html');
});
});

// gulp.task('test:production', function() {
// browserSync.init({
// server: {
// baseDir: ['./'],
// },
// notify: false,
// ui: false,
// open: false,
// injectChanges: true,
// });
// });

gulp.task('serve', ['build'], function () {

browserSync.init({
server: {
baseDir: ['./dist/'],
Expand All @@ -60,15 +76,17 @@ gulp.task('serve', ['build'], function () {
});

gulp.task('reload:sass', function () {
buildSASS().on('end', function() {
browserSync.reload();
buildSASS().resume().on('end', function() {
gulp.start('reload:html');
});
});

gulp.task('reload:js', function () {
buildJS().on('end', function() {
browserSync.reload();
});
buildJS().pipe(browserSync.reload({ stream: true }));

// buildJS().pipe(browserSync.reload({ stream: true})).on('end', function() {
// browserSync.reload();
// });
});

gulp.task('reload:html', function () {
Expand Down
Loading

0 comments on commit 29ef20f

Please sign in to comment.