Various improvements to pages

www/about.html

@@ -4,24 +4,115 @@
 
 <h1>About Me</h1>
 
-My name is Noah and this is my website. I am a software engineer who lives in
+<table border="0" cellspacing="0" cellpadding="8">
+	<tr>
+		<td align="left" valign="top">
+			<img src="/static/photos/ff7ec4f5.jpg" width="256" height="256" alt="Kirsle" class="portrait"><p>
+
+			<table border="0" cellspacing="0" cellpadding="4">
+				<tr>
+					<td>
+						<img src="/static/icons/aim.gif" width="16" height="15" alt="AIM">
+					</td>
+					<td>
+						<strong>AIM:</strong>
+					</td>
+					<td>
+						<a href="aim:goim?ScreenName=Kirsle">Kirsle</a>
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<img src="/static/icons/skype.png" width="16" height="!6" alt="Skype">
+					</td>
+					<td>
+						<strong>Skype:</strong>
+					</td>
+					<td>
+						<a href="skype:kirsle?chat">Kirsle</a>
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<img src="/static/icons/xmpp.gif" width="16" height="16" alt="XMPP">
+					</td>
+					<td>
+						<strong>XMPP:</strong>
+					</td>
+					<td>
+						kirsle@kirsle.net
+					</td>
+				</tr>
+			</table><p>
+
+			&#0164; <a href="/contact">Send me an e-mail</a>
+		</td>
+		<td align="left" valign="top">
+			<h2>Hello world!</h2>
+
+			My name is <strong>Noah</strong> and this is my website. I am a software engineer who lives in
 			Los Angeles. My areas of expertise are primarily in Perl and Python back-end
 			software development, however I believe I have a knack for the front end as well.<p>
 
-I built Kirsle.net from the ground up. I made the web design in Photoshop and
+			I built Kirsle.net from the ground up. Its back-end code has been rewritten a
-pieced it together using standards compliant HTML 5.0 (the spec, not the
+		   	dozen different times, in two different languages. I made the web design in Photoshop and
+			pieced it together using standards compliant HTML 5 (the spec, not the
 			buzzword), CSS and a little bit of JavaScript. The back end is entirely written
-in Python.<p>
+			in Python. The previous version of Kirsle.net was written in Perl and ran on my
-
+			"PerlSiikir" CMS. I rewrote it in Python
-The code supports a web blog, photo albums, and comments. It's also an open
+			<a href="/blog/entry/goodbye-perlsiikir">for various reasons</a>, and I like Python
-source project of mine that I call Rophako. You can
+			more these days anyway. <img src="/static/smileys/tango/wink.png" alt=";)"><p>
-<a href="https://github.com/kirsle/rophako">clone it on Github</a>.<p>
 
 			Besides being a rockstar at back end development and a pretty decent web designer,
 			I've dabbled in some 3D modeling, Flash animation and other artistic things.
 			You can find them under the "Creativity" section on the left navigation. :)<p>
 
 			Some of my personal projects are listed under the "Software" section to your
-left. The rest you'll find on my GitHub page and CPAN profile. 
+			left. The rest you'll find on my
+			<a href="https://github.com/kirsle">GitHub page</a> and
+			<a href="http://search.cpan.org/~kirsle">CPAN profile</a>.
+
+			<h2>Kirsle?</h2>
+
+			Where did I come up with the name Kirsle? Long-ish story, but here's the cliffnotes:
+
+			<ul>
+				<li>In 1997 when the Internet was still brand new, They didn't want us
+					using our real names online so I always went by one screen name or
+					another.</li>
+				<li>The game <em>NiGHTS: Into Dreams...</em> for the Sega Saturn had an
+					enemy on some levels named Kircle, and I liked the name but I read
+					it as though the "C" were pronounced like an "S". Nonetheless, it
+					became my screen name.</li>
+				<li>People often pronounced it with a hard "C". The last straw was when
+					I discovered that Text-to-Speech software also pronounced it this way.</li>
+				<li>I re-spelled it as Kirsle so it was spelled how I wanted it to be
+					pronounced.</li>
+				<li>In doing so, I created the most unique name ever. All of the Google
+					search results for Kirsle are about me!</li>
+			</ul>
+
+			Later on I turned Kirsle into a full Internet alias/fake name of
+			Casey Kirsle, which I used as my name for several years online (some of
+			my older Perl modules on CPAN are signed by this name). <em>That</em> was
+			mostly because I like the name Casey, and Kirsle could plausibly sound like
+			a last name. <img src="/static/smileys/tango/wink.png" alt=";)"><p>
+
+			<h2>Kirsle.net is Open Source</h2>
+
+			The Python code that powers Kirsle.net is an open source project of mine named
+			<a href="http://rophako.kirsle.net/">Rophako</a>. It means "Website" in
+			<a href="/wizards/translator.html">Azulian</a>. The Rophako CMS is open source
+			software that I released under the GNU General Public License and you can
+			<a href="https://github.com/kirsle/rophako">clone it on GitHub</a>. The HTML
+			files for Kirsle.net are <a href="https://github.com/kirsle/kirsle.net">also
+			on GitHub</a>, but those probably aren't very interesting to you.<p>
+
+			The CMS supports a web blog, photo albums, comments, and subscriptions to comments
+			(so that your guests can watch a comment thread for future posts by others). I'm
+			always improving it and adding new features.
+		</td>
+	</tr>
+</table>
 
 {% endblock %}

