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.

243 lines
12 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Ravi Shah's Portfolio</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta name="description" content="Find Ravi Shah's software and hardware projects, qualifications, interests, and more!">
  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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  11. <link rel="manifest" href="static/site.webmanifest">
  12. <link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png">
  13. <link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png">
  14. <link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png">
  15. <!-- Begin Inlined Google Fonts -->
  16. <style>
  17. /* cyrillic-ext */
  18. @font-face {
  19. font-family: 'Roboto';
  20. font-style: normal;
  21. font-weight: 300;
  22. font-display: swap;
  23. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format('woff2');
  24. unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  25. }
  26. /* cyrillic */
  27. @font-face {
  28. font-family: 'Roboto';
  29. font-style: normal;
  30. font-weight: 300;
  31. font-display: swap;
  32. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format('woff2');
  33. unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  34. }
  35. /* greek-ext */
  36. @font-face {
  37. font-family: 'Roboto';
  38. font-style: normal;
  39. font-weight: 300;
  40. font-display: swap;
  41. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format('woff2');
  42. unicode-range: U+1F00-1FFF;
  43. }
  44. /* greek */
  45. @font-face {
  46. font-family: 'Roboto';
  47. font-style: normal;
  48. font-weight: 300;
  49. font-display: swap;
  50. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format('woff2');
  51. unicode-range: U+0370-03FF;
  52. }
  53. /* vietnamese */
  54. @font-face {
  55. font-family: 'Roboto';
  56. font-style: normal;
  57. font-weight: 300;
  58. font-display: swap;
  59. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format('woff2');
  60. 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;
  61. }
  62. /* latin-ext */
  63. @font-face {
  64. font-family: 'Roboto';
  65. font-style: normal;
  66. font-weight: 300;
  67. font-display: swap;
  68. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format('woff2');
  69. 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;
  70. }
  71. /* latin */
  72. @font-face {
  73. font-family: 'Roboto';
  74. font-style: normal;
  75. font-weight: 300;
  76. font-display: swap;
  77. src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');
  78. 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;
  79. }
  80. </style>
  81. <!-- End Inlined Google Fonts -->
  82. <!-- Matomo -->
  83. <script type="text/javascript">
  84. var _paq = window._paq = window._paq || [];
  85. /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  86. _paq.push(['trackPageView']);
  87. _paq.push(['enableLinkTracking']);
  88. (function() {
  89. var u = "//analytics.yeetpc.com/matomo/";
  90. _paq.push(['setTrackerUrl', u + 'matomo.php']);
  91. _paq.push(['setSiteId', '3']);
  92. var d = document,
  93. g = d.createElement('script'),
  94. s = d.getElementsByTagName('script')[0];
  95. g.type = 'text/javascript';
  96. g.async = true;
  97. g.src = u + 'matomo.js';
  98. s.parentNode.insertBefore(g, s);
  99. })();
  100. </script>
  101. <!-- End Matomo Code -->
  102. </head>
  103. <body>
  104. <div class="page-container">
  105. <div class="content-wrap">
  106. <!-- Top Navbar -->
  107. <div class="Navbar">
  108. <div class="Navbar__Link Navbar__Link-brand">
  109. <h1><a href="#">Ravi Shah's Portfolio</a></h1>
  110. </div>
  111. <div class="Navbar__Link Navbar__Link-toggle">
  112. <i class="fa fa-bars"></i>
  113. </div>
  114. <nav class="Navbar__Items Navbar__Items--right">
  115. <div class="Navbar__Link">
  116. <a href="/projects">Projects</a>
  117. </div>
  118. <div class="Navbar__Link">
  119. <a href="https://www.yeetpc.com/blog">Blog</a>
  120. </div>
  121. <div class="Navbar__Link">
  122. <a href="/gallery.html">Gallery</a>
  123. </div>
  124. <div class="Navbar__Link">
  125. <a href="mailto:ravi@yeetpc.com">Contact Me</a>
  126. </div>
  127. </nav>
  128. </div>
  129. <!-- End Top Navbar -->
  130. <!-- Begin Top Banner -->
  131. <div class="banner">
  132. <div class="card-top-banner">
  133. <p class="top-banner-text">HI 👋 I'M RAVI SHAH!</p>
  134. <p class="top-banner-text-smaller">
  135. I'm currently a freshman at
  136. <a href="https://westwood.roundrockisd.org/">Westwood High School</a>. Some of my projects include <a href="https://github.com/Rav4s/New-Pi-Garage-Door-Opener">a Raspberry Pi smart garage door controller</a>, <a href="https://www.yeetpc.com">a fully self-hosted website</a>,
  137. <a href="https://www.yeetpc.com/blog/entry.php">my ThinkPad X220 Tablet build</a>, and
  138. <a href="https://repairability.yeetpc.com">an iFixit repairability score dashboard</a>. I'm always looking for new projects to work on and contribute to. You can find me on <a href="https://www.reddit.com/user/rav4s">Reddit</a>,
  139. <a href="https://github.com/rav4s">GitHub</a>, and on my <a href="https://www.youtube.com/channel/UC3T95a3-KMIcSLYbDhdKiTA/featured">YouTube channel</a>.
  140. </p>
  141. <br />
  142. <p class="top-banner-text-medium">Popular Projects</p>
  143. </div>
  144. </div>
  145. <!-- End Top Banner -->
  146. <!-- Begin Responsive Layout -->
  147. <div class="row">
  148. <div class="column">
  149. <br />
  150. <div id="smartgaragedoor" class="card">
  151. <div class="card-header">
  152. Smart Garage Door Controller
  153. </div>
  154. <div class="card-image-box">
  155. <img src="static/img/projects/smart-garage-door-thumbnail.jpeg" alt="Smart Garage Door Opener Thumbnail" class="card-image" />
  156. </div>
  157. <div class="card-icon-container">
  158. <ul class="social-icons">
  159. <li>
  160. <a href="https://youtu.be/An7KQbmUnhs"><img src='static/img/common/YouTube.svg' alt="View the Smart Garage Door Build Video on YouTube" /></a>
  161. </li>
  162. <li>
  163. <a href="https://github.com/Rav4s/New-Pi-Garage-Door-Opener"><img src='static/img/common/Github.svg' alt="View the Smart Garage Door Github" /></a>
  164. </li>
  165. </ul>
  166. </div>
  167. </div>
  168. </div>
  169. <div class="column">
  170. <br />
  171. <div id="repairdashboard" class="card">
  172. <div class="card-header">
  173. Repairability Score Dashboard
  174. </div>
  175. <div class="card-image-box">
  176. <img src="static/img/projects/repairability-score-dashboard-thumbnail.png" alt="Repairability Score Dashboard Thumbnail" class="card-image" />
  177. </div>
  178. <div class="card-icon-container">
  179. <ul class="social-icons">
  180. <li>
  181. <a href="https://repairability.yeetpc.com"><img src='static/img/common/Internet.png' alt="View the live iFixit Repairability Score Dashboard" /></a>
  182. </li>
  183. <li>
  184. <a href="https://github.com/Rav4s/iFixit-Repairability-Dashboard"><img src='static/img/common/Github.svg' alt="View the Repairability Score Dashboard Github" /></a>
  185. </li>
  186. </ul>
  187. </div>
  188. </div>
  189. </div>
  190. <div class="column">
  191. <br />
  192. <div id="thinkpadx220" class="card">
  193. <div class="card-header">
  194. Thinkpad X220 Tablet Upgrades
  195. </div>
  196. <div class="card-image-box">
  197. <img src="static/img/projects/thinkpad-x220-tablet-upgrades-thumbnail.jpg" alt="Thinkpad X220 Tablet Upgrades Thumbnail" class="card-image" />
  198. </div>
  199. <div class="card-icon-container">
  200. <ul class="social-icons">
  201. <li>
  202. <a href="https://www.yeetpc.com/blog/entry.php"><img src='static/img/common/Internet.png' alt="View the Thinkpad X220 Tablet Upgrades Blog Post" /></a>
  203. </li>
  204. </ul>
  205. </div>
  206. </div>
  207. </div>
  208. </div>
  209. <!-- End Responsive Layout -->
  210. <!-- Begin Footer -->
  211. <div class="footer">
  212. <div class="footer-links">
  213. <a href="https://www.vecteezy.com/free-vector/social-media-icons">Icon Vectors by Vecteezy</a>
  214. <p>© 2021 Ravi Shah</p>
  215. </div>
  216. </div>
  217. <!-- End Footer -->
  218. </div>
  219. </div>
  220. <script src="js/redirects.js"></script>
  221. <script src="js/expandnavbar.js" defer></script>
  222. </body>
  223. </html>