nmtrang.com/archive.html at master · nmtrang29/nmtrang.com · 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
<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Trang :_)</title>
    <meta name="description" content=":——————)">
    <link  href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

  </head>

  <body>

    <div class="container-fluid">

      <!-- nav-->
      <div class="nav row-sm-12">
        <div class="col-sm-12 col-md-3">
          <h1>Trang Minh Nguyen</h1>
        </div>
        <div class="col-sm-12 col-md-8">
          <span><a href="index.html">Home</a></span>
          <span><a href="resume.html">Resumé</a></span>
          <span><a target="_blank" href="https://nmtrang29.github.io/">Blog ✿</a></span>
          <span><a href="archive.html">Archive</a></span>
        </div>
      </div>

      <!-- wip -->
      <div class="archivework">
        <p>Selected work: 2016—2017</p>
        <p>
          2017, Creative Coding<br>
          Audio-reactive posters for <a target="_blank" href="https://www.residentadvisor.net/record-label.aspx?id=13325">Midlight Records</a><br>
          Static posters by <a target="_blank" href="https://studionaam.com/">Studio Naam</a>
        </p>
        <div class="col-sm-12">
        <img class="col-lg-4 col-md-8 col-xs-12" src="assets/archivework/midlight/midlight-1.gif">
        <img class="col-lg-4 col-md-8 col-xs-12" src="assets/archivework/midlight/midlight-2.gif">
        <img class="col-lg-4 col-md-8 col-xs-12" src="assets/archivework/midlight/midlight-3.gif">
        <img class="col-lg-4 col-md-8 col-xs-12" src="assets/archivework/midlight/midlight-4-0.gif">
        <img class="col-lg-4 col-md-8 col-xs-12" src="assets/archivework/midlight/midlight-5.gif">
        <img class="col-lg-4 col-md-8 col-xs-12" src="assets/archivework/midlight/midlight-6.gif">
        </div>
      </div>

      <div class="archivework">
        <p>
          2017, Illustration<br>
          Side project, French encaustic tiles I grew up with<br>
        </p>
        <div class="col-sm-12">
        <img class="col-lg-8 col-md-10 col-xs-12" src="assets/archivework/tile/tile.gif">
        </div>
      </div>

      <div class="archivework">
        <p>
          2017, Poster Design<br>
          Poster made for Poke's beer pong event<br>
        </p>
        <div class="col-sm-12">
        <img class="col-lg-8 col-md-10 col-xs-12" src="assets/archivework/pokeposter/pokeposter.png">
        </div>
      </div>

      <div class="archivework">
        <p>
          2016, UI Design<br>
          View in Context feature for <a target="_blank" href="https://arthit.com/">Arthit.com</a><br>
        </p>
        <div class="col-sm-12">
        <img class="col-lg-8 col-md-8 col-xs-12" src="assets/archivework/arthit/arthit-1.png">
        <img class="col-lg-8 col-md-8 col-xs-12" src="assets/archivework/arthit/arthit-2.png">
        <img class="col-lg-8 col-md-8 col-xs-12" src="assets/archivework/arthit/arthit-3.gif">
        </div>
      </div>

      <div class="archivework">
        <p>
          2017, Research, UX and UI Design<br>
          View in Context feature for Nestlé. Work made at <a target="_blank" href="https://pokelondon.com/">Poke</a><br>
          <br>
          Documentation:<br>
          <a target="_blank" href="https://medium.com/@nmtrang29/nestl%C3%A9-hydration-calculator-01-brief-user-research-9a3928b92446">Nestlé Hydration Calculator 01: Brief, Competitive Research and Data</a><br>
          <a target="_blank" href="https://medium.com/@nmtrang29/nestl%C3%A9-hydration-calculator-02-wireframe-early-user-test-dc99206abc20">Nestlé Hydration Calculator 02: Wireframe & Early User Test</a><br>
          <a target="_blank" href="https://medium.com/@nmtrang29/nestl%C3%A9-hydration-calculator-03-nailing-the-visual-design-c312ed234b80">Nestlé Hydration Calculator 03: Nailing the Visual Design</a><br>
          <a target="_blank" href="https://medium.com/@nmtrang29/nestl%C3%A9-hydration-calculator-04-final-user-testing-cb23d068feb4">Nestlé Hydration Calculator 04: Final User Testing</a><br>
          <a target="_blank" href="https://medium.com/@nmtrang29/infographic-lets-get-started-c60b7c3913c1">Nestlé Infographic</a>
        </p>
        <div class="col-sm-12">
        <img class="col-lg-8 col-md-8 col-xs-12" src="assets/archivework/nestle/nestle-ui-1.jpg">
        <img class="col-lg-8 col-md-8 col-xs-12" src="assets/archivework/nestle/nestle-ui-2.jpg">
        <img class="col-lg-8 col-md-8 col-xs-12" src="assets/archivework/nestle/nestle_ux-2.jpg">
        <img class="col-lg-8 col-md-8 col-xs-12" src="assets/archivework/nestle/nestle_ux-5.jpg">
        <img class="col-lg-8 col-md-8 col-xs-12" src="assets/archivework/nestle/nestle_ux-7.png">
        <img class="col-lg-8 col-md-8 col-xs-12" src="assets/archivework/nestle/nestle-icon-1.png">
        <img class="col-lg-8 col-md-8 col-xs-12" src="assets/archivework/nestle/nestle-icon-2.png">
        <img class="col-lg-8 col-md-8 col-xs-12" src="assets/archivework/nestle/nestle-infographic.png">
        </div>
      </div>

    </div>
    <!-- /.container -->

    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  </body>

</html>