www/contact/index.html

@@ -8,39 +8,54 @@ You can use the form below to send me an e-mail. Alternatively you can contact
 me on an instant messenger:
 
 <blockquote>
-<table border="0" cellspacing="0" cellpadding="2">
+	<table border="0" cellspacing="0" cellpadding="4">
 		<tr>
-        <td align="center" valign="middle">
+			<td>
-            <img src="/static/icons/aim.gif" title="AIM">
+				<img src="/static/icons/aim.gif" width="16" height="15" alt="AIM">
 			</td>
-        <td align="left" valign="middle">
+			<td>
-            <strong>AIM:</strong> <a href="aim:goim?ScreenName=Kirsle">Kirsle</a>
+				<strong>AIM:</strong>
+			</td>
+			<td>
+				<a href="aim:goim?ScreenName=Kirsle">Kirsle</a>
 			</td>
 		</tr>
 		<tr>
-        <td align="center" valign="middle">
+			<td>
-            <img src="/static/icons/skype.png" title="Skype">
+				<img src="/static/icons/skype.png" width="16" height="!6" alt="Skype">
 			</td>
-        <td align="left" valign="middle">
+			<td>
-            <strong>Skype:</strong> Kirsle
+				<strong>Skype:</strong>
+			</td>
+			<td>
+				<a href="skype:kirsle?chat">Kirsle</a>
 			</td>
 		</tr>
 		<tr>
-        <td align="center" valign="middle">
+			<td>
-            <img src="/static/icons/xmpp.gif" title="XMPP">
+				<img src="/static/icons/xmpp.gif" width="16" height="16" alt="XMPP">
 			</td>
-        <td align="left" valign="middle">
+			<td>
-            <strong>XMPP:</strong> kirsle@kirsle.net
+				<strong>XMPP:</strong>
+			</td>
+			<td>
+				kirsle@kirsle.net
 			</td>
 		</tr>
 	</table>
 </blockquote><p>
 
-<strong>You may NOT</strong> use this form to send me any SEO business
+Things that you <strong>SHOULD NOT</strong> use this form for:
-solicitations. That will probably just make me ban your IP address from visiting
+
-my site ever again.<p>
+<ul>
+	<li>Any SEO business solicitations.</li>
+	<li>Any advertisement related things. Google AdSense is fine for me, thanks.</li>
+</ul>
+
+For anything else:<p>
 
 <form name="contact" action="{{ url_for('contact.send') }}" method="POST">
+<blockquote>
 	<input type="hidden" name="token" value="{{ csrf_token() }}">
 	<table border="0" cellspacing="0" cellpadding="2">
 		<tr>
@@ -77,6 +92,7 @@ my site ever again.<p>
 		<input type="text" size="40" name="contact" value=""><br>
 		<input type="text" size="40" name="website" value="http://">
 	</div>
+</blockquote>
 </form>
 
 {% endblock %}

www/js/offsite.js

