mirror of https://github.com/Rav4s/portfolio
5 changed files with 288 additions and 51 deletions
@ -0,0 +1,9 @@ |
|||||
|
.vscode/* |
||||
|
!.vscode/settings.json |
||||
|
!.vscode/tasks.json |
||||
|
!.vscode/launch.json |
||||
|
!.vscode/extensions.json |
||||
|
*.code-workspace |
||||
|
|
||||
|
# Local History for Visual Studio Code |
||||
|
.history/ |
||||
@ -0,0 +1,174 @@ |
|||||
|
* { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
html { |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
margin: 0; |
||||
|
font-family: 'Roboto', sans-serif; |
||||
|
height: 100%; |
||||
|
background-color: #040e1e; |
||||
|
} |
||||
|
|
||||
|
h1 { |
||||
|
all: initial; |
||||
|
} |
||||
|
|
||||
|
h1 { |
||||
|
font-family: 'Roboto', sans-serif; |
||||
|
color: white; |
||||
|
padding-right: 8px; |
||||
|
font-size: 23.5px; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
a:hover { |
||||
|
color: #FF8B00; |
||||
|
} |
||||
|
|
||||
|
.Navbar { |
||||
|
background-color: #005380; |
||||
|
display: flex; |
||||
|
padding: 16px; |
||||
|
font-family: 'Roboto', sans-serif; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.Navbar__Link { |
||||
|
padding-right: 8px; |
||||
|
font-size: 18.5px; |
||||
|
} |
||||
|
|
||||
|
.Navbar__Link-brand { |
||||
|
padding-right: 8px; |
||||
|
font-size: 18.5px; |
||||
|
} |
||||
|
|
||||
|
.Navbar__Link a, |
||||
|
h1 { |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.Navbar__Link a:link { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
.Navbar__Link a:visited { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
.Navbar__Link a:hover { |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
|
||||
|
.Navbar__Link a:active { |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
|
||||
|
.Navbar__Items { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.Navbar__Items--right { |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
|
||||
|
.Navbar__Link-toggle { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.banner { |
||||
|
width: 100%; |
||||
|
height: 500px; |
||||
|
padding: 10px; |
||||
|
} |
||||
|
|
||||
|
.column { |
||||
|
float: left; |
||||
|
width: 33.33%; |
||||
|
width: calc(100% / 3); |
||||
|
padding: 10px; |
||||
|
height: 500px; |
||||
|
padding-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.row:after { |
||||
|
content: ""; |
||||
|
display: table; |
||||
|
clear: both; |
||||
|
} |
||||
|
|
||||
|
.row { |
||||
|
margin-left: 0px; |
||||
|
margin-right: 0px; |
||||
|
height: auto; |
||||
|
padding-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.card { |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
border-radius: 2.5%; |
||||
|
background-color: #005380; |
||||
|
box-shadow: 2.5px 5px #FF8B00; |
||||
|
} |
||||
|
|
||||
|
.card:hover { |
||||
|
box-shadow: 5px 10px #FF8B00; |
||||
|
transition: box-shadow 0.25s ease-in-out; |
||||
|
-webkit-transition: box-shadow 0.25s ease-in-out; |
||||
|
-o-transition: box-shadow 0.25s ease-in-out; |
||||
|
-moz-transition: box-shadow 0.25s ease-in-out; |
||||
|
} |
||||
|
|
||||
|
.card-top-banner { |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.top-banner-text { |
||||
|
color: white; |
||||
|
text-align: center; |
||||
|
font-size: 3em; |
||||
|
padding: 0; |
||||
|
margin-bottom: 0.3em; |
||||
|
} |
||||
|
|
||||
|
.top-banner-text-smaller { |
||||
|
color: white; |
||||
|
text-align: center; |
||||
|
font-size: 1.5em; |
||||
|
padding: 0; |
||||
|
margin: 0 0; |
||||
|
} |
||||
|
|
||||
|
@media only screen and (max-width: 850px) { |
||||
|
.Navbar__Items, |
||||
|
.Navbar { |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
.Navbar__Items { |
||||
|
display: none; |
||||
|
} |
||||
|
.Navbar__Items--right { |
||||
|
margin-left: 0; |
||||
|
} |
||||
|
.Navbar__ToggleShow { |
||||
|
display: flex; |
||||
|
} |
||||
|
.Navbar__Link-toggle { |
||||
|
align-self: flex-end; |
||||
|
display: initial; |
||||
|
position: absolute; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.column { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
@ -1,59 +1,105 @@ |
|||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||
<html lang="en"> |
<html lang="en"> |
||||
|
|
||||
<head> |
<head> |
||||
<title>iFixit Repairability Dashboard</title> |
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
||||
<meta name="description" content="Find which devices are the most and least repairable, according to iFixit"> |
|
||||
<link href="static/bootstrap.min.css" rel="stylesheet" media="screen"> |
|
||||
<link href="static/styles.css" rel="stylesheet" media="screen"> |
|
||||
<link rel="manifest" href="static/site.webmanifest"> |
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png"> |
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png"> |
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png"> |
|
||||
|
|
||||
<script type="text/javascript"> |
|
||||
|
<title>Ravi Shah's Portfolio</title> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<meta name="description" content="Find Ravi Shah's software and hardware projects, qualifications, interests, and more!"> |
||||
|
<meta charset="UTF-8"> |
||||
|
<link rel="preconnect" href="https://fonts.gstatic.com"> |
||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet"> |
||||
|
<link href="css/styles.css" rel="stylesheet" media="screen"> |
||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
||||
|
<link rel="manifest" href="static/site.webmanifest"> |
||||
|
<link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png"> |
||||
|
<link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png"> |
||||
|
<link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png"> |
||||
|
|
||||
|
<!-- Matomo --> |
||||
|
<script type="text/javascript"> |
||||
var _paq = window._paq = window._paq || []; |
var _paq = window._paq = window._paq || []; |
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */ |
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */ |
||||
_paq.push(['trackPageView']); |
_paq.push(['trackPageView']); |
||||
_paq.push(['enableLinkTracking']); |
_paq.push(['enableLinkTracking']); |
||||
(function() { |
(function() { |
||||
var u="//analytics.yeetpc.com/matomo/"; |
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']); |
|
||||
_paq.push(['setSiteId', '2']); |
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; |
|
||||
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); |
|
||||
|
var u = "//analytics.yeetpc.com/matomo/"; |
||||
|
_paq.push(['setTrackerUrl', u + 'matomo.php']); |
||||
|
_paq.push(['setSiteId', '3']); |
||||
|
var d = document, |
||||
|
g = d.createElement('script'), |
||||
|
s = d.getElementsByTagName('script')[0]; |
||||
|
g.type = 'text/javascript'; |
||||
|
g.async = true; |
||||
|
g.src = u + 'matomo.js'; |
||||
|
s.parentNode.insertBefore(g, s); |
||||
})(); |
})(); |
||||
</script> |
|
||||
|
</script> |
||||
|
<!-- End Matomo Code --> |
||||
|
|
||||
</head> |
</head> |
||||
|
|
||||
<body> |
<body> |
||||
<div class="header"> |
|
||||
<a href="#" class="text">iFixit Repairability Dashboard</a> |
|
||||
</div> |
|
||||
<div class="row"> |
|
||||
<div class="column2" style="background-color:#040e1e; overflow: auto; scrollbar-width: thin; width: 100%;"> |
|
||||
<p style="text-align:center; font-size: 25px;">Welcome to the iFixit Repairability Dashboard! Here you can find the repairability scores of many devices that iFixit has analyzed. Click a score below to get started!</p> |
|
||||
<div class="centered"> |
|
||||
<div style="display:block; align-items:center; justify-content:center;"><a href="/one" class="button1 buttonall">1/10</a><a href="/two" class="button2 buttonall">2/10</a><a href="/three" class="button3 buttonall">3/10</a><a href="/four" class="button4 buttonall">4/10</a><a href="/five" class="button5 buttonall">5/10</a><a href="/six" class="button6 buttonall">6/10</a><a href="/seven" class="button7 buttonall">7/10</a><a href="/eight" class="button8 buttonall">8/10</a><a href="/nine" class="button9 buttonall">9/10</a><a href="/ten" class="button10 buttonall">10/10</a></div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="row"> |
|
||||
<div class="column2" style="background-color:#081c3d; overflow: auto; scrollbar-width: thin;"> |
|
||||
<h2 style="font-size: 25px;" class="centered">Ever wondered which devices are the hardest to repair? Find the laptops, tablets, and smartphones which have the worst iFixit Repairability Scores.</h2> |
|
||||
<div class="centered"> |
|
||||
<a href="/worst-offenders" class="buttonhardest buttonall">Worst Offenders</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="column2" style="background-color:#06152e; overflow: auto; scrollbar-width: thin;"> |
|
||||
<h2 style="font-size: 25px;" class="centered">Want to find a device which is absolute repair bliss? Find the laptops, tablets, and smartphones which have the best iFixit Repairability Scores.</h2> |
|
||||
<div class="centered"> |
|
||||
<a href="/most-repairable" class="buttonbest buttonall">Most Repairable Devices</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="header" style="padding: 25px 10px;"> |
|
||||
<p style="text-align:center;">Made with ❤️ by <a class="none" href="https://www.yeetpc.com/about.html" target="_blank" rel="noopener">Ravi Shah</a></p> |
|
||||
</div> |
|
||||
|
<!-- Top Navbar --> |
||||
|
<div class="Navbar"> |
||||
|
<div class="Navbar__Link Navbar__Link-brand"> |
||||
|
<h1><a href="#">Ravi Shah's Portfolio</a></h1> |
||||
|
</div> |
||||
|
<div class="Navbar__Link Navbar__Link-toggle"> |
||||
|
<i class="fa fa-bars"></i> |
||||
|
</div> |
||||
|
<nav class="Navbar__Items Navbar__Items--right"> |
||||
|
<div class="Navbar__Link"> |
||||
|
<a href="/projects.html">Projects</a> |
||||
|
</div> |
||||
|
<div class="Navbar__Link"> |
||||
|
<a href="/about.html">About</a> |
||||
|
</div> |
||||
|
<div class="Navbar__Link"> |
||||
|
<a href="https://www.yeetpc.com/blog">Blog</a> |
||||
|
</div> |
||||
|
<div class="Navbar__Link"> |
||||
|
<a href="mailto:ravi@yeetpc.com">Contact Me</a> |
||||
|
</div> |
||||
|
</nav> |
||||
|
</div> |
||||
|
<!-- End Top Navbar --> |
||||
|
|
||||
|
<!-- Begin Top Banner --> |
||||
|
<div class="banner"> |
||||
|
<div class="card-top-banner"> |
||||
|
<p class="top-banner-text">HI 👋 I'M RAVI SHAH!</p> |
||||
|
<p class="top-banner-text-smaller"> |
||||
|
I'm currently a freshman at |
||||
|
<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>, |
||||
|
<a href="https://www.yeetpc.com/blog/entry.php">my ThinkPad X220 Tablet build</a>, and |
||||
|
<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>, <a href="https://github.com/rav4s">GitHub</a>, |
||||
|
and on my <a href="https://www.youtube.com/channel/UC3T95a3-KMIcSLYbDhdKiTA/featured">YouTube channel</a>. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- End Top Banner --> |
||||
|
|
||||
|
<!-- Begin Responsive Layout --> |
||||
|
<div class="row"> |
||||
|
<div class="column"> |
||||
|
<div class="card"> |
||||
|
<p>Helo</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column"> |
||||
|
<div class="card"> |
||||
|
<p>Helo</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="column"> |
||||
|
<div class="card"> |
||||
|
<p>Helo</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- End Responsive Layout --> |
||||
|
|
||||
|
<script src="js/expandnavbar.js"></script> |
||||
</body> |
</body> |
||||
|
|
||||
</html> |
</html> |
||||
@ -0,0 +1,8 @@ |
|||||
|
function classToggle() { |
||||
|
const navs = document.querySelectorAll('.Navbar__Items') |
||||
|
|
||||
|
navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow')); |
||||
|
} |
||||
|
|
||||
|
document.querySelector('.Navbar__Link-toggle') |
||||
|
.addEventListener('click', classToggle); |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue