index.ejs 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <% var content = site.posts %>
  2. <div id="cover" class="background-haze">
  3. <div id="stars"></div>
  4. <div id="stars-2"></div>
  5. <div id="stars-3"></div>
  6. <div class="center-div" id="app">
  7. <div class="container bottom-spacer">
  8. <div class="row justify-content-md-center">
  9. <div class="col12">
  10. <h1><img class="text-logo" alt="James Peret" src="images/jamesperet-logo-white.png"></h1>
  11. </div>
  12. </div>
  13. <div class="row justify-content-md-center bottom-spacer-md">
  14. <div class="col12 col-md-6 text-center">
  15. <ul class="nav justify-content-center">
  16. <li class="nav-item"><a class="nav-link" href="/projects">Projects</a></li>
  17. <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
  18. <li class="nav-item"><a class="nav-link" href="/about">About</a></li>
  19. </ul>
  20. </div>
  21. </div>
  22. <div class="row bottom-spacer-md">
  23. <div class="col-5 col-md-3" >
  24. <img class="img-fluid" src="images/james-peret-drawing.png">
  25. </div>
  26. <div class="col-7 col-md-9">
  27. <div class="about-text">
  28. <p class="lead">Hello, I'm James Peret, a designer, programmer and filmmaker from Sao Paulo, Brazil.</p>
  29. <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>
  30. <p class="hide-if-sm">I'm available for work in the areas of programming, design and filmmaking assistance.</p>
  31. </div>
  32. </div>
  33. </div>
  34. <div class="row bottom-spacer">
  35. <div class="social-media-list">
  36. <a href="http://twitter.com/jamesperet" class="social-media-icon"><img src="images/icon-twitter.png" v-on:click="send_event('twitter')"></a>
  37. <a href="https://github.com/jamesperet" class="social-media-icon"><img src="images/icon-github.png" v-on:click="send_event('github')"></a>
  38. <a href="http://www.linkedin.com/in/jamesperet" class="social-media-icon"><img src="images/icon-linkedin.png" v-on:click="send_event('linkedin')"></a>
  39. <a href="https://vimeo.com/jamesperet" class="social-media-icon"><img src="images/icon-vimeo.png" v-on:click="send_event('vimeo')"></a>
  40. <a href="https://youtube.com/jamesperet" class="social-media-icon"><img src="images/icon-youtube.png" v-on:click="send_event('youtube')"></a>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. <div class="container">
  47. <div class="row" style="margin-bottom: 15px;">
  48. <div class="col-12">
  49. <h2 class="display-4">Latest Projects</h2>
  50. </div>
  51. </div>
  52. <div class="row blog-posts">
  53. <% limit(featured_projects(content), 3).forEach(function(post){ %>
  54. <% content = remove_from_list(content, post) %>
  55. <% var data = {post: post, size: 4, image: post.thumbnail_image} %>
  56. <%- partial('_partial/content-card', data) %>
  57. <% }) %>
  58. </div>
  59. <div class="row justify-content-end" style="text-align: right;">
  60. <div class="col-4 col-md-3" style="text-align: right;">
  61. <a role="button" href="/projects" class="btn btn-sm btn-outline-secondary"><i class="fas fa-plus"></i> Projects</a>
  62. </div>
  63. </div>
  64. <% var games = limit(tagged(content, 'games'), 4) %>
  65. <% if(games.length > 0) { %>
  66. <div class="row" style="margin-bottom: 15px;">
  67. <div class="col-12">
  68. <h2 class="display-4">Games</h2>
  69. </div>
  70. </div>
  71. <div class="row">
  72. <% games.forEach(function(post){ %>
  73. <% if(games.length == 1) { %>
  74. <%- partial('_partial/content-thumbnail', {post: post, show_title: false, size: 12}) %>
  75. <% } else if(games.length == 2) { %>
  76. <%- partial('_partial/content-thumbnail', {post: post, show_title: false, size: 6}) %>
  77. <% } else if(games.length == 3) { %>
  78. <%- partial('_partial/content-thumbnail', {post: post, show_title: false, size: 4}) %>
  79. <% } else { %>
  80. <%- partial('_partial/content-thumbnail', {post: post, show_title: false, size: 3}) %>
  81. <% } %>
  82. <% content = remove_from_list(content, post) %>
  83. <% }) %>
  84. </div>
  85. <% } %>
  86. <div class="row justify-content-end" style="text-align: right;">
  87. <div class="col-4 col-md-3" style="text-align: right;">
  88. <a role="button" href="/projects" class="btn btn-sm btn-outline-secondary"><i class="fas fa-plus"></i> Projects</a>
  89. </div>
  90. </div>
  91. <div class="row up-spacer" style="margin-bottom: 15px;">
  92. <div class="col-12">
  93. <h2 class="display-4">Latest Posts</h2>
  94. </div>
  95. </div>
  96. <div class="row blog-posts">
  97. <% limit(order_posts(content), 3).forEach(function(post){ %>
  98. <% content = remove_from_list(content, post) %>
  99. <% var data = {post: post, size: 4, image: `/${post.slug}/cover.jpg`} %>
  100. <%- partial('_partial/content-card', data) %>
  101. <% }) %>
  102. </div>
  103. <div class="row justify-content-end bottom-spacer" >
  104. <div class="col-4 col-md-3" style="text-align: right;">
  105. <a role="button" href="/blog" class="btn btn-sm btn-outline-secondary"><i class="fas fa-plus"></i> Posts</a>
  106. </div>
  107. </div>
  108. </div>
  109. <%- partial('_partial/social-links') %>
  110. <%- partial('_partial/contact-form') %>