index.tpl 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4. <meta charset="UTF-8"/>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  6. <meta name="description" content="{$description}">
  7. <meta content="index,follow" name="robots"/>
  8. <title>{$titulo}</title>
  9. <!-- Meta Article -->
  10. <meta name="author" content="{$nombre}"/>
  11. <!-- OpenGraph -->
  12. <meta property="og:title" content="{$titulo}"/>
  13. <meta property="og:site_name" content="{$titulo}">
  14. <meta property="og:description" content="{$description}"/>
  15. <meta property="og:url" content="{$siteurl}"/>
  16. <meta property="og:image" content="{$templates.favicon}"/>
  17. <link rel="icon" href="{$templates.favicon}" sizes="192x192" />
  18. <link rel="stylesheet" type="text/css" href="{$templates.normalize}" />
  19. <link rel="stylesheet" type="text/css" href="{$templates.estilos}" />
  20. <style>
  21. .rotate {
  22. display: inline-block;
  23. transform: rotate(180deg);
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <header>
  29. <div class="contenedor">
  30. <nav class="menu">
  31. <a href="#about-us" id="btn-acerca-de">Acerca de</a>
  32. <a href="#trabajos" id="btn-trabajos">Proyectos</a>
  33. <a href="#contacto" id="btn-contacto">Contacto</a>
  34. </nav>
  35. <div class="contenedor-texto">
  36. <div class="texto">
  37. <h1 class="nombre">{$nombre}</h1>
  38. <h2 class="profesion">Desarrollador</h2>
  39. </div>
  40. </div>
  41. </div>
  42. </header>
  43. <main>
  44. <section class="acerca-de" id="acerca-de">
  45. <div class="contenedor">
  46. <div class="foto">
  47. <img alt="Jesús Eduardo" title="Jesús Eduardo" src="./templates/images/foto.png" width="115"/>
  48. </div>
  49. <div class="texto">
  50. <h3 class="titulo" id="about-us">Acerca de</h3>
  51. <p>Consultor y desarrollador de <span class="bold">Software Libre</span>. Hacker de <span class="bold">Hyperbola GNU/Linux-Libre.</span></p>
  52. </div>
  53. </div>
  54. </section>
  55. <section class="trabajos" id="trabajos">
  56. <div class="contenedor">
  57. <h3 class="titulo">Proyectos</h3>
  58. <div class="contenedor-trabajos">
  59. <div class="trabajo">
  60. <div class="thumb">
  61. <img alt="LibreVideoJS" title="LibreVideoJS" src="./templates/images/trabajos/librevideojs.jpg"/>
  62. </div>
  63. <div class="descripcion">
  64. <p class="nombre"><a class="link" href="{$projects.librevideojs}" rel="noopener noreferrer" target="_blank">LibreVideoJS</a></p>
  65. <p class="categoria">CSS - ECMAScript</p>
  66. </div>
  67. </div>
  68. <div class="trabajo">
  69. <div class="thumb">
  70. <img alt="Hyperbola" title="Hyperbola GNU/Linux-Libre" src="./templates/images/trabajos/hyperbola.jpg"/>
  71. </div>
  72. <div class="descripcion">
  73. <p class="nombre"><a class="link" href="{$projects.hyperbola}" rel="noopener noreferrer" target="_blank">Hyperbola GNU/Linux-Libre</a></p>
  74. <p class="categoria">GNU + Linux-Libre</p>
  75. </div>
  76. </div>
  77. <div class="trabajo">
  78. <div class="thumb">
  79. <img alt="Conocimientos Libres" title="Conocimientos Libres" src="./templates/images/trabajos/conocimientos.jpg"/>
  80. </div>
  81. <div class="descripcion">
  82. <p class="nombre"><a class="link" href="{$projects.cl}" rel="noopener noreferrer" target="_blank">Conocimientos Libres</a></p>
  83. <p class="categoria">HTML5 + Bulma + CSS3 + ECMAScript</p>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. </section>
  89. </main>
  90. <footer>
  91. <section class="contacto" id="contacto">
  92. <div class="contenedor">
  93. <div class="texto">
  94. <h3 class="titulo">Contacto</h3>
  95. <p>Mi correo electrónico es
  96. <a class="link" href="mailto:heckyel@hyperbola.info">heckyel@hyperbola.info</a>. Utiliza mi
  97. clave pública <abbr title="GNU Privacy Guard">GPG</abbr>
  98. (<a class="link" href="{$contacto.keygpg}">4DF2 1B6A 7C10 21B2 5C36 0914 F6EE 7BC5 9A31 5766</a>)
  99. para evitar que el mensaje pueda ser leído por otras personas.
  100. </p>
  101. </div>
  102. </div>
  103. </section>
  104. <div class="redes-sociales-libres">
  105. <div class="contenedor">
  106. <a class="gnusocial" href="{$sociales.gnusocial}" rel="noopener noreferrer" target="_blank"><i class="icon-gnusocial"></i></a>
  107. <a class="diaspora" href="{$sociales.diaspora}" rel="noopener noreferrer" target="_blank"><i class="icon-diaspora"></i></a>
  108. <a class="mediagoblin" href="{$sociales.mediagoblin}" rel="noopener noreferrer" target="_blank"><i class="icon-mediagoblin"></i></a>
  109. <a class="libregit" href="{$sociales.libregit}" rel="noopener noreferrer" target="_blank"><i class="icon-libregit"></i></a>
  110. </div>
  111. </div>
  112. <div class="copyleft">
  113. <p>Copyleft <span class="rotate">&copy;</span> 2017 - {$yesterday|date_format:"%Y"} - Heckyel
  114. <a rel="license noopener noreferrer" href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank">
  115. <abbr title="GNU Affero General Public License version 3">GNU AGPLv3+</abbr></a> | <a rel="noopener noreferrer" href="https://notabug.org/heckyel/porfolio" target="_blank">source code</a>
  116. </p>
  117. </div>
  118. </footer>
  119. </body>
  120. </html>