Add RSS feed and about page

_config.yml

@@ -101,3 +101,56 @@ theme: james-theme
 ## Docs: https://hexo.io/docs/deployment.html
 deploy:
   type: ''
+
+links:
+  - icon: twitter
+    link: http://twitter.com/jamesperet
+  - icon: vimeo
+    link: http://vimeo.com/jamesperet
+  - icon: github
+    link: http://github.com/jamesperet
+  - icon: tumblr
+    link: http://jamesperet.tumblr.com/
+  - icon: youtube
+    link: http://youtube.com/jamesperet
+  - icon: linkedin
+    link: http://www.linkedin.com/in/jamesperet
+  - icon: lastfm
+    link: https://www.last.fm/user/James_Peret
+  - icon: facebook
+    link: http://facebook.com/jamesperet
+  - icon: itch-io
+    link: http://jamesperet.itch.io
+  - icon: steam
+    link: https://steamcommunity.com/id/jamesperet/
+  - icon: git
+    link: http://gogs.jamesperet.com/
+  - icon: npm
+    link: https://www.npmjs.com/~jamesperet
+  - icon: soundcloud
+    link: https://soundcloud.com/james-peret
+  - icon: twitch.tv
+    link: https://www.twitch.tv/james_peret
+  - icon: rss
+    link: https://jamesperet.com/rss.xml
+  - icon: pinterest
+    link: https://br.pinterest.com/jamesperet/
+  - icon: unity
+    link: https://connect.unity.com/u/james-peret
+  - icon: angellist
+    link: https://angel.co/u/jamesperet
+  - icon: codepen
+    link: https://codepen.io/jamesperet/pens/templates/
+  - icon: behance
+    link: https://www.behance.net/jamesperet
+
+feed:
+  type: atom
+  path: rss.xml
+  limit: 20
+  content:
+  content_limit: 140
+  content_limit_delim: ' '
+  order_by: -date
+  icon: icon.png
+  autodiscovery: true

package-lock.json

@@ -1218,6 +1218,15 @@
         "hexo-pagination": "1.0.0"
       }
     },
+    "hexo-generator-feed": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/hexo-generator-feed/-/hexo-generator-feed-2.2.0.tgz",
+      "integrity": "sha512-/jFMSyofFmp75P67sN9QesEW/wAFstmNfM+zXOOh+D5ZJe0RqXokczEetloqjCU1CX1EzKI3tRr/EoBZ6igQzg==",
+      "requires": {
+        "hexo-util": "^1.3.0",
+        "nunjucks": "^3.0.0"
+      }
+    },
     "hexo-generator-index": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/hexo-generator-index/-/hexo-generator-index-1.0.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "hexo": "^4.2.1",
     "hexo-generator-archive": "^1.0.0",
     "hexo-generator-category": "^1.0.0",
+    "hexo-generator-feed": "^2.2.0",
     "hexo-generator-index": "^1.0.0",
     "hexo-generator-tag": "^1.0.0",
     "hexo-renderer-ejs": "^1.0.0",
@@ -25,9 +26,9 @@
     "json-to-pretty-yaml": "^1.2.2",
     "log-symbols": "^4.0.0",
     "markdown-yaml-metadata-parser": "^2.0.5",
-    "node-time-ago": "^1.0.0",
-    "turndown": "^6.0.0",
     "minipass": "2.7.0",
-    "sharp": "^0.23.0"
+    "node-time-ago": "^1.0.0",
+    "sharp": "^0.23.0",
+    "turndown": "^6.0.0"
   }
 }

readme.md

