The code behind my Jekyll-powered homepage.

index.html 13KB

  1. ---
  2. title: Aleksandar Todorović (r3bl)
  3. layout: homepage
  4. description: Hacker. Blogger. infosec enthusiast. Free culture and open source advocate.
  5. Ford-Mozilla Open Web fellow. Previously OCCRP tech associate.
  6. tags:
  7. - hacking
  8. - infosec
  9. - AI
  10. - open source
  11. - open culture
  12. ---
  13. <div class="summary" itemscope itemtype="">
  14. <div class="image-avatar">
  15. <a href="{{ site.baseurl }}" itemprop="url">
  16. <img itemprop="image" src="{{ site.baseurl }}/assets/logos/logo-256.png" alt="logo" style="height: 256px;">
  17. </a>
  18. </div>
  19. <h1 class="site-title">
  20. <div class="brand" itemprop="name">Aleksandar Todorović</div> (<div class="brand" itemprop="additionalName">r3bl</div>)
  21. </h1>
  22. <div class="buttons-homepage" style="padding-bottom: 1%;">
  23. <div class="nav-secondary">
  24. <a href="" class="btn btn-nav btn-writing">blog</a>
  25. </div>
  26. <div class="button-invisible">
  27. </div>
  28. <div class="nav-secondary">
  29. <a href="{{ site.baseurl }}/en/projects/" class="btn btn-nav btn-programming">projects</a>
  30. </div>
  31. <div class="button-invisible">
  32. </div>
  33. <div class="nav-secondary">
  34. <a href="{{ site.baseurl }}/en/portfolio/" class="btn btn-nav btn-writing">portfolio</a>
  35. </div>
  36. <div class="button-invisible">
  37. </div>
  38. <div class="nav-secondary">
  39. <a href="" class="btn btn-nav btn-writing">notes</a>
  40. </div>
  41. </div>
  42. <p>
  43. Ford-<span style="background-color: #000; color: #FFF; padding-left: 5px; padding-right:5px; font-family: 'Zilla Slab'">moz://a</span> <a href="">Open Web Fellow</a>. Hosted by <a href="">Bits of Freedom</a>. Passionate about information security.
  44. </p>
  45. <p>
  46. Used to be techie at "<a href="">The People's NSA</a>" (<a href="">Organized Crime and Corruption Reporting Project</a>).<br/>
  47. </p>
  48. <p>
  49. Contributed to a couple of worldy-known open source projects such as <a href="">elementary OS</a> and the <a href="">Tor Project</a>.
  50. </p>
  51. <p><br/>
  52. I write things in my free time.
  53. </p>
  54. <div class="social-media">
  55. <a itemprop="sameAs" href="{{ site.owner.github }}" rel="me"><i class="fa fa-github" aria-hidden="true"></i></a>
  56. <a itemprop="sameAs" href="{{ site.owner.twitter }}" rel="me"><i class="fa fa-twitter" aria-hidden="true"></i></a>
  57. <a itemprop="sameAs" href="{{ site.owner.facebook }}" rel="me"><i class="fa fa-facebook" aria-hidden="true"></i></a>
  58. <a href="{{ site.baseurl }}/en/contact/"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
  59. </div>
  60. </div>
  61. <div class="accomplishments">
  62. <div class="accomplishments-caption">
  63. Achievements
  64. </div>
  65. <div class="container">
  66. <div class="accomplishments-row">
  67. <div class="col-xs-6 col-md-2 accomplishment">
  68. <a href="">
  69. <img src="{{ site.baseurl }}/assets/bling/accomplishments/github.png" alt="GitHub badge">
  70. <div class="accomplishment-title"><span>1k GitHub stars</span></div>
  71. <div class="accomplishment-desc"><span>My awesome-linux reached 1k+ stars.</span></div>
  72. </a>
  73. </div>
  74. <div class="col-xs-6 col-md-2 accomplishment">
  75. <a href="">
  76. <img src="{{ site.baseurl }}/assets/bling/accomplishments/books.png" alt="Books badge">
  77. <div class="accomplishment-title"><span>20 books in a year</span></div>
  78. <div class="accomplishment-desc"><span>Read 20 books in both 2016 and 2017.</span></div>
  79. </a>
  80. </div>
  81. <div class="col-xs-6 col-md-2 accomplishment">
  82. <img src="{{ site.baseurl }}/assets/bling/accomplishments/growth.png" alt="Growth badge">
  83. <div class="accomplishment-title"><span>50 daily visitors</span></div>
  84. <div class="accomplishment-desc"><span>This website didn't have a day without 50+ visitors.</span></div>
  85. </div>
  86. <div class="col-xs-6 col-md-2 accomplishment">
  87. <a href="">
  88. <img src="{{ site.baseurl }}/assets/bling/accomplishments/trophy.png" alt="Trophy badge">
  89. <div class="accomplishment-title"><span>A writing award</span></div>
  90. <div class="accomplishment-desc"><span>Won Reader's Choice Award 2016.</span></div>
  91. </a>
  92. </div>
  93. <div class="col-xs-6 col-md-2 accomplishment-locked">
  94. <img src="{{ site.baseurl }}/assets/bling/accomplishments/graduation.png" alt="Graduation badge">
  95. <div class="accomplishment-title"><span>LOCKED: infosec specialization</span></div>
  96. <div class="accomplishment-desc"><span>On my way to receive my infosec specalization.</span></div>
  97. </div>
  98. <div class="col-xs-6 col-md-2 accomplishment-locked">
  99. <a href="">
  100. <img src="{{ site.baseurl }}/assets/bling/accomplishments/twitter.png" alt="Twitter badge">
  101. <div class="accomplishment-title"><span>LOCKED: 1k Twitter followers</span></div>
  102. <div class="accomplishment-desc"><span>Help me reach 1k Twitter followers!</span></div>
  103. </a>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. <div class="clearfix"></div>
  109. <div class="row">
  110. <div class="col-xs-12">
  111. <div class="listing">
  112. <h2 style="text-align: center;">What I wrote about recently</h2>
  113. <ul class="listing-homepage">
  114. <li><a href="">The city I write this in protected its name, so I am not legally allowed to use it</a>, in which I explained how the capital of Bosnia & Herzegovina tries to trademark the name of the city.</li>
  115. <li><a href="">My Top 17 Songs of 2017</a>, in which I shared the songs that I liked the most during the year.</li>
  116. <li><a href="">Three ways of re-creating Firefox Focus behavior on Firefox desktop</a>, in which I explored different options of making Firefox behave like Firefox Focus does on smartphones.</li>
  117. </ul>
  118. </div>
  119. </div>
  120. <!--
  121. <div class="col-xs-12 col-md-6">
  122. <div class="donations">
  123. <h2>Donations</h2>
  124. <div class="donation-desc">
  125. <ol>
  126. <li>I build cool things.</li>
  127. <li>I write about and support cool things.</li>
  128. <li>I give back to the community.</li>
  129. <li>I'm transparent about my spendings.</li>
  130. </ol>
  131. </div>
  132. <div class="row">
  133. <div class="col-xs-6 donation-btn nav-secondary">
  134. <a href="#"><div class="btn-don">learn more</div></a>
  135. </div>
  136. <div class="col-xs-6 donation-btn nav-secondary">
  137. <a href="#"><div class="btn-don">see spendings</div></a>
  138. </div>
  139. </div>
  140. </div>
  141. </div>
  142. -->
  143. </div>
  144. <div class="donations">
  145. <div class="listing">
  146. <h2>Favorite articles (written by me)</h2>
  147. <ul class="listing-homepage">
  148. <li class="invert-colors">2018-01-21 <a href="">The city I write this in protected its name, so I am not legally allowed to use it</a></li>
  149. <li class="invert-colors">2017-10-20 <a href="">Three ways of re-creating Firefox Focus behavior on Firefox desktop</a></li>
  150. <li class="invert-colors">2016-06-12 <a href="">YubiKey NEO: Ubuntu 16.04 usefulness (+ review)</a></li>
  151. <li class="invert-colors">2015-06-30 <a href="">Linux as a lifestyle <i class="fa fa-external-link" aria-hidden="true"></i></a></li>
  152. <li class="invert-colors">2015-02-16 <a href="">A beginner's guide to GitHub <i class="fa fa-external-link" aria-hidden="true"></i></a>, an <a href="">award winning article <i class="fa fa-external-link" aria-hidden="true"></i></a></li>
  153. </ul>
  154. </div>
  155. </div>
  156. <div class="listing">
  157. <h2 style="text-align: center;">Favorite shoutouts</h2>
  158. <ul class="listing-homepage">
  159. <li><div class="pub-date">2018-01-21</div> <span>Boing Boing</span> <a href="">City of Sarajevo bans unsanctioned utterances of its name, threatens Facebook groups <i class="fa fa-external-link" aria-hidden="true"></i></a></li>
  160. <li><div class="pub-date">2017-09-13</div> <span>The Mozilla Blog</span> <a href=""> Mozilla Announces 15 New Fellows for Science, Advocacy, and Media <i class="fa fa-external-link" aria-hidden="true"></i></a></li>
  161. <li><div class="pub-date">2016-02-03</div> <span></span> <a href="">Announcing the 2016 Community Awards winners <i class="fa fa-external-link" aria-hidden="true"></i></a></li>
  162. <li><div class="pub-date">2015-12-21</div> <span></span> <a href="">Best of Top 20 articles of the year <i class="fa fa-external-link" aria-hidden="true"></i></a></li>
  163. <li><div class="pub-date">2012-03-06</div> <span>DJTechTools</span> <a href="">DJing With A Computer Keyboard <i class="fa fa-external-link" aria-hidden="true"></i></a></li>
  164. </ul>
  165. </div>
  166. <div class="donations">
  167. <div class="listing">
  168. <h2 style="text-align: center;">Other types of media</h2>
  169. <ul class="listing-homepage">
  170. <li class="invert-colors"><div class="pub-date">2016-05-04</div> <a href="">Kontekst: Internet i sigurnost <i class="fa fa-external-link" aria-hidden="true"></i></a> (guest at an Al Jazeera Balkans TV show)</li>
  171. <li class="invert-colors"><div class="pub-date">2014-12-??</div> <a href="">BOSNA I HERCEGOVINA: Kontinuitet nadzora <i class="fa fa-external-link" aria-hidden="true"></i></a> (Global Information Society Watch paper mentioning my work)</li>
  172. </ul>
  173. </div>
  174. </div>
  175. <div class="listing">
  176. <h2 style="text-align: center;">Donations I've made in 2017</h2>
  177. <div style="display: inline-block; text-align: center;">
  178. <em>I believe it is very important for each of us to financially support the non-profit organizations and projects whose causes we agree with. That's why I have financially backed the following projects and organizations.</em>
  179. </div>
  180. <ul class="listing-homepage">
  181. <li><div class="don-amount">$130</div> to the <a href="">Electronic Frontier Foundation (EFF)</a>, an international digital rights group defending civil liberties in the digital world.</li>
  182. <li><div class="don-amount">€50</div> to the <a href="">European Digital Rights (EDRi)</a>, an association of organisations from across Europe that defend rights and freedoms in the digital world. </li>
  183. <li><div class="don-amount">$50</div> to <a href=""></a>, an independent Croatian investigative journalism organization.</li>
  184. <li><div class="don-amount">$25</div> to the <a href="">Tor Project</a>, an organization responsible for maintaining Tor anonymity network. My Tor server relayed <div class="don-amount">45 TB</div> of data.</li>
  185. <li><div class="don-amount">$25</div> to <a href="">Creative Commons</a>, an organization devoted to expanding the range of creative works available for others to build upon and share.</li>
  186. <li><div class="don-amount">$25</div> to the <a href="">Mozilla Foundation</a>, a non-profit organization that promotes openness, innovation and participation on the Internet.</li>
  187. <li><div class="don-amount">$20</div> to <a href="">American Civil Liberties Union (ACLU)</a>, an organization whose mission is to defend the rights and liberties guaranteed to all US citizens.</li>
  188. <li><div class="don-amount">$20</div> to <a href="">Purism</a>, for their attempt at creating a world-first privacy-oriented smartphone (<a href="">Librem 5</a>).</li>
  189. <li><div class="don-amount">$10</div> to <a href="">Michele Gaio</a>, author of <a href="">Dash to Dock</a> and other GNOME extensions.</li>
  190. <li><div class="don-amount">$10</div> to the <a href="">Internet Archive</a>, a digital library whose mission is universal access to all knowledge.</li>
  191. <li><div class="don-amount">$10</div> to the <a href="">Wikimedia Foundation</a>, in charge of financing Wikipedia and other projects.</li>
  192. </ul>
  193. <div class="don-total">Total amount donated in 2017: <div class="don-amount">~€315</div>/<div class="don-amount"> ~$385</div></div>
  194. </div>