redesign work/trilogy
This commit is contained in:
parent
ad55267aaa
commit
c616dfd5fd
|
|
@ -1,15 +1,15 @@
|
||||||
.button {
|
.button {
|
||||||
background: #0060ff;
|
background: #0060ff;
|
||||||
color: white !important;
|
color: white;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
font-size: clamp(1em,2vw,1em);
|
font-size: clamp(1em,2vw,1em);
|
||||||
padding: 0.75em;
|
padding: 1em;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-radius: 100em;
|
border-radius: 0.25em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@
|
||||||
@import "index/testimonials.scss";
|
@import "index/testimonials.scss";
|
||||||
|
|
||||||
@import "work/index.scss";
|
@import "work/index.scss";
|
||||||
|
@import "work/trilogy/index.scss";
|
||||||
|
|
||||||
@import "partials/site-header.scss";
|
@import "partials/site-header.scss";
|
||||||
@import "partials/site-footer.scss";
|
@import "partials/site-footer.scss";
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
.site-header {
|
.site-header {
|
||||||
|
z-index: 10;
|
||||||
a {text-decoration: none; color: inherit;}
|
a {text-decoration: none; color: inherit;}
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -9,22 +9,16 @@
|
||||||
margin-bottom: 1em;
|
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 {
|
.timeline {
|
||||||
position: relative;
|
position: relative;
|
||||||
max-width: 60em;
|
max-width: 60em;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
&::before {
|
||||||
|
content: 'TODAY';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 2.5em;
|
||||||
|
}
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -58,11 +52,12 @@
|
||||||
width: 2em;
|
width: 2em;
|
||||||
height: 2em;
|
height: 2em;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
left: -2.75em;
|
left: -3em;
|
||||||
border-width: 1em;
|
border-width: 1em;
|
||||||
border-color: #06f;
|
border-color: #06f;
|
||||||
border-radius: 100em;
|
border-radius: 100em;
|
||||||
background-color: #06f;
|
background-color: #06f;
|
||||||
|
border: 0.25em solid #ddd;
|
||||||
}
|
}
|
||||||
&.worktrilogy::before {
|
&.worktrilogy::before {
|
||||||
background: url("/icons/trilogy.png");
|
background: url("/icons/trilogy.png");
|
||||||
|
|
@ -80,7 +75,15 @@
|
||||||
&.workeqin::before {
|
&.workeqin::before {
|
||||||
background: url("/icons/eqin.png");
|
background: url("/icons/eqin.png");
|
||||||
background-size: cover;
|
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 {
|
&__daterange {
|
||||||
margin-left: 0em;
|
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" }}
|
{{ define "main" }}
|
||||||
<main id="work">
|
<main id="work">
|
||||||
<header class="section page-header">
|
<header class="page-header section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="page-title">{{ .Title }}</h1>
|
<h1 class="page-title">here's a timeline of the work i've done.</h1>
|
||||||
<a href="https://resume.abdullahtarawneh.com" class="resume-link">One-page Resume (HTML)</a>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<section class="section timeline">
|
<section class="timeline section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
{{ range .Pages }}
|
{{ range .Pages }}
|
||||||
<article class="timeline-item {{ .Permalink | relURL | anchorize }}">
|
<article class="timeline-item {{ .Permalink | relURL | anchorize }}">
|
||||||
|
|
@ -21,5 +20,15 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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>
|
</main>
|
||||||
{{ end }}
|
{{ 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