Code for my portfolio website
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.

223 lines
11 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Gallery</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta name="description" content="A gallery with high-quality images of Ravi Shah's various hardware and software projects">
  7. <meta charset="UTF-8">
  8. <link rel="preconnect" href="https://fonts.gstatic.com">
  9. <link href="css/styles.css" rel="stylesheet" media="screen">
  10. <link href="css/gallery.css" rel="stylesheet" media="screen">
  11. <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  12. <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></noscript>
  13. <link rel="manifest" href="static/site.webmanifest">
  14. <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
  17. <!-- Begin Inlined Google Fonts -->
  18. <style>
  19. /* cyrillic-ext */
  20. @font-face {
  21. font-family: 'Roboto';
  22. font-style: normal;
  23. font-weight: 300;
  24. font-display: swap;
  25. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format('woff2');
  26. unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  27. }
  28. /* cyrillic */
  29. @font-face {
  30. font-family: 'Roboto';
  31. font-style: normal;
  32. font-weight: 300;
  33. font-display: swap;
  34. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format('woff2');
  35. unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  36. }
  37. /* greek-ext */
  38. @font-face {
  39. font-family: 'Roboto';
  40. font-style: normal;
  41. font-weight: 300;
  42. font-display: swap;
  43. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format('woff2');
  44. unicode-range: U+1F00-1FFF;
  45. }
  46. /* greek */
  47. @font-face {
  48. font-family: 'Roboto';
  49. font-style: normal;
  50. font-weight: 300;
  51. font-display: swap;
  52. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format('woff2');
  53. unicode-range: U+0370-03FF;
  54. }
  55. /* vietnamese */
  56. @font-face {
  57. font-family: 'Roboto';
  58. font-style: normal;
  59. font-weight: 300;
  60. font-display: swap;
  61. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format('woff2');
  62. unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  63. }
  64. /* latin-ext */
  65. @font-face {
  66. font-family: 'Roboto';
  67. font-style: normal;
  68. font-weight: 300;
  69. font-display: swap;
  70. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format('woff2');
  71. unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  72. }
  73. /* latin */
  74. @font-face {
  75. font-family: 'Roboto';
  76. font-style: normal;
  77. font-weight: 300;
  78. font-display: swap;
  79. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');
  80. unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  81. }
  82. </style>
  83. <!-- End Inlined Google Fonts -->
  84. <!-- Matomo -->
  85. <script type="text/javascript">
  86. var _paq = window._paq = window._paq || [];
  87. /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  88. _paq.push(['trackPageView']);
  89. _paq.push(['enableLinkTracking']);
  90. (function() {
  91. var u = "//analytics.yeetpc.com/matomo/";
  92. _paq.push(['setTrackerUrl', u + 'matomo.php']);
  93. _paq.push(['setSiteId', '3']);
  94. var d = document,
  95. g = d.createElement('script'),
  96. s = d.getElementsByTagName('script')[0];
  97. g.type = 'text/javascript';
  98. g.async = true;
  99. g.src = u + 'matomo.js';
  100. s.parentNode.insertBefore(g, s);
  101. })();
  102. </script>
  103. <!-- End Matomo Code -->
  104. </head>
  105. <body>
  106. <div class="page-container">
  107. <div class="content-wrap">
  108. <!-- Top Navbar -->
  109. <div class="Navbar">
  110. <div class="Navbar__Link Navbar__Link-brand">
  111. <h1><a href="/">Ravi Shah's Portfolio</a></h1>
  112. </div>
  113. <div class="Navbar__Link Navbar__Link-toggle">
  114. <i class="fa fa-bars"></i>
  115. </div>
  116. <nav class="Navbar__Items Navbar__Items--right">
  117. <div class="Navbar__Link">
  118. <a href="/projects">Projects</a>
  119. </div>
  120. <div class="Navbar__Link">
  121. <a href="https://www.yeetpc.com/blog">Blog</a>
  122. </div>
  123. <div class="Navbar__Link">
  124. <a href="/gallery.html">Gallery</a>
  125. </div>
  126. <div class="Navbar__Link">
  127. <a href="mailto:ravi@yeetpc.com">Contact Me</a>
  128. </div>
  129. </nav>
  130. </div>
  131. <!-- End Top Navbar -->
  132. <!-- Begin Gallery -->
  133. <div class="gallery">
  134. <figure class="gallery-item gallery-item-1">
  135. <img src="static/img/gallery/low-res/thinkpad-x220-tablet.jpg" class="gallery-img " alt="Thinkpad X220 Tablet">
  136. </figure>
  137. <figure class="gallery-item gallery-item-2">
  138. <img src="static/img/gallery/low-res/power-mac-g4-opened.jpg" class="gallery-img " alt="Power Macintosh G4 MDD with Opened Side Door">
  139. </figure>
  140. <figure class="gallery-item gallery-item-3">
  141. <img src="static/img/gallery/low-res/garage-door-controller-mounted.JPG" class="gallery-img " alt="Raspberry Pi Garage Door Controller Mounted">
  142. </figure>
  143. <figure class="gallery-item gallery-item-4">
  144. <img src="static/img/gallery/low-res/garage-door-sensor.JPG" class="gallery-img " alt="Raspberry Pi Garage Door Sensor">
  145. </figure>
  146. <figure class="gallery-item gallery-item-5">
  147. <img src="static/img/gallery/low-res/garage-door-pwa.jpg" class="gallery-img " alt="Raspberry Pi Garage Door Progressive Web Application">
  148. </figure>
  149. <figure class="gallery-item gallery-item-6">
  150. <img src="static/img/gallery/low-res/repairability-score-dashboard-mobile-site.jpg" class="gallery-img " alt="iFixit Repairability Score Dashboard Mobile Website">
  151. </figure>
  152. <figure class="gallery-item gallery-item-7">
  153. <img src="static/img/gallery/low-res/imac-g5-back-cover-removed.jpg" class="gallery-img " alt="iMac G5 with Back Cover and Stand Removed for Thermal Paste Replacement">
  154. </figure>
  155. <figure class="gallery-item gallery-item-8">
  156. <img src="static/img/gallery/low-res/imac-g5-side-view.jpg" class="gallery-img " alt="iMac G5 Side View">
  157. </figure>
  158. <figure class="gallery-item gallery-item-9">
  159. <img src="static/img/gallery/low-res/thinkpad-x220-front.JPG" class="gallery-img " alt="Thinkpad X220 Tablet From View">
  160. </figure>
  161. <figure class="gallery-item gallery-item-10">
  162. <img src="static/img/gallery/low-res/hard-drive-failure.jpg" class="gallery-img " alt="Hard Drive Failure, Missing Operating System">
  163. </figure>
  164. <figure class="gallery-item gallery-item-11">
  165. <img src="static/img/gallery/low-res/network-wiring.jpg" class="gallery-img " alt="Wiring Cat 7 Network Cable over Doorway">
  166. </figure>
  167. <figure class="gallery-item gallery-item-12">
  168. <img src="static/img/gallery/low-res/power-mac-g4-mac-os-9.jpg" class="gallery-img " alt="Power Macintosh G4 MDD running Mac OS 9.2.2">
  169. </figure>
  170. <figure class="gallery-item gallery-item-13">
  171. <img src="static/img/gallery/low-res/thinkpad-x220-motherboard.jpg" class="gallery-img " alt="Thinkpad X220 Tablet Motherboard">
  172. </figure>
  173. <figure class="gallery-item gallery-item-14">
  174. <img src="static/img/gallery/low-res/grafana-dashboard-imac-g5.jpg" class="gallery-img " alt="iMac G5 Grafana Dashboard">
  175. </figure>
  176. <figure class="gallery-item gallery-item-15">
  177. <img src="static/img/gallery/low-res/LeopardInstall.jpg" class="gallery-img " alt="Mac OS X 10.5 Leopard Installation on iMac G5">
  178. </figure>
  179. <figure class="gallery-item gallery-item-16">
  180. <img src="static/img/gallery/low-res/thinkpad-t500-opened.jpg" class="gallery-img " alt="Thinkpad T500 with keyboard removed">
  181. </figure>
  182. <figure class="gallery-item gallery-item-17">
  183. <img src="static/img/gallery/low-res/thinkpad-family-top.jpg" class="gallery-img " alt="Thinkpad X220T, T440s, T580, and T500">
  184. </figure>
  185. <figure class="gallery-item gallery-item-18">
  186. <img src="static/img/gallery/low-res/alligator.jpg" class="gallery-img " alt="An alligator. What more is there to say?">
  187. </figure>
  188. </div>
  189. <!-- End Gallery -->
  190. <!-- Begin Footer -->
  191. <div class="footer ">
  192. <div class="footer-links ">
  193. <a href="https://www.vecteezy.com/free-vector/social-media-icons ">Icon Vectors by Vecteezy</a>
  194. <p>© 2021 Ravi Shah</p>
  195. </div>
  196. </div>
  197. <!-- End Footer -->
  198. </div>
  199. </div>
  200. <script src="js/expandnavbar.js " defer></script>
  201. </body>
  202. </html>