@@ -16,7 +16,7 @@ Based on [Hexo](http://hexo.io) for building the static website.
   
   - [ ] Featured projects button
   
-  - [ ] **About page content**
+  - [x] **About page content**
   
   - [ ] Add nav links to home page header
   
@@ -44,13 +44,13 @@ Based on [Hexo](http://hexo.io) for building the static website.
   
   - [ ] Contact form sends email
   
-  - [ ] **Screenshot thumbnail resizing**
+  - [x] **Screenshot thumbnail resizing**
   
   - [ ] **Project downloadable files**
   
   - [ ] redirect to jamesperet.j1x.co
   
-  - [ ] video link test requirement
+  - [ ] **video link test requirement**
   
   - [ ] SEO basics
 

themes/james-theme/layout/_partial/content-thumbnail.ejs

@@ -5,7 +5,7 @@
 
 <div class="col-<%= size %>" style="margin-bottom: 30px;">
     <a href="<%= url_for(post.path) %>" class="thumbnail-link">
-        <img class="img-fluid thumbnail thumbnail-col<%= size %> rounded" src="<%= thumbnail %>">
+        <img class="img-fluid thumbnail rounded" src="<%= thumbnail %>">
         <% if(show_title == true || show_title == undefined) { %>
             <p><%= post.title %></p>
         <% } %>   

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

@@ -3,7 +3,7 @@
       <div class="row justify-content-md-center">
         <div class="col-6">
           <a href="/">Home</a> | <a href="/projects">Projects</a> | <a href="/blog">Blog</a> | <a href="/about">About</a> – 
-           <span class="text-muted">Copyright © James Peret 2004-2020 </span>
+           <span class="text-muted">Copyright <i class="far fa-copyright"></i> James Peret 2004-2020 </span>
         </div>
       </div>
       

themes/james-theme/layout/_partial/project-search-bar.ejs

@@ -9,9 +9,9 @@
                 v-bind:class= "view.type == 'cards' ? 'active' : ''" >
                 <i class="fas fa-th-large"></i>
             </button>
-            <button type="button" class="btn btn-light"><i class="fas fa-bars"></i></button>
-            <button type="button" class="btn btn-light"><i class="fas fa-couch"></i></i></button>
-            <button type="button" class="btn btn-light"><i class="fas fa-list"></i></button>
+            <!-- <button type="button" class="btn btn-light"><i class="fas fa-bars"></i></button> -->
+            <!-- <button type="button" class="btn btn-light"><i class="fas fa-couch"></i></i></button> -->
+            <!-- <button type="button" class="btn btn-light"><i class="fas fa-list"></i></button> -->
         </div>
     </div>
     <div class="col-6">
@@ -50,7 +50,7 @@
               </div>
         </form>
     </div>
-    <div class="col-auto">
+    <!-- <div class="col-auto">
         <div class="dropdown">
             <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <i class="fas fa-tags"></i> Tags
@@ -85,6 +85,6 @@
               <a class="dropdown-item" href="#">Something else here</a>
             </div>
         </div>
-    </div>
+    </div> -->
     
   </nav>

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

@@ -9,7 +9,7 @@
             <% if(screenshots.length == 5 && i >= 2) { size = 4 } %>
             <div class="col-<%= size %>" style="margin-bottom: 20px;">
                 <a href="<%= url_for(screenshots[i].url) %>" class="">
-                    <img class="img-fluid thumbnail figure-img rounded" src="<%= screenshots[i].url %>">
+                    <img class="img-fluid thumbnail thumbnail-col<%= size %> figure-img rounded" src="<%= screenshots[i].url %>">
                 </a>
             </div>
         <% } %>

themes/james-theme/layout/_partial/social-icons.ejs

@@ -0,0 +1,100 @@
+<% if(icon == 'facebook') { %>
+    <a href="<%= link %>" title="Facebook" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-facebook-f"></i>
+    </a>
+<% } %>
+<% if(icon == 'youtube') { %>
+    <a href="<%= link %>" title="Youtube" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-youtube"></i>
+    </a>
+<% } %>
+<% if(icon == 'linkedin') { %>
+    <a href="<%= link %>" title="Linkedin" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-linkedin"></i>
+    </a>
+<% } %>
+<% if(icon == 'vimeo') { %>
+    <a href="<%= link %>" title="Vimeo" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-vimeo"></i>
+    </a>
+<% } %>
+<% if(icon == 'github') { %>
+    <a href="<%= link %>" title="Github" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-github"></i>
+    </a>
+<% } %>
+<% if(icon == 'twitter') { %>
+    <a href="<%= link %>" title="Twitter" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-twitter"></i>
+    </a>
+<% } %>
+<% if(icon == 'lastfm') { %>
+    <a href="<%= link %>" title="Last.fm" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-lastfm"></i>
+    </a>
+<% } %>
+<% if(icon == 'tumblr') { %>
+    <a href="<%= link %>" title="'Coisas do James' on Tumblr" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-tumblr"></i>
+    </a>
+<% } %>
+<% if(icon == 'itch-io') { %>
+    <a href="<%= link %>" title="My games on Itch.io" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-itch-io"></i>
+    </a>
+<% } %>
+<% if(icon == 'steam') { %>
+    <a href="<%= link %>" title="Gamer profile on Steam" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-steam"></i>
+    </a>
+<% } %>
+<% if(icon == 'steam') { %>
+    <a href="<%= link %>" title="James Peret's projects and posts RSS feed" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fas fa-rss"></i>
+    </a>
+<% } %>
+<% if(icon == 'git') { %>
+    <a href="<%= link %>" title="Code repositories" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-git-alt"></i>
+    </a>
+<% } %>
+<% if(icon == 'soundcloud') { %>
+    <a href="<%= link %>" title="Songs on soundcloud" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-soundcloud"></i>
+    </a>
+<% } %>
+<% if(icon == 'twitch.tv') { %>
+    <a href="<%= link %>" title="Twitch.tv" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-twitch"></i>
+    </a>
+<% } %>
+<% if(icon == 'npm') { %>
+    <a href="<%= link %>" title="Node modules on NPM" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-npm"></i>
+    </a>
+<% } %>
+<% if(icon == 'pinterest') { %>
+    <a href="<%= link %>" title="Pinterest" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-pinterest"></i>
+    </a>
+<% } %>
+<% if(icon == 'unity') { %>
+    <a href="<%= link %>" title="Unity Connect" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-unity"></i>
+    </a>
+<% } %>
+<% if(icon == 'angellist') { %>
+    <a href="<%= link %>" title="Angel List" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-angellist"></i>
+    </a>
+<% } %>
+<% if(icon == 'codepen') { %>
+    <a href="<%= link %>" title="codepen" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-codepen"></i>
+    </a>
+<% } %>
+<% if(icon == 'behance') { %>
+    <a href="<%= link %>" title="Portolio on Behance" class="display-4 social-link" style="margin-right: 10px" data-toggle="tooltip" data-placement="top">
+        <i class="fab fa-behance"></i>
+    </a>
+<% } %>

themes/james-theme/layout/about.ejs

@@ -1,3 +1,47 @@
-<%- partial('_partial/about-author') %>
-
+<%- //partial('_partial/about-author') %>
+<div class="container bottom-spacer">
+    <div class="row up-spacer bottom-spacer">
+        <div class="col-12 text-center">
+            <h1 class="display-3" style="margin-bottom: 0px;">
+                About
+            </h1>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-12">
+            <p class="lead">
+                My name is James Peret, and I'm a designer, programmer and filmmaker from from São Paulo, Brazil.
+            </p>
+            <p>
+                I live in a remote place near the big city and I like to spend my time creating things. In the past few years I have been working with programming systems using node.js and designing games with Unity3d.
+            </p>
+            <p>
+                During the last 20 years I have worked in many different types of projects. I have worked with video editing, filmaking, webdesign, software development, game design and industrial design.
+            </p>
+            <p>
+                When I'm not coding, I'm playing video games, watching movies and 3d printing stuff. I like to play strategy, survival and FPS games. I have watched thousands of movies. Before working with games I was working with video and I wanted to be a movie director. I have directed lots of short movies and wrote some movie scripts.
+            </p>
+        </div>
+    </div>
+</div>
+<div class="container-fluid bg-light">
+    <div class="row bottom-spacer" style="padding-top: 50px">
+        <div class="col-12 text-center">
+            <h2 class="display-4" style="margin-bottom: 0px;">
+                Around the web
+            </h2>
+            <h4><small class="text-muted">Links to all my stuff</small></h4>
+        </div>
+    </div>
+    <% var i = 0 %>
+    <div class="row" style="padding-bottom: 50px">
+        <div class="col-12 text-center">
+            <% config.links.forEach(function(link) { %>
+                <%- partial('_partial/social-icons', {link: link.link, icon: link.icon}) %>
+                <% if(i == 12) { %><br><% } %>
+                <% i += 1 %>
+            <% }) %>
+        </div>
+    </div>
+</div>
 <%- partial('_partial/contact-form') %>

themes/james-theme/layout/layout.ejs

@@ -24,4 +24,9 @@
   <script src="/js/vue-tags-input.js"></script>
   <script src="/js/video-resize.js"></script>
   <%- partial('_partial/vue-app') %>
+  <script>
+    $(function () {
+      $('[data-toggle="tooltip"]').tooltip()
+    })
+  </script>
 </html>

themes/james-theme/layout/project.ejs

@@ -1,10 +1,10 @@
 <% if(page.videos != undefined) { %>
-  <% if(page.videos.length > 0 && page.hero == undefined) { %>
+  <% if(page.videos.length > 0 && page.hero_image == undefined) { %>
     <%- partial('_partial/video-player', {url: page.videos[0].url, is_hero: true}) %>
   <% } %>
 <% } %>
-<% if(page.hero != undefined) { %>
-  <%- partial('_partial/hero', { image : page.hero }) %>
+<% if(page.hero_image != undefined) { %>
+  <%- partial('_partial/hero', { image : page.hero_image }) %>
 <% } %>
 <div id="cover"></div>
 <div class="project container up-spacer bottom-spacer">
@@ -50,7 +50,7 @@
   <% } %>
 
   <% if(page.videos != undefined) { %>
-    <% if(page.videos.length > 0 && page.hero != undefined) { %>
+    <% if(page.videos.length > 0 && page.hero_image != undefined) { %>
       <%- partial('_partial/video-player', {url: page.videos[0].url, is_hero: false}) %>
     <% } %>
   <% } %>

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

@@ -281,6 +281,9 @@ img.hero {
 
 .ti-item.ti-valid.ti-selected-item { color: #fff; background-color: #6c757d; }
 
+.social-link { color: #6c757d; }
+.social-link:hover { color: black; }
+
 @media (max-width: 992px) {
   .screenshot { height: 150px; }
 }