Skip to content

Commit

Permalink
feat: Add new tech writing sample. Move one infographic on Tech Writi…
Browse files Browse the repository at this point in the history 
…ng page to Infographics page. Add one new infographic to Infogrphics page. Add legends to infographics. Modify CSS corner radius.
  • Loading branch information
@melissakinsey
melissakinsey committed Nov 22, 2023
1 parent da6660c commit e34e63a
Show file tree
Hide file tree
Showing 6 changed files with 109 additions and 98 deletions.
Binary file added assets/AMZN-alexa-extra.png
View file
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 assets/CH-ordering-process.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
126 changes: 74 additions & 52 deletions infographics.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
<!DOCTYPE html>
<html lang="en">

<head>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"
></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
$(function () {
$(function ()
{
$("#header").load("header.html");
$("#footer").load("footer.html");
});
Expand All @@ -19,33 +18,21 @@
<!--Metatext-->
<meta name="Portfolio" />
<!--SEO Keywords-->
<meta
name="keywords"
content="portfolio, Amazon, Alexa, technical-writing, programming, engineering"
/>
<meta name="keywords" content="portfolio, Amazon, Alexa, technical-writing, programming, engineering" />
<!--Author-->
<meta name="author" content="Melissa Kinsey" />
<!--Favicon-->
<link
rel="shortcut icon"
type="image/png"
img
src="images/favicon.png"
/>
<link rel="shortcut icon" type="image/png" img src="images/favicon.png" />
<!--Viewport Dimensions-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--Bootstrap Link-->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
/>
<link
href="https://fonts.googleapis.com/css2?family=Red+Rose:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Red+Rose:wght@300;400;500;600;700&display=swap"
rel="stylesheet" />
<!--CSS Link-->
<link rel="stylesheet" href="style.css" />
</head>

<body>
<!-- NAV HEADER -->
<div id="header" class="p-0"></div>
Expand All @@ -60,47 +47,82 @@ <h1 class="special">Infographics</h1>
<div class="row justify-items-center">
<div class="col-full">
<p>
<img
src="assets/AMZN-agent-workflow.png"
style="width: 200%"
alt="Infographic showing the agent SDK workflow"
/>
<img src="assets/AMZN-agent-workflow.png" style="width: 200%"
alt="Infographic showing the agent SDK workflow" />
</p>
</div>
<div class="legend-bar">
Agent SDK workflow
</div>
</div>
</div>
<br>
<div class="row justify-items-center">
<div class="col-full">
<p>
<img src="assets/AMZN-dynamic-inputs.png" style="width: 200%"
alt="Infographic showing dynamic inputs to an agent SDK" />
</p>
</div>
<br>
<div class="legend-bar">
Dynamic inputs to an SDK
</div>
</div>
</div>
<br>
<br>
<div class="row justify-items-center">
<div class="col-full">
<p>
<img src="assets/AMZN-request-handler.png" style="width: 200%"
alt="Infographic showing how an agent receives and responds to requests" />
</p>
</div>
<br>
<br>
<div class="legend-bar">
Agent request handler
</div>
</div>
</div>
<br>
<br>
<div class="row justify-items-center">
<div class="col-full">
<p>
<img src="assets/CH-ordering-process.png" style="width: 200%" alt="Infographic showing the API ordering process" />
</p>
</div>
<br>
<br>
<div class="legend-bar">
API ordering process
</div>
</div>
</div>
<br>
<br>
<br>
<div class="row justify-items-center">
<div class="col-full">
<p>
<img
src="assets/AMZN-dynamic-inputs.png"
style="width: 200%"
alt="Infographic showing the agent SDK workflow"
/>
<img src="assets/auth-before-after.png" style="width: 200%" alt="Infographic showing implicit and explicit authorization" />
</p>
</div>
<br>
<br>
<div class="legend-bar">
Implicit and explicit authorization
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="row justify-items-center">
<div class="col-full">
<p>
<img
src="assets/AMZN-request-handler.png"
style="width: 200%"
alt="Infographic showing how an agent receives and responds to requests"
/>
</p>
</div>
</div>
</div>
<br>
<br>
<br>
<!--FOOTER-->
<div id="footer"></div>
</body>
<!--JQuery SCRIPTS-->
</html>

</html>
Binary file added samples/AMZN-alexa-extra.pdf
View file
Binary file not shown.
22 changes: 19 additions & 3 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,21 @@ legend {
margin: 0px 0px 60px 0px;
border-bottom: 0;
}
div.legend-bar {
font-family: "Red Rose", cursive;
font-weight: 200;
line-height: 1.5em;
width: 100vw;
color: #57947b;
margin: 0;
background-color: #e4fdf4;
font-size: 1rem;
justify-content: left;
text-align: left;
margin: 10px 0px 0px 0px;
padding-left: 2rem;
border-bottom: 0;
}

/* ~Heads~ */
h1 {
Expand Down Expand Up @@ -214,6 +229,7 @@ span {
}
div.col-full {
margin-top: 1rem;
margin-left: 2rem;
justify-content: center;
padding-bottom: 0;
}
Expand All @@ -240,7 +256,7 @@ div.col-sm-4 {
margin-top: 3rem;
margin-bottom: 1rem;
align-items: center;
border-radius: 35px 35px 35px 35px;
border-radius: 15px 15px 15px 15px;
}

/* ~Jumbotron~ */
Expand All @@ -266,11 +282,11 @@ p#jumbotron {

/* ~Images~ */
img {
border-radius: 35px 35px 35px 35px;
border-radius: 15px 15px 15px 15px;
}
img.img-responsive {
margin-bottom: 1rem;
border-radius: 35px 35px 35px 35px;
border-radius: 15px 15px 15px 15px;
}
img.shadow {
filter: drop-shadow(0 0 0.15rem #c6c9ca);
Expand Down
59 changes: 16 additions & 43 deletions tech.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,21 @@
<div>
<h1 class="special">Technical Writing Samples</h1>
</div>
<div class="row">
<div class="row">
<div class="col-sm-4">
<p>
<a href="samples/AMZN-alexa-extra.pdf">
<img
src="assets/AMZN-alexa-extra.png"
class="shadow img-responsive"
style="width: 100%"
alt="Alexa Extra page"
/>Alexa Extra
</a>
</p>
<legend>Alexa Extra pages feature tips or other additional information related to the lesson content. I created the artwork and wrote the content (Amazon Alexa Learning Lab). </legend>
</div>
<div class="row">
<div class="col-sm-4">
<p>
<a href="samples/ordering-process.pdf">
Expand Down Expand Up @@ -158,50 +172,9 @@ <h1 class="special">Technical Writing Samples</h1>
The original UML diagram at left shows the portion of the API ordering process during which a configured offer is selected and stored in a cart object. In the revised illustration <i>(right)</i>, I needed to show more detail in about the same amount of space. I also changed the finished image to match the UI color palette.
</legend>
</div>
<div class="col-sm-4">
<p>
<a href="assets/auth-before-after.png">
<img
src="assets/auth-before-after.png"
class="shadow img-responsive"
style="width: 100%"
alt="Image showing text converted into a technical illustration"
/>Implicit and Explicit Authorization</a
>
</p>
<legend>
The excerpt at left is from a white paper on the team
decision-making process. A numbered diagram works better
than table columns to show the sequential steps originally presented in tables.
</legend>
</div>
<div class="col-sm-4">
<p><a href="assets/api-snippets.png"> <img
src="assets/api-snippets.png"
class="shadow img-responsive"
style="width: 100%"
alt="UML diagram showing an API ordering workflow"/>API Documentation</a>
</p>
<legend>
Most of an API tech writer's day is spent documenting use cases, parameters, requests, responses, error messages, and so on. Nothing literary here. Just practical, to-the-point info that helps developers find answers quickly.
</legend>
</div>
</div>
</div>
<!--CONTAINER-4-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<p><a href="assets/icon-library.png"> <img
src="assets/icon-library.png"
class="shadow img-responsive"
style="width: 100%"
alt="Screenshot of an icon library on a company web page."/>Icon Library</a>
</p>
<legend>
Engineers are busy whipping up machine learning algorithms and optimizing persistent data structures. They have neither the time nor the patience to design Confluence pages, yet they want their work to get the attention it deserves. This icon library makes it a little easier for developers to create attractive Confluence documentation.
</legend>
</div>

<div id="footer"></div>
</body>
</html>

0 comments on commit e34e63a

Please sign in to comment.