initial commit

12 files changed, 405 insertions, 0 deletions

diff --git a/cont/index.html b/cont/index.html
new file mode 100644
index 0000000..5307a22
--- /dev/null
+++ b/cont/index.html
@@ -0,0 +1,131 @@
+<h>Urbana Electronics &amp; Programming Summer Program</h>
+<p>When it comes to computers, it's almost required that you teach yourself
+everything there is to know. This autodidacticism might work for some, but
+becomes frustrating for preteens not used to it. On the other hand, in person
+educational programs offered by schools are often aimed towards the lowest
+common
+denominator, oversimplifying things to the point where your child loses interest
+in them.</p>
+<p>The Urban Computing and Electronics Summer Program aims to provide a
+balance between this, offering practical and challenging course material, but
+also providing in person tutoring for those who have little prior experience.
+This two week program is tailored to your child's skill level and offers
+topics ranging from High Level Programming, Low Level Programming,
+Electronics, Web Design, Cyber Security, and UNIX system maintenance.</p>
+<div class="img-holder">
+<img src="img/elec.png" class="exampleimage">
+<img src="img/mech.png" class="exampleimage">
+<img src="img/c.png" class="exampleimage">
+<img src="img/webandterm.png" class="exampleimage">
+</div>
+<h>About Me</h>
+<p>
+My name is Haoran S. Diao, I'm a self taught electronics and programming
+hobbyist.
+
+I have experience in:
+</p>
+<ul>
+	<li>Electronics Software Drivers(kernel modules,microcontroller
+code)</li>
+	<li>Electronics Hardware Design(Custom PCB design etc...)</li>
+	<li>Programming(C, C++, Golang, Java, HTML/Javascript/CSS, Python, Lua,
+Bash
+scripts)</li>
+	<li>Linux System Maintenance(I have written my own kernel module)</li>
+	Web Design(I have built http://themandelbots.com and
+http://hairydiode.xyz and this site from scratch)
+	<li>Image Processing and Graphics(OpenCV and OpenGL)</li>
+	<li>Basic Computer Security(best practices, CTF challenges)</li>
+	<li>Robotics (Head programmer at the Urbana Mandelbots FTC team)</li>
+</ul>
+<p>
+I have been:
+</p>
+<ul>
+	<li>Head Programmer at the Urbana Mandelbots Robotics Team</li>
+	<li>Former Vice Present at a student run non-profit(Resigned)</li>
+</ul>
+<h>Course Details</h>
+<h>---Required Course Materials</h>
+<p>A dedicated laptop that Linux will be installed on, this can be any
+obsolete laptop made after 2010. This does not have to be a very fast computer
+at all. In most cases, previous data and OS will be wiped on installation of new
+OS, but dualbooting(keeping both systems) can be done for certain computers. If
+you can no provide a dedicated laptop then you can purchase a Raspberry Pi kit
+for ~80 from me or online.</p>
+
+<p>Optional Course Materials:</p>
+<ul>
+		<li>-2 USB drives 8GB minimum, this is to help with file
+transfer and
+		OS installation.</li>
+
+		<li>-USB wifi dongle, same as above.</li>
+</ul>
+<p>These will only be required for certain projects, you are not required
+to bring these if we do not end up exploring that topic.</p>
+<ul>
+		<li>3.b - An Arduino kit or PIC microcontroller w/
+programmer.</li>
+		
+		<li>4.b Ti-8* series calculator</li>
+
+		<li>7.c - USB wifi dongle</li>
+</ul>
+<h>---Course Outline:</h>
+<ul>
+	<li>1)Linux System Maintenance:
+	<ul>
+		<li>a - Using the Terminal</li>
+		<li>b - Drive Partitioning and Installing a System from
+Scratch</li>
+		<li>c - Shell Scripting</li>
+		<li>d - Compiling Custom Kernels</li>
+	</ul>
+	</li>
+	<li>2)High Level Programming(farther away from hardware):</li>
+	<ul>
+		<li>a - Image Recognition Algorithms in Python with the OpenCV
+library.</li>
+		<li>c - Making Games with Pygame in Python.</li>
+		<li>d - Making Minecraft Mods with Java.</li>
+	</ul>
+	<li>3)Low Level Programming(closer to hardware):</li>
+	<ul>
+		<li>a - Linux Kernel Modules using C</li>
+		<li>b - Microcontroller Code using C</li>
+		<li>c - Making Games with C++ using the OpenGL and SDL
+Libraries.</li>
+	</ul>
+	<li>4)Just For Fun Programming:</li>
+	<ul>
+		<li>a - Coding in Minecraft with Lua</li>
+		<li>b - Coding on a Ti-8* Calculator with TiBasic</li>
+	</ul>
+	<li>5)Electronnics Design and CAD:</li>
+	<ul>
+		<li>a - Designing Circuits and PCBs in Kicad or EagleCad</li>
+		<li>b - Mechanical Drawing with LibreCAD</li>
+	</ul>
+	<li>6)Hands On Electronics</li>
+	<ul>
+		<li>a - Building Circuits with 74xx Series Logic ICs(Integrated
+Ciruits)</li>
+		<li>b - Building Custom Keyboards</li>
+	</ul>
+	<li>7)Basic Cybersecurity and Penetration Testing</li>
+	<ul>
+		<li>a - Personal Security Best Practices (Operational Security,
+Network Secruity)</li>
+		<li>a - PGP, SSL and Other Uses for Encruption.</li>
+		<li>b - Applying Security Patches to Your System.</li>
+		<li>c - Wireless Network Pentesting</li>
+	</ul>
+	<li>8) Static Web Design</li>
+	<ul>
+		<li>a - HTML/CSS</li>
+		<li>b - Javascript</li>
+		<li>c - Hosting your own website with github.io</li>
+	</ul>
+</ul>
diff --git a/gen.sh b/gen.sh
new file mode 100755
index 0000000..82d8763
--- /dev/null
+++ b/gen.sh
@@ -0,0 +1,43 @@
+pages=$(ls -S -t cont/| grep html | grep -v index.html) #lists the actual content
+#-S -t so that the files are roughly in time order
+#index is excluded and appended at the end to make sure it gets processed last
+pages="$pages index.html"
+#clears the index
+rm index
+for page in $pages; do
+	#clears page and page.tmp
+	rm $page $page.tmp
+	#adds the header
+	cat src/header.html >> $page.tmp
+
+	#finds the [SETTITLE], but ignores \[SETTITLE], then filters out the [SETTITLE] part
+	#the head is to make it use the last one
+	title=$(cat cont/$page | grep '\[SETTITLE\]'| sed '/\\\[SETTITLE\]/d; s/\[SETTITLE\]//' | tail -n 1)
+	#does the same for the date
+	date=$(cat cont/$page | grep '\[SETDATE\]'| sed '/\\\[SETDATE\]/d; s/\[SETDATE\]//' | tail -n 1)
+
+	
+	#replaces \[SETTITLE] with [SETTITLE], and removes lines with legitimate [SETTITLE]s in a temporary file
+	cat cont/$page | sed '/\\\[SETTITLE\]/bx; /\[SETTITLE\].*/d;:x s/\\\[SETTITLE\]/\[SETTITLE\]/' >> $page.tmp
+	#same for the date
+	cat $page.tmp | sed '/\\\[SETDATE\]/bx; /\[SETDATE\].*/d;:x s/\\\[SETDATE\]/\[SETDATE\]/' >> $page
+
+	#adds the index if its the homepage
+	if [ "$page" == "index.html" ]; then
+		cat index >> $page
+		rm index
+	fi
+	#adds the footer
+	cat src/footer.html >> $page
+
+	#replaces \[TITLE] with [TITLE] and [TITLE] with $title, "" is used so the $ still applies
+
+	#however that means "\\\\" becomes "\\" when passed to sed from bash, and finally interpreted as a literal \ by sed
+	cat $page | sed "/\\\\\[TITLE\]/bx; s/\[TITLE\]/$title/; :x s/\\\\\[TITLE\]/\[TITLE\]/" > $page.tmp
+	#same with date
+	cat $page.tmp | sed "/\\\\\[DATE\]/bx; s/\[DATE\]/$date/; :x s/\\\\\[DATE\]/\[DATE\]/" > $page
+
+	rm $page.tmp
+	#adds to the index
+	echo "<a href=\"http://hairydiode.xyz/$(echo $page| sed 's/.html//')\">[$title] $date</a>" >> index
+done
diff --git a/img/banner.png b/img/banner.png
new file mode 100644
index 0000000..1cc0b4d
--- /dev/null
+++ b/img/banner.png
diff --git a/img/c.png b/img/c.png
new file mode 100644
index 0000000..b523215
--- /dev/null
+++ b/img/c.png
diff --git a/img/elec.png b/img/elec.png
new file mode 100644
index 0000000..e5dbd7c
--- /dev/null
+++ b/img/elec.png
diff --git a/img/mech.png b/img/mech.png
new file mode 100644
index 0000000..7a2deae
--- /dev/null
+++ b/img/mech.png
diff --git a/img/webandterm.png b/img/webandterm.png
new file mode 100644
index 0000000..2d338d2
--- /dev/null
+++ b/img/webandterm.png
diff --git a/index b/index
new file mode 100644
index 0000000..bd0574c
--- /dev/null
+++ b/index
@@ -0,0 +1 @@
+<a href="http://hairydiode.xyz/index">[] </a>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8c4441e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<head>
+<title></title>
+<meta charset="utf-8"/>
+<link rel="stylesheet" href="style.css"/>
+<link rel="icon" type="image/png" href="img/fav/logo.png"/>
+</head>
+<body>
+<div class="bannerholder">
+	<img class="banner" src="img/banner.png"></img>
+</div>
+<div class="main">
+<h>Urbana Electronics &amp; Programming Summer Program</h>
+<p>When it comes to computers, it's almost required that you teach yourself
+everything there is to know. This autodidacticism might work for some, but
+becomes frustrating for preteens not used to it. On the other hand, in person
+educational programs offered by schools are often aimed towards the lowest
+common
+denominator, oversimplifying things to the point where your child loses interest
+in them.</p>
+<p>The Urban Computing and Electronics Summer Program aims to provide a
+balance between this, offering practical and challenging course material, but
+also providing in person tutoring for those who have little prior experience.
+This two week program is tailored to your child's skill level and offers
+topics ranging from High Level Programming, Low Level Programming,
+Electronics, Web Design, Cyber Security, and UNIX system maintenance.</p>
+<div class="img-holder">
+<img src="img/elec.png" class="exampleimage">
+<img src="img/mech.png" class="exampleimage">
+<img src="img/c.png" class="exampleimage">
+<img src="img/webandterm.png" class="exampleimage">
+</div>
+<h>About Me</h>
+<p>
+My name is Haoran S. Diao, I'm a self taught electronics and programming
+hobbyist.
+
+I have experience in:
+</p>
+<ul>
+	<li>Electronics Software Drivers(kernel modules,microcontroller
+code)</li>
+	<li>Electronics Hardware Design(Custom PCB design etc...)</li>
+	<li>Programming(C, C++, Golang, Java, HTML/Javascript/CSS, Python, Lua,
+Bash
+scripts)</li>
+	<li>Linux System Maintenance(I have written my own kernel module)</li>
+	Web Design(I have built http://themandelbots.com and
+http://hairydiode.xyz and this site from scratch)
+	<li>Image Processing and Graphics(OpenCV and OpenGL)</li>
+	<li>Basic Computer Security(best practices, CTF challenges)</li>
+	<li>Robotics (Head programmer at the Urbana Mandelbots FTC team)</li>
+</ul>
+<p>
+I have been:
+</p>
+<ul>
+	<li>Head Programmer at the Urbana Mandelbots Robotics Team</li>
+	<li>Former Vice Present at a student run non-profit(Resigned)</li>
+</ul>
+<h>Course Details</h>
+<h>---Required Course Materials</h>
+<p>A dedicated laptop that Linux will be installed on, this can be any
+obsolete laptop made after 2010. This does not have to be a very fast computer
+at all. In most cases, previous data and OS will be wiped on installation of new
+OS, but dualbooting(keeping both systems) can be done for certain computers. If
+you can no provide a dedicated laptop then you can purchase a Raspberry Pi kit
+for ~80 from me or online.</p>
+
+<p>Optional Course Materials:</p>
+<ul>
+		<li>-2 USB drives 8GB minimum, this is to help with file
+transfer and
+		OS installation.</li>
+
+		<li>-USB wifi dongle, same as above.</li>
+</ul>
+<p>These will only be required for certain projects, you are not required
+to bring these if we do not end up exploring that topic.</p>
+<ul>
+		<li>3.b - An Arduino kit or PIC microcontroller w/
+programmer.</li>
+		
+		<li>4.b Ti-8* series calculator</li>
+
+		<li>7.c - USB wifi dongle</li>
+</ul>
+<h>---Course Outline:</h>
+<ul>
+	<li>1)Linux System Maintenance:
+	<ul>
+		<li>a - Using the Terminal</li>
+		<li>b - Drive Partitioning and Installing a System from
+Scratch</li>
+		<li>c - Shell Scripting</li>
+		<li>d - Compiling Custom Kernels</li>
+	</ul>
+	</li>
+	<li>2)High Level Programming(farther away from hardware):</li>
+	<ul>
+		<li>a - Image Recognition Algorithms in Python with the OpenCV
+library.</li>
+		<li>c - Making Games with Pygame in Python.</li>
+		<li>d - Making Minecraft Mods with Java.</li>
+	</ul>
+	<li>3)Low Level Programming(closer to hardware):</li>
+	<ul>
+		<li>a - Linux Kernel Modules using C</li>
+		<li>b - Microcontroller Code using C</li>
+		<li>c - Making Games with C++ using the OpenGL and SDL
+Libraries.</li>
+	</ul>
+	<li>4)Just For Fun Programming:</li>
+	<ul>
+		<li>a - Coding in Minecraft with Lua</li>
+		<li>b - Coding on a Ti-8* Calculator with TiBasic</li>
+	</ul>
+	<li>5)Electronnics Design and CAD:</li>
+	<ul>
+		<li>a - Designing Circuits and PCBs in Kicad or EagleCad</li>
+		<li>b - Mechanical Drawing with LibreCAD</li>
+	</ul>
+	<li>6)Hands On Electronics</li>
+	<ul>
+		<li>a - Building Circuits with 74xx Series Logic ICs(Integrated
+Ciruits)</li>
+		<li>b - Building Custom Keyboards</li>
+	</ul>
+	<li>7)Basic Cybersecurity and Penetration Testing</li>
+	<ul>
+		<li>a - Personal Security Best Practices (Operational Security,
+Network Secruity)</li>
+		<li>a - PGP, SSL and Other Uses for Encruption.</li>
+		<li>b - Applying Security Patches to Your System.</li>
+		<li>c - Wireless Network Pentesting</li>
+	</ul>
+	<li>8) Static Web Design</li>
+	<ul>
+		<li>a - HTML/CSS</li>
+		<li>b - Javascript</li>
+		<li>c - Hosting your own website with github.io</li>
+	</ul>
+</ul>
+</div>
+</body>
+<!-- 
+if you're digging in the src you might be interested in how this site works here: https://hairydiode.xyz/meta.html 
+-->
diff --git a/src/footer.html b/src/footer.html
new file mode 100644
index 0000000..6ec7259
--- /dev/null
+++ b/src/footer.html
@@ -0,0 +1,5 @@
+</div>
+</body>
+<!-- 
+if you're digging in the src you might be interested in how this site works here: https://hairydiode.xyz/meta.html 
+-->
diff --git a/src/header.html b/src/header.html
new file mode 100644
index 0000000..51532af
--- /dev/null
+++ b/src/header.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<head>
+<title>[TITLE]</title>
+<meta charset="utf-8"/>
+<link rel="stylesheet" href="style.css"/>
+<link rel="icon" type="image/png" href="img/fav/logo.png"/>
+</head>
+<body>
+<div class="bannerholder">
+	<img class="banner" src="img/banner.png"></img>
+</div>
+<div class="main">
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..28a2c31
--- /dev/null
+++ b/style.css
@@ -0,0 +1,65 @@
+/*removes margins for all*/
+* {
+	margin: none;
+	padding: none;
+	background-color : #262626;
+	color: #d9d9d9;
+	font-family: monospace;
+	font-size: 110%;
+}
+img {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+h {
+	display: block;
+	font-size: 120%;
+	color: #5dc833;
+	margin-top: 2vh;
+}
+.main {
+	display: block;
+	/*to center we give it automargins*/
+	margin-left: auto;
+	margin-right: auto;
+	/*won't be wider than the 1.5 * screen is tall so that it doesn't mess up
+	 * the aspect ratio
+	 */
+	max-width: 150vh;
+}
+/*this is the banner image, we want this to cover the whole screen at first*/
+.banner {
+	display: block;
+	/*make it cover up whole screen*/
+	height: 100vh;
+	width: auto;
+	/*center*/
+	margin-left : auto;
+	margin-right: auto;
+	/* width is 1.5height */
+	/* we do not want 1.5 * heigh to exceed 100vw*/
+	max-height:60vw;
+}
+/*cuts off any overflow*/
+.bannerholder {
+	display: block;
+	overflow: hidden;
+}
+.exampleimage{
+	/*block, but still linebreaks*/
+	display: inline-block;
+	width: 24%;
+	min-width: 30vh;
+	height: auto;
+}
+/*for centering the above*/
+.img-holder{
+	display: block;
+	/*centers the inline blocks*/
+	text-align: center;
+}
+/*child of list*/
+.listchild{
+	font-size: 90%;
+}