yojieun.github.io/about.html at master · yojieun/yojieun.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Portfolio | Amy Joe</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Font Awesome -->
        <script src="https://kit.fontawesome.com/c7b75ba2d6.js" crossorigin="anonymous"></script>

    <!-- Custom Styles -->
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/style.css">
    </head>

<body>
<!-- Nav bar -->
    <nav class="navbar">
        <div class="container">
            <a href="index.html" id="logo"><img src="images/AJ-logo-green.png" alt="personal logo"></a>

            <ul id="menu">
                <li><a href="project.html">Work</a></li>
                <li><a class="active" href="about.html">About</a></li>
                <li><a href="mailto:amyjoe.design@gmail.com">Contact</a></li>
            </ul>

            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>

<script>
    var hamburger = document.querySelectorAll('.hamburger')[0];
    var menu = document.querySelectorAll('#menu')[0];

    hamburger.addEventListener('click', function() {
        hamburger.classList.toggle('open');
        menu.classList.toggle('open');
});

/* When the event 'click' is initiated, it is set to toggle the hamburger 'open' and menu 'open' classes. */
</script>


<!-- Main Section -->
    <header class="about-hero">
        <div class="container container-grid">
            <div>
                <h1>About Me</h1>
                <p id="intro">Hi, I’m Amy Joe, a UX Designer based in Chicago with a background in graphic design and eCommerce marketing technologies.</p>
            </div>
            <div> </div>
            <div>
                <img src="images/AmyJoe.png" alt="Amy Joe picture">
            </div>
        </div>
    </header>

    <div class="container container-small">
        <main class="about">
            <article class="article-about1">
                <h3 id="about-header">Where I started</h3>
                    <p>Ever since I was young, I had a creative bug in me. I found so much joy in handcrafting, and it led me to pursue an art degree. In art school, I was exposed to all types of mediums and ways of creative expression. During the early years, I had the chance to shadow a graphic designer from Herman Miller. I fell in love with the creative expression used to set a tone, clarity and draw in an audience. It opened my eyes to the world of design, and set my future path.</p>
                <br>
                    <p>I worked as a Graphic Designer for 10+ years. The first half of my career was in the education industry, starting my journey as a production artist and then a graphic designer. Then finally closing that chapter as a Design and Marketing Technology Manager. I was in charge of designing landing pages, programming customizable templates, and managing the implementation process of portal sites to ensure a successful launch. I met with stakeholders and created project workflows, set timelines for research, ideation, testing and launch. With each project, I had to be the voice of the users, ensuring that they remain as the center focus, along with efficient design solutions.</p>
            </article>
            <article class="article-about2">
                <h3 id="about-header">Career Shift</h3>
                    <p>It was the spring of 2018, and I was in a client meeting going over a landing page design they put together. We were at a disagreement on the design. It was not very user-friendly, and especially not fitting for their users, who were an older demographic. </p>
            </article>
        </main>
    </div>
       <div class="aha-box">
            <article class="container container-small">
                <div class="aha-text">
                    <p><strong>This was my aha! moment.</strong> I came to a realization that I was already immersed in user experience, and I wanted to dive in deeper and pursue a career focused more on user-centered design.</p>
                </div>
            </article>
       </div>
        <div class="container container-small">
            <main class="about about-2">
                <article class="article-about2">
                    <p>A career shift journey began as I realized that I want to be a problem solver that lets the voice and needs of the users be heard. So after many months of wrestling with that thought, I decided to take the giant leap. It was a scary leap that came with a lot of doubts and uncertainty, to make a career shift in my mid-30s. But what gave me strength was the support of my family. I didn’t want to look back at my career and regret not going after my passion. I wanted to be an example to my daughters that you should strive to pursue what you love, and that it’s never too late.</p>
                </article>
                   <a class="cta" href="https://drive.google.com/open?id=11clijkZZ8c6h3yhmRaGKQr72PRXEASXM" target="_blank">View Resume</a>
            </main>
        </div>

<!--FOOTER BELOW-->
    <footer>
    <h4 id="connect">Let's Connect</h4>
       <ul class="footer-grid">
        <li>
            <a href="mailto:amyjoe.design@gmail.com">
                <i class="fa fa-envelope" aria-hidden="true"></i>
            </a>
           </li>
        <li>
           <a href="https://dribbble.com/yojieun" target="_blank">
                <i class="fa fa-dribbble" aria-hidden="true"></i>
            </a>
           </li>
        <li>
           <a href="https://github.com/yojieun" target="_blank">
                <i class="fa fa-github" aria-hidden="true"></i>
            </a>
           </li>
        <li>
           <a href="www.linkedin.com/in/amyjoe" target="_blank">
                    <i class="fa fa-linkedin-square" aria-hidden="true"></i>
                </a>
           </li>
        </ul>
        <div class="divider">
        </div>
        <p>©2020 Coded &amp; Designed by Amy Joe</p>
    </footer>
</body>
</html>