Portfolio/portfolio.html at master · Nikki-Rees/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
<!DOCTYPE html>
<html lang="en-au">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Full stack developer portfolio of work">
  <meta name="keywords" content="HTML, CSS, Responsive, Portfolio">
  <meta name="author" content="Nikki Rees">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <!--CSS links-->
  <link rel="stylesheet" type="text/css" href="assets/CSS/reset.css">
  <link href="https://fonts.googleapis.com/css2?family=Karla&family=Lexend+Mega&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <script src="https://use.fontawesome.com/5c89b5b77a.js"></script>
  <link rel="stylesheet" type="text/css" href="Assets/CSS/style.css">

  <title>Portfolio - Nikki Rees</title>

</head>

<body>
  <div class="backgroud-image">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="index.html">Nikki Rees</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
        aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="portfolio.html">Portfolio</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact</a>
          </li>
        </ul>
        <span class="navbar-text">
          Web Design & Development
        </span>
      </div>
    </nav>

    <main class="container">

      <div class="row row-cols-1 row-cols-md-3">
        <div class="col mb-4">
          <div class="card">
            <img src="Assets/mymvp.png" class="card-img-top" alt="Screenshot of basketball stat search app"
              tabindex="0">
            <div class="card-body" tabindex="0">
              <h5 class="card-title">My MVP</h5>
              <p class="card-text">Using 3rd party APIs, our end-user to search their favourite NBA player to see the
                latest season stats as well as a career highlights video and display GIFs.</p>
              <i class="fa fa-github" aria-hidden="true"> <a href="https://github.com/Nikki-Rees/MyMVP">
                  nikki-rees/MyMVP</a></i>
              <button type="button" class="btn btn-primary btn-lg btn-block" id="viewMVP"
                href="https://nikki-rees.github.io/MyMVP/">View My MVP</button>
            </div>
          </div>
        </div>

        <div class="col mb-4">
          <div class="card">
            <img src="Assets/weatherdashboard.png" class="card-img-top"
              alt="screenshot of a working weather dashboard showing five day forecast" tabindex="0">
            <div class="card-body" tabindex="0">
              <h5 class="card-title">Weather Dashboard</h5>
              <p class="card-text">A weather dashboard that allows the user to search cities to see the current weather
                and a 5 day forecast. This application will run in the browser and feature dynamically updated HTML and
                CSS.</p>
              <i class="fa fa-github" aria-hidden="true"> <a href="https://github.com/Nikki-Rees/weather_dashboard/">
                  nikki-rees/weather_dashboard</a></i>
              <button type="button" class="btn btn-primary btn-lg btn-block" id="viewWeatherDashboard"
                href="https://nikki-rees.github.io/weather_dashboard/">View Weather Dashboard</button>
            </div>
          </div>
        </div>

        <div class="col mb-4">
          <div class="card">
            <img src="Assets/planner.png" class="card-img-top"
              alt="Screenshot of a day planner that color coes depending on time" tabindex="0">
            <div class="card-body" tabindex="0">
              <h5 class="card-title">Responsive day planner</h5>
              <p class="card-text">This was an assignment to create a simple calendar application that allows the user
                to save events for each hour of the day, with dynamic colour coding dependant on the time.</p>
              <i class="fa fa-github" aria-hidden="true"> <a href="https://github.com/Nikki-Rees/planner/">
                  nikki-rees/planner</a></i>
              <button type="button" class="btn btn-primary btn-lg btn-block" id="viewPlanner"
                href="https://nikki-rees.github.io/planner/">View application</button>
            </div>
          </div>
        </div>

        <div class="col mb-4">
          <div class="card">
            <img src="Assets/tinystepsimg.png" class="card-img-top" alt="calming landscape landing page of Tiny Steps"
              tabindex="0">
            <div class="card-body" tabindex="0">
              <h5 class="card-title">Tiny Steps AU</h5>
              <p class="card-text">An app which helps users develop a healthy habit by maintaining motivation and sending reminders.</p>
              <p class="card-text"> Select a pre-defined healthy habit or enter your own personal habit you want to develop and check-in when the habit is completed.</p>
              <i class="fa fa-github" aria-hidden="true"> <a href="https://github.com/Nikki-Rees/tinystepsau"> nikkirees/tinystepsau</a></i>
                <button type="button" class="btn btn-primary btn-lg btn-block" id="viewTinySteps"
                href="https://tinystepsau.herokuapp.com">View application</button>
              </div>
          </div>
        </div>

        <div class="col mb-4">
          <div class="card">
            <img src="Assets/notetaker.png" class="card-img-top" alt="note taking app screenshot"
              tabindex="0">
            <div class="card-body" tabindex="0">
              <h5 class="card-title">Note taker app</h5>
              <p class="card-text">An app which allows the user to create, save and delete notes.</p>
              <i class="fa fa-github" aria-hidden="true"><a href="https://github.com/Nikki-Rees/notetakerapp"> nikkirees/notetakerapp</a></i>
                <button type="button" class="btn btn-primary btn-lg btn-block" id="viewNoteTaker"
                href="https://secret-basin-76195.herokuapp.com/notes">View application</button>
          </div>
          </div>
        </div>

        <div class="col mb-4">
          <div class="card">
            <img src="Assets/CLIapp.png" class="card-img-top" alt="CLI Interface"
              tabindex="0">
            <div class="card-body" tabindex="0">
              <h5 class="card-title">Employee Manager CLI app</h5>
              <p class="card-text">An app which allows the user to search, view, update and delete employees.</p>
              <i class="fa fa-github" aria-hidden="true"> <a href="https://github.com/Nikki-Rees/employeemanager">nikkirees/employeemanager</a></i>
                <button type="button" class="btn btn-primary btn-lg btn-block" id="viewEmployeeManager"
                href="https://drive.google.com/file/d/1hUU4k8isVT59pv1Qlb1dumb1UipCM95b/view">View application</button>
              </div>
          </div>
        </div>

        <div class="col mb-6">
          <div class="card">
            <img src="Assets/book-stack-me-challenge-1.jpg" class="card-img-top" alt="stack of books" tabindex="0">
            <div class="card-body" tabindex="0">
              <h5 class="card-title">Share your stack</h5>
              <p class="card-text">COMING SOON</p>
            </div>
          </div>
        </div>

        <div class="col mb-6">
          <div class="card">
            <img src="Assets/What-Is-Responsive-Web-Design-Blog-min.jpg" class="card-img-top"
              alt="computar showing responsive web design" tabindex="0">
            <div class="card-body" tabindex="0">
              <h5 class="card-title">Responsive web portfolio</h5>
              <p class="card-text">COMING SOON</p>
            </div>
          </div>
        </div>
      </div>

    </main>
  </div>

  <footer class="footer">
    <a class="footer-nav" href="index.html">About</a>
    <a class="footer-nav" href="portfolio.html">Portfolio</a>
    <a class="footer-nav" href="contact.html">Contact</a>
  </footer>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>
  <script src="script.js"></script>

</body>

</html>