@@ -8,6 +8,9 @@ $(document).ready(function() {
     $("a").each(function() {
         var $a = $(this);
         var href = $a.attr("href");
+		if (href === undefined) {
+			return;
+		}
 
         // Detect offsite links.
         if (href.indexOf("http:") == 0 || href.indexOf("https:") == 0) {

www/layout.html

@@ -82,11 +82,13 @@
     <div class="k-section">Web Tools</div>
     <div class="k-navi">
         &#0187; <a href="/wizards/ttf2eot.cgi">TTF to EOT</a><br>
+        &#0187; <a href="/wizards/ps1.html">Bash $PS1 Prompt</a><br>
         &#0187; <a href="/wizards/fader.cgi">Text Fader</a><br>
         &#0187; <a href="/wizards/favicon.cgi">Favicons</a><br>
         &#0187; <a href="/wizards/distance.cgi">Distance Calc</a><br>
         &#0187; <a href="/wizards/translator.html">Azulian Encoder</a><br>
-        &#0187; <a href="/wizards/xbmask.cgi">XBM Masks</a>
+        &#0187; <a href="/wizards/xbmask.cgi">XBM Masks</a><br>
+        &#0187; <a href="/wizards/flask-session.py">Flask Session</a>
     </div>
 
     <div class="k-section">Subdomains</div>
@@ -130,7 +132,15 @@
         {% endif %}
         &#0187; <a href="{{ url_for('account.logout') }}">Log Out</a>
     {% else %}
-        &#0187; <a href="{{ url_for('account.login') }}">Log In</a>
+        <div id="login-link">&#0187; <a href="{{ url_for('account.login') }}" class="login-link">Log In</a></div>
+        <div id="login-inline" style="display: none">
+            <form action="{{ url_for('account.login') }}" method="POST">
+            <input type="hidden" name="token" value="{{ csrf_token() }}">
+            <input type="text" size="4" name="username" style="width: 45%">
+            <input type="password" size="4" name="password" style="width: 45%"><br>
+            <button type="submit" style="width: 100%">Log In</button>
+            </form>
+        </div>
     {% endif %}
     </div><p>
 
@@ -149,6 +159,15 @@
 
 <script type="text/javascript" src="/js/jquery-2.1.0.min.js"></script>
 <script type="text/javascript" src="/js/offsite.js"></script>
+<script type="text/javascript">
+    $(document).ready(function() {
+        $(".login-link").click(function() {
+            $("#login-link").hide();
+            $("#login-inline").show(500);
+            return false;
+        });
+    });
+</script>
 {% block scripts %}{% endblock %}
 
 <script type="text/javascript">

www/rendering.html

@@ -12,7 +12,7 @@ modeled more or less in AutoCAD 2006 and rendered in 3DS Max 8.<p>
         <td align="center" valign="top">
             <a href="/creativity/rendered/kawar.jpg">
             <img src="/creativity/rendered/kawar-thumb.jpg"
-            width="300" height="225" alt="Kanian/Azulian War">
+            width="300" height="225" alt="Kanian/Azulian War" class="portrait">
             </a><br>
             Resolution: 800x600
         </td>
@@ -26,7 +26,7 @@ modeled more or less in AutoCAD 2006 and rendered in 3DS Max 8.<p>
         <td align="center" valign="top">
             <a href="/creativity/rendered/kanian.jpg">
             <img src="/creativity/rendered/kanian-thumb.jpg"
-            width="300" height="225" alt="Kanians">
+            width="300" height="225" alt="Kanians" class="portrait">
             </a><br>
             Resolution: 800x600
         </td>
@@ -41,7 +41,7 @@ modeled more or less in AutoCAD 2006 and rendered in 3DS Max 8.<p>
         <td align="center" valign="top">
             <a href="/creativity/rendered/bob.jpg">
             <img src="/creativity/rendered/bob-thumb.jpg"
-            width="300" height="225" alt="Bob-Omb Battlefield">
+            width="300" height="225" alt="Bob-Omb Battlefield" class="portrait">
             </a><br>
             Resolution: 800x600
         </td>
@@ -59,7 +59,7 @@ modeled more or less in AutoCAD 2006 and rendered in 3DS Max 8.<p>
         <td align="center" valign="top">
             <a href="/creativity/rendered/hotel.jpg">
             <img src="/creativity/rendered/hotel-thumb.jpg"
-            width="300" height="225" alt="Hotel Suite">
+            width="300" height="225" alt="Hotel Suite" class="portrait">
             </a><br>
             Resolution: 720x540
         </td>
@@ -77,7 +77,7 @@ modeled more or less in AutoCAD 2006 and rendered in 3DS Max 8.<p>
         <td align="center" valign="top">
             <a href="/creativity/rendered/battlefield.jpg">
             <img src="/creativity/rendered/battlefield-thumb.jpg"
-            width="300" height="225" alt="Virtual Battlefield">
+            width="300" height="225" alt="Virtual Battlefield" class="portrait">
             </a><br>
             Resolution: 1024x768
         </td>
@@ -93,7 +93,7 @@ modeled more or less in AutoCAD 2006 and rendered in 3DS Max 8.<p>
         <td align="center" valign="top">
             <a href="/creativity/rendered/island.jpg">
             <img src="/creativity/rendered/island-thumb.jpg"
-            width="300" height="225" alt="Island Invasion">
+            width="300" height="225" alt="Island Invasion" class="portrait">
             </a><br>
             Resolution: 1024x768
         </td>