redesign work/trilogy
This commit is contained in:
parent
ad55267aaa
commit
c616dfd5fd
11 changed files with 351 additions and 42 deletions
|
|
@ -1,15 +1,15 @@
|
|||
.button {
|
||||
background: #0060ff;
|
||||
color: white !important;
|
||||
color: white;
|
||||
width: max-content;
|
||||
font-size: clamp(1em,2vw,1em);
|
||||
padding: 0.75em;
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
border-radius: 100em;
|
||||
border-radius: 0.25em;
|
||||
font-weight: 700;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
@import "index/testimonials.scss";
|
||||
|
||||
@import "work/index.scss";
|
||||
@import "work/trilogy/index.scss";
|
||||
|
||||
@import "partials/site-header.scss";
|
||||
@import "partials/site-footer.scss";
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
.site-header {
|
||||
z-index: 10;
|
||||
a {text-decoration: none; color: inherit;}
|
||||
.container {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -9,22 +9,16 @@
|
|||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
.resume-link {
|
||||
height: 3em;
|
||||
background: #06f;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 1em;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
.timeline {
|
||||
position: relative;
|
||||
max-width: 60em;
|
||||
margin: 0 auto;
|
||||
&::before {
|
||||
content: 'TODAY';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 2.5em;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -58,11 +52,12 @@
|
|||
width: 2em;
|
||||
height: 2em;
|
||||
z-index: 1;
|
||||
left: -2.75em;
|
||||
left: -3em;
|
||||
border-width: 1em;
|
||||
border-color: #06f;
|
||||
border-radius: 100em;
|
||||
background-color: #06f;
|
||||
border: 0.25em solid #ddd;
|
||||
}
|
||||
&.worktrilogy::before {
|
||||
background: url("/icons/trilogy.png");
|
||||
|
|
@ -80,7 +75,15 @@
|
|||
&.workeqin::before {
|
||||
background: url("/icons/eqin.png");
|
||||
background-size: cover;
|
||||
box-shadow: 0px 0px 2px black;
|
||||
}
|
||||
&.workuab {
|
||||
&::before {
|
||||
background: url("/icons/uab.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
&__daterange {
|
||||
margin-left: 0em;
|
||||
|
|
@ -114,4 +117,51 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.cta {
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: start;
|
||||
}
|
||||
.title {
|
||||
font-size: 1.4em;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.4em;
|
||||
}
|
||||
.blurb {
|
||||
line-height: 1.4;
|
||||
margin-bottom: 1.4em;
|
||||
strong {
|
||||
font-weight: 700;
|
||||
background: hsl(120, 240, 80,);
|
||||
border-radius: 0.25em;
|
||||
padding: 0.25em;
|
||||
}
|
||||
}
|
||||
.buttons {
|
||||
margin-top: 1em;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
width: 100%;
|
||||
font-size: 1.25em;
|
||||
@media (min-width: 34em) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
width: unset;
|
||||
}
|
||||
gap: 1em;
|
||||
.button {
|
||||
justify-content: start;
|
||||
width: 100%;
|
||||
i {margin-right: 1em;}
|
||||
}
|
||||
}
|
||||
.email.button {
|
||||
|
||||
}
|
||||
.resume.button {
|
||||
background: white;
|
||||
border: 2px solid #06f;
|
||||
color: #06f;
|
||||
}
|
||||
}
|
||||
}
|
||||
191
assets/scss/work/trilogy/index.scss
Normal file
191
assets/scss/work/trilogy/index.scss
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
#trilogy {
|
||||
background: #002663;
|
||||
color: white;
|
||||
.page-header {
|
||||
.container {
|
||||
display: grid;
|
||||
@media (min-width: 51.75em) {
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
gap: 1em;
|
||||
justify-items: center;
|
||||
}
|
||||
}
|
||||
.page-title {
|
||||
color: white;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
font-size: 1.75em;
|
||||
text-align: center;
|
||||
@media (min-width: 51.75em) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.cover-image {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
.separator {
|
||||
width: 10em;
|
||||
height: 0.5em;
|
||||
border-radius: 100em;
|
||||
border: none;
|
||||
background: white;
|
||||
}
|
||||
#responsibilities {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
overflow: hidden;
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 2em;
|
||||
}
|
||||
.title {
|
||||
font-size: 2em;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
margin-bottom: 2em;
|
||||
margin-top: 3em;
|
||||
&::before {
|
||||
content: 'Responsibilities';
|
||||
position: absolute;
|
||||
top: -0.5em;
|
||||
left: -0.5em;
|
||||
font-size: 4em;
|
||||
font-weight: 900;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
section {
|
||||
width: 100%;
|
||||
max-width: 45em;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1.6em;
|
||||
font-weight: 700;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.blurb {
|
||||
line-height: 1.4;
|
||||
max-width: 45ch;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
#quick-learning {
|
||||
.subtitle {
|
||||
&:before {
|
||||
content: '01';
|
||||
position: absolute;
|
||||
top: -0.5em;
|
||||
left: -0.25em;
|
||||
font-size: 4em;
|
||||
font-weight: 900;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
#problem-solving {
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: end;
|
||||
.subtitle {
|
||||
&:before {
|
||||
content: '02';
|
||||
position: absolute;
|
||||
top: -0.5em;
|
||||
right: -0.25em;
|
||||
font-size: 4em;
|
||||
font-weight: 900;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
#writing-articles {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
.subtitle {
|
||||
&:before {
|
||||
content: '03';
|
||||
position: absolute;
|
||||
top: -0.5em;
|
||||
right: calc(50% - 1ch);
|
||||
font-size: 4em;
|
||||
font-weight: 900;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
#kba {
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
@media (min-width: 40em) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
section {
|
||||
background: white;
|
||||
color: black;
|
||||
height: 100%;
|
||||
padding: 1em;
|
||||
border-radius: 0.375em;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
&__title {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 2em;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
&__text {
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
#skb {
|
||||
text-align: right;
|
||||
.card__title {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: 'SKB';
|
||||
position: absolute;
|
||||
top: -0.5em;
|
||||
left: 0;
|
||||
font-size: 4em;
|
||||
font-weight: 900;
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
}
|
||||
#tkb {
|
||||
.card__title {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: 'TKB';
|
||||
position: absolute;
|
||||
top: -0.5em;
|
||||
right: 0;
|
||||
font-size: 4em;
|
||||
font-weight: 900;
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
}
|
||||
#tnc {
|
||||
.subtitle {
|
||||
&:before {
|
||||
content: '04';
|
||||
position: absolute;
|
||||
top: -0.5em;
|
||||
right: 0;
|
||||
font-size: 4em;
|
||||
font-weight: 900;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
61
content/work/trilogy/index.html
Normal file
61
content/work/trilogy/index.html
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
title: "Senior Technical Writer at Trilogy"
|
||||
summary: "Managing knowledge bases for numerous products owned by Trilogy."
|
||||
author: "Abdullah Tarawneh"
|
||||
date: "2021-05-16"
|
||||
start: "May 2021"
|
||||
end: "current"
|
||||
at: "Trilogy"
|
||||
position: "Senior Technical Writer / Product Knowledge Curator"
|
||||
tags: ["technical writing", "senior role", "customer support", "product knowledge", "knowledge base", "curator", "curation"]
|
||||
category: "Work"
|
||||
cover: "/images/trilogy.png"
|
||||
---
|
||||
|
||||
<main id="trilogy">
|
||||
<header class="page-header section">
|
||||
<div class="container">
|
||||
<img src="/images/trilogy.png" alt="" class="cover-image">
|
||||
<h1 class="page-title">I managed the knowledge bases for numerous enterprise applications owned by a company and its many subsidiaries.</h1>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<hr class="separator">
|
||||
<section id="responsibilities" class="section">
|
||||
<div class="container">
|
||||
<h2 class="title">I had several responsibilities.</h2>
|
||||
<section id="quick-learning">
|
||||
<h3 class="subtitle">Being a quick learner.</h3>
|
||||
<p class="blurb">Being responsible for several products under the banner of Central Support meant that I had to quickly and rapidly learn new products with limited information.</p>
|
||||
</section>
|
||||
<section id="problem-solving">
|
||||
<h3 class="subtitle">Analyzing real problems from real customers.</h3>
|
||||
<p class="blurb">I was tasked with reading customer support tickets one by one, in order to document the problems and solutions faced by actual customers.</p>
|
||||
</section>
|
||||
<section id="writing-articles">
|
||||
<h3 class="subtitle">Writing clear and concise articles.</h3>
|
||||
<p class="blurb">After reading each ticket, I would have to write two different types of articles:</p>
|
||||
</section>
|
||||
<div class="kba-types" id="kba">
|
||||
<section class="card" id="skb">
|
||||
<h4 class="card__title">Solution Articles</h4>
|
||||
<p class="card__text">Solution articles are written to deal with a unique problem-solution pair. These articles contain an overview of the problem and its diagnosed symptoms, as well as the documented solution.</p>
|
||||
</section>
|
||||
<section class="card" id="tkb">
|
||||
<h4 class="card__title">Troubleshooting Articles</h4>
|
||||
<p class="card__text">Troubleshooting articles are based on troubleshooting steps within tickets that have the same symptoms, but multiple different possible solutions. These articles contain a flowchart with various steps.</p>
|
||||
</section>
|
||||
</div>
|
||||
<section id="tnc">
|
||||
<h3 class="subtitle">Training and certifying support agents.</h3>
|
||||
<p class="blurb">Based on the amassed product knowledge within the articles written throughout the above process, I would create training units within a learning management system, consisting of either a test or a task based on each article/ticket pair.</p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
---
|
||||
title: "Senior Technical Writer at Trilogy"
|
||||
summary: "Managing knowledge bases for numerous products owned by Trilogy."
|
||||
author: "Abdullah Tarawneh"
|
||||
date: "2021-05-16"
|
||||
start: "May 2021"
|
||||
end: "current"
|
||||
at: "Trilogy"
|
||||
position: "Senior Technical Writer / Product Knowledge Curator"
|
||||
tags: ["technical writing", "senior role", "customer support", "product knowledge", "knowledge base", "curator", "curation"]
|
||||
category: "Work"
|
||||
cover: "/images/trilogy.png"
|
||||
---
|
||||
|
||||
## Responsibilities
|
||||
|
||||
- Quickly and rapidly learning new products with limited information.
|
||||
- Reading customer support tickets to document the problems and solutions faced by actual customers.
|
||||
- Writing solution KB articles based on each problem-solution pair.
|
||||
- Writing troubleshooting KB articles based on troubleshooting steps within tickets that have the same symptoms but multiple different solutions.
|
||||
13
content/work/uab/index.md
Normal file
13
content/work/uab/index.md
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
title: ""
|
||||
summary: "B.S. Biomedical Engineering<br>B.S. Computer Science<br>Minor, Mathematics<br>Science and Technology Honors Program"
|
||||
author: "Abdullah Tarawneh"
|
||||
date: "2018-12-15"
|
||||
start: ""
|
||||
end: "Fall 2018"
|
||||
at: "UAB"
|
||||
position: "Graduated from The University of Alabama at Birmingham"
|
||||
tags: []
|
||||
category: "Work"
|
||||
cover: ""
|
||||
---
|
||||
|
|
@ -1,12 +1,11 @@
|
|||
{{ define "main" }}
|
||||
<main id="work">
|
||||
<header class="section page-header">
|
||||
<header class="page-header section">
|
||||
<div class="container">
|
||||
<h1 class="page-title">{{ .Title }}</h1>
|
||||
<a href="https://resume.abdullahtarawneh.com" class="resume-link">One-page Resume (HTML)</a>
|
||||
<h1 class="page-title">here's a timeline of the work i've done.</h1>
|
||||
</div>
|
||||
</header>
|
||||
<section class="section timeline">
|
||||
<section class="timeline section">
|
||||
<div class="container">
|
||||
{{ range .Pages }}
|
||||
<article class="timeline-item {{ .Permalink | relURL | anchorize }}">
|
||||
|
|
@ -21,5 +20,15 @@
|
|||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
<section class="cta section">
|
||||
<div class="container">
|
||||
<h1 class="title">wanna hire me?</h1>
|
||||
<p class="blurb">i'm currently <strong>available</strong> for work. let's get in touch.</p>
|
||||
<div class="buttons">
|
||||
<a href="mailto:a@trwnh.com" class="email button"><i class="fa fa-envelope"></i> email me</a>
|
||||
<a href="https://resume.abdullahtarawneh.com" class="resume button"><i class="fa fa-id-card-o"></i> Résume (HTML)</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{ end }}
|
||||
3
layouts/work/single.html
Normal file
3
layouts/work/single.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{{ define "main" }}
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
BIN
static/icons/uab.png
Normal file
BIN
static/icons/uab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Loading…
Reference in a new issue