Portfolio website written in pure HTML/CSS https://dev.omkov.net/
web
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

145 lines
5.9KB

  1. <!--
  2. index.html
  3. Index HTML file for portfolio
  4. Copyright (C) 2019, Jakob Wakeling
  5. All rights reserved.
  6. -->
  7. <!DOCTYPE html>
  8. <html>
  9. <head>
  10. <meta charset="UTF-8"/>
  11. <title>Jake Wakeling</title>
  12. <meta name="author" content="Jake Wakeling"/>
  13. <meta name="description" content="Developer Portfolio"/>
  14. <meta name="keywords" content="developer, portfolio, C, C++, C#, Java"/>
  15. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  16. <meta name="theme-color" content="#121212"/>
  17. <meta property="og:description" content="Developer Portfolio"/>
  18. <meta property="og:image" content=""/>
  19. <meta property="og:title" content="Jake Wakeling"/>
  20. <meta property="og:type" content="website"/>
  21. <meta property="og:url" content="https://dev.omkov.net/"/>
  22. <meta name="twitter:card" content="summary"/>
  23. <meta name="twitter:description" content="Omkov Developer Portfolio"/>
  24. <meta name="twitter:image" content=""/>
  25. <meta name="twitter:title" content="OmkovDev"/>
  26. <meta name="twitter:url" content="https://dev.omkov.net/"/>
  27. <link rel="icon" href="favicon.png"/>
  28. <style>
  29. :root { font-size: 12pt; --background: #121212; --foreground: #FFFFFF; --foreground-1: #888888;
  30. --accent: #FF7E00; }
  31. html { background-color: var(--background); color: var(--foreground); }
  32. body { font-family: sans-serif; margin: 0; }
  33. header { display: flex; }
  34. header > #bar { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between;
  35. padding: 1rem 2rem; width: 100%; }
  36. header > #bar > h1 { font-size: 16pt; margin: 0; }
  37. header > #bar > nav { display: flex; flex-direction: row; justify-content: space-between; }
  38. header > #bar > nav > a { color: inherit; font-size: 16pt; font-weight: bold; text-decoration: none; }
  39. header > #bar > nav > .spacer { padding: 0 0.4rem; }
  40. main { display: flex; flex-direction: column; margin: 0 auto; max-width: 50rem; width: 100%; }
  41. main > section { display: flex; flex-direction: column; padding: 1rem 2rem; }
  42. main > * > h1 { margin: 0.5rem 0; }
  43. main > #splash { align-items: center; }
  44. main > #splash > img { margin: 1rem 0; max-width: 12em; }
  45. main > #splash > h1 { font-size: 2em; }
  46. main > #splash > h2 { color: var(--foreground-1); font-weight: normal; margin: 0.5rem 0; }
  47. main > #about > p { font-size: 12pt; line-height: 1.5; margin: 0; text-align: justify }
  48. main > #projects > .post { border-color: var(--accent); border-style: solid; border-width: 2px;
  49. color: inherit; margin: 0.5rem 0; padding: 1rem; text-decoration: none; }
  50. main > #projects > .post > * { margin: 0; }
  51. main > #projects > .post > h3 { font-variant: small-caps; }
  52. main > #projects > .post > p { font-size: 10pt; }
  53. </style>
  54. </head>
  55. <body>
  56. <header>
  57. <section id="bar">
  58. <h1>Developer Portfolio</h1>
  59. <nav>
  60. <a href="https://git.omkov.net/Jamozed">Git</a>
  61. <div class="spacer"></div>
  62. <a href="mailto:[email protected]">Contact</a>
  63. </nav>
  64. </section>
  65. </header>
  66. <main>
  67. <section id="splash">
  68. <img src="omkov-red.svg">
  69. <h1>Jake Wakeling</h1>
  70. <h2>Software Developer</h2>
  71. </section>
  72. <section id="about">
  73. <h1>About Me</h1>
  74. <p>
  75. Primarily a "mid-level" backend developer, I have a particular enthusiasm for writing minimal, clean
  76. and performant code. I have experience with C, C++, C# and Java, as well as pfSense. From the
  77. beginning of 2019 I have been studying computer science at Auckland University of Technology. Some
  78. of my primary software interests are programming languages and operating systems.
  79. </p><br>
  80. <p>
  81. It should be noted that most of my projects were created either to solve a particular problem for
  82. myself, or to experiment with something I found to be interesting. This means that they are often
  83. poorly or not at all documented, and frequently have major shifts in trajectory mid development.
  84. </p>
  85. </section>
  86. <section id="projects">
  87. <h1>Notable Projects</h1>
  88. <a class="post" href="https://git.omkov.net/Jamozed/optget">
  89. <h3>optget</h3>
  90. <p>A command-line argument parser, written in C.</p>
  91. </a>
  92. <a class="post" href="https://git.omkov.net/Jamozed/OPSH">
  93. <h3>OSH</h3>
  94. <p>A minimal command line shell, written in C.</p>
  95. </a>
  96. <a class="post" href="https://git.omkov.net/Jamozed/coreutils">
  97. <h3>coreutils</h3>
  98. <p>An implementation of core software utilities, written in C.</p>
  99. </a>
  100. <a class="post" href="https://git.omkov.net/Jamozed/OAR">
  101. <h3>OAR</h3>
  102. <p>An experimental archive file format, written in C.</p><br>
  103. <p>
  104. This constantly changes and frequently breaks as I change my mind on its design, and is very
  105. much an experiment that should not be used for anything important.
  106. </p>
  107. </a>
  108. <a class="post" href="https://git.omkov.net/Jamozed/C8E">
  109. <h3>C8E</h3>
  110. <p>A threaded Chip-8 emulator, written in C++ using SDL2.</p><br>
  111. <p>
  112. Note: This worked on Windows, but doesn't work on my Linux machine, instead only ever rendering
  113. whatever is behind the window when opened.
  114. </p>
  115. </a>
  116. <a class="post" href="https://git.omkov.net/Jamozed/Chrono">
  117. <h3>Chrono</h3>
  118. <p>A minimal full-screen clock for Android, written in Kotlin.</p>
  119. <p>This is my bedside clock, that is all.</p>
  120. </a>
  121. <a class="post" href="https://git.omkov.net/Jamozed/BigCork">
  122. <h3>BigCork</h3>
  123. <p>A low-level hotkey daemon for Windows, written in C++.</p><br>
  124. <p>
  125. BigCork is a good example of a program I hastily created to solve a problem in a way very
  126. specific to my personal use. It is very limited in functionality, doing only exactly what I want
  127. it to do with no flexibility, that is, providing basic system-wide shortcuts on Windows.
  128. </p>
  129. </a>
  130. <a class="post" href="https://git.omkov.net/Jamozed/portfolio">
  131. <h3>portfolio</h3>
  132. <p>This website, a single HTML file with inline CSS, incredible!</p>
  133. </a>
  134. </section>
  135. </main>
  136. </body>
  137. </html>