Changed title font and added HW assignment

This commit is contained in:
thepaperpilot 2019-09-17 00:30:18 -05:00
parent f204bfb822
commit f1f2485a4f
12 changed files with 618 additions and 0 deletions

BIN
.jekyll-metadata Normal file

Binary file not shown.

278
CS 6314/firststyle.css Normal file
View file

@ -0,0 +1,278 @@
html {
width: 100%;
height: 100%;
background-color: #2a323d;
color: white;
font-family: "Roboto", sans-serif;
font-weight: normal;
line-height: 1.5;
}
#title {
text-align: center;
font-family: 'Pacifico', cursive, sans-serif;
}
section {
width: 95%;
max-width: 1200px;
margin: auto;
background-color: #242a33;
box-shadow: 2px 2px 3px #222;
border-radius: 2px;
padding: 10px;
margin-bottom: 20px;
}
section img {
margin: auto;
display: block;
}
section table {
margin: auto;
min-width: 50%;
text-align: left;
}
section button {
margin: 10px;
background: none;
outline: none;
border: solid 1px grey;
color: white;
cursor: pointer;
transition: background .2s;
border-radius: 10px;
padding: 4px 8px;
font-size: large;
transition: .2s;
}
section button:hover {
background: #2a323d;
}
section .field {
display: flex;
margin: 8px 0;
border-bottom: solid 2px #2a323d;
padding-bottom: 8px;
}
section .field > * {
flex-basis: 50%;
}
section .field > :first-child {
flex-shrink: 1;
}
footer {
font-size: .8em;
width: 95%;
max-width: 1200px;
margin: auto;
margin-top: 20px;
padding-bottom: 10px;
text-align: center;
}
a {
color: #ffab40;
}
input {
background: none;
border: none;
border-bottom: solid 1px grey;
transition: border .2s;
color: white;
font-size: medium;
min-width: 0;
}
input:focus {
border-bottom-color: white;
outline: none;
}
input:invalid {
color: red;
}
input[type=color] {
padding: 0;
border-bottom: none;
}
input[type=checkbox],
input[type=radio] {
display: none;
}
input[type=checkbox] + label,
input[type=radio] + label {
display: block;
cursor: pointer;
}
input[type=radio] + label:not(:last-child) {
margin-bottom: 8px;
}
input[type=checkbox] + label:before,
input[type=radio] + label:before {
border: 1px solid grey;
display: inline-block;
box-sizing: border-box;
width: 24px;
height: 24px;
vertical-align: bottom;
color: transparent;
transition: .2s;
text-align: center;
margin-right: 8px;
}
input[type=checkbox] + label:before {
content: "\2714";
border-radius: 3px;
}
input[type=radio] + label:before {
content: "\25CF";
border-radius: 50%;
font-size: smaller;
}
input[type=checkbox] + label:active:before,
input[type=radio] + label:active:before,
button:active {
transform: translateY(-10px);
border-color: white;
}
input[type=checkbox]:checked + label:before,
input[type=radio]:checked + label:before {
background-color: #2a323d;
color: #fff;
}
input[type=reset] {
border-bottom: none;
text-transform: uppercase;
border-radius: 10px;
padding: 4px 8px;
cursor: pointer;
border: solid 2px red;
transition: background .2s;
}
input[type=reset]:hover {
background: red;
}
.button-row {
text-align: center;
}
.button-row p {
margin-bottom: 0;
}
@keyframes rotate {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}
@keyframes popout {
0% {
box-shadow: 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red;
transform: translateX(0) translateY(0);
}
50% {
box-shadow: 1px -1px red, 2px -2px red, 3px -3px red, 4px -4px red, 5px -5px red, 6px -6px red, 7px -7px red, 8px -8px red;
transform: translateX(-8px) translateY(8px);
}
100% {
box-shadow: 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red, 0 0 red;
transform: translateX(0) translateY(0);
}
}
@keyframes jump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
#example-1 {
background-color: grey;
color: black;
padding: 4px;
}
#example-1 .yellow {
text-decoration: underline;
margin: auto;
}
#example-2 {
background-color: white;
color: black;
padding: 4px;
}
.container {
border: solid 1px black;
width: 50%;
margin: auto;
padding: 8px;
}
.container span, .container div:not(.inner-container) {
border: solid 1px black;
padding: 8px;
}
.dashed {
border: dashed 1px black;
}
.yellow {
background-color: yellow;
width: 50%
}
.inner-container {
width: 75%;
}
.inner-container span {
display: inline-block;
box-sizing: border-box;
}
.inner-container .yellow {
width: 75%;
}
.inner-container .no-left-padding {
padding-left: 0;
width: 25%;
}
.middle {
margin-left: 25%;
}

