index.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Welcome - Ivan Site</title>
  6. <!-- SEO stuff -->
  7. <meta name="title" content="Ivan Robles Website and Portfolio">
  8. <meta name="description" content="Website about me, Ivan Robles: Mexican, computer systems engineer, software development enthusiast, open source and freelancer.">
  9. <meta name="keywords" content="portfolio,ivan,robles, developer,freelance,software,engineer">
  10. <meta name="robots" content="index, follow">
  11. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  12. <meta name="language" content="English">
  13. <meta name="revisit-after" content="1 days">
  14. <meta name="author" content="Ivan Robles">
  15. <!-- functional and style section -->
  16. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  17. <link rel="icon" href="https://images2.imgbox.com/2f/04/1GBBBKff_o.png"/>
  18. <link rel="stylesheet" href="static/style.css">
  19. <script src="static/alpinejs3.10.3.min.js" defer></script>
  20. <script src="static/medium-zoom.1.0.8.min.js"></script>
  21. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
  22. </head>
  23. <body class="animate__animated animate__fadeIn">
  24. <header class="animate__animated animate__fadeInDown">
  25. <h1>&#127881; Welcome &#127881;</h1>
  26. <small>This space is my personal website and portfolio where I share things with the world</small>
  27. </header>
  28. <main>
  29. <br>
  30. <section id="contact" class="animate__animated animate__fadeInDown">
  31. <article id="contact_card" class="card">
  32. <img data-zoomable src="https://images2.imgbox.com/2f/04/1GBBBKff_o.png" alt="Hello!! I'm:" style="width:80%; border-radius:50%" loading="lazy">
  33. <h1>Ivan Robles</h1>
  34. <p>Linux Sysadmin &amp; Software Dev</p>
  35. <!-- matrix -->
  36. <a target="_blank" rel="noopener" rel="nofollow" href="https://matrix.to/#/@navitux:matrix.org">
  37. &#128488;&#65039; [matrix] chat</a>
  38. <br>
  39. <!-- email -->
  40. <a target="_blank" rel="noopener" rel="nofollow" href="mailto:navitux@disroot.org">
  41. &#128231; navitux@disroot.org</a>
  42. </article>
  43. </section>
  44. <br>
  45. <section id="blog" class="animate__animated animate__fadeInDown">
  46. <h3><a href="blog.html">Blog</a></h3>
  47. <iframe src="blog.html" width="580px" height="500px"></iframe>
  48. </section>
  49. <br>
  50. <section id="projects" class="animate__animated animate__fadeInDown">
  51. <h3>Projects:</h3>
  52. <ul>
  53. <li>
  54. <a target="_blank" rel="noopener" href="projects/taller-programacion-web/index.html">Front End web Programming Workshop</a>
  55. </li>
  56. <li>
  57. <a target="_blank" rel="noopener" href="https://notabug.org/robinslave/portfolio">This very website</a>
  58. </li>
  59. </ul>
  60. </section>
  61. <br>
  62. <section id="resume" class="animate__animated animate__fadeInDown">
  63. <details>
  64. <summary>
  65. <h3>My Resume</h3>
  66. </summary>
  67. <embed src="static/Ivan_Robles_CV_EN_nov-23.pdf" style="width:85%; height:600px; display: block; margin-left: auto; margin-right: auto;"/>
  68. </details>
  69. </section>
  70. <br>
  71. <section id="about" class="animate__animated animate__fadeInDown">
  72. <details>
  73. <summary>
  74. <h3>About me</h3>
  75. </summary>
  76. <ul>
  77. <li>I am a Protestant Christian &#10013;&#65039;</li>
  78. <li>I believe in the universal human rights &#128330;&#65039;</li>
  79. <li>Actively looking for a job &#128188;</li>
  80. <li>I &#10084;&#65039; Linux &#128039; &#128187;</li>
  81. <li>I &#10084;&#65039; open source software &#129489;&#8205;&#128187; &#129309;</li>
  82. <li>I &#10084;&#65039; open hardware &#129302; &#128223;</li>
  83. <li>I &#10084;&#65039; data science &amp; math &#128200; &#128104;&#8205;&#128300;</li>
  84. <li>I &#10084;&#65039; Fediverse &#128101; &#127760;</li>
  85. <li>I &#10084;&#65039; quantum computing &#9883;&#65039;</li>
  86. <li>I &#10084;&#65039; comics/mangas &#128165; &#128218;</li>
  87. <li>I &#10084;&#65039; wholesome memes &#128526; &#128076; (。◕‿‿◕。)</li>
  88. <li>I &#10084;&#65039; memes &#129397; &#128076; </li>
  89. <li>I &#10084;&#65039; animation films (ノ◕ヮ◕)ノ*:・゚✧</li>
  90. </ul>
  91. </details>
  92. </section>
  93. </main>
  94. <footer>
  95. <p>This page uses:
  96. <a target="_blank" rel="noopener" href="https://rilwis.github.io/bamboo/">Bamboo CSS</a>,
  97. <a target="_blank" rel="noopener" href="https://alpinejs.dev/">Alpinejs</a>,
  98. <a target="_blank" rel="noopener" href="https://medium-zoom.francoischalifour.com/">Medium Zoom</a>
  99. </p>
  100. <p>Ivan Robles <span x-text="new Date().getFullYear()"></span> copyleft</p>
  101. </footer>
  102. <script src="static/script.js"></script>
  103. </body>
  104. </html>