jimlab/jimsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Edited lists & about

Browse Source
This commit is contained in:
Jim Shepich III 2022-02-03 02:46:26 -05:00
parent 32e2c75475
commit 02e92ff068
9 changed files with 113 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
data/lists.json
View File

@ -7,6 +7,7 @@
"quotes":{
"title":"My Favorite Quotes",
"type":"quotes",
"inline":true,
"description":"This list contains quotes that I live by, quotes that have shaped my fundamental understanding of things, and quotes that I otherwise just like.",
"list":[
{
@ -152,6 +153,21 @@
{
"quote":"If you want something done right, do it yourself.",
"quotee":"Grandma Mary Kay Shepich"
},
{
"quote":"Now, look, we're gonna be dealing with some real serious stuff today. You might have heard of it. It's called math! And without it, none of us would even exist, so let's jump right in.",
"quotee":"Mr. Goldenfold",
"source":"Rick & Morty"
},
{
"quote":"Life was not gentle to him,\n And the elements so mixed in him\nThat he made warfare on life\nIn the which he was slain.",
"quotee":"Edgar Lee Masters",
"source":"Spoon River Anthology (Cassius Hueffer)"
},
{
"quote":"You don't tug on superman's cape, you don't spit into the wind, you don't pull the mask off that old lone ranger, and you don't mess around with Jim.",
"quotee":"Jim Croce",
"source":"You Don't Mess Around with Jim"
}
@ -214,11 +230,10 @@
]
},
"albums":{
"hidden":true,
"type":"albums",
"inline":true,
"title":"My Favorite Albums",
"description":"Albums I listen to in the car, albums I listen to when I'm going to sleep, albums I listen to while I work, and more.",
"description":"Albums I listen to in the car, albums I listen to when I'm going to sleep, albums I listen to while I work, and more. Since, I was a kid, I've had an unhealthy relationship with collecting things (bordering on hoarding), so I won't allow myself to get into collecting vinyls, but think of this as my digital \"vinyl\" collection. I've noticed that an unusally large fraction of these albums were released in 1977 and/or have covers that are greyscale or depict space ships.",
"list":[
{
"title":"Boston",
@ -251,7 +266,7 @@
{
"title":"Moenie and Kitchi",
"artist":"Gregory and the Hawk",
"year":"2017",
"year":"2008",
"link":"https://youtu.be/EMZOtHIL7QM",
"cover":"https://f4.bcbits.com/img/0011833953_10.jpg"
},
@ -387,6 +402,13 @@
"year":"2010",
"link":"https://www.youtube.com/watch?v=SlOQPOR8z7g&list=PL7MiJHw2jDfFJOh3NoL6x_2EtYExminHg",
"cover":"https://m.media-amazon.com/images/I/91nhQdHvTrL._SL1500_.jpg"
},
{
"title":"You Don't Mess Around with Jim",
"artist":"Jim Croce",
"year":"1972",
"link":"https://youtu.be/38B81cpwjNA",
"cover":"https://m.media-amazon.com/images/I/71ld2tNpCEL._SL1425_.jpg"
}
]
},

1
index.php
View File

@ -4,7 +4,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<script src="scripts/vendor/jquery-3.6.0.min.js"></script>
<script src="scripts/vendor/loadfile.js"></script>
<script src="https://kit.fontawesome.com/09beb7ae4a.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="styles/reset.css">
<link rel="stylesheet" type="text/css" href="styles/common.css">

43
pages/about.html
View File

@ -1,5 +1,46 @@
<article>
<h1>About</h1>
<hr />
real facts
<p>My story begins on 18th of February, 1999. Shortly after I was born, my <span title="grandmother">Nani</span> gave me an indigo, koala-print blanket, which has been my loyal companion ever since. My mother describes the day I came home from the hospital as a "snowglobe day."</p>
<p>I am told that I had learned to speak by the time I was around one year old. One of my earliest memories is of being at my grandparents' house and telling some family members (I think my mom's cousins) that I wanted to be 2 years old forever. Life was good back then.</p>
<p>Not too long after it was released in the US, my uncle gave me a PlayStation 2. Over the many hours I spent rapt in titles like Kingdom Hearts, Jak & Daxter, and Dragon Quest VIII, I learned a plethora of new words and ideas, and I developed a lasting love of fantasy and playing games. By enabling me to explore these fantasy worlds, the PS2 gave me a kind of freedom that I could never have in the real world as a child only a few years old.</p>
<p>Less than a month before I turned 3, my brother and forever Player 2, Sam, was born. And 22 months later, my youngest brother Nick was born. I don't remember Sam's day of birth, but Nicky's was a traumatic event for me. I had a fever that night, and my Nani, as well as my mom's cousins Preeti and Supriya chased me around my house, pinned me to the floor, and force-fed me grape-flavored Tylenol.</p>
<p>When I was 3 years old, I started school at Hidden Treasures Preschool. The community was very loving; in fact, my K3 teacher Mrs. Wheeler became my babysitter when I was 5. But, I always felt like a bit of an outsider among my peer group because my parents were not churchgoers. None of my classmates knew anything about the books I read or the games I played. I often wondered what a life without fantasy had to offer. Twenty-some years later, I still can't fathom how someone could be feel fulfilled living exclusively in the world of reality.</p>
<p>When I was 5 years old, my dad gave me a Nintendo DS with Super Mario 64 DS and Rayman DS. The DS allowed me to carry those other world around in my pocket. In 2nd grade, I got Pokemon Diamond at the recommendation of my friend Michael. (It was at his recommendation too that I picked Turtwig as my starter). I became obsessed to the point that my dream career was Pokemon professor. It was through Pokemon that I found some camaraderie in elementary school.</p>
<p>I went to elementary at Calvary Baptist Academy, which was in the same building as Hidden Treasures. Memorizing Bible verses every week sharpened my memory. I attribute my early exposure to theology to my becoming something of a little philosopher. I pride myself on having independently formulated <a href="https://en.wikipedia.org/wiki/Pascal%27s_wager">Pascal's Wager</a> when I was confronted with religious doubt. However, being raised Christian was not without its evils. I grew up believing that nonbelievers would burn in hell for eternity; it's such an important tenet of Christianity that it's the <b>First</b> Commandment. My mom's half of the family is Hindu, so I felt existential dread for my family members, and I believed that it was my responsibility to convert them. When I would stay at my <span title="Grandma and Grandpa">Nani and Nana</span>'s house, I often lay awake at night, and these thoughts plagued me to tears.</p>
<p>After 5th grade, I decided to go to Saginaw Arts & Sciences Academy (SASA), where I stayed from 6th grade through high school graduation. SASA was a magnet school, where students specialized in one of a selection of "concentrations." I wanted to join the theater concentration, but my parents made me join Math/Science, which ended up being right for me.</p>
<p>Mr. Barnes' 7th grade physics class sparked my love of science. On the first day in class, he told us that he was going to help teach us knowledge that might seem like too much to fit in our brains by showing us a demo in which he made a piece of styrofoam with the word "KNOWLEDGE" written on it in black marker disappear into a mug. After asking my dad how it worked, I promptly made an incendiary gel by dissolving some styrofoam in gasoline. And when we learned about atoms, everything just seemed to fall into place. I joined the science quiz bowl team, and though I could barely compete when I started out, after having my family members read hundreds of practice problems for me, I eventually got the hang of it.</p>
<p>During the summer before I started 8th grade, I spent a week with my mom's cousin Lalit and his wife Anshul. Anshul worked at Google Irvine, and she took me in to the work place. It was a mind-blowing experience. I didn't understand why programmers got to have ping-pong tables and Nerf gun fights at work, but I knew I wanted it. She gave me a few excercises to learn HTML, and that was my first foray into computer science. Once I had learned the basics of HTML, I started learning JavaScript on CodeCademy. Obviously (if you're reading this on my website), you can tell that I stuck with it. </p>
<p> One morning during quiz bowl practice in 8th grade, Mr. Barnes had us take a written test. A while later, he said that the top three scorers on the team would be selected to compete in something called the You Be the Chemist challenge. He read off the three names, and they belonged to the best quiz bowlers on the team (at the time), so I was a little bummed out. Then, he said that he misspoke, and I was actually the top scorer. I was ecstatic! I was never any good at sports as a kid, so it was the first time I really felt victorious. I participated in the competition and went on to get 6th place in the whole state of Michigan! That is more or less how I got into chemistry.</p>
<p>When I had started at SASA, I had felt like an outsider again. I was new to public school, and most of my classmates had gone to elementary school together. Starting out, my understanding of science was stunted compared to my classmates, and I often felt stupid. Middle school was a rough time for me, but I think it is for most people. I tried so despeately to fit in. It took me a long time to realize that if I wanted to find a place for myself, I would have to carve it out. I learned that if I just be myself forcefully enough, then everyone else will come around. I think the disgust I feel towards conformity is largely a product of my time in middle school.</p>
<p>After I started getting ahead in classes in 7th grade and then with my success in the You Be the Chemist Challenge in 8th grade, I had gained some self confidence and made some friends. I had gotten into Magic: the Gathering because my uncle had bequeathed me his old cards from the Mirage and Ice Age blocks, and the guy at the comic book store offered me only $2 for the whole collection. I discovered that my biology teacher, Mr. Miller, had an infamous Phage the Untouchable/Endless Whispers deck, so I learned how to play to try to beat him. I really liked Magic, so I introduced some of my friends to it and now, I owe some of my best friendships to Magic. Very few are the nights that are better than those nights I spent playing Magic and drinking root beer with my soon-to-be best friend Josh on the 8th grade Washington DC trip.</p>
<p>In 8th grade, it seemed like a lot of the smartest students were planning on leaving SASA for other high schools so they would have less competition for class rankings. For a while, I thought I was going to leave too; going to school 10 minutes from home instead of 50 was certainly an enticing offer. But, I ultimately decided to stay at SASA. In the end, I decided to stay because of my band teacher, Mr. Corrigan. There was just something about the way he talked about the students who stuck around, who were loyal to the SASA family and clung to their convictions until the very end, that convinced me not to leave.</p>
<p>In 9th grade, Magic spread through my circles like wildfire; it seemed like everybody was sacrificing their land and creatures were taking damage like nobody's business. Most of my SASA classmates who I'm still close with today (Josh, Houston, Max, Shawn, Philip) were a part of the MTG madness; they were discarding cards as an alternative cost on the daily. Some of our Cardboard Crack addictions were worse than others', but it the end of the day, it was a force that united all of us. I became friends with my other soon-to-be bestie, Houston, over a game of Magic in the cafeteria, one auspicious morning before school started.</p>
<p>Also around the time I started high school, I joined the Chemistry Club. The chemistry teacher, Dr. Allan, also lived in Midland, so he gave me rides home on Chem Club Fridays. We always had good chats on the rides, and over the years, he was not just my teacher, but my mentor, my role model, and my friend.</p>
<p>In the winter of my freshman year, SASA's FIRST Robotics Competition (FRC) team, 5193 Pantheon, was founded, and I joined, mostly because my parents said it would look good for college applications. I joined the programming division, since I had gotten pretty familiar with JavaScript after a few months of making it do my math homework. Very quickly, I was abandoned by all of the other people interested in programming, and I was the only programmer on a rookie team. To make matters worse, the "default" language was LabVIEW, which was unlike any programming I had ever seen before. Even so, I rose to the challenge, and after 6 weeks, we had a fully-operational robot. We even made it to the state competition! My mom credits this experience as the critical point for my autodidacticism, and I tend to agree.</p>
<p>The next summer, I did the Michigan Math and Science Scholars (MMSS) program at University of Michigan and the Engineering Scholars Program (ESP) at Michigan Tech. At MMSS, I learned about cryptography, which was a lot of fun, but I spent a lot of that camp sick. At ESP, I got to do a saponification reaction to make soap, and I got to mess around with a game that was coded in JavaScript. It was the code for that game (bullet10.js) that served as my template to learn how to integrate HTML and JavaScript through the canvas and the DOM tree. That was the springboard that launched me into creating my own Chromebook apps using Chrome Dev Editor, which was a big hobby of mine all throughout high school.</p>
<p>My introduction to Japanese Jujutsu was in 10th grade. A friend of mine, Rikard, asked me if I would be interested in dropping in on one of his classes because I knew that I had done some Tae Kwon Do and Brazilian Jiu-Jitsu at Angel's when I was a kid. I showed up, and the class was taught by my pre-calculus teacher, Mr. Tack, who also happened to be a master of Hakko Denshin Ryu Jujutsu. I was interested in what I saw, so I decided to join the Daiko Shibu Dojo, which was in the weights room across from Mr. Feldman's classroom. I quickly grew to love jujutsu. It was the first physical activity I really enjoyed, and it helped me to feel comfortable in my body. I trained with a girl named Tehya, who was unnaturally flexible, and she would always give the most demeaning pity-taps. Through great effort, I trained myself to overcome the pain because I didn't want to look like a wimp compared to Tehya. I think through constantly pushing past my limits, I actually developed good flexibility in my wrists too. Fake it 'til you make it, right?</p>
<p>Around that time, I started teaching myself Japanese through <a href="https://freejapaneselessons.com/register/">freejapaneselessons.com</a> "Why?" you might ask. Well for one, I had a tough time with Spanish in freshman year and need a language just in case for college applications. Rikard, my jujutsu senpai, was a linguistics buff and he had gotten me interested in learning a new language. And Japanese seemed to be aligned with my interests, since I was doing a Japanese martial art and I was into anime. Plus, since JavaScript and jujutsu had worked out so well for me, I figured that adding another "J" hobby couldn't hurt (and I was sooooo right).</p>
<h2>TO BE CONTINUED...</h2>
</article>

2
pages/home.html
View File

@ -1,7 +1,7 @@
<article>
<h1>Welcome!</h1>
<hr />
Welcome to my website! My name Jim <span title="'&#643;&#603;p&#618;k">Shepich</span> (@epicshepich). I'm currently a Master's student at Johns Hopkins University studying Data Science and a Master Diviner at Ravenwood School of Magical Arts studying Storm Magic. I'm an avid hobbyist, and some of my interests include: math and science, computer programming, tabletop and video games, martial arts (especially jujutsu), cartoons/anime, reading (mostly sci-fi and fantasy), music, and DIY. I created this website to share some of the projects I'm working on and some of the things I've learned.<br />
<p>Welcome to my website! My name Jim <span title="'&#643;&#603;p&#618;k">Shepich</span> (@epicshepich). I'm currently a Master's student at Johns Hopkins University studying Data Science and a Master Diviner at Ravenwood School of Magical Arts studying Storm Magic. I'm an avid hobbyist, and some of my interests include: math and science, computer programming, tabletop and video games, martial arts (especially jujutsu), cartoons/anime, reading (mostly sci-fi and fantasy), music, and DIY. I created this website to share some of the projects I'm working on and some of the things I've learned.</p>
<h2>Some notable projects I'm working on:</h2>
<ul>
<li>This website</li>

10
scripts/lists.js
View File

@ -1,5 +1,5 @@
var lists = JSON.parse(loadFile("data/lists.json"));
//Load list data from lists.json file using vendor loadfile.js.
//Variale `list` is imported from JSON with query_handler.php.
//var lists = JSON.parse(document.getElementById("lists-json").innerText);
var list_id = $("#query-list")[0].innerText;
//Get list id from <var> tag created in query-handler.php.
var list = null;
@ -35,7 +35,7 @@ if(list.hasOwnProperty("ordered") && list.ordered){
//By default, lists are unordered.
}
$("#lists")[0].innerHTML += "<br /><a id='list-return-link' href='index.php?page=lists&list=master'>Return to Master List &#11148;</a>";
$("#lists")[0].innerHTML += "<br /><a id='list-return-link' href='index.php?page=lists&list=master'>Return to Master List &#8617;</a>";
//Add a return link to the bottom of the article.
if(!list.hasOwnProperty("type")){
@ -75,7 +75,7 @@ switch(list["type"]){
item += `<b>${quote.title}</b><br />`;
//Add a title if the quote has one (e.g. "The Litany Against Fear").
}
item += `&ldquo;${quote.quote}&rdquo;<br>`;
item += `&ldquo;${quote.quote.replaceAll("\n","<br />")}&rdquo;<br>`;
//Add the text of the quote.
if(quote.hasOwnProperty("card") && !quote.hasOwnProperty("quotee")){
quote.quotee="";
@ -119,6 +119,8 @@ switch(list["type"]){
}
break;
case "albums":
document.getElementById("lists").style.textAlign="center";
//Center the rows of album covers on the page.
for(album of list.list){
var tooltip = `${album.title} &mdash; ${album.artist} (${album.year})`;
//Display album data when hovering over cover art.

14
scripts/query_handler.php
View File

@ -1,9 +1,23 @@
<?php
//__DIR__ points to scripts folder.
$pages = json_decode(file_get_contents(__DIR__ ."/../data/pages.json"));
//Load dictionary of site pages from pages.json file.
$query_page = (isset($_REQUEST['page']) && !empty($_REQUEST['page'])) ? $_GET['page'] : "home";
//Get value of "page" query key; default is "home".
$page = (isset($pages->$query_page)) ? $pages->$query_page : $pages->{404};
//If the query value ($query_page) is not in the dictionary ($pages), then load the 404 page instead.
echo "<var id='query-page'>".$query_page."</var>";
//Store the page id in a var tag in case we need to access it with JavaScript.
$list = (isset($_REQUEST['list']) && !empty($_REQUEST['list'])) ? $_GET['list'] : "master";
//Get the value of "list" from the query key; default is "master" (the master list).
echo "<var id='query-list'>".$list."</var>";
//Store the list id in a var tag so that we can easily figure out what list to generate with list.js.
if($query_page=="lists"){
$lists_json = json_decode(file_get_contents(__DIR__ ."/../data/lists.json"));
echo "<script id='lists-json'>var lists=".json_encode($lists_json)."</script>";
//Copy the data from lists.json and paste it into a script tag, saving it as a variable called `list` to be accessed by later JavaScript code (i.e. lists.js).
//I would have stored it in a var tag, but there was a weird bug with some of the <u> tags leaking out and making my title underlined, and this seemed to avoid that (and it's probably more efficient too).
}
?>

26
scripts/vendor/loadfile.js vendored
View File

@ -1,26 +0,0 @@
// Synchronously read a text file from the web server with Ajax
//
// The filePath is relative to the web page folder.
// Example: myStuff = loadFile("Chuuk_data.txt");
//
// You can also pass a full URL, like http://sealevel.info/Chuuk1_data.json, but there
// might be Access-Control-Allow-Origin issues. I found it works okay in Firefox, Edge,
// or Opera, and works in IE 11 if the server is configured properly, but in Chrome it only
// works if the domains exactly match (and note that "xyz.com" & "www.xyz.com" don't match).
// Otherwise Chrome reports an error:
//
// No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://sealevel.info' is therefore not allowed access.
//
// That happens even when "Access-Control-Allow-Origin *" is configured in .htaccess,
// and even though I verified the headers returned (you can use a header-checker site like
// http://www.webconfs.com/http-header-check.php to check it). I think it's a Chrome bug.
function loadFile(filePath) {
var result = null;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", filePath, false);
xmlhttp.send();
if (xmlhttp.status==200) {
result = xmlhttp.responseText;
}
return result;
}

55
styles/layout.css
View File

@ -1,32 +1,3 @@
:root{
--hf-padding: 1%;
--main-height: 66%;
}
/*html {
height: auto;
min-height:100vh;
width: 100%;
}
body {
height:100%;
min-height:100vh;
overflow-y:auto;
}
footer{
width:100%;
padding: 2rem;
padding-left:0;
padding-right:0;
margin:0;
position:sticky;
bottom:0;
text-align: center;
}*/
html {
height: 100%;
box-sizing: border-box;
@ -83,7 +54,7 @@ nav{
main{
/*width: 80%;*/
background-color:white;
min-height: 70vh;
min-height: 60vh;
display:inline-block;
margin:3%;
margin-top:0;
@ -104,3 +75,27 @@ main{
ol, ul {
padding-left:2rem;
}
.list-album{
display:inline-block;
/*Album divs are blocks of a set size that are displayed side by side until they overflow onto the next line*/
margin:0.5em;
/*Put some space between the albums*/
text-align:center;
padding:0;
width:10em;
/*Set the width of the div equal to the width of the album cover so that long album titles or artist names overflow onto the next line.*/
vertical-align:top;
/*In case of aforementioned overflow, ensure the tops of all album covers in each given row are aligned.*/
}
.list-album-cover{
width:10em;
height:10em;
margin:0;
}
p{
text-align:justify;
margin-bottom:1rem;
}

13
styles/theme.css
View File

@ -178,16 +178,3 @@ u{
.list-key{
font-weight:bold;
}
.list-album{
display:inline-block;
margin:0.75em;
text-align:center;
padding:0;
}
.list-album-cover{
width:10em;
height:10em;
margin:0;
}