216
CS 6314/index.html Normal file
View file

@ -0,0 +1,216 @@
<!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>

BIN
CS 6314/interests.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

95
CS 6314/school.js Normal file
View file

@ -0,0 +1,95 @@
var target = document.getElementById('target')
/* Changing Visibility */
function hide() {
target.style.visibility = 'hidden'
}
document.getElementById('hide-button').addEventListener('click', hide)
function show() {
target.style.visibility = ''
}
document.getElementById('show-button').addEventListener('click', show)
function toggleVisibility() {
if (target.style.visibility)
target.style.visibility = ''
else
target.style.visibility = 'hidden'
}
document.getElementById('toggle-button').addEventListener('click', toggleVisibility)
/* Fading in and out */
var faded = false
var current = 1
function fadeTo(opacity) {
function fade() {
faded = opacity === 0
var animation = target.animate([{
opacity: current
}, {
opacity: opacity
}], {
duration: 1000,
fill: 'both'
})
current = opacity
return animation
}
return fade
}
function fadeToggle() {
if (faded)
fadeTo(1)()
else
fadeTo(0)()
}
document.getElementById('fadein-button').addEventListener('dblclick', fadeTo(1))
document.getElementById('fadeout-button').addEventListener('dblclick', fadeTo(0))
document.getElementById('fadeto-button').addEventListener('dblclick', fadeTo(.5))
document.getElementById('toggle-fade-button').addEventListener('dblclick', fadeToggle)
/* "Animate CSS" */
function doneAlert() {
// Aaaaaah!
alert('Done!')
}
function mouseEnter() {
target.style.animation = 'rotate 1s'
setTimeout(doneAlert, 1000)
}
target.addEventListener('mouseenter', mouseEnter)
function mouseLeave() {
target.style.animation = ''
}
target.addEventListener('mouseleave', mouseLeave)
/* Chained Events */
function chainFading(e) {
var char = e.which || e.keyCode
if (char !== 65 && char !== 97)
return
function third() {
fadeTo(.5)()
}
function second() {
fadeTo(1)().onfinish = third
}
fadeTo(0)().onfinish = second
}
window.addEventListener('keypress', chainFading)
function chainAnimate(e) {
if (e.keyCode !== 70)
return
function third() {
target.style.animation = 'popout 1s'
}
function second() {
target.style.animation = 'jump 1s'
setTimeout(third, 1000)
}
target.style.animation = 'rotate 1s'
setTimeout(second, 1000)
}
window.addEventListener('keydown', chainAnimate)

View file

@ -5,6 +5,7 @@
<title>{{ page.title }}</title>
<link rel="stylesheet" type="text/css" href="/css/main.css">
<link rel="stylesheet" type="text/css" href="/css/pacifico.css">
<meta charset="utf-8">
<!-- ****** faviconit.com favicons ****** -->

View file

@ -75,6 +75,10 @@ h5 {
margin: 0.82rem 0 0.656rem 0;
}
h1:first-child {
font-family: "Pacifico", cursive, sans-serif;
}
body > h4 {
width: 90%;
max-width: 940px;

24
css/pacifico.css Normal file
View file

@ -0,0 +1,24 @@
/* vietnamese */
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(/fonts/m0Shgsxo4xCSzZHO6RHWxBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(/fonts/6RfRbOG3yn4TnWVTc898ERTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(/fonts/Q_Z9mv4hySLTMoMjnk_rCfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.