217 lines
8.1 KiB
HTML
217 lines
8.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title>Home</title>
|
||
|
|
|
||
|
|
<link rel="stylesheet" type="text/css" href="./firststyle.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="/css/pacifico.css">
|
||
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
|
||
|
|
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="keywords" content="anthony lawn,portfolio,school, cs 6314,programming,html,css,javascript,web programming languages">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
|
||
|
|
<header>
|
||
|
|
<h1 id="title">Anthony Lawn</h1>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>My Interests</h2>
|
||
|
|
<p>I'd make this image larger using width: 100%, but imagemap doesn't work with percentage-based coordinates and you'd have to use javascript to make it work... or just use absolutely positioned anchor tags. </p>
|
||
|
|
<img src="./interests.png" alt="My Interests" orgWidth="400" orgHeight="300" usemap="#interests" />
|
||
|
|
<map name="interests">
|
||
|
|
<area shape="poly" coords="77,13,129,48,130,104,78,141,21,105,21,49" href="https://en.wikipedia.org/wiki/Dungeons_%26_Dragons" alt="Dungeons & Dragons" title="Dungeons & Dragons" />
|
||
|
|
<area shape="circle" coords="327,72,60" href="https://en.wikipedia.org/wiki/React_(web_framework)" alt="React JS" title="React JS" />
|
||
|
|
<area shape="rect" coords="12,169,133,288" href="https://en.wikipedia.org/wiki/Video_game_development" alt="Game Development" title="Game Development" />
|
||
|
|
<area shape="rect" coords="207,170,387,287" href="https://en.wikipedia.org/wiki/Digital_art" alt="Digital Art" title="Digital Art" />
|
||
|
|
</map>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>My Education</h2>
|
||
|
|
<ul>
|
||
|
|
<li>BS in Computer Science at University of Texas at Dallas</li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Expertise</h2>
|
||
|
|
<ol>
|
||
|
|
<li>
|
||
|
|
Javascript
|
||
|
|
<ul>
|
||
|
|
<li>React JS</li>
|
||
|
|
<li>Electron</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
C#
|
||
|
|
<ul>
|
||
|
|
<li>Unity</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Courses</h2>
|
||
|
|
<p>These are the courses I have taken or am taking on my path to getting a MS in Computer Science (Computer Interaction track) at the University of Texas at Dallas.</p>
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<th>Course Name</th>
|
||
|
|
<th>Semester</th>
|
||
|
|
<th>Year</th>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Human Computer Interactions</td>
|
||
|
|
<td>Fall</td>
|
||
|
|
<td>2018</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Design & Analysis - Computer Algorithms</td>
|
||
|
|
<td>Fall</td>
|
||
|
|
<td>2018</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Special Topics: Computer Science</td>
|
||
|
|
<td>Spring</td>
|
||
|
|
<td>2019</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Modeling & Simulation</td>
|
||
|
|
<td>Spring</td>
|
||
|
|
<td>2019</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Computer Graphics</td>
|
||
|
|
<td>Spring</td>
|
||
|
|
<td>2019</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Web Programming Languages</td>
|
||
|
|
<td>Fall</td>
|
||
|
|
<td>2019</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Computer Animation & Gaming</td>
|
||
|
|
<td>Fall</td>
|
||
|
|
<td>2019</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Virtual Reality</td>
|
||
|
|
<td>Fall</td>
|
||
|
|
<td>2019</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Contact Me</h2>
|
||
|
|
<form>
|
||
|
|
<div class="field">
|
||
|
|
<span>Name:</span>
|
||
|
|
<input type="text" placeholder="John Doe" required />
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<span>Email:</span>
|
||
|
|
<input type="email" placeholder="example@example.com" required />
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<span>Phone Number:</span>
|
||
|
|
<input type="tel" placeholder="(123) 456-7890" pattern="([0-9]{3}|\([0-9]{3}\))[ -]?[0-9]{3}[ -]?[0-9]{4}" />
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<span>What color should your contact message be?</span>
|
||
|
|
<input type="color" />
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<span>Have you heard of Babble Buds?</span>
|
||
|
|
<input type="checkbox" id="babble" />
|
||
|
|
<label for="babble" />
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<span>What are you contacting me about?</span>
|
||
|
|
<div class="radio-container">
|
||
|
|
<input id="reason-1" type="radio" name="reason" value="job" required />
|
||
|
|
<label for="reason-1">Job Offer</label>
|
||
|
|
<input id="reason-2" type="radio" name="reason" value="help" />
|
||
|
|
<label for="reason-2">Help with something I made</label>
|
||
|
|
<input id="reason-3" type="radio" name="reason" value="solicitation" />
|
||
|
|
<label for="reason-3">Solicitation</label>
|
||
|
|
<input id="reason-4" type="radio" name="reason" value="other" checked />
|
||
|
|
<label for="reason-4">Other</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<input type="reset" />
|
||
|
|
</form>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>Javascript Show-Off</h2>
|
||
|
|
<p>This is the part where I use Javascript instead of css!</p>
|
||
|
|
<p>Hover over the image to activate the mouse enter/leave events:</p>
|
||
|
|
<p>Press 'F' to play a sequence of fade animations:</p>
|
||
|
|
<p>Press 'A' down to play a sequence of non-fade animations:</p>
|
||
|
|
<img id="target" src="https://i.kym-cdn.com/photos/images/newsfeed/001/439/882/4f7.png" alt="This is how lil kids look when they cough" title="its a meme you dip" />
|
||
|
|
<div class="button-row">
|
||
|
|
<p>Click to toggle Visibility:</p>
|
||
|
|
<button id="hide-button">Hide</button>
|
||
|
|
<button id="show-button">Show</button>
|
||
|
|
<button id="toggle-button">Toggle Visibility</button>
|
||
|
|
</div>
|
||
|
|
<div class="button-row">
|
||
|
|
<p>Double Click to change opacity:</p>
|
||
|
|
<button id="fadein-button">Fade In</button>
|
||
|
|
<button id="fadeout-button">Fade Out</button>
|
||
|
|
<button id="fadeto-button">50% Opacity</button>
|
||
|
|
<button id="toggle-fade-button">Toggle Opacity</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>CSS Show-Off</h2>
|
||
|
|
<p>Both firefox or chrome-based browsers should be fine with everything you've seen on this page (assuming you have the most recent versions). I specifically tested on Vivaldi and Firefox.</p>
|
||
|
|
<h3>Example 1</h3>
|
||
|
|
<div id="example-1">
|
||
|
|
<div class="container">
|
||
|
|
HTML 1
|
||
|
|
<div class="yellow">
|
||
|
|
2 2
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span class="dashed">
|
||
|
|
3 3 3
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<h3>Example 2</h3>
|
||
|
|
<div id="example-2">
|
||
|
|
<div class="container">
|
||
|
|
<div class="inner-container">
|
||
|
|
<span class="yellow">
|
||
|
|
4 4 4 4
|
||
|
|
</span><!--
|
||
|
|
Comment to avoid adding an extra space here
|
||
|
|
--><span class="no-left-padding">
|
||
|
|
5 5 5 5 5
|
||
|
|
</span>
|
||
|
|
<div class="middle">
|
||
|
|
6 6 6 6 6 6
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<span>Psst... I made </span><a href="http://thepaperpilot.org/toweroffense/">this game</a><span> with some friends. I did all the HTML, CSS, and Javascript coding (although I did use the pixi.js library instead of rendering directly to a canvas)</span>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="./school.js"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|