CodingStunts.github.io/naturely.html at main · CodingStunts/CodingStunts.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
<!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.0" />
    <title>Naturely.</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="sub-frame">
      <img id="background-img" src="Media/Photos/background-image.jpg" />
      <div class="see-through-background"></div>
      <section class="project-page">
        <a href="index.html">
          <img
            src="Media/Photos/logos-icons/back-arrow.png"
            class="back-icon"
          />
        </a>
        <div class="app-text">
          <h1>Naturely.</h1>
          <br />
          <p>
            A fully functional React Native full stack mobile application, using
            a Firebase back-end including Firebase authenication and storage.
            This was part of our Northcoders team project phase. The premise
            behind this app was a social media and photo sharing app
            specifically for wildlife and nature. The USP of this was that it is
            map based, so you can see where posts have been made with ease and
            then go out with hopes of seeing similar picturesque spots. It
            allows posting with photos, topic tags, geo-tags and descriptions.
            You can also comment on users posts, filter posts, add new topics,
            view profiles, and look around on map view. To see the project for
            yourself click
            <a href="https://github.com/CodingStunts/naturely" target="_blank"
              >here!</a
            >
          </p>
        </div>
        <section class="screenshots">
          <div class="single-screenshot">
            <img src="Media/Photos/React Native/Naturely/Landing-page.jpg" />
            <h4>Initial landing page.</h4>
          </div>
          <div class="single-screenshot">
            <img src="Media/Photos/React Native/Naturely/Register-page.jpg" />
            <h4>Register an account.</h4>
          </div>
          <div class="single-screenshot">
            <img src="Media/Photos/React Native/Naturely/Log-in.jpg" />
            <h4>Login existing account.</h4>
          </div>
          <div class="single-screenshot">
            <img src="Media/Photos/React Native/Naturely/Home-page-posts.jpg" />
            <h4>Home page and current posts.</h4>
          </div>
          <div class="single-screenshot">
            <img src="Media/Photos/React Native/Naturely/Map-view-posts.jpg" />
            <h4>Map view posts.</h4>
          </div>
          <div class="single-screenshot">
            <img src="Media/Photos/React Native/Naturely/Make-post.jpg" />
            <h4>Posting new content.</h4>
          </div>
          <div class="single-screenshot">
            <img src="Media/Photos/React Native/Naturely/Profile-page.jpg" />
            <h4>Your profile.</h4>
          </div>
          <div class="single-screenshot">
            <img src="Media/Photos/React Native/Naturely/Loading-page.jpg" />
            <h4>Loading page.</h4>
          </div>
        </section>
      </section>
      <div class="see-through-background"></div>
    </div>
  </body>
</html>