Skip to content

Queues - Tamiko Terada -static-site #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TamikoT wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Queues - Tamiko Terada -static-site #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
46907ff
create directories and files for site
TamikoT Mar 17, 2017
b7ca0e8
edit directories and files
TamikoT Mar 17, 2017
63c0c1c
add normalize standard content
TamikoT Mar 17, 2017
a7073e4
add sections and comments to refelct wireframe
TamikoT Mar 19, 2017
29db8ee
add pages to profile
TamikoT Mar 20, 2017
62f6a00
updates to main.css
TamikoT Mar 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions html/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!-- about page -->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Tamiko Terada : About </title>
<link rel="stylesheet" type="text/css" href="../stylesheets/main.css">
<link rel="stylesheet" type="text/css" href="../stylesheets/normalize.css">
</head>
<body>
<a href="portfolio.html" target="_parent"><button autofocus id="test"> </button></a>

<header>
<div class="left-bar">
<p class="top-bar">Tamiko Terada</p>
</div>
<!-- nav1 -->
<nav><a href="menu.html">menu</a></nav>
</header>

<main>
<!-- text-box -->
<p class="plain-bar underline">My Story</p>
<section id="about"><!-- background-image -->
<p>The first time I used a computer was when I played Oregon Trail on a school Macintosh. It left such an impression. I often got into books about adventures but it was engaging on a whole different level! As a wagon leader, I had to make critical decisions (like whether or not to ford the river). I played the game over and over trying to figure out the best way to make that imaginary trek.</p>
<br />
<p>In 2011, I took the actual journey out West to Seattle. I fell in love with the beauty of the Pacific Northwest and feel consistently inspired by its innovative people. Through meeting software developers and being in a city of Tech giants, I learned what programmers actually do. Through their work so much of our world has changed and will continue to change. I want to be a part of that adventure.</p>

<!-- link1 -->
Copy link
Copy Markdown

@BJHunnicutt BJHunnicutt Mar 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you can remove all these <a> tags since they're not being used.

<a id="project1" href=""></a>
<!-- link2 -->
<a id="project2"></a>
<!-- link3 -->
<a id="project3"></a>
<!-- link4 -->
<a id="project4"></a>

</section>
</main>
<p class="plain-bar fixed-">Press SPACE BAR TO CONTINUE</p>
Copy link
Copy Markdown

@BJHunnicutt BJHunnicutt Mar 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you mean to have fixed-? Or is that a typo?

<footer>
</footer>
</body>
</html>
40 changes: 40 additions & 0 deletions html/map_link.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!-- map of links -->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Tamiko Terada : Map of Links </title>
<link rel="stylesheet" type="text/css" href="../stylesheets/main.css">
<link rel="stylesheet" type="text/css" href="../stylesheets/normalize.css">
</head>
<body>
<a href="../index.html" target="_parent"><button autofocus id="test"> </button></a>
<header>
<div class="left-bar">
<p class="top-bar">Tamiko Terada</p>
</div>
<!-- nav1 -->
<nav><a href="menu.html">menu</a></nav>
</header>

<main id="map" class="clear">
<!-- text-box -->
<div>

</div>
<p class="plain-bar-black">map of links</p>
<section class="large"><!-- background-image -->
<!-- link1 -->
<a id="link1" href="https://github.com/TamikoT" target="_blank">github</a>
<!-- link2 -->
<a id="link2" href="https://twitter.com/therealtamiko" target="_blank">twitter</a>
<!-- link3 -->
<a id="link3" href="https://www.linkedin.com/in/tamikoterada/" target="_blank">linkedin</a>
<a id="link4" href="mailto:tamikodevo@gmail.com" target="_blank">EMAIL</a>
</section>
</main>
<footer>
</footer>
</body>
</html>
48 changes: 48 additions & 0 deletions html/menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!-- menu page -->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Tamiko Terada : Menu </title>
<link rel="stylesheet" type="text/css" href="../stylesheets/main.css">
<link rel="stylesheet" type="text/css" href="../stylesheets/normalize.css">
</head>

<body>
<a href="about.html" target="_parent"><button autofocus id="test"> </button></a>

<header>
<div class="left-bar">
<p class="top-bar">Tamiko Terada</p>
</div>
<!-- nav1 -->
<nav><a href="../index.html">home</a></nav>
</header>

<!-- subheader -->
<section id="banner-menu">
<ul>
<li>Location: seattle, washington</li>
<li>Occupation: software engineer in training</li>
<li>Languages: ruby, html, css</li>
<li>Background: nonprofit management</li>
<li>Education: ada developers academy</li>
</ul>
</section>

<div class="box-padding">
<p>You may:</p>
<ol id="menu-choices">
<li><a href="about.html"> View the story </a></li>
<li><a href="portfolio.html"> Hunt for projects </a></li>
<li><a href="map_link.html"> View map of links </a></li>
<li><a href="../index.html"> Go back home </a></li>
</ol>
<p>What is your choice? _</p>
</div>
<p class="plain-bar fixed-bottom">Press SPACE BAR TO CONTINUE</p>
<!-- footer -->
<footer></footer>
</body>
</html>
41 changes: 41 additions & 0 deletions html/portfolio.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!-- project links -->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Tamiko Terada : Portfolio </title>
<link rel="stylesheet" type="text/css" href="../stylesheets/main.css">
<link rel="stylesheet" type="text/css" href="../stylesheets/normalize.css">
</head>

