rav4s
/
portfolio
mirror of https://github.com/Rav4s/portfolio
1
1
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add layout and content

main
Ravi Shah 5 years ago
parent
83e62e3a94
commit
f670444d75
5 changed files with 288 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      .gitignore
  2. 174
      css/styles.css
  3. 94
      index.html
  4. 8
      js/expandnavbar.js
  5. 0
      static/site.webmanifest

9
.gitignore
View File

@ -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/

174
css/styles.css
View File

@ -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%;
}
}

94
index.html
View File

@ -1,16 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>iFixit Repairability Dashboard</title>
<title>Ravi Shah's Portfolio</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">
<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 || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
@ -19,41 +24,82 @@
(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);
_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>
<!-- End Matomo Code -->
</head>
<body>
<div class="header">
<a href="#" class="text">iFixit Repairability Dashboard</a>
<!-- Top Navbar -->
<div class="Navbar">
<div class="Navbar__Link Navbar__Link-brand">
<h1><a href="#">Ravi Shah's Portfolio</a></h1>
</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 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="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 class="column">
<div class="card">
<p>Helo</p>
</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 class="column">
<div class="card">
<p>Helo</p>
</div>
</div>
<div class="column">
<div class="card">
<p>Helo</p>
</div>
<div class="header" style="padding: 25px 10px;">
<p style="text-align:center;">Made with &#10084;&#65039; by <a class="none" href="https://www.yeetpc.com/about.html" target="_blank" rel="noopener">Ravi Shah</a></p>
</div>
</div>
<!-- End Responsive Layout -->
<script src="js/expandnavbar.js"></script>
</body>
</html>

8
js/expandnavbar.js
View File

@ -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);

0
styles.css → static/site.webmanifest
View File

Write Preview
Loading…
Cancel
Save