isond.github.io/icon-recycle.html at main · isond/isond.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
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Dianne Ison">
    <meta name="description" content="My portfolio displaying personal and class projects.">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- create new icon -->
    <!-- <link rel="shortcut icon" href="images/glasses-favicon.png" /> -->

    <!-- styles -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="styles/style.css" type="text/css">

    <!-- fonts -->
    <link href="https://fonts.googleapis.com/css?family=Old+Standard+TT&display=swap" rel="stylesheet">

    <!-- icons -->
    <script src="https://kit.fontawesome.com/c4f8fb0e09.js" crossorigin="anonymous"></script>

    <title>Dianne's Portfolio - IConRecycle</title>

</head>

<body>

    <p class="h1 text-center" id="name_title"><a class="custom-link" href="index.html">DIANNE ISON</a></p>

    <hr class="mx-auto">

    <!-- navigation bar -->
    <nav class="navbar navbar-expand-md mx-auto">
        <div class="container">
            <button class="navbar-toggler custom-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-center text-center" id="navbarNav">
                <div class="navbar-nav" id="navbar-content">
                    <a class="navi" href="index.html">PORTFOLIO</a>
                    <a class="navi" href="about.html">ABOUT</a>
                </div>
            </div>
        </div>
    </nav>

    <hr class="mx-auto">

    <!-- breadcrumbs -->
	<div class="container custom-container">
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb " style="background-color: #ffffff;">
			  <li class="breadcrumb-item"><a href="index.html">PORTFOLIO</a></li>
			  <li class="breadcrumb-item active" aria-current="page">IConRecycle</li>
			</ol>
		</nav>
	</div>

    <!-- actual contents -->
    <div class="container custom-container">
        <div class="ratio ratio-16x9">
            <iframe src="https://www.youtube.com/embed/Mfp62VVW6f4" title="YouTube video" allowfullscreen></iframe>
        </div>

        <div class="project text-center mt-5">
            <p><a class="info" target="_blank" href="https://devpost.com/software/iconrecycle">VISIT PROJECT</a></p>
            <p class="fs-3"><span class="fas fa-award"></span> Best Use of Google Cloud at AthenaHacks 2020</p>
            <p class="fs-3"><span class="fas fa-award"></span> Best Mobile Hack at AthenaHacks 2020</p>
        </div>

        <hr class="mx-auto mt-5 custom-hr">

		<p class="h2 pt-4">IConRecycle</p>
		<p class="text-justify">IConRecycle was created to help people learn more about the recycling icons
            on their trash, so that they could make well-informed decisions on their recycling.
            The icons are all meant to advise people on how to dispose of the objects that they’re printed on,
            and this mobile app will give users an easy interface to look up these images. Users will open the app,
            take a picture of the icon, and the app will identify the icon and return an infographic
            on what the icon means and how the product can be properly disposed of.</p>

		<p class="h2 pt-3">My Contribution</p>
		<p class="text-justify">I worked on creating the loading screen which displays a recycling logo animation.
            This would then lead to a modal screen that I created. This modal screen allows the user to approve
            whether or not the identified recycling icon is correct. Both of these proved to be somewhat challenging
            since it was my first time working making on a React Native app. However, I pulled through in designing
            and coding pages that I am proud of.</p>

        <p class="h2 pt-3">Technologies Used</p>
        <ul>
            <li>Google Cloud Translation API</li>
            <li>Google Firebase</li>
            <li>JavaScript</li>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
	</div>

    <!-- footer -->
    <footer class="footer mt-5 py-3 text-center">
        <div class="container">
            <span class="text-muted">isond ✤ 2020</span>
        </div>
    </footer>


    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


</body>

</html>