<body id="hunting">
<a href="map_link.html" target="_parent"><button autofocus id="test"> </button></a>
<header>
<div class="left-bar">
<p class="top-bar">Tamiko Terada</p>
</div>
<!-- nav1 -->
<nav><a href="menu.html">menu</a></nav>
</header>
<p class="plain-bar fixed-top">HUNT for projects SELECT ANIMALS</p>
<main>
<!-- text-box -->
<section><!-- background-image -->
<!-- link1 -->
<a id="project1" href="https://github.com/TamikoT/meowspace" target="_blank"><img alt="meowspace" src="../images/buffalo.jpg">
Copy link
Copy Markdown

@BJHunnicutt BJHunnicutt Mar 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you consider adding text on hover using the title attribute?

</a>
<!-- link2 -->
<a id="project2" href="https://github.com/TamikoT/Word-Guess" target="_blank"><img alt="wordguess" src="../images/buffalo_left.jpg"></a>
Copy link
Copy Markdown

@BJHunnicutt BJHunnicutt Mar 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When you resize the window some of the text gets covered by animals. Can you think of a way to avoid that?

<!-- link3 -->
<a id="project3" href="https://github.com/TamikoT/Calculator" target="_blank"><img alt="calculator" src="../images/deerright.jpg"></a>
<!-- link4 -->
<a id="project4" href="https://github.com/TamikoT/weekend-warrior/tree/master/02-alouette" target="_blank"><img alt="alouette" src="../images/deer.jpg"></a>
</section>
</main>

<p class="plain-bar fixed-bottom">Press SPACE BAR TO CONTINUE</p>
<footer>
</footer>
</body>
</html>
Binary file added images/buffalo.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/buffalo_left.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/deer.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/deerright.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/header-edited.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/hunting_scene.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/map_clear.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/oregontrail.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/oregontrail_edit.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/river.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 changes: 64 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!-- landing page for personal portfolio -->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Tamiko Terada </title>
<link rel="stylesheet" type="text/css" href="stylesheets/main.css">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css">
</head>

<body>
<a href="html/menu.html" target="_parent"><button autofocus id="test"> </button></a>
Copy link
Copy Markdown

@BJHunnicutt BJHunnicutt Mar 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The button autofocus to let the user spacebar through the site is such a good idea!

Copy link
Copy Markdown

@BJHunnicutt BJHunnicutt Mar 30, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is kind of cheating in the html/css only realm, but if you add onblur="this.focus()" to your button then using the spacebar to get through the pages will keep working even if they click somewhere else on the page 🔨

<button autofocus onblur="this.focus()" id="test"> </button>

<!-- header | name, image, banner, button-link -->
<header>
<div class="left-bar">
<p class="top-bar">Tamiko Terada</p>
Copy link
Copy Markdown

@BJHunnicutt BJHunnicutt Mar 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Semantic HTML: Is <p class="top-bar">Tamiko Terada</p> really a paragraph?

Also, it might be nice to make this a link to either your LinkedIn or your About page.

</div>
<nav><a href="menu.html">menu</a></nav>
Copy link
Copy Markdown

@BJHunnicutt BJHunnicutt Mar 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Broken link, I think you need this to be html/menu.html

</header>

<div id="header-image"></div>
Copy link
Copy Markdown

@BJHunnicutt BJHunnicutt Mar 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Empty div?

Copy link
Copy Markdown

@BJHunnicutt BJHunnicutt Mar 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, never mind I see it in the css. A couple thoughts:

  • Something like id="header-image-wrapper" might be a more informative name to convey what this component is actually doing
  • I think it's preferable to add image links via <img> tags so you can use their alt text

<section>
<div class="box-green">
<p class="centered"><a class="button" href="https://www.linkedin.com/in/tamikoterada/" target="_blank">TAMIKO has skills.</a>
Copy link
Copy Markdown

@BJHunnicutt BJHunnicutt Mar 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Like with your name in the header, is this really a paragraph? Or more of a header? <h1></h1>

</p>
</div>
</section>

<div class="box-green"></div>

<main>
<p class="plain-bar">Press ENTER to size up the situation</p>
<!-- left column -->
<section class="box">
<div id="column-one">
<ul>
<li> Start date: </li>
<li> Weather: </li>
<li> Food: </li>
<li> Next landmark: </li>
</ul>
</div>
<!-- right column -->
<div id="column-two">
<ul>
<li> February 1, 2018 </li>
<li> Seattle rain </li>
<li> lots of snacks </li>
<li> employment </li>
</ul>
</div>
</section>
<!-- banner -->
<p class="plain-bar">Press SPACE BAR TO CONTINUE</p>
</main>
<!-- footer -->
<footer>
<p>Disclaimer: This portfolio site was made for educational purposes only in homage to my first encounter with a computer. Oregon Trail was created by Don Rawitsch, Bill Heinemann, and Paul Dillenberger with the Minnesota Educational Computing Consortium (MECC) in 1974. The version of the game referenced here is no longer sold and falls under the DMCA exemptions of 2006.
Copy link
Copy Markdown

@BJHunnicutt BJHunnicutt Mar 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Generally good practice not to let lines get more than 80 characters (give or take), and formatting either all on one line (if it fits) or all staggered makes html more readable:

<p> Some paragraph. </p>

OR

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
  dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
  ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
  nulla pariatur.
</p>

(your have 1/2 of each here)

</p>
</footer>
</body>

</html>
Loading