UX-UI-Portfolio/index.html at main · kobbyDaUXer/UX-UI-Portfolio · 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <!-- GOOGLE Fonts -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Poppins:wght@300&display=swap" rel="stylesheet">

  <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Fontawesome   -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.1.0/css/all.css">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="css/style.css">

  <title>ElliottKobby UX Portfolio</title>

  <!-- Smartsupp Live Chat script -->
<script type="text/javascript">
var _smartsupp = _smartsupp || {};
_smartsupp.key = '0c01f272d6b35c2078cbdf8ccd6be241390ab0b3';
window.smartsupp||(function(d) {
  var s,c,o=smartsupp=function(){ o._.push(arguments)};o._=[];
  s=d.getElementsByTagName('script')[0];c=d.createElement('script');
  c.type='text/javascript';c.charset='utf-8';c.async=true;
  c.src='https://www.smartsuppchat.com/loader.js?';s.parentNode.insertBefore(c,s);
})(document);
</script>

</head>

<body>
  <section id="hero_page">
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="index.html">衣开诶<span>UX/UI Designer</span></a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="mywork.html">Projects</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="aboutme.html">About Me</a>
            </li>

            <!-- <li class="nav-item">
                  <a class="nav-link" href="#">Contact Me</a>
                </li> -->
          </ul>
        </div>
      </div>

    </nav>

    <!-- Navbar Starts here -->
    <!-- Navbar ends here -->


    <!-- Heropage info starts here -->
    <div class="container-fluid">
      <div class="hero-page">
        <div class="row">
          <div class=" col-lg-6 col-md-12">
            <h1>
              Hi there, <br>
              I'm Elliott Kobby <br>
              I Design User Experience <br>
              and Code.
            </h1>
            <p>I'm a self-taught Digital Product Designer based in Accra, Ghana, with experience in delivering end-to-end UX/UI
              design for software products. I'm passionate about improving the lives of others through connecting
              business goals to customer motivations and creating good outcomes for business while solving the needs of
              the customers through design thinking and am constantly looking to learn new things everyday.</p>

            <div class="social-media">
              <a href="https://www.linkedin.com/in/elliott-kobby-awayiga/" target="_blank"><i class="hero-icons fab fa-linkedin"
                  aria-hidden="true"></i></a>

              <a href="https://twitter.com/KobbyDaUXer" target="_blank"><i class="hero-icons fab fa-twitter" aria-hidden="true"></i></a>

              <a class="footer-email" href="mailto:eawayiga@gmail.com" target="_blank"><i class="hero-icons fa fa-envelope"
                aria-hidden="true"></i></a>

              <!-- <i class="hero-icons fab fa-medium" aria-hidden="true"></i> -->
            </div>
            <div style="display:flex; justify-content: center;" class="center">
              <div class="child" style="width: 767.98px">

                <a href="mywork.html">
                  <button class="hero_button btn btn-dark btn-lg" type="button">View My Projects</button>
                </a>
                <a href="Document/CV of Elliott Kobby Awayiga (UX designer).pdf" download><button
                    class="download-btn btn btn-outline-dark btn-lg" type="button">Download CV</button></a>
              </div>
            </div>
          </div>

          <div class="col-lg-6 col-md-6">
            <!-- hero_img -->
            <div class="hero-img">
              <img src="images/ux_folio_illustration@3x 1@3x-min.png"
                alt="Elliott in a working environment" srcset="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Heropage info ends here -->

  </section>

  <section id="brands">
    <img src="images/brands/logo.png" alt="" srcset="">
    <img src="images/brands/download-removebg-preview.png" alt="" srcset="">
    <img src="images/brands/unnamed.png" alt="" srcset="">
  </section>

  <!-- Cases section starts here -->
  <section class="case-studies">
    <div class="container-fluid">
      <div>
        <h2>Recent Projects</h2>
        <p>Here are some of the case studies of projects I have worked on recently</p>
      </div>

        <div class="row">
          <div class="col-lg-6">
            <div class="case-card">
              <img class="card-img-top" src="images/dalex case/dalex high fi.jpg" alt="">
              <div class="card-body">
                <h3>Delex Finance</h3>
                <h5 class="card-title">Mobile App Redesign</h5>
                <p class="card-text">Dalex Swift is an innovative investment product that allows you to invest from your mobile phone.</p>
                <a href="dalexmobileapp.html"><button class="case-btn case1-btn btn btn-primary" type="button">Read Case study</button></a>
              </div>
          </div>
          </div>

          <div class="col-lg-6">
            <div class="case-card">
              <img class="card-img-top" src="images/bettycase/highfi.jpg" alt="">
              <div class="card-body">
                <h3>Bettybingo</h3>
              <h5 class="card-title">Mobile App Redesign</h5>
              <p class="card-text">Betty is a community of fun loving bingo, slots and online gaming enthusiasts.</p>
                <a href="bettybingoapp.html"><button class="case-btn cases-btn btn btn-primary" type="button">Read Case study</button></a>
              </div>
          </div>
          </div>
        </div>
      </div>
      </div>

    </section>

  <!-- testimonials starts here -->
  <section id="testimonials">
    <div id="testimonials-carousel" class="carousel slide" data-ride="false">
      <div class="carousel-inner">
        <div class="carousel-item active" data-interval="10000">
          <h3>"He possess the ultimate can do attitude while taking on all tasks with a positive energy. His upbeat and
            engaging personality enables him to interact effectively with clients and staff."</h3>
          <img class="testimonial-img" src="images/testimonial images/may.png" alt="" srcset="">
          <em class="company">Mabel Arthur,</em>
          <em class="company">Customer Support Supervisor, </em>
          <em class="company"><small>Bettybingo</small></em>
        </div>
        <div class="carousel-item" data-interval="2000">
          <h3>"Elliott always try to find the best possible solution to a customer's problem within the shortest possible time.
          He is dedicated to his work and always want things done as fast as possible."</h3>
          <img class="testimonial-img" src="images/testimonial images/joe.png" alt="" srcset="">
          <em class="company">Joseph Sam</em>
          <em class="company">Engineering Lead </em>
          <em class="company"><small>Bettybingo</small></em>
        </div>

        <div class="carousel-item">
          <h3>"I mentored Elliott when he contacted me to learn web development and I can say he is a fast learner and a hard worker. Always want to help find solutions"</h3>
          <img class="testimonial-img" src="images/testimonial images/charles.jpeg" alt=""
            srcset="">
          <em class="company">Charles Kwabena Obeng</em>
          <em class="company">Frontend Developer</em>
          <em class="company"><small>Bloom Impact P.B.C</small></em>
        </div>
      </div>
      <a class="carousel-control-prev" href="#testimonials-carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#testimonials-carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

  </section>

  <!-- Services section starts here -->


  <!-- Footer starts here -->
  <section id="footer">
    <footer>
      <div>
        <h2>Like what you see? <br> View my <a
            href="Document/CV of Elliott Kobby Awayiga (UX designer).pdf" target="_blank"
            download><span>resume</span></a>, follow or <br>
          contact me below</h2>
        <div class="footer-icons">
          <a href="https://www.linkedin.com/in/elliott-kobby-awayiga/" target="_blank"><i
              class="footer-icons fab fa-linkedin" aria-hidden="true"></i></a>

          <a href="https://twitter.com/KobbyDaUXer" target="_blank"><i class="footer-icons fab fa-twitter"
              aria-hidden="true"></i></a>

          <!-- <i class="footer-icons fab fa-medium" target="_blank" aria-hidden="true"></i> -->

          <a class="footer-email" href="mailto:eawayiga@gmail.com"><i class="footer-icons fa fa-envelope"
              aria-hidden="true"></i></a>
        </div>

      </div>
      <div class="footer-claim">
        <p>Designed and Handcoded by Elliott</p>
        <p>Copyright &copy; 2020</p>
      </div>

    </footer>

  </section>
   <!-- ============jquery================ -->
   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

   <!-- ============propper js================ -->
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

   <!-- ============bootstrap js================ -->
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <!-- ============fontawesome js================ -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.1.0/js/all.js"></script>

 <!-- ============Custom js================ -->
</body>

</html>