Created blog and projects page

fetch-projects.js

@@ -17,6 +17,20 @@ projects.forEach(project => {
     } catch(err){}
 });
 
+var copyFile = function(original_path, destination_path){
+    try {    
+        fs.copyFileSync(original_path, destination_path);
+        return true;
+    } catch (err){
+        if(err.code == 'ENOENT'){
+            console.log(`> ERROR: File not found! (\'${original_path}\')`)
+        } else {
+            console.log(err);
+        }
+        return false;
+    }
+}
+
 var createProject = function(project){
     // Don't copy private projects
     if(project.visibility == "private") return;
@@ -24,15 +38,14 @@ var createProject = function(project){
     var cover_path = `${source}/${project.permalink}/${project.cover_image}`
     var cover_ext = project.cover_image.split(".")[1];
     var thumbnail_destination = `source/images/thumbnails/projects/${project.permalink}.${cover_ext}`
-    try {    
-        fs.copyFileSync(cover_path, thumbnail_destination);
-    } catch (err){
-        if(err.code == 'ENOENT'){
-            console.log(`> ERROR: File not found! (\'${cover_path}\')`)
-        } else {
-            console.log(err);
-        }
-        return;
+    if(!copyFile(cover_path, thumbnail_destination)) return;
+    // Copy Hero
+    var hero_path, hero_ext, hero_destination;
+    if(project.hero_image != undefined){
+        hero_path = `${source}/${project.permalink}/${project.hero_image}`
+        hero_ext = project.hero_image.split(".")[1];
+        hero_destination = `source/images/hero/projects/${project.permalink}.${hero_ext}`
+        copyFile(hero_path, hero_destination);
     }
     // Create markdown file
     var file = "";
@@ -41,6 +54,9 @@ var createProject = function(project){
     file += `date: ${project.start_date}\n`;
     file += `layout: project\n`
     file += `cover: /images/thumbnails/projects/${project.permalink}.${cover_ext}\n`;
+    if(project.hero_image != undefined){
+        file += `hero: /images/hero/projects/${project.permalink}.${hero_ext}\n`;
+    }
     try {
         var data = JSON.parse(JSON.stringify(project));
         delete data.title;

themes/james-theme/layout/_partial/about-author.ejs

@@ -0,0 +1,19 @@
+<div class="container-fluid about-author bg-secondary">
+    <div class="row justify-content-center bottom-spacer">
+      <div class="col-2 align-self-center text-center">
+        <img class="img-fluid img-thumbnail rounded" src="/images/james-peret-drawing.png">
+      </div>
+      <div class="col-6 jumbotron">
+        <p class="lead">Hello, I'm James Peret, a designer, programmer and filmmaker from Sao Paulo, Brazil.</p>
+        <p class="hide-if-sm">My skills include developing games with unity and C#, coding web apps with node and javascript, designing user interfaces and 3d modeling for games and industrial design.</p>
+        <p class="hide-if-sm">I'm available for work in the areas of programming, design and filmmaking assistance.</p>
+        <p>
+          <a href="http://twitter.com/jamesperet" class="social-media-icon invert contrast"><img src="/images/icon-twitter.png" v-on:click="send_event('twitter')"></a>
+          <a href="https://github.com/jamesperet" class="social-media-icon invert contrast"><img src="/images/icon-github.png" v-on:click="send_event('github')"></a>
+          <a href="http://www.linkedin.com/in/jamesperet" class="social-media-icon invert contrast"><img src="/images/icon-linkedin.png" v-on:click="send_event('linkedin')"></a>
+          <a href="https://vimeo.com/jamesperet" class="social-media-icon invert contrast"><img src="/images/icon-vimeo.png" v-on:click="send_event('vimeo')"></a>
+          <a href="https://youtube.com/jamesperet" class="social-media-icon invert contrast"><img src="/images/icon-youtube.png" v-on:click="send_event('youtube')"></a>
+        </p>
+      </div>
+    </div>
+</div>

themes/james-theme/layout/_partial/contact-form.ejs

@@ -0,0 +1,26 @@
+<div class="container-fluid bg-dark text-white">
+    <div class="container" style="padding-top: 60px; padding-bottom: 60px;">
+        <div class="row justify-content-center">
+            <div class="col-9">
+                <h2 class="text-center">Contact</h2>
+                <p class="lead">Send me direct message and I will get in touch as quick as possible.</p>
+                <form>
+                    <div class="form-group">
+                        <div class="row">
+                            <div class="col-4">
+                              <input type="text" class="form-control" placeholder="Name">
+                            </div>
+                            <div class="col-4">
+                              <input type="text" class="form-control" placeholder="Email" required>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <textarea class="form-control " id="validationTextarea" placeholder="Write a Message here" required></textarea>
+                    </div>
+                    <button type="submit" class="btn btn-outline-success">Send</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>

themes/james-theme/layout/_partial/fixed-logo.ejs

@@ -0,0 +1,29 @@
+<div id="logo" class="dropright">
+    <button unselectable="on" class="logo-button noselect" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <img  class="hide-if-sm" src="/images/james-logo-white.svg">
+    </button>
+    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+        <a class="dropdown-item" href="/">Home</a>
+        <a class="dropdown-item" href="/projects">Projects</a>
+        <a class="dropdown-item" href="/blog">Blog</a>
+    </div>
+</div>
+
+<script>
+    var logo = document.getElementById('logo');
+    var cover = document.getElementById('cover')
+    var invertLogo = function(){
+        console.log(window.scrollY + "/" + cover.clientHeight)
+        if(window.scrollY >= cover.clientHeight) {
+            logo.classList.add("invert");
+        }
+        else if(window.scrollY < cover.clientHeight) {
+            logo.classList.remove("invert");
+        }
+    }
+    invertLogo()
+    window.onscroll = function(){
+        invertLogo();
+    };
+    
+</script>

themes/james-theme/layout/_partial/footer.ejs

@@ -0,0 +1,5 @@
+<footer class="footer mt-auto py-3">
+    <div class="container">
+      <span class="text-muted">© Copyright James Peret 2004-2020 </span>
+    </div>
+</footer>

themes/james-theme/layout/_partial/head.ejs

@@ -1,5 +1,3 @@
-<!DOCTYPE html>
-<html>
 <head>
   <meta charset="utf-8">
 

themes/james-theme/layout/_partial/hero.ejs

@@ -0,0 +1,5 @@
+<div class="container-fluid" >
+    <div class="row">
+      <img id="cover" class="img-fluid hero" src="<%= image %>">
+    </div>
+  </div>

themes/james-theme/layout/_partial/logo-control.ejs

@@ -1,18 +0,0 @@
-<script>
-    var logo = document.getElementById('logo');
-    var cover = document.getElementById('cover')
-    var invertLogo = function(){
-        console.log(window.scrollY + "/" + cover.clientHeight)
-        if(window.scrollY >= cover.clientHeight) {
-            logo.classList.add("invert");
-        }
-        else if(window.scrollY < cover.clientHeight) {
-            logo.classList.remove("invert");
-        }
-    }
-    invertLogo()
-    window.onscroll = function(){
-        invertLogo();
-    };
-    
-</script>

themes/james-theme/layout/_partial/navbar.ejs

@@ -0,0 +1,49 @@
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <a class="navbar-brand" href="/">
+        <img class="invert" alt="James Peret" src="/images/jamesperet-logo-white.png">
+    </a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <ul class="navbar-nav mr-auto">
+        <% if(is_current('/projects')) { %>
+            <li class="nav-item active">
+        <% } else { %>
+            <li class="nav-item"></li>
+        <% } %>
+            <a class="nav-link" href="/projects">
+                Projects 
+                <% if(is_current('/projects')) { %>
+                    <span class="sr-only">(current)</span>
+                <% } %>
+            </a>
+        </li>
+        <% if(is_current('/blog')) { %>
+            <li class="nav-item active">
+        <% } else { %>
+            <li class="nav-item"></li>
+        <% } %>
+            <a class="nav-link" href="/blog" >
+                Blog 
+                <% if(is_current('/blog')) { %>
+                    <span class="sr-only">(current)</span>
+                <% } %>
+            </a>
+        </li>
+        <% if(is_current('/contact')) { %>
+            <li class="nav-item active">
+        <% } else { %>
+            <li class="nav-item"></li>
+        <% } %>
+            <a class="nav-link" href="/contact" >
+                Contact 
+                <% if(is_current('/blog')) { %>
+                    <span class="sr-only">(current)</span>
+                <% } %>
+            </a>
+        </li>
+    </ul>
+    </div>
+</nav>

themes/james-theme/layout/_partial/video-player.ejs

@@ -0,0 +1,16 @@
+<div id="player-container" class="container-fluid" style="background-color: black; height: 650px; padding: 0px;">
+    <% if(is_video_provider(url, 'youtube')) { %>
+        <iframe id="video-player" src="<%- youtube_embed_link(url) %>" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    <% } else if(is_video_provider(url, 'vimeo')) { %>
+        <iframe id="video-player" src="<%- vimeo_embed_link(url) %>" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
+    <% } %>
+    <script>
+        var container = document.getElementById('player-container')
+        document.getElementById("video-player"). width = container.clientWidth;
+        document.getElementById("video-player"). height = container.clientHeight;
+        window.addEventListener("resize", function(event) {
+            document.getElementById("video-player"). width = container.clientWidth;
+            document.getElementById("video-player"). height = container.clientHeight;
+        })
+    </script>
+</div>

themes/james-theme/layout/blog.ejs

@@ -1 +1,22 @@
-<h1>Blog</h1>
+<div class="container bottom-spacer">
+    <div class="row up-spacer">
+        <div class="col-12">
+            <h1 class="display-3">
+                Blog
+                <small class="text-muted">(<%= blog_count(site.posts) %>)</small>
+            </h1>
+            <hr>
+        </div>
+    </div>
+    <div class="row">
+        <% site.posts.each(function(post){ %>
+            <% if(post.layout == "post") { %>
+                <div class="col-3">
+                    <%- partial('_partial/content-thumbnail', {post: post, index: true}) %>
+                </div>
+            <% } %>
+        <% }) %>
+    </div>
+</div>
+<%- partial('_partial/about-author') %>
+<%- partial('_partial/contact-form') %>

themes/james-theme/layout/index.ejs

@@ -70,3 +70,4 @@
         <% }) %>
     </div>
 </div>
+<%- partial('_partial/contact-form') %>

themes/james-theme/layout/layout.ejs

@@ -1,22 +1,17 @@
-<%- partial('_partial/head') %>
-<body>
-    <div id="logo" class="dropright">
-        <button unselectable="on" class="logo-button noselect" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <img  class="hide-if-sm" src="/images/james-logo-white.svg">
-        </a>
-        </button>
-        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-          <a class="dropdown-item" href="/">Home</a>
-          <a class="dropdown-item" href="/projects">Projects</a>
-          <a class="dropdown-item" href="/blog">Blog</a>
-        </div>
-      </div>
-        
-    <%- body %>
-</body>
-
-<script src="/js/jquery-3.5.1.min.js"></script>
-<script src="/js/popper.min.js"></script>
-<script src="/js/bootstrap.js"></script>
-<%- partial('_partial/logo-control') %>
+<!DOCTYPE html>
+<html class="h-100">
+  <%- partial('_partial/head') %>
+  <body class="d-flex flex-column h-100">
+    <% if(!is_home()) { %>
+      <%- partial('_partial/navbar') %>
+    <% } %>
+    <main role="main" class="flex-shrink-0">
+      <%- body %>
+    </main>
+    
+    <%- partial('_partial/footer') %>
+  </body>
+  <script src="/js/jquery-3.5.1.min.js"></script>
+  <script src="/js/popper.min.js"></script>
+  <script src="/js/bootstrap.js"></script>
 </html>

themes/james-theme/layout/post.ejs

@@ -1,9 +1,5 @@
 <% if (page.image){ %>
-  <div class="container-fluid" >
-    <div class="row">
-      <img id="cover" class="img-fluid hero" src="/images/hero/blog/<%= page.image.feature %>">
-    </div>
-  </div>
+  <%- partial('_partial/hero', { image : `/images/hero/blog/${page.image.feature}` }) %>
 <% } %>
 <div class="container up-spacer bottom-spacer-lg">
   <div class="row">
@@ -22,22 +18,4 @@
   </div>
 </div>
 
-<div class="container-fluid about-author">
-  <div class="row justify-content-center bottom-spacer">
-    <div class="col-2 align-self-center text-center">
-      <img class="img-fluid img-thumbnail rounded" src="/images/james-peret-drawing.png">
-    </div>
-    <div class="col-6 jumbotron">
-      <p class="lead">Hello, I'm James Peret, a designer, programmer and filmmaker from Sao Paulo, Brazil.</p>
-      <p class="hide-if-sm">My skills include developing games with unity and C#, coding web apps with node and javascript, designing user interfaces and 3d modeling for games and industrial design.</p>
-      <p class="hide-if-sm">I'm available for work in the areas of programming, design and filmmaking assistance.</p>
-      <p>
-        <a href="http://twitter.com/jamesperet" class="social-media-icon invert contrast"><img src="/images/icon-twitter.png" v-on:click="send_event('twitter')"></a>
-        <a href="https://github.com/jamesperet" class="social-media-icon invert contrast"><img src="/images/icon-github.png" v-on:click="send_event('github')"></a>
-        <a href="http://www.linkedin.com/in/jamesperet" class="social-media-icon invert contrast"><img src="/images/icon-linkedin.png" v-on:click="send_event('linkedin')"></a>
-        <a href="https://vimeo.com/jamesperet" class="social-media-icon invert contrast"><img src="/images/icon-vimeo.png" v-on:click="send_event('vimeo')"></a>
-        <a href="https://youtube.com/jamesperet" class="social-media-icon invert contrast"><img src="/images/icon-youtube.png" v-on:click="send_event('youtube')"></a>
-      </p>
-    </div>
-  </div>
-</div>
+<%- partial('_partial/about-author') %>

themes/james-theme/layout/project.ejs

@@ -1,3 +1,11 @@
+<% if(page.videos != undefined) { %>
+  <% if(page.videos.length > 0) { %>
+    <%- partial('_partial/video-player', {url: page.videos[0].url}) %>
+  <% } %>
+<% } %>
+<% if(page.hero != undefined) { %>
+  <%- partial('_partial/hero', { image : page.hero }) %>
+<% } %>
 <div id="cover"></div>
 <div class="project container up-spacer bottom-spacer">
   <div class="row">
@@ -19,4 +27,5 @@
       </div>
     </div>
   </div>
-</div>
+</div>
+<%- //partial('_partial/about-author') %>

themes/james-theme/layout/projects.ejs

@@ -1 +1,22 @@
-<h1>Projects</h1>
+<div class="container bottom-spacer">
+    <div class="row up-spacer">
+        <div class="col-12">
+            <h1 class="display-3">
+                Projects
+                <small class="text-muted">(<%= project_count(site.posts) %>)</small>
+            </h1>
+            <hr>
+        </div>
+    </div>
+    <div class="row">
+        <% site.posts.each(function(post){ %>
+            <% if(post.layout == "project") { %>
+                <div class="col-3">
+                    <%- partial('_partial/content-thumbnail', {post: post, index: true}) %>
+                </div>
+            <% } %>
+        <% }) %>
+    </div>
+</div>
+<%- partial('_partial/about-author') %>
+<%- partial('_partial/contact-form') %>

themes/james-theme/scripts/helpers.js

@@ -0,0 +1,44 @@
+
+hexo.extend.helper.register('project_count', function(posts){
+    var counter = 0;
+    posts.data.forEach(post => {
+        if(post.layout == "project") counter += 1;
+    });
+    return counter;
+});
+
+hexo.extend.helper.register('blog_count', function(posts){
+    var counter = 0;
+    posts.data.forEach(post => {
+        if(post.layout == "post") counter += 1;
+    });
+    return counter;
+});
+
+hexo.extend.helper.register('is_video_provider', function(url, provider){
+    console.log(url);
+    url = url.replace('http://', '')
+    url = url.replace('https://', '')
+    url = url.replace('www', '')
+    var parts = url.split('.');
+    console.log(`${provider} == ${parts[0]} (${parts[0] == provider ? true : false})`)
+    return parts[0] == provider ? true : false;
+});
+
+hexo.extend.helper.register('youtube_embed_link', function(url){
+    console.log(url);
+    url = url.replace('http://', '')
+    url = url.replace('https://', '')
+    var parts = url.split('/');
+    console.log(parts);
+    return `http://www.youtube.com/embed/${parts[2]}`;
+});
+
+hexo.extend.helper.register('vimeo_embed_link', function(url){
+    console.log(url);
+    url = url.replace('http://', '')
+    url = url.replace('https://', '')
+    url = url.replace('vimeo.com/', '')
+    console.log(url);
+    return `https://player.vimeo.com/video/${url}`;
+});

themes/james-theme/source/css/sticky-footer-navbar.css

@@ -0,0 +1,16 @@
+/* Custom page CSS
+-------------------------------------------------- */
+/* Not required for template or sticky footer method. */
+
+.footer {
+  background-color: #f5f5f5;
+}
+
+.footer > .container {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+code {
+  font-size: 80%;
+}

themes/james-theme/source/css/style.styl

@@ -1,6 +1,7 @@
 global-reset()
 
 @import "bootstrap.css"
+@import "sticky-footer-navbar.css"
 
 html {
   //overflow: hidden;
@@ -36,19 +37,6 @@ body {
   text-align: cen
 }
 
-.btn {
-  text-transform: uppercase;
-  padding: 10px 16px;
-  font-size: 18px;
-  line-height: 1.3333333;
-  text-decoration: none;
-  color: #fff;
-}
-
-.btn:hover {
-  text-decoration: underline;;
-}
-
 .thumbnail {
   background-color: rgba(78, 91, 119, 0.2);
   object-fit: cover; 
@@ -157,7 +145,7 @@ body {
 }
 
 img.hero {
-  max-height: 500px;
+  height: 650px;
   object-fit: cover;
   width: 100%;
 }
@@ -172,8 +160,7 @@ img.hero {
 }
 .about-author .jumbotron {
   padding: 20px;
-  margin: 0px  
-  background-color: #dcdada;
+  margin: 0px;
 }
 
 .about-author img { max-width: 150px;}
@@ -195,6 +182,11 @@ img.hero {
   border: none;
 }
 
+.navbar-brand img {
+  height: 25px;
+  margin-right: 30px;  
+}
+
 .noselect:focus { outline: none; }
 
 .dropdown-item:hover { background-color: #9d9d9d }
@@ -225,7 +217,12 @@ img.hero {
 	.avatar > img { width: 140px; }
 	.about-text { width: 400px; }
 	.about-text > p { margin: 0px; }
+}
 
+@media (max-width: 768px) {
+  .navbar {
+    padding-top: 15px;
+  }
 }
 
 @media (max-width: 640px) {
@@ -247,29 +244,25 @@ img.hero {
   .link-list {
     margin-top: 20px;
   }
-  .btn-lg, .btn-group-lg > .btn {
-    font-size: 12px;
-  }
   .legend {
 	  font-size: 12px;
   }
   .about{ margin-top: 20px; }
   .avatar {
-	  width: 80px;
-   }
-	
-   .avatar > img {
-	  width: 80px;
-   }
-   .about-text {
-	  font-size: 14px;
-	  width: 160px;
-   }
-   .hide-if-sm {
-	   display: none;
-   }
-   .social-media-list { margin-top: 20px;}
-
+    width: 80px;
+  }
+  .avatar > img {
+    width: 80px;
+  }
+  .about-text {
+    font-size: 14px;
+    width: 160px;
+  }
+  .hide-if-sm {
+    display: none;
+  }
+  .social-media-list { margin-top: 20px;}
+  
 }