Added tutorial material
This commit is contained in:
Panos Sakkos
parent
b006ce74e6
commit
d54736f864
60 changed files with 438 additions and 563 deletions
140
_config.yml
140
_config.yml
|
|
@ -1,15 +1,87 @@
|
|||
|
||||
# Site settings
|
||||
|
||||
url: "http://panossakkos.github.io"
|
||||
baseurl: /personal-jekyll-theme
|
||||
google-tracking-id: "<YOUR GOOGLE TRACKING ID>"
|
||||
|
||||
#############
|
||||
# HTML Head #
|
||||
#############
|
||||
|
||||
author: "John Smith"
|
||||
lang: "en"
|
||||
title: "{ Panos Sakkos }"
|
||||
description: "Blog and website of Panos Sakkos, blogging mainly for tech. Opinions expressed are mine."
|
||||
keywords: "panos, sakkos, panos sakkos, technology, computer science, Pwn Mail, WriteRight, UoA, di, CERN, MDCN, Microsoft"
|
||||
title: "{ John Smith }"
|
||||
favicon: "/img/favicon.ico"
|
||||
description: "Blog and website of John Smith, blogging mainly for tech. Opinions expressed are mine."
|
||||
keywords: "smith, jones, personal, jekyll, theme"
|
||||
|
||||
################
|
||||
# Intro layout #
|
||||
################
|
||||
|
||||
black-favicon: "/img/black-lab-glass.ico"
|
||||
google-tracking-id: "UA-35880426-3"
|
||||
background-img: "../img/intro-bg.jpg"
|
||||
me-img: "/img/jetpacktocat.png"
|
||||
|
||||
########
|
||||
# Blog #
|
||||
########
|
||||
|
||||
post-preview-words: 128
|
||||
|
||||
paginate: 5
|
||||
|
||||
fb-share: True
|
||||
twitter-share: True
|
||||
reddit-share: True
|
||||
disqus-shortname: "panossakkos"
|
||||
|
||||
###############
|
||||
# Life Events #
|
||||
###############
|
||||
|
||||
events:
|
||||
- image: "/img/career/spidertocat.png"
|
||||
date: "September 2013 - Today"
|
||||
description: "Saving the neighborhood!"
|
||||
- image: "/img/career/baracktocat.jpg"
|
||||
date: "September 2007 - August 2013"
|
||||
description: "Started coding"
|
||||
|
||||
# First image of the Career timeline
|
||||
career-img: "/img/career/default.png"
|
||||
|
||||
##################
|
||||
# Contact layout #
|
||||
##################
|
||||
|
||||
email: "your@email.here"
|
||||
|
||||
##################
|
||||
# Social Buttons #
|
||||
##################
|
||||
|
||||
social:
|
||||
- title: "github"
|
||||
url: "https://github.com/"
|
||||
- title: "linkedin"
|
||||
url: "http://no.linkedin.com/"
|
||||
- title: "youtube"
|
||||
url: "http://youtube.com/"
|
||||
- title: "rss"
|
||||
url: "/feed.xml"
|
||||
|
||||
############
|
||||
# 404 page #
|
||||
############
|
||||
|
||||
404-img: "/img/labtocat.png"
|
||||
|
||||
################################################################################
|
||||
|
||||
# Tread carefully if you want to change the variables bellow this point!
|
||||
|
||||
# Navigation bar links
|
||||
# Blog link in the blog and post pages will point to the blog.html#blog
|
||||
# In the default page it will point to the preview of the last post
|
||||
|
|
@ -20,66 +92,12 @@ pages_list:
|
|||
Career: 'career'
|
||||
Contact: 'contact'
|
||||
|
||||
# Pagination path
|
||||
paginate_path: "blog/page:num"
|
||||
|
||||
# Enable minification SASS
|
||||
sass:
|
||||
style: compressed
|
||||
|
||||
background-img: "/img/intro-bg.jpg"
|
||||
|
||||
# About variables
|
||||
|
||||
me-img: "/img/me.jpg"
|
||||
|
||||
# Blog variables
|
||||
paginate: 15
|
||||
|
||||
paginate_path: "blog/page:num"
|
||||
|
||||
post-preview-words: 128
|
||||
|
||||
fb-share: True
|
||||
twitter-share: True
|
||||
reddit-share: True
|
||||
|
||||
# Career variables
|
||||
|
||||
events:
|
||||
- image: "/img/career/microsoft.jpg"
|
||||
date: "September 2014 - Today"
|
||||
description: "Software Engineer @ Microsoft Development Center Norway, working @ the <a href=\"http://dev.office.com/officegraph\" target=\"_blank\"> Office Graph</a>"
|
||||
- image: "/img/career/uoa.jpg"
|
||||
date: "October 2012 - August 2014"
|
||||
description: "Master studies @ <a href=\"http://www.di.uoa.gr/eng\" target=\"_blank\">Department of Informatics and Telecommunications</a> on Software Engineering + <a href=\"http://scholar.google.com/citations?user=UtV6LFYAAAAJ&hl=en&oi=ao\" target=\"_blank\">Machine Learning researcher</a> @ <a href=\"http://kddlab.di.uoa.gr\" target=\"_blank\">KDD</a> lab"
|
||||
- image: "/img/career/cern.jpg"
|
||||
date: "October 2011 - September 2012"
|
||||
description: "Security researcher @ <a href=\"http://www.cern.ch\" target=\"_blank\">CERN</a>, developed linux kernel extensions to prevent cyber attacks"
|
||||
- image: "/img/career/writeright.jpg"
|
||||
date: "August 2011 - Today"
|
||||
description: "Released <a href=\"https://play.google.com/store/apps/details?id=panos.sakkos.softkeyboard.writeright\" target=\"_blank\">WriteRight</a>, an adaptive S/W keyboard for Android devices, which shrinks the unlikely keys to tap next. Currently it holds > 9,000 downloads"
|
||||
- image: "/img/career/pwnmail.jpg"
|
||||
date: "June 2010 - November 2010"
|
||||
description: "Released <a href=\"https://www.google.com/search?q=pwn+mail\" target=\"_blank\">Pwn Mail</a>, an iPhone app for spoofing emails. It served > 260,000 emails but it was discontinued after a legal threat by <strike>Steve Jobs</strike> a secretary of Steve Jobs"
|
||||
- image: "/img/career/uoa.jpg"
|
||||
date: "October 2007 - September 2011"
|
||||
description: "Bachelor studies @ <a href=\"http://www.di.uoa.gr/eng\" target=\"_blank\">Department of Informatics and Telecommunications</a> on Computer Science and Telecomunications"
|
||||
|
||||
# First image of the Career timeline
|
||||
career-img: "/img/career/default.jpg"
|
||||
|
||||
# Social networks variables (many more available: facebook, flickr, dribbble, pinterest, instagram, tumblr etc.)
|
||||
social:
|
||||
- title: "rss"
|
||||
url: "/feed.xml"
|
||||
- title: "github"
|
||||
url: "https://github.com/PanosSakkos"
|
||||
- title: "linkedin"
|
||||
url: "http://no.linkedin.com/in/PanosSakkos"
|
||||
- title: "youtube"
|
||||
url: "http://youtube.com/c/PanosSakkos"
|
||||
- title: "soundcloud"
|
||||
url: "https://soundcloud.com/psakkos/"
|
||||
|
||||
404-img: "/img/labtocat.png"
|
||||
|
||||
# Exclusion list from the generated _site
|
||||
exclude: ["Rakefile", "LICENSE", "readme.markdown", "vendor"]
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
|
||||
{{ page.content | markdownify }}
|
||||
|
||||
<ul class="timeline">
|
||||
<ul class="timeline">
|
||||
|
||||
{% for event in site.events %}
|
||||
{% for event in site.events %}
|
||||
{% assign loopindex = forloop.index | modulo: 2 %}
|
||||
{% capture class %}
|
||||
{% if loopindex == 0 %}
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<li class="{{ class }}">
|
||||
<div class="timeline-image">
|
||||
<img class="img-circle img-responsive" src="{{ event.image }}" alt="">
|
||||
<img class="img-circle img-responsive" src="{{site.baseurl}}{{ event.image }}" alt="">
|
||||
</div>
|
||||
<div class="timeline-panel">
|
||||
<div class="timeline-heading">
|
||||
|
|
@ -32,10 +32,9 @@
|
|||
|
||||
<li class="timeline-inverted">
|
||||
<div class="timeline-image">
|
||||
<img class="img-circle img-responsive" src="{{ site.career-img }}" alt="">
|
||||
<img class="img-circle img-responsive" src="{{site.baseurl}}{{ site.career-img }}" alt="">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
|
||||
{% if site.disqus-shortname %}
|
||||
<div id="disqus_thread"></div>
|
||||
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
|
||||
<div id="disqus_thread"></div>
|
||||
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -5,25 +5,25 @@
|
|||
|
||||
{{ page.content | markdownify }}
|
||||
|
||||
{% if page.email %}
|
||||
{% if page.email contains '@' %}
|
||||
{% assign newemail = page.email | split: '@' %}
|
||||
<p>
|
||||
<script>
|
||||
function join_at_email(user, domain){
|
||||
return (user && domain)?(user + "@" + domain):"";
|
||||
}
|
||||
document.write('<a href="mailto:'
|
||||
+ join_at_email( "{{ newemail[0] }}", "{{ newemail[1] }}" )
|
||||
+ '">'
|
||||
+ join_at_email( "{{ newemail[0] }}", "{{ newemail[1] }}" )
|
||||
+ '</a>'
|
||||
);
|
||||
</script>
|
||||
</p>
|
||||
{% else %}
|
||||
<p><a href="mailto:{{ page.email }}">{{ page.email }}</a></p>
|
||||
{% endif %}
|
||||
{% if site.email %}
|
||||
{% if site.email contains '@' %}
|
||||
{% assign newemail = site.email | split: '@' %}
|
||||
<p>
|
||||
<script>
|
||||
function join_at_email(user, domain){
|
||||
return (user && domain)?(user + "@" + domain):"";
|
||||
}
|
||||
document.write('<a href="mailto:'
|
||||
+ join_at_email( "{{ newemail[0] }}", "{{ newemail[1] }}" )
|
||||
+ '">'
|
||||
+ join_at_email( "{{ newemail[0] }}", "{{ newemail[1] }}" )
|
||||
+ '</a>'
|
||||
);
|
||||
</script>
|
||||
</p>
|
||||
{% else %}
|
||||
<p><a href="mailto:{{ site.email }}">{{ site.email }}</a></p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% include social-buttons.html %}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,10 @@
|
|||
<meta name="description" content="{{ site.description }}">
|
||||
<meta name="author" content="{{ site.author }}">
|
||||
<meta name="keywords" content="{{ site.keywords }}">
|
||||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
|
||||
{% if page.url == "/404.html" %}
|
||||
<meta http-equiv="refresh" content="20; url=/">
|
||||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl }}">
|
||||
{% assign fourofour = "/404.html"%}
|
||||
{% if page.url == {{fourofour}} | prepend: {{site.baseurl}} %}
|
||||
<meta http-equiv="refresh" content="20; url={{site.baseurl}}/">
|
||||
{% endif %}
|
||||
<title>{{ site.title }} {% if page.title %} | {{ page.title }}{% endif %}</title>
|
||||
|
||||
|
|
@ -15,8 +16,8 @@
|
|||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link href="/css/grayscale.css" rel="stylesheet">
|
||||
<link href="/css/timeline.css" rel="stylesheet">
|
||||
<link href="{{site.baseurl}}/css/grayscale.css" rel="stylesheet">
|
||||
<link href="{{site.baseurl}}/css/timeline.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom Fonts -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
|
||||
|
|
@ -30,6 +31,6 @@
|
|||
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
{% if site.favicon %}
|
||||
<link rel="shortcut icon" type="image/x-icon" href="{{ site.favicon }}">
|
||||
<link rel="shortcut icon" type="image/x-icon" href="{{site.baseurl}}{{ site.favicon }}">
|
||||
{% endif %}
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@
|
|||
<h1 class="brand-heading"> </h1>
|
||||
<h1 class="brand-heading"> </h1>
|
||||
<p class="intro-text">{{ content }}</p>
|
||||
<a href="#{{ site.pages_list['About'] }}" class="page-scroll">
|
||||
<img class="img-me" src="{{ site.me-img }}" alt="">
|
||||
</a>
|
||||
<a href="#{{ site.pages_list['About'] }}" class="page-scroll">
|
||||
<img class="img-me" src="{{site.baseurl}}{{ site.me-img }}" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,37 @@
|
|||
</script>
|
||||
{% endif %}
|
||||
|
||||
<!-- Disqus -->
|
||||
|
||||
{% if site.disqus-shortname %}
|
||||
<script type="text/javascript">
|
||||
var disqus_shortname = '{{ site.disqus-shortname }}';
|
||||
(function() {
|
||||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||||
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
|
||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||
})();
|
||||
</script>
|
||||
|
||||
{% if page.section-type == "post" or page.section-type == "blog" or page.section-type == "index" or page.section-type == "tag" %}
|
||||
<!-- Comments counter -->
|
||||
|
||||
<script type="text/javascript">
|
||||
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
|
||||
var disqus_shortname = '{{ site.disqus-shortname }}'; // required: replace example with your forum shortname
|
||||
|
||||
/* * * DON'T EDIT BELOW THIS LINE * * */
|
||||
(function () {
|
||||
var s = document.createElement('script'); s.async = true;
|
||||
s.type = 'text/javascript';
|
||||
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
|
||||
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
|
||||
}());
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% if page.section-type == "post" %}
|
||||
|
||||
<!-- Share buttons -->
|
||||
|
|
@ -41,35 +72,4 @@
|
|||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
{% endif %}
|
||||
|
||||
<!-- Disqus -->
|
||||
|
||||
{% if site.disqus-shortname %}
|
||||
<script type="text/javascript">
|
||||
var disqus_shortname = '{{ site.disqus-shortname }}';
|
||||
(function() {
|
||||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||||
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
|
||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||
})();
|
||||
</script>
|
||||
|
||||
{% if page.section-type == "post" or page.section-type == "blog" or page.section-type == "index" or page.section-type == "tag" %}
|
||||
<!-- Comments counter -->
|
||||
|
||||
<script type="text/javascript">
|
||||
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
|
||||
var disqus_shortname = '{{ site.disqus-shortname }}'; // required: replace example with your forum shortname
|
||||
|
||||
/* * * DON'T EDIT BELOW THIS LINE * * */
|
||||
(function () {
|
||||
var s = document.createElement('script'); s.async = true;
|
||||
s.type = 'text/javascript';
|
||||
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
|
||||
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
|
||||
}());
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@
|
|||
{% assign post = site.posts.first %}
|
||||
<h4> <strong> {{ post.date | date_to_string }} </strong>
|
||||
<small>. {{ post.category }} .</small>
|
||||
<strong> <a href="{{ post.url }}">{{ post.title }} </a> </strong>
|
||||
<small> <a href="{{ post.url }}#disqus_thread">Comments</a></small>
|
||||
<strong> <a href="{{site.baseurl}}{{ post.url }}">{{post.title}} </a> </strong>
|
||||
<small> <a href="{{site.baseurl}}{{post.url}}#disqus_thread">Comments</a></small>
|
||||
</h4>
|
||||
|
||||
{{ post.content | truncatewords: site.post-preview-words | strip_html | markdownify }}
|
||||
|
||||
<a href="/blog/index.html"><h4><strong>View more posts</strong></h4></a>
|
||||
<a href="{{site.baseurl}}/blog/index.html"><h4><strong>View more posts</strong></h4></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
{% if page.section-type == "index" %}
|
||||
<a class="navbar-brand page-scroll" href="#page-top">
|
||||
{% else %}
|
||||
<a class="navbar-brand page-scroll" href="/index.html#page-top">
|
||||
<a class="navbar-brand page-scroll" href="{{site.baseurl}}/index.html#page-top">
|
||||
{% endif %}
|
||||
<div>{% if site.black-favicon %}<img src="{{ site.black-favicon }}" alt=""> {% endif %}{{ site.title }}</div>
|
||||
<div>{% if site.black-favicon %}<img src="{{site.baseurl}}{{ site.black-favicon }}" alt=""> {% endif %}{{ site.title }}</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
|
|
@ -39,11 +39,11 @@
|
|||
</li>
|
||||
{% elsif p[0] == "Blog" %}
|
||||
<li>
|
||||
<a class="page-scroll" href="/blog/index.html"> {{ p[0] }} </a>
|
||||
<a class="page-scroll" href="{{site.baseurl}}/blog/index.html"> {{ p[0] }} </a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li>
|
||||
<a class="page-scroll" href="/index.html#{{ p[1] }}"> {{ p[0] }} </a>
|
||||
<a class="page-scroll" href="{{site.baseurl}}/index.html#{{ p[1] }}"> {{ p[0] }} </a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
|
|
|||
18
_includes/pagination.html
Normal file
18
_includes/pagination.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!-- Pagination links -->
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
{% if paginator.previous_page and paginator.next_page%}
|
||||
<h4>
|
||||
<a href="{{site.baseurl}}{{ paginator.previous_page_path }}" class="previous">Newer Posts</a> <a href="{{site.baseurl}}{{ paginator.next_page_path }}" class="next">Older Posts</a>
|
||||
</h4>
|
||||
{% endif %}
|
||||
|
||||
{% if paginator.previous_page %}
|
||||
<h4><a href="{{site.baseurl}}{{ paginator.previous_page_path }}" class="previous">Newer Posts</a></h4>
|
||||
{% endif %}
|
||||
|
||||
{% if paginator.next_page %}
|
||||
<h4><a href="{{site.baseurl}}{{ paginator.next_page_path }}" class="next">Older Posts</a></h4>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
@ -1,21 +1,21 @@
|
|||
<div>
|
||||
{% if site.fb-share %}
|
||||
<div style="float:left; padding: 0 5px; vertical-align:top">
|
||||
<div class="fb-share-button" data-href="{{ site.url }}{{ page.url }}" data-layout="button_count"></div>
|
||||
<div class="fb-share-button" data-href="{{site.baseurl}}{{page.url}}" data-layout="button_count"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if site.twitter-share %}
|
||||
<div style="float:left; padding: 0 5px; vertical-align:top">
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="{{ site.url }}{{ page.url }}" data-text="{{ page.title }} {% for tag in page.tags%}#{{ tag }} {% endfor %}"></a>
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-url="{{ site.baseurl}}{{page.url}}" data-text="{{page.title}} {% for tag in page.tags%}#{{ tag }} {% endfor %}"></a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if site.reddit-share %}
|
||||
<div style="float:left; padding: 0 5px; vertical-align:top">
|
||||
<script type="text/javascript">reddit_newwindow='1'</script>
|
||||
<script type="text/javascript">reddit_title='{{ page.title }}'</script>
|
||||
<script type="text/javascript">reddit_url='{{ site.url }}/{{ page.url }}'</script>
|
||||
<script type="text/javascript">reddit_title='{{page.title}}'</script>
|
||||
<script type="text/javascript">reddit_url='{{site.baseurl}}{{page.url}}'</script>
|
||||
<script type="text/javascript" src="//www.redditstatic.com/button/button1.js"></script>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<ul class="list-inline social-buttons">
|
||||
{% for network in site.social %}
|
||||
<li><a href="{{ network.url }}" target="_blank"><i class="fa fa-{{ network.title }} fa-fw"></i></a></li>
|
||||
<li><a href="{{site.baseurl}}{{ network.url }}" target="_blank"><i class="fa fa-{{ network.title }} fa-fw"></i></a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -14,27 +14,11 @@
|
|||
{{ page.content | markdownify }}
|
||||
|
||||
{% for post in paginator.posts %}
|
||||
<h4 align="left"><strong>{{ post.date | date_to_string }}</strong> <small>. {{ post.category }} .</small> <a href="{{ post.url }}"> <strong>{{ post.title }} </strong> </a> <small><a href="{{ post.url }}#disqus_thread">Comments</a></small></h4>
|
||||
<h4 align="left"><strong>{{ post.date | date_to_string }}</strong> <small>. {{ post.category }} .</small> <a href="{{site.baseurl}}{{post.url}}"> <strong>{{ post.title }} </strong> </a> <small><a href="{{site.baseurl}}{{post.url}}#disqus_thread">Comments</a></small></h4>
|
||||
{% endfor %}
|
||||
|
||||
<!-- Pagination links -->
|
||||
<div class="pagination">
|
||||
{% include pagination.html %}
|
||||
|
||||
{% if paginator.previous_page and paginator.next_page%}
|
||||
<h4>
|
||||
<a href="{{ paginator.previous_page_path }}" class="previous">Newer Posts</a> <a href="{{ paginator.next_page_path }}" class="next">Older Posts</a>
|
||||
</h4>
|
||||
{% endif %}
|
||||
|
||||
{% if paginator.previous_page %}
|
||||
<h4><a href="{{ paginator.previous_page_path }}" class="previous">Newer Posts</a></h4>
|
||||
{% endif %}
|
||||
|
||||
{% if paginator.next_page %}
|
||||
<h4><a href="{{ paginator.next_page_path }}" class="next">Older Posts</a></h4>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -42,7 +26,7 @@
|
|||
<section id="{{ page.title }}" class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
{% include social-buttons.html %}
|
||||
{% include social-buttons.html %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -13,19 +13,19 @@
|
|||
|
||||
<h1><strong>{{ page.title }}</strong></h1>
|
||||
|
||||
{{ page.content | markdownify }}
|
||||
{{ page.content | markdownify }}
|
||||
|
||||
<img class="img-responsive center-block" src="{{ site.404-img }}" alt="">
|
||||
<img class="img-responsive center-block" src="{{site.baseurl}}{{ site.404-img }}" alt="">
|
||||
|
||||
{% include social-buttons.html %}
|
||||
{% include social-buttons.html %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
{% include footer.html %}
|
||||
|
||||
{% include js.html %}
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -12,17 +12,17 @@
|
|||
<div class="col-lg-8 col-lg-offset-2">
|
||||
|
||||
<h1><strong>{{ page.title }}</strong></h1>
|
||||
<h4><strong>{{ page.date | date_to_string }}</strong>
|
||||
<small> . {{ page.category }} . <a href="{{ page.url }}#disqus_thread">Comments</a>
|
||||
<h4><strong>{{ page.date | date_to_string }}</strong>
|
||||
<small> . {{ page.category }} . <a href="{{site.baseurl}}{{page.url }}#disqus_thread">Comments</a>
|
||||
{% for tag in page.tags %}
|
||||
<a href="/tags/{{ tag }}.html">#{{ tag }}</a>
|
||||
<a href="{{site.baseurl}}/tags/{{tag}}.html">#{{ tag }}</a>
|
||||
{% endfor %}
|
||||
</small>
|
||||
</h4>
|
||||
|
||||
{{ page.content | markdownify }}
|
||||
{{ page.content | markdownify }}
|
||||
|
||||
{% include share.html %}
|
||||
{% include share.html %}
|
||||
|
||||
{% include comments.html %}
|
||||
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
<section id="{{ page.title }}" class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
{% include social-buttons.html %}
|
||||
{% include social-buttons.html %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -14,13 +14,16 @@
|
|||
<div id="archives">
|
||||
<div>
|
||||
{% assign tag = page.title %}
|
||||
|
||||
<h3 id="#{{ tag }}">#{{ tag }}</h3>
|
||||
|
||||
{% for post in site.posts %}
|
||||
{% if post.tags contains tag %}
|
||||
<h4 align="left"><strong>{{ post.date | date_to_string }}</strong> <small>. {{ post.category }} .</small> <a href="{{ post.url }}"> <strong>{{ post.title }} </a> </strong> <small><a href="{{ site.url }}{{post.url }}#disqus_thread">Comments</a></small></h4>
|
||||
<h4 align="left"><strong>{{ post.date | date_to_string }}</strong> <small>. {{ post.category }} .</small> <a href="{{site.baseurl}}{{ post.url }}"> <strong>{{ post.title }} </a> </strong> <small><a href="{{site.baseurl}}{{post.url}}#disqus_thread">Comments</a></small></h4>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -30,7 +33,7 @@
|
|||
<section id="{{ page.title }}" class="container content-section text-center">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
{% include social-buttons.html %}
|
||||
{% include social-buttons.html %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
17
_posts/2015-06-10-contact-tutorial.markup
Normal file
17
_posts/2015-06-10-contact-tutorial.markup
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: Modifying the Contact
|
||||
category: tech
|
||||
tags: [ 'tutorial' ]
|
||||
---
|
||||
|
||||
The contact part of the index page is consisted of two elements:
|
||||
|
||||
1. Text
|
||||
2. Your email address
|
||||
|
||||
You can modify its text from the contact.html file.
|
||||
Then in the _config.yml set the email variable to your email.
|
||||
|
||||
Don't be afraid of Email Harvesting, write your email properly, and the page will perform javascript obfuscation.
|
||||
24
_posts/2015-06-11-social-buttons-tutorial.markup
Normal file
24
_posts/2015-06-11-social-buttons-tutorial.markup
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: How to modify the social buttons
|
||||
category: tech
|
||||
tags: [ 'tutorial' ]
|
||||
---
|
||||
|
||||
Social buttons (rendered in the footer) are great for having a small hub with all your social footprint.
|
||||
In order to change them, go to _config.yml and edit the social list:
|
||||
|
||||
<pre style="text-align: left">
|
||||
social:
|
||||
- title: "github"
|
||||
url: "https://github.com/"
|
||||
- title: "linkedin"
|
||||
url: "http://no.linkedin.com/"
|
||||
- title: "youtube"
|
||||
url: "http://youtube.com/"
|
||||
- title: "rss"
|
||||
url: "/feed.xml"
|
||||
</pre>
|
||||
|
||||
There are plenty of social networks, just try them out and see its rendering in the browser 😉
|
||||
28
_posts/2015-06-12-timeline-tutorial.markup
Normal file
28
_posts/2015-06-12-timeline-tutorial.markup
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: How to add a life event
|
||||
category: tech
|
||||
tags: [ 'tutorial' ]
|
||||
---
|
||||
One of the cool features of { Personal } is that enables you to tell your life's story in
|
||||
the form of a timeline of photos, dates and text descriptions. Let's see how it works.
|
||||
|
||||
Open the _config.yml and find the events list definition, it should look like this:
|
||||
|
||||
<pre style="text-align: left">
|
||||
events:
|
||||
- image: "/img/career/spidertocat.png"
|
||||
date: "September 2013 - Today"
|
||||
description: "Saving the neighborhood!"
|
||||
- image: "/img/career/baracktocat.jpg"
|
||||
date: "September 2007 - August 2013"
|
||||
description: "Started coding"
|
||||
</pre>
|
||||
|
||||
For each event of your life, add a tuple of image, date and description to the events, and the timeline will be automatically generated!
|
||||
|
||||
Bellow the events variable there is the career-img.
|
||||
Set this path to the image that you want to show in the beginning of the timeline.
|
||||
|
||||
Square images are most suited 😉
|
||||
9
_posts/2015-06-15-rss-tutorial.markup
Normal file
9
_posts/2015-06-15-rss-tutorial.markup
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: How to generate your Blog's RSS feed
|
||||
category: tech
|
||||
tags: [ 'tutorial', 'ShortestTutorialEver' ]
|
||||
---
|
||||
|
||||
Sit back, build the jekyll theme and it will be autogenerated in /feed.xml!
|
||||
29
_posts/2015-06-19-writing-posts.markup
Normal file
29
_posts/2015-06-19-writing-posts.markup
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: Writing posts
|
||||
category: tech
|
||||
tags: [ 'tutorial' ]
|
||||
---
|
||||
Every file with the format <i>YYYY-MM-DD-<post name>.markup</i> will be processed as a
|
||||
post, with publication date <i>YYYY-MM-DD</i>.
|
||||
|
||||
Make sure that its content starts with:
|
||||
|
||||
<pre style="text-align: left">
|
||||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: Setting up the Blog
|
||||
category: tech
|
||||
tags: [ 'tutorial' ]
|
||||
---
|
||||
</pre>
|
||||
|
||||
The *layout* and *section-type* are used by the theme.
|
||||
|
||||
Note: *{ Personal }* generates a static page, just like all jekyll themes.
|
||||
So we have to create the tag pages before building and publishing the site.
|
||||
For now, this has to be done manually, which practically means that you have to add a file under the tags directory, to represent the tag, similar to the existing tutorial.html file. I plan to write a script that will parse the posts, detect the tags and then auto-generate the tag pages.
|
||||
|
||||
Note: If you want to use a list in your posts, consider assigning the class *personal-list*, in order to make the list items render in the center.
|
||||
40
_posts/2015-06-20-blog-tutorial.markup
Normal file
40
_posts/2015-06-20-blog-tutorial.markup
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: Setting up the Blog
|
||||
category: tech
|
||||
tags: [ 'tutorial' ]
|
||||
---
|
||||
|
||||
A website is truly personal if it's your blog as well, this place of the internet where you can place your thoughts about anything!
|
||||
|
||||
First of all, you get a preview of the latest post in the index, in order to attract the visitor to visit your blog. The size of this preview is defined by:
|
||||
|
||||
<pre style="text-align: left">
|
||||
post-preview-words: 128
|
||||
</pre>
|
||||
|
||||
Feel free to experiment with different sizes, and pick the best for you.
|
||||
|
||||
A blog is expected to host many posts, so you will need an archive with pagination,
|
||||
which in a nutshell it's a grouping of your posts in pages, in reverse chronological
|
||||
order. You can define the number of posts that are displayed per page by changing:
|
||||
|
||||
<pre style="text-align: left">
|
||||
paginate: 5
|
||||
</pre>
|
||||
|
||||
You can select the social network share buttons that you want under each post from:
|
||||
|
||||
<pre style="text-align: left">
|
||||
fb-share: True
|
||||
twitter-share: True
|
||||
reddit-share: True
|
||||
</pre>
|
||||
|
||||
And you can enable <a href="http://www.disqus.com" target="_blank">Disqus</a> comments
|
||||
by just setting your Disqus username here:
|
||||
|
||||
<pre style="text-align: left">
|
||||
disqus-shortname: "<YOUR DISQUS USERNAME>"
|
||||
</pre>
|
||||
30
_posts/2015-06-24-intro-layout-tutorial.markup
Normal file
30
_posts/2015-06-24-intro-layout-tutorial.markup
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: Modifying the Intro
|
||||
category: tech
|
||||
tags: [ 'tutorial' ]
|
||||
---
|
||||
|
||||
The intro part of the index page is consisted of three elements:
|
||||
|
||||
<ol class="personal-list">
|
||||
<li>A black favicon</li>
|
||||
<li>Text</li>
|
||||
<li>Background image</li>
|
||||
<li>Your images</li>
|
||||
</ol>
|
||||
|
||||
You can modify its text from the index.html file.
|
||||
In order to set the background and your image, modify the following variables in _config:
|
||||
|
||||
<pre style="text-align: left">
|
||||
black-favicon: "/img/black-lab-glass.ico"
|
||||
background-img: "../img/intro-bg.jpg"
|
||||
me-img: "/img/jetpacktocat.png"
|
||||
</pre>
|
||||
|
||||
The black favicon is an image on the left of the navigation bar.
|
||||
Preferably it should be a black and white version of your favicon.
|
||||
|
||||
All set!
|
||||
36
_posts/2015-06-25-html-head-tutorial.markup
Normal file
36
_posts/2015-06-25-html-head-tutorial.markup
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: Modifying the HTML HEAD
|
||||
category: tech
|
||||
tags: [ 'tutorial' ]
|
||||
---
|
||||
|
||||
In the _config.yml, find and set the variables of the Head section:
|
||||
|
||||
<pre style="text-align: left">
|
||||
#############
|
||||
# HTML Head #
|
||||
#############
|
||||
|
||||
author: "John Smith"
|
||||
lang: "en"
|
||||
title: "{ John Smith }"
|
||||
favicon: "/img/favicon.ico"
|
||||
description: "Blog and website of John Smith, blogging mainly for tech. Opinions expressed are mine."
|
||||
keywords: "smith, jones, personal, jekyll, theme"
|
||||
</pre>
|
||||
|
||||
The values that you set, will be placed in the head section of every generated HTML page.
|
||||
|
||||
Don't forget to set the configurations for your site's url and Google tracking id
|
||||
|
||||
<pre style="text-align: left">
|
||||
url: "http://panossakkos.github.io/personal-jekyll-theme/"
|
||||
google-tracking-id: "<YOUR GOOGLE TRACKING ID>"
|
||||
</pre>
|
||||
|
||||
The url is essential to be set, because it's used in many places across the theme.
|
||||
|
||||
The Google tracking code will be placed in every generated page.
|
||||
If you don't want Google tracking, set it to an empty string, or simply remove the definition form the configuration file.
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: Blogging Like a Hacker
|
||||
category: tech
|
||||
tags: [ 'jekyll' ]
|
||||
---
|
||||
I don't remember exactly how many blogs I created the past years, but this one feels like the one.
|
||||
I had one blog on Tumblr and three or four on Wordpress.
|
||||
Tumblr's brand didn't align with my vision of my blog.
|
||||
I wanted a truly personal blog.
|
||||
A blog where I could share my thoughts mainly on technology but at the same time, keep it open to explore other areas.
|
||||
For example, at some point I might wanted to blog about music or personal thoughts on a viral and important matter, you name it. Tumblr wasn't the right place for this purpose, because its brand is purely recreational. On the other hand, Wordpress has a more elastic brand. You can use it for whatever purpose you want, but it was too complicated for me and of course the produced code was too heavy, given how little control you have on the generated code. Moreover, migrating a blog was a pain in the ass. After creating and deleting several blogs, I gave up Wordpress. One week ago a <a href="http://dkotzias.com" target="_blank">friend<a/> told me about <a href="http://www.jekyllrb.com" target="_blank">Jekyll</a> and I decided to give it a try.
|
||||
An easy decision, given my zero options at the time.
|
||||
|
||||
First of all, its origins are in GitHub, a company that I really appreciate and support.
|
||||
My personal opinion about GitHub is that they changed our field, by transforming the day-to-day interaction with the best version control system into a UX.
|
||||
Git is complicated but powerful and GitHub's client Apps for <a href="https://mac.github.com" target="_blank">Mac</a> and <a href="https://windows.github.com" target="_blank">Windows</a> made it easy and playful to use.
|
||||
Also their <a href="https://github.com" target="_blank">web access</a> promoted coding as a social network, which was ingenious because it worked as a motivation for people to open-source their work and help others.
|
||||
Back to Jekyll. Yes, reading that it was created in GitHub was more than enough for me to invest my time on it.
|
||||
And yes, Jekyll needs some time invested on it, given that it's not a CMS, which means that you have to get your hands dirty.
|
||||
|
||||
I started from the official <a href="http://jekyllrb.com/docs/home" target="_blank">documentation</a>,
|
||||
but soon I realized that it would be more fun to not reinvent the wheel,
|
||||
but fork an existing open-source blog that I liked.
|
||||
I searched a few themes, chose the <a href="http://kirbyt.github.io/timeline-jekyll-theme" target="_blank">Timeline</a> and started playing with it.
|
||||
Timeline is a mashup of the popular <a href="http://y7kim.github.io/agency-jekyll-theme/" target="_blank">Agency</a> and <a href="http://jeromelachaud.github.io/grayscale-theme/" target="_blank">Grayscale</a> themes.
|
||||
Most Jekyll themes are sleek and <strike>mobile first</strike> responsive,
|
||||
but Timeline won me because of the <strike>Career page</strike> Timeline (duh).
|
||||
Also I loved the white on black text, because it improves significantly the reading experience and my vision was to create a website/blog that people would enjoy to spend a few minutes on it without getting tired.
|
||||
The first day that I spent on Jekyll was to understand how it works and the result was to just replace existing placeholders and variables to create my Timeline. But that wasn't enough, I needed a blog. I couldn't spend more than one day at the time, so I just published it for free on <a href="https://pages.github.com" target="_blank">GitHub Pages</a>. I hadn't used GitHub Pages for a while, so I had forgoten how awesome it is to just push your changes to origin/master and get your website deployed with them out of the box. Also I was thrilled that I was able to use Emacs as my editor. My geek inside me was overwhelmed. The only downside with GitHub Pages, is that they don't allow dynamic pages (yes, Jekyll is producing static pages!), for security reasons.
|
||||
|
||||
One week later, I was able to spend one more day on it. The goal was to somehow integrate the Blogging feature in the Timeline theme, but pretty soon I realized that Timeline's functionality was hijacking the Blogging capabilities of Jekyll, because it was rendering the posts as timeline events. Bummer. This feature was one of the two main reasons that I picked Timeline, but lacking the Blog feature was not an option, I wanted it badly. I tried to see if I could manipulate Jekyll in order to support both the Timeline and Blog features, but in order to manage that I had to hack Jekyll and I had only one day to spend on this. So I ripped off Timeline's generated HTML code into a file and started reading how to use Jekyll's API to create a Blog. This <a href="http://erjjones.github.io/blog/How-I-built-my-blog-in-one-day" target="_blank">post</a> was my most valuable resource. After a while and a <a href="https://github.com/kirbyt/timeline-jekyll-theme/pull/2" target="_blank">bug fix</a> on Timeline I was there. I opened the website from my phone to see how it renders and it was rendering as expected (thanks to Bootstrap).
|
||||
By the way, I fixed a bug on my navigation bar from my bed, using my phone, by editing a source file on GitHub.
|
||||
How awesome is that?
|
||||
|
||||
Writing blog posts using <a href="http://daringfireball.net/projects/markdown" target="_blank">Markdown</a> and Emacs is exciting and keeping my draft posts on git <a href="https://github.com/PanosSakkos/panossakkos.github.io/tree/blogging-like-a-hacker" target="_blank">branches</a> is kick-ass. The next logical step is to make the ripped off Timeline HTML autogenerated, by defining custom Jekyll variables and then open-source it.
|
||||
|
||||
git commit -a -m "Finished post"
|
||||
git checkout master
|
||||
git merge _blogging-like-a-hacker
|
||||
git push origin master:master
|
||||
|
||||
:)
|
||||
|
||||
Edit: I tend to [keep](http://panossakkos.github.io/tech/2015/07/05/personal-jekyll-theme.html) my promises
|
||||
13
_posts/2015-06-27-welcome.markup
Normal file
13
_posts/2015-06-27-welcome.markup
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: Welcome to { Personal } Jekyll Theme!
|
||||
category: tech
|
||||
tags: [ 'tutorial' ]
|
||||
---
|
||||
|
||||
Click the view more posts <a href="/blog/index.html">url</a> bellow, to see the currently available post-tutorials to help you get your { Personal } website up and running quicker!
|
||||
|
||||
Note that every time you update the site configuration (_config.yml), you will need to *jekyll serve* the site with *--watch* flag, or cancel the serving (*Ctr + C*) and *jekyll serve* again.
|
||||
|
||||
Any contributions, feedback and issues to the <a href="https://github.com/PanosSakkos/personal-jekyll-theme" target="_blank">repo</a> are more than welcome!
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: Software Lessons Learned From Assembling a 3D Printer
|
||||
category: tech
|
||||
tags: [ 'software', 'hardware' ]
|
||||
---
|
||||
A few weeks ago the Garage team of my office got a little present, a<strike>n IKEA</strike> <a href="http://www.vertex3dprinter.eu/" target="_blank">DIY 3D printer</a>.
|
||||
It was zillions of bolts, nuts, wires, motors, rods and tiny plastic pieces which I couldn't imagine that they could assemble a 3D printer.
|
||||
I panicked, believing that we will miss a piece and everything will collapse in front of us.
|
||||
Whenever I have dealt with hardware so far, I was always frightened.
|
||||
You don't call methods, you screw bolts, and they have to be screwed properly, not too tight and not too loose.
|
||||
It's not uncommon that testing will not be applicable.
|
||||
You will assemble, hit a big button and if every component works, then you call it a day.
|
||||
You can't copy-paste hardware, you don't have <strike>a versioning control system</strike> git to undo steps in an instance,
|
||||
you are on your own and mistakes can literally make your project fall apart.
|
||||
And on top of these, we shouldn't touch the rods with bare hands, because they would corrode.
|
||||
Hardware always made me feel nervous and from the point of creating personal pet-projects,
|
||||
suddenly I had to collaborate with others in order to build a pyramid.
|
||||
It was the similar feeling that you get when you start at your first job after finishing your studies.
|
||||
|
||||
My <a href="http://waitbutwhy.com/2013/10/why-procrastinators-procrastinate.html" target="_blank">panic monster</a> instructed me immediately to sort all the numbered bags per category (bolts, nuts and miscellaneous) in order to access them efficiently.
|
||||
Like a real life index, which proved to be valuable during the first hours.
|
||||
We broke down the project into a few independent branches and started following the respective instructions.
|
||||
These instructions were practically our software spec equivalents in our new hardware world.
|
||||
They were very detailed and with plenty of images, which made you wish all the software specs to be like these.
|
||||
Because you knew exactly what you had to do.
|
||||
As a result, the only way you could introduce a bug, was by missing a step of the instructions or misunderstanding one.
|
||||
As you can imagine, we missed and misread steps and we realized our mistakes during each individual integration.
|
||||
Just like in the software world.
|
||||
The very first mistake that we discovered was when trying to mount the control board on the box.
|
||||
The bottom side of the box was not placed in the correct orientation, which blocked the card reader of the board.
|
||||
The result of this?
|
||||
We spent 45 minutes of unscrewing and screwing more than 60 bolts and nuts.
|
||||
We made 5 more mistakes, which most of them happened because we were tired (the first session lasted 12.5 hours, following a full working day).
|
||||
Every one of them cost us time (in the order of half-hours) but also mentally, because we had to take several steps back in order to make one correct step forward.
|
||||
For the later cost, the most expensive mistake was when just before the end, we realized that 4 nuts were missing from the <a href="http://manuals.velleman.eu/article.php?id=17" target="_blank">belt clamps</a>.
|
||||
In this case we had to unmount the whole printer head in order to fix them and this process took us one more session of 3 hours.
|
||||
One good habit which prevented us from introducing more bugs was that we <strike>code</strike> hardware-reviewed each other.
|
||||
We didn't keep this safety net during the whole process, it was happening organically when we were taking breaks.
|
||||
|
||||
Summarizing, being organized is useful and it will probably prevent a few bugs.
|
||||
Even if you have the perfect spec, you will introduce bugs.
|
||||
The more careful you are, the less bugs you will introduce and the more tired you are, the less careful you become.
|
||||
The bugs will show up during integration.
|
||||
When something fails, we will fix it.
|
||||
It's not the end of the world, it just takes time and it hurts your motivation.
|
||||
And finally, you need a team, for having fun during the creative process, for agility and as a safety net to each other.
|
||||
|
||||
###Photos
|
||||
|
||||
<img class="img-responsive" src="/img/posts/printer/misc.jpg" alt="parts">
|
||||
|
||||
<img class="img-responsive" src="/img/posts/printer/session-1-0.jpg" alt="">
|
||||
|
||||
<img class="img-responsive" src="/img/posts/printer/session-1-1.jpg" alt="">
|
||||
|
||||
<img class="img-responsive" src="/img/posts/printer/first-bug.jpg" alt="Fixing the first bug">
|
||||
|
||||
<img class="img-responsive" src="/img/posts/printer/board-fix.jpg" alt="Board fix">
|
||||
|
||||
<img class="img-responsive" src="/img/posts/printer/board.jpg" alt="control board">
|
||||
|
||||
<img class="img-responsive" src="/img/posts/printer/session-1-2.jpg" alt="">
|
||||
|
||||
<img class="img-responsive" src="/img/posts/printer/session-1-3.jpg" alt="">
|
||||
|
||||
<img class="img-responsive" src="/img/posts/printer/session-1-4.jpg" alt="">
|
||||
|
||||
<img class="img-responsive" src="/img/posts/printer/session-1-complete.jpg" alt="complete">
|
||||
|
||||
<img class="img-responsive" src="/img/posts/printer/print.jpg" alt="first print">
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: "{ Personal } Jekyll Theme"
|
||||
category: tech
|
||||
tags: [ 'jekyll' ]
|
||||
---
|
||||
As I <a href="http://panossakkos.github.io/tech/2015/06/27/blogging-like-a-hacker.html" target="_blank">wrote</a> before,
|
||||
I wanted to open-source the current theme because I believe that it adds value to the existing Jekyll themes.
|
||||
Also, I feel that I owe it back to the community, because without the existing code that I forked, I would never have the current blog.
|
||||
And I love this blog.
|
||||
|
||||
The value of *{ Personal }* is that it enables blogging in the <a href="http://kirbyt.github.io/timeline-jekyll-theme/" target="_blank">Timeline</a> theme
|
||||
(which is a mashup of the popular <a href="http://y7kim.github.io/agency-jekyll-theme/" target="_blank">Agency</a> and <a href="http://ironsummitmedia.github.io/startbootstrap-grayscale/" target="_blank">Grayscale</a> themes),
|
||||
it personalizes more the theme by focusing on its owner,
|
||||
it makes it easy to customize the website from Jekyll's config and it offers a cool <a href="http://panossakkos.github.io/404.html" target="_blank">404</a> page.
|
||||
|
||||
The visual touches that I believe that make the theme a bit more personal,
|
||||
is the owner's picture in the home page, and the blurred background, because it forces the eye to focus on the owner's photo.
|
||||
Moreover, Grayscale's neutral glyphicon of the header is replaced by a black and white version of the favicon.
|
||||
|
||||
The repo lives <a href="https://github.com/PanosSakkos/personal-jekyll-theme" target="_blank">here</a> and it's under <a href="https://github.com/mattvh/jekyllthemes/pull/134" target="_blank">pull request</a> for <a href="http://jekyllthemes.org/" target="_blank">Jekyll Themes</a> and indexed in Jekyll's themes <a href="https://github.com/jekyll/jekyll/wiki/Themes" target="_blank">wiki</a>.
|
||||
|
||||
Of course, the theme will evolve over the time and as soon as time permits, the blog will support discovery with hashtags.
|
||||
|
||||
Don't forget to support the repo by starring it ;)
|
||||
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=panossakkos&repo=personal-jekyll-theme&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
|
||||
<br><br>
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
---
|
||||
layout: post
|
||||
section-type: post
|
||||
title: "Ad Hell"
|
||||
category: tech
|
||||
tags: [ 'software' ]
|
||||
---
|
||||
I never click on ads, because I don't see any value in them.
|
||||
During the last ten years I clicked (intentionally) on literally one ad from a <a href="http://bellroy.com/" target="_blank">wallet company</a>.
|
||||
But, this company would be also my first result in my (incognito) <a href="https://www.google.no/?gfe_rd=cr&ei=4saeVZ7KE6qr8we3woDICA#q=slim+card+wallet" target="_blank">Google search</a>.
|
||||
And I was actually planning to buy a slim card wallet, I didn't start googling because of the ad.
|
||||
So, did I buy the product of the ad?
|
||||
Yes.
|
||||
Did the ad convince me to buy the product?
|
||||
No.
|
||||
An image of a product with a catchy phrase will never convince me to buy it.
|
||||
I want to do my research and evaluate my options before buying anything.
|
||||
After I evaluated a few of the "slim card wallets" Google results, I chose the one from the ad, for specific reasons, irrelevant to the displayed ad.
|
||||
3650 days, 1 intentionally clicked ad, 0 value, <a href="http://www.wolframalpha.com/input/?i=3650+*+3+%2F+%2860+*+60%29" target="_blank">3</a> hours of my life so far wasted on closing tabs from ads that I clicked by mistake.
|
||||
This is clearly a broken experience of the web.
|
||||
|
||||
Have you tried to browse the web with <a href="https://adblockplus.org/" target="_blank">AdBlock</a>?
|
||||
The web is just beautiful without ads.
|
||||
The fact that Google <a href="https://adblockplus.org/blog/adblock-plus-for-android-removed-from-google-play-store" target="_blank">removed</a> it from Play store,
|
||||
indicates that it caught their attention, which means that there is a significant number of people who vouch for an ad-less web.
|
||||
Ads are killing the UX and make products look cheap.
|
||||
|
||||
<a href="http://www.statista.com/statistics/266249/advertising-revenue-of-google/" target="_blank">90%</a> of Google's revenues come from ads,
|
||||
and this makes them really aggressive.
|
||||
YouTube is frustrating its users by forcing them to watch an ad before watching their video.
|
||||
And until recently, Google was placing an ad at exactly the same point where the first search result was normally, but with a latency in its rendering.
|
||||
As a result, I was clicking one ad on every search for several days (muscle memory).
|
||||
I'm pretty sure that they made a ton of money from this hack, but they just broke even more their UX.
|
||||
|
||||
Microsoft has started adding ads in its products.
|
||||
Skype is wasting my pixels and my battery on ads and I was really disappointed when I <a href="http://www.theverge.com/2015/4/29/8514345/windows-spotlight-lock-screen-with-ads" target="_blank">read</a> about (optionally) displaying app ads on the lockscreen of Windows 10.
|
||||
Facebook has also ads, but at least they don't display them at their Messenger, WhatsApp and Instagram apps.
|
||||
On the other hand, I haven't seen any ads in Apple products.
|
||||
This is what I would do in any of my products.
|
||||
But someone could argue that offering an ad-free paid version of it, is a better option.
|
||||
This is a trend coming from smartphone apps which was also adopted by Amazon at their Kindle series,
|
||||
by offering a cheaper model stuffed with ads, next to their normal model.
|
||||
|
||||
If you really care about delivering a delightful experience, then you shouldn't bundle any ads to it, or at least you should compromise with the opt-in/out model.
|
||||
Make your users love your product so much, that they would pay for it, like Apple, Spotify and many more companies did.
|
||||
Don't forget that WhatsApp's and Instagram's value was defined by their enormous user base.
|
||||
Which means that until the <a href="http://www.name.com/blog/general/business/2013/10/why-are-startups-turning-to-io/" target="_blank">io</a> bubble bursts, you can stick to a totally free of charge service, with the hope of grooming a few millions of users.
|
||||
And if your users don't love your product enough to pay for it, don't blame them.
|
||||
Blame yourself and improve the experience that you offer.
|
||||
|
||||
P.S.: How to <a href="https://www.reddit.com/r/LifeProTips/comments/27dihm/lpt_you_can_turn_off_the_annoying_skype_banner/" target="_blank">disable</a> Skype ads.
|
||||
|
||||
P.P.S.: Olivia pointed out "Technically, in any 10 year interval there would have been 2 leap years, therefore 3,652 days"
|
||||
11
about.html
11
about.html
|
|
@ -5,13 +5,6 @@ title: About
|
|||
---
|
||||
## About
|
||||
|
||||
Thanks for dropping by. I hope that it will not waste your time, but in case it does, at least I tried.
|
||||
Originally from Athens, Greece, I started my adventures in Computer Science and Technology from University of Athens where I received my Bachelor in Computer Science and Master in Software Engineering.
|
||||
Between those, I spent a creative year in Geneva, Switzerland where I worked at CERN as a Computer Security researcher.
|
||||
While attending my master's, I was working as a Machine Learning researcher for the <a href="http://kddlab.di.uoa.gr/" target="_blank">KDD</a> lab, supervised by <a href="http://scholar.google.com/citations?user=PHJokEQAAAAJ&hl=en&oi=ao" target="_blank">Dimitrios Gunopulos</a>.
|
||||
During my last summer break of my studies, I moved to Oslo, Norway, as an intern for Microsoft Development Center Norway.
|
||||
That place won me and became my first working place in my post-academic life.
|
||||
Github's Octocat was designed by Simon Oxley, alongside the white bird Twitter used (before they received a proper logo) as part of a usual routine of cranking out images for iStock. GitHub saw it, and wanted it, presumably under the notion that it can represent how complex code combines to create peculiar things, much like the octopuss... except the CEO of GitHub called it an octocat, and it has been the octocat since <a href="https://www.quora.com/GitHub/What-is-the-story-behind-GitHub%E2%80%99s-octocat-mascot" target="_blank">via</a>.
|
||||
|
||||
But, apart from being a <strike>cool guy</strike> geek,
|
||||
I enjoy playing and composing music, messing with hardware, playing <a href="http://deck.tk/43TX9icn" target="_blank">card games</a>, yo-yoing and collecting comic books and vinyls.
|
||||
In general, my mind can zone out during any form of creative act. Opinions expressed here are mine.
|
||||
Octocat is Github's logo and trademark and here is used to illustrate a fictional character (John Smith) that used the { Personal } Jekyll Theme to build his website.
|
||||
|
|
|
|||
|
|
@ -2,9 +2,7 @@
|
|||
layout: null
|
||||
section-type: contact
|
||||
title: Contact
|
||||
email: panoss .a:t. microsoft /d|o|t\ com
|
||||
|
||||
---
|
||||
## Contact
|
||||
|
||||
Send me an email if you would like to get in touch, hire me for your next project, have questions or feedback on my work, or just want to say hello.
|
||||
Send me an email if you would like me to code for you or save the world!
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
---
|
||||
---
|
||||
|
||||
/* YAML block in order to get processed by Jekyll */
|
||||
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
|
|
@ -76,7 +74,6 @@ a {
|
|||
list-style-position: inside;
|
||||
}
|
||||
|
||||
|
||||
.navbar-custom {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid rgba($light, 0.3);
|
||||
|
|
@ -354,7 +351,7 @@ ul.social-buttons li a {
|
|||
-webkit-transition: all .3s;
|
||||
-moz-transition: all .3s;
|
||||
transition: all .3s;
|
||||
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
|
|
|||
BIN
img/career/baracktocat.jpg
Normal file
BIN
img/career/baracktocat.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
BIN
img/career/default.png
Normal file
BIN
img/career/default.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 131 KiB |
BIN
img/career/spidertocat.png
Normal file
BIN
img/career/spidertocat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
BIN
img/intro-bg.jpg
BIN
img/intro-bg.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 44 KiB |
BIN
img/jetpacktocat.png
Normal file
BIN
img/jetpacktocat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
img/me.jpg
BIN
img/me.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 196 KiB |
|
|
@ -1,6 +1,5 @@
|
|||
---
|
||||
layout: index
|
||||
section-type: index
|
||||
title:
|
||||
---
|
||||
Hope you are visiting while not in your <a href="http://waitbutwhy.com/2013/10/why-procrastinators-procrastinate.html" target="_blank"> Dark Playground </a>
|
||||
Hope you are visiting while not in your <a href="http://waitbutwhy.com/2013/10/why-procrastinators-procrastinate.html" target="_blank">Dark Playground</a>
|
||||
|
|
|
|||
173
readme.markdown
173
readme.markdown
|
|
@ -2,7 +2,9 @@
|
|||
|
||||
# { Personal } Jekyll Theme
|
||||
|
||||
{ Personal } is a free responsive Jekyll theme about you. It's your personal blog and your point of reference website. You can watch it in action [here](http://panossakkos.github.io).
|
||||
{ Personal } is a free responsive Jekyll theme about you.
|
||||
It's your personal blog and your point of reference website.
|
||||
You can watch it in action [here](http://panossakkos.github.io/personal-jekyll-theme/).
|
||||
|
||||
## What value does { Personal } add
|
||||
|
||||
|
|
@ -23,175 +25,18 @@
|
|||
* Facebook, Twitter and Reddit share buttons
|
||||
* Disqus comments
|
||||
* Control of your website and blog through the site's config file
|
||||
* Favicon
|
||||
* Black favicon
|
||||
* Background Image
|
||||
* Your picture
|
||||
* Preview size of the latest post
|
||||
* Share buttons
|
||||
* Timeline events
|
||||
* Disqus comments
|
||||
* Cool (anti-procrastinating) 404 page
|
||||
* Protection from Email harvesting
|
||||
* RSS feed
|
||||
|
||||
# Screenshots
|
||||
## Index page
|
||||
|
||||
## Latest post preview
|
||||
|
||||
## Timeline
|
||||
|
||||
## Blog Archive
|
||||
|
||||
## Post page
|
||||
|
||||
## \#Tags
|
||||
|
||||
## 404
|
||||
|
||||
## Documentation
|
||||
|
||||
## Customizing your website from the config
|
||||
The theme contains documentation in the form of blog posts.
|
||||
Check it live [here](panossakkos.github.io/personal-jekyll-theme/)
|
||||
|
||||
Even if you have no experience with Jekyll you can personalize your website from the config file (\_config.yml). This section describes the available variables and how they change the content of your website.
|
||||
## How to run
|
||||
|
||||
### Lang header
|
||||
````
|
||||
lang: "en"
|
||||
````
|
||||
Specified the language of site in <html> tag.
|
||||
|
||||
### Favicon
|
||||
````
|
||||
favicon: "/img/favicon.ico"
|
||||
````
|
||||
Points to the website's favicon.
|
||||
|
||||
### Black Favicon
|
||||
````
|
||||
black-favicon: "/img/black-lab-glass.ico"
|
||||
````
|
||||
Before the title of the website a black and white version of the favicon appears. This value is the path to this icon file.
|
||||
|
||||
### Google Analytics
|
||||
````
|
||||
google-tracking-id: "UA-35880426-3"
|
||||
````
|
||||
Place the id of your tracking code here and the code will be autogenerated and included in every page. If you don't want analytics, just set to False if you are not interested in analytics.
|
||||
|
||||
### Disqus
|
||||
````
|
||||
disqus-shortname: "panossakkos"
|
||||
````
|
||||
Add your Disqus username to enable Disqus comments. When this value is set then, every post will get the comments below the post and the comment counters in the post preview of the home page and the Archive. Set to False the value if you don't want the Disqus functionality.
|
||||
|
||||
### Navigation Bar links
|
||||
This variable is usefull only if you want to add more pages and not be included in the navigation bar. It contains the pages that you want to include in the navigation bar.
|
||||
````
|
||||
pages_list:
|
||||
About: 'about'
|
||||
Blog: 'blog'
|
||||
Career: 'career'
|
||||
Contact: 'contact'
|
||||
````
|
||||
|
||||
### Background image
|
||||
````
|
||||
background-img: "/img/intro-bg.jpg"
|
||||
````
|
||||
Set the variable to the image that you want to be displayed in the index page.
|
||||
|
||||
### Me image
|
||||
Set the variable to the desired image of you that you want to be displayed in the index page. This image when clicked, it scrolls down to the About section.
|
||||
````
|
||||
me-img: "/img/me.jpg"
|
||||
````
|
||||
|
||||
### Post preview size
|
||||
This variable dicates how many words do you want to display as preview in the Blog section of the home page.
|
||||
````
|
||||
post-preview-words: 128
|
||||
````
|
||||
|
||||
### Share buttons
|
||||
Set to False to remove the respective button
|
||||
|
||||
#### Facebook
|
||||
````
|
||||
fb-share: True
|
||||
````
|
||||
|
||||
#### Twitter share button
|
||||
````
|
||||
twitter-share: True
|
||||
````
|
||||
|
||||
#### Reddit share button
|
||||
````
|
||||
reddit-share: True
|
||||
````
|
||||
|
||||
### Timeline Events
|
||||
The Timeline is displayed in the Career section of the homepage. Each event consists of a date (when did the event started and ended), an image and a description.
|
||||
````
|
||||
events:
|
||||
- image: "/img/career/microsoft.jpg"
|
||||
date: "September 2014 - Today"
|
||||
description: "Software Engineer @ Microsoft Development Center Norway, working @ the <a href=\"http://dev.office.com/officegraph\" target=\"_blank\"> Office Graph</a>"
|
||||
- image: "/img/career/uoa.jpg"
|
||||
date: "October 2012 - August 2014"
|
||||
description: "Master studies @ <a href=\"http://www.di.uoa.gr/eng\" target=\"_blank\">Department of Informatics and Telecommunications</a> on Software Engineering + <a href=\"https://scholar.google.com/citations?user=UtV6LFYAAAAJ&hl=en&oi=ao\" target=\"_blank\">Machine Learning researcher</a> @ <a href=\"http://kddlab.di.uoa.gr\" target=\"_blank\">KDD</a> lab"
|
||||
- image: "/img/career/cern.jpg"
|
||||
date: "October 2011 - September 2012"
|
||||
description: "Security researcher @ <a href=\"http://www.cern.ch\" target=\"_blank\">CERN</a>, developed linux kernel extensions to prevent cyber attacks"
|
||||
- image: "/img/career/writeright.jpg"
|
||||
date: "August 2011 - Today"
|
||||
description: "Released <a href=\"https://play.google.com/store/apps/details?id=panos.sakkos.softkeyboard.writeright\" target=\"_blank\">WriteRight</a>, an adaptive S/W keyboard for Android devices, which shrinks the unlikely keys to tap next. Currently it holds > 9,000 downloads"
|
||||
- image: "/img/career/pwnmail.jpg"
|
||||
date: "June 2010 - November 2010"
|
||||
description: "Released <a href=\"https://www.google.com/search?q=pwn+mail\" target=\"_blank\">Pwn Mail</a>, an iPhone app for spoofing emails. It served > 260,000 emails but it was discontinued after a legal threat by <strike>Steve Jobs</strike> a secretary of Steve Jobs"
|
||||
- image: "/img/career/uoa.jpg"
|
||||
date: "October 2007 - September 2011"
|
||||
description: "Bachelor studies @ <a href=\"http://www.di.uoa.gr/eng\" target=\"_blank\">Department of Informatics and Telecommunications</a> on Computer Science and Telecomunications"
|
||||
````
|
||||
After the Timeline you get a picture which you can set it from the career-img variable
|
||||
````
|
||||
career-img: "/img/career/default.jpg"
|
||||
````
|
||||
|
||||
### Social Networks buttons
|
||||
As a footer you get a list of buttons which are links to various social networks. You can specify the buttons and links form the social variable:
|
||||
````
|
||||
social:
|
||||
- title: "rss"
|
||||
url: "/feed.xml"
|
||||
- title: "github"
|
||||
url: "https://github.com/PanosSakkos"
|
||||
- title: "linkedin"
|
||||
url: "https://no.linkedin.com/in/PanosSakkos"
|
||||
- title: "youtube"
|
||||
url: "https://youtube.com/c/PanosSakkos"
|
||||
- title: "soundcloud"
|
||||
url: "https://soundcloud.com/psakkos/"
|
||||
````
|
||||
There are many more social networks supported like facebook, flickr, dribbble, pinterest, instagram, tumblr etc.
|
||||
|
||||
### 404 Image
|
||||
```
|
||||
404-img: "/img/labtocat.png"
|
||||
```
|
||||
Set the value to the image file that you want to display in the 404 page
|
||||
|
||||
## Posting a new post
|
||||
|
||||
Jekyll is expecting new posts to show up as a file under _/posts with a file name "YYYY-MM-DD-title.markup". Also your file's content should start like this:
|
||||
```
|
||||
---
|
||||
layout: post
|
||||
title: <Post's title>
|
||||
category: <Post's category>
|
||||
---
|
||||
```
|
||||
After this header you can start writing your post using Markdown.
|
||||
jekyll serve --watch --baseurl ""
|
||||
|
||||
## Wiki
|
||||
Don't forget to list your { Personal } blog in the [wiki](https://github.com/PanosSakkos/personal-jekyll-theme/wiki/Blogs-using-%7B-Personal-%7D)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
layout: tag
|
||||
section-type: tag
|
||||
title: jekyll
|
||||
title: ShortestTutorialEver
|
||||
---
|
||||
## Tag
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
layout: tag
|
||||
section-type: tag
|
||||
title: software
|
||||
---
|
||||
## Tag
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
layout: tag
|
||||
section-type: tag
|
||||
title: hardware
|
||||
title: tutorial
|
||||
---
|
||||
## Tag
|
||||
Loading…
Add table
Add a link
Reference in a new issue