Added I2P to the Projects

css/style.css

@@ -364,6 +364,9 @@ body {
 .button.libocon::before {
   background: #11A500; }
 
+.button.i2p::before {
+  background: #4661A9; }
+
 .button.boxed.white {
   border: 1px solid #fff;
   background: none;
@@ -462,9 +465,19 @@ body {
   border: 1px solid #11A500;
   background: none;
   color: #11A500; }
+
  .button.boxed.libocon:hover {
   color: #fff;
-  background: ##11A500; }
+  background: #11A500; }
+
+ .button.boxed.i2p {
+  border: 1px solid #4661A9;
+  background: none;
+  color: #4661A9; }
+  
+ .button.boxed.i2p:hover {
+  color: #fff;
+  background: #4661A9; }
 
 .button.boxed.openlabs {
   border: 1px solid #2BBBB0;

index.html

@@ -36,23 +36,25 @@ slides:
   image: images/main/half-4.jpg
 
 works_left:
+- title: I2P Style Guide and Usability Study
+  link_to: i2p
+  image: images/projects/i2p_overview.png
+  categories: Usability Study | Style Guide
 - title: Thunderbird Style Guide and Usability Study
   link_to: /projects/thunderbird
   image: images/projects/tb_overview.png
   categories: Usability Study, Style Guide
-- title: Open Labs
+
-  link_to: /projects/openlabs
-  image: images/projects/openlabs_thumbnail.jpg
-  categories: Visual Identity
 works_middle:
 - title: LibOCon 2018 Visual Identity
   link_to: /projects/libocon
   image: images/projects/libocon_overview.png
   categories: Visual Identity
-- title: Tor Style Guide
+- title: Open Labs
-  link_to: /projects/tor-style-guide
+  link_to: /projects/openlabs
-  image: images/projects/tor_thumb.png
+  image: images/projects/openlabs_thumbnail.png
-  categories: Style Guide
+  categories: Visual Identity
+
 works_right:
 - title: Reproducible Builds Styleguide
   link_to: /projects/reproducible-builds

projects/i2p.html

@@ -0,0 +1,103 @@
+---
+layout: default
+section_id: portfolio
+title: I2P Style Guide and Usability Study
+---
+
+<div style="background-color: #4661A9;" class="full new">
+  <div class="section-title new">
+    <div class="row">
+      <div class="medium-10 medium-centered columns">
+        <h1 class="wow slideInUp" style="color: white; font-size: 2rem;">I2P Style Guide and Usability Study</h1>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="full text">
+  <div class="row">
+    <div class="large-8 columns">
+      <img class="lazy" data-src="../images/projects/i2p_logo.png" alt="I2P logo">
+      <div class="spacing"></div>
+      <img class="lazy" data-src="../images/projects/i2p_image_1.png" alt="Colors">
+      <div class="spacing"></div>
+      <img class="lazy" data-src="../images/projects/i2p_image_2.png" alt="Typography">
+      <div class="spacing"></div>
+      <img class="lazy" data-src="../images/projects/i2p_image_3.png" alt="Buttons/Badges">
+      <div class="spacing"></div>
+      <img class="lazy" data-src="../images/projects/i2p_image_4.png" alt="Cards">
+      <div class="spacing"></div>
+      <img class="lazy" data-src="../images/projects/i2p_image_5.png" alt="Footer">
+      <div class="spacing"></div>
+      <img class="lazy" data-src="../images/projects/i2p_image_6.png" alt="Writing">
+      <div class="spacing"></div>
+    </div>
+    <div class="large-4 columns">
+      <div class="project-intro">
+        <p>I2P (The Invisible Internet Project) is an anonymous overlay network  - a network within a network. It protects communication from dragnet surveillance methods and monitoring by third parties such as ISPs.</p>
+        <p>I2P is used by many people who care about their privacy: activists, oppressed people,  and whistleblowers, as well as the average person. No network can be "perfectly anonymous" The continued goal of I2P is to make attacks more and more difficult to mount.</p>
+        <hr>
+        <div class="spacing"></div>
+        <h4>Date</h4>
+        <p><span>October, 2018</span></p>
+        <h4>Clients</h4>
+        <p><span><a href="https://geti2p.net" target="_blank" rel="noopener">I2P</a></span></p>
+        <h4>Category</h4>
+        <p><span>Style Guide and Usability Study</span></p>
+         <hr>
+        <a class="button boxed blog" href="https://ura.design/" target="_blank"><i class="fas fa-pencil-alt"></i> Blogpost</a><br />
+        <a class="button boxed black" href="https://github.com/uracreative/works/tree/master/I2P" target="_blank" rel="noopener"><i class="fab fa-github"></i> Sources</a><br />
+         <a class="button boxed identihub" href="https://demo.identihub.co/project/i2p" target="_blank" rel="noopener"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
+        <a class="button boxed i2p" href="https://geti2p.net" target="_blank" rel="noopener"><i class="fas fa-globe"></i> Website</a><br />
+        <a class="button boxed i2p" href="https://github.com/uracreative/works/raw/master/I2P/" target="_blank"><i class="fas fa-globe"></i> Usability Study</a>
+      </div>
+    </div>
+  </div>
+</div>
+<hr>
+<div class="full">
+  <div class="section-title">
+    <div class="row">
+      <div class="medium-10 medium-centered columns">
+        <h2>Related projects</h2>
+      </div>
+    </div>
+  </div>
+  <div class="related-works">
+    <div class="row">
+      <div class="large-4 columns">
+        <div class="work-wrapper">
+          <a href="reproducible-builds" class="work">
+            <img class="lazy" data-src="../images/projects/rb_thumbnail.png" alt="">
+            <div class="info">
+              <h3>Reproducible Builds Style Guide</h3>
+              <p>Style Guide</p>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div class="large-4 columns">
+        <div class="work-wrapper">
+          <a href="thunderbird" class="work">
+          <img class="lazy" data-src="../images/projects/tb_overview.png" alt="">
+          <div class="info">
+            <h3>Thunderbird Style Guide and Usability Study</h3>
+            <p>Style Guide | Usability Study</p>
+          </div>
+        </a>
+        </div>
+      </div>
+      <div class="large-4 columns">
+        <div class="work-wrapper">
+          <a href="enigmail" class="work">
+            <img class="lazy" data-src="../images/projects/enigmail_overview.png" alt="">
+            <div class="info">
+              <h3>Enigmail Rebranding</h3>
+              <p>Visual Identity</p>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>

projects/index.html

@@ -2,13 +2,17 @@
 layout: default
 section_id: portfolio
 works_left:
+- title: I2P Style Guide and Usability Study
+  link_to: i2p
+  image: images/projects/i2p_overview.png
+  categories: Usability Study | Style Guide
 - title: Thunderbird Style Guide and Usability Study
   link_to: thunderbird
   image: images/projects/tb_overview.png
-  categories: Usability Study, Style Guide
+  categories: Usability Study | Style Guide
 - title: Open Labs
   link_to: openlabs
-  image: images/projects/openlabs.jpg
+  image: images/projects/openlabs_thumbnail.png
   categories: Visual Identity
 - title: OpenChain Penguins
   link_to: openchain
@@ -28,7 +32,7 @@ works_middle:
   image: images/projects/tor_thumb.png
   categories: Style Guide
 works_right:
-- title: Reproducible Builds Styleguide
+- title: Reproducible Builds Style Guide
   link_to: reproducible-builds
   image: images/projects/rb_thumbnail.png
   categories: Style Guide

projects/libocon.html

@@ -16,7 +16,7 @@ title: LibOCon 2018 Visual Identity
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img class="lazy" data-src="../images/projects/libocon.png" alt="LiOCon logo">
+      <img class="lazy" data-src="../images/projects/libocon.png" alt="LibOCon logo">
       <div class="spacing"></div>
       <img class="lazy" data-src="../images/projects/libocon-shirt-poster-vertical.jpg" alt="T-shirt and poster">
       <div class="spacing"></div>
@@ -66,22 +66,22 @@ title: LibOCon 2018 Visual Identity
     <div class="row">
       <div class="large-4 columns">
         <div class="work-wrapper">
-          <a href="openlabs" class="work">
+          <a href="sfk16" class="work">
-            <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/poster_SFK.jpg" alt="">
             <div class="info">
-              <h3>Open Labs</h3>
+              <h3>Software Freedom Kosova</h3>
-              <p>Rebranding</p>
+              <p>Visual Identity | Print</p>
             </div>
           </a>
         </div>
       </div>
       <div class="large-4 columns">
         <div class="work-wrapper">
-          <a href="tor-style-guide" class="work">
+          <a href="enigmail" class="work">
-          <img class="lazy" data-src="../images/projects/tor_thumb.png" alt="">
+          <img class="lazy" data-src="../images/projects/enigmail_overview.png" alt="">
           <div class="info">
-            <h3>Tor Style Guide</h3>
+            <h3>Enigmail Rebranding</h3>
-            <p>Style Guide</p>
+            <p>Visual Identity</p>
           </div>
         </a>
         </div>

projects/openlabs.html

@@ -16,21 +16,21 @@ title: Open Labs
 <div class="full text">
   <div class="row">
     <div class="large-8 columns">
-      <img data-src="../images/projects/open-labs.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/open-labs.jpg" alt="">
       <div class="spacing"></div>
-      <img data-src="../images/projects/openlabs.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/openlabs.jpg" alt="">
       <div class="two spacing"></div>
-      <img data-src="../images/projects/typography.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/typography.jpg" alt="">
       <div class="spacing"></div>
-      <img data-src="../images/projects/fonts.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/fonts.jpg" alt="">
       <div class="spacing"></div>
-      <img data-src="../images/projects/posters.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/posters.jpg" alt="">
       <div class="spacing"></div>
-      <img data-src="../images/projects/5-anniversary.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/5-anniversary.jpg" alt="">
       <div class="spacing"></div>
-      <img data-src="../images/projects/copyfest-poster.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/copyfest-poster.jpg" alt="">
       <div class="spacing"></div>
-      <img data-src="../images/projects/wiki_poster.jpg" alt="">
+      <img class="lazy" data-src="../images/projects/wiki_poster.jpg" alt="">
       <div class="spacing"></div>
     </div>
     <div class="large-4 columns">
@@ -46,7 +46,7 @@ title: Open Labs
         <p><span>Rebranding</span></p>
         <hr>
         <a class="button boxed black" href="https://github.com/OpenLabsHackerspace/branding" target="_blank"><i class="fab fa-github"></i> Sources</a><br />
-        <a class="button boxed identihub" href="https://demo.identihub.co/project/openlabs" target="_blank"><img data-src="../images/projects/identihub.svg" > Identihub</a><br />
+        <a class="button boxed identihub" href="https://demo.identihub.co/project/openlabs" target="_blank"><img class="lazy" data-src="../images/projects/identihub.svg" > Identihub</a><br />
         <a class="button boxed openlabs" href="https://openlabs.cc/en" target="_blank"><i class="fas fa-globe"></i> Website</a>
       </div>
     </div>
@@ -66,7 +66,7 @@ title: Open Labs
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="mozilla-l10n" class="work">
-            <img data-src="../images/projects/mozilla-l10n.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/mozilla-l10n.jpg" alt="">
             <div class="info">
               <h3>Mozilla L10N T-shirts</h3>
               <p>Print</p>
@@ -77,7 +77,7 @@ title: Open Labs
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="sfk16" class="work">
-          <img data-src="../images/projects/poster_SFK.jpg" alt="">
+          <img class="lazy" data-src="../images/projects/poster_SFK.jpg" alt="">
           <div class="info">
             <h3>Software Freedom Kosova 2016</h3>
             <p>Visual ID, Print</p>
@@ -88,7 +88,7 @@ title: Open Labs
       <div class="large-4 columns">
         <div class="work-wrapper">
           <a href="openchain" class="work">
-            <img data-src="../images/projects/penguins_thumb.jpg" alt="">
+            <img class="lazy" data-src="../images/projects/penguins_thumb.jpg" alt="">
             <div class="info">
               <h3>OpenChain Penguins</h3>
               <p>Illustration</p>
@@ -98,5 +98,4 @@ title: Open Labs
       </div>
     </div>
   </div>
-
 </div>

projects/reproducible-builds.html

@@ -1,14 +1,14 @@
 ---
 layout: default
 section_id: portfolio
-title: Reproducible Builds | Styleguide
+title: Reproducible Builds | Style Guide
 ---
 
 <div style="background-color: #1E5B96;" class="full new">
   <div class="section-title new">
     <div class="row">
       <div class="medium-10 medium-centered columns">
-        <h1 class="wow slideInUp" style="color: white; font-size: 2rem;">Reproducible Builds Styleguide</h1>
+        <h1 class="wow slideInUp" style="color: white; font-size: 2rem;">Reproducible Builds Style Guide</h1>
       </div>
     </div>
   </div>