aarya.bhatia/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

began using sakura css for styling

Browse Source
This commit is contained in:
Aarya Bhatia 2024-03-30 17:23:02 -05:00
parent a8efe990db
commit 6b459e8a70
3 changed files with 418 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
index.html
View File

@ -4,31 +4,44 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- bootstrap css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<!-- bootstrap icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<!-- fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
<!-- css -->
<link rel="stylesheet" type="text/css" href="static/index.css">
<!-- favicons --> <!-- favicons -->
<link type="image/png" sizes="16x16" rel="icon" href="static/favicon/icons8-console-material-sharp-16.png"> <link type="image/png" sizes="16x16" rel="icon" href="static/favicon/icons8-console-material-sharp-16.png">
<link type="image/png" sizes="32x32" rel="icon" href="static/favicon/icons8-console-material-sharp-32.png"> <link type="image/png" sizes="32x32" rel="icon" href="static/favicon/icons8-console-material-sharp-32.png">
<link type="image/png" sizes="96x96" rel="icon" href="static/favicon/icons8-console-material-sharp-96.png"> <link type="image/png" sizes="96x96" rel="icon" href="static/favicon/icons8-console-material-sharp-96.png">
<!-- css -->
<link rel="stylesheet" type="text/css" href="static/normalize.css">
<!-- simplecss -->
<!-- <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css"> -->
<!-- sakura css -->
<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">
<!-- custom css -->
<link rel="stylesheet" type="text/css" href="static/index.css">
<!-- fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap">
<title>Aarya Bhatia</title> <title>Aarya Bhatia</title>
</head> </head>
<body> <body>
<div class="container"> <header>
<h1 class="p-2">Aarya Bhatia</h1> <h1>Aarya Bhatia</h1>
</header>
<hr /> <hr />
<!-- <img src="static/photo.png" class="img-fluid" height="100" alt="" /> --> <main>
<section>
<h4 class="my-2">Introduction</h4> <h2>Introduction</h2>
<p>I am a student pursuing a Bachelor's degree in Applied <p>I am a student pursuing a Bachelor's degree in Applied
Mathematics and Computer Science from the University of Mathematics and Computer Science from the University of
@ -36,7 +49,7 @@
study in the US in 2020. I will graduate in May to start study in the US in 2020. I will graduate in May to start
working full-time as a software developer.</p> working full-time as a software developer.</p>
<h4 class="my-2">Skills</h4> <h2>Skills</h2>
<p>I am experienced in full-stack web development and systems <p>I am experienced in full-stack web development and systems
programming. I am proficient in Linux and C, C++, Python, Go, programming. I am proficient in Linux and C, C++, Python, Go,
@ -45,57 +58,46 @@
most efficient version of myself. My workflow uses neovim, tmux most efficient version of myself. My workflow uses neovim, tmux
and i3.</p> and i3.</p>
<h4 class="my-2">Work Experience</h4> <h2>Work Experience</h2>
<p>Most recently, I worked as a SDE intern at Amazon, where I <p>Most recently, I worked as a SDE intern at Amazon, where I
developed shipped several website improvments in React.js. developed shipped several website improvments in React.js.
Presently, I am a course assistant at my university for CS340, Presently, I am a course assistant at my university for CS340,
where we teach about computer systems and C programming.</p> where we teach about computer systems and C programming.</p>
<h4 class="my-2">Hobbies</h4> <h2>Hobbies</h2>
<p>I am a trained musician with my primary instrument being the <p>I am a trained musician with my primary instrument being the
electric guitar. I have been playing guitar for over a decade. For electric guitar. I have been playing guitar for over a decade. For
fun, I enjoy playing sports like badminton and hiking.</p> fun, I enjoy playing sports like badminton and hiking.</p>
<!-- <p><a class="p-2" href="https://raw.githubusercontent.com/aarya-bhatia/resume/main/resume.pdf">Resume</a></p> --> </section>
<h4 class="my-2">Contact Me</h2> <section>
<h2>Contact Me</h2>
<form action="mailto:aaryab.alertservice@gmail.com" method="post" enctype="text/plain"> <form action="mailto:aaryab.alertservice@gmail.com" method="post" enctype="text/plain">
<div class="form-group mb-4">
<div class="form-group">
<label for="name">Name</label> <label for="name">Name</label>
<input required type="text" class="text-white bg-dark form-control" name="name" id="name" placeholder="Name" /> <input required type="text" name="name" id="name" placeholder="Name" />
</div> <br/>
</div>
<div class="form-group mb-4">
<div class="form-group">
<label for="email">Email</label> <label for="email">Email</label>
<input required type="email" class="text-white bg-dark form-control" name="email" id="email" placeholder="Email" /> <input required type="email" name="email" id="email" placeholder="Email" />
</div> <br/>
</div>
<div class="form-group mb-4">
<div class="form-group">
<label for="message">Message</label> <label for="message">Message</label>
<textarea required class="text-white bg-dark form-control" name="message" id="message"></textarea> <textarea required name="message" id="message"></textarea>
</div> <br/>
</div> <button type="submit">Send</button>
<button type="submit" class="btn btn-primary">Send</button>
</form> </form>
<div id="social" class="mb-4 d-flex justify-content-center"> </section>
<a class="p-2" href="mailto:aarya.bhatia1678@gmail.com"><i title="email" class="bi bi-envelope"></i></a> </main>
<a class="p-2" href="https://www.github.com/aarya-bhatia/"><i title="github" class="bi bi-github"></i></a>
<a class="p-2" href="https://www.linkedin.com/in/aarya-bhatia/"><i title="linkedin" class="bi bi-linkedin"></i></a>
<a class="p-2" href="https://www.instagram.com/aarya.bhatia/"><i title="instagram" class="bi bi-instagram"></i></a>
</div>
</div> <footer>
<a href="mailto:aarya.bhatia1678@gmail.com"><i title="email"></i></a>
<!-- bootstrap js --> <a href="https://www.github.com/aarya-bhatia/"><i title="github"></i></a>
<!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> --> <a href="https://www.linkedin.com/in/aarya-bhatia/"><i title="linkedin"></i></a>
<!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> --> <a href="https://www.instagram.com/aarya.bhatia/"><i title="instagram"></i></a>
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> --> </footer>
</body> </body>
</html> </html>

45
static/index.css
View File

@ -1,44 +1,9 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
:root {
--color-pale-blue-lily: #cfecec;
--color-red-gold: #eb5406;
--color-night: #0c090a;
--color-dark-slate: #2B3856;
--color-bright-teal: #01F9C6;
}
body { body {
background-color: var(--color-night); font-family: "Noto Sans", sans-serif;
color: var(--color-pale-blue-lily);
font-family: 'Source Code Pro', monospace;
} }
h1,h2,h3,h4,h5,h6 { h1,h2,h3,h4,h5,h6{
font-family: 'Open Sans', sans-serif; font-family: "Roboto", sans-serif;
color: var(--color-red-gold); font-weight: 300;
} font-style: normal;
h1 {
color: var(--color-pale-blue-lily);
font-size: 3rem;
}
h4 {
letter-spacing: 0.05em;
color: var(--color-red-gold);
}
a {
color: var(--color-bright-teal);
}
#social a {
font-size: 1.5rem;
text-decoration: none;
color: gray;
}
#social a:hover {
color: var(--color-bright-teal);
} }

349
static/normalize.css vendored Normal file
View File

@ -0,0 +1,349 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}