isond.github.io/ileaf-ilearn.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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!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">
    <!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> -->

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

    <title>Dianne's Portfolio - iLeaf-iLearn</title>

</head>

<body>

    <!-- <p class="h1 text-center" id="name_title">DIANNE ISON</p> -->
    <p class="h1 text-center" id="name_title"><a class="custom-link" href="index.html">DIANNE ISON</a></p>
    <!-- text-reset inherits the color from its parent -->
    <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">iLeaf-iLearn</li>
			</ol>
		</nav>
	</div>

	<!-- actual contents -->
	<div class="container custom-container">
        <div id="carouselExampleIndicators" class="carousel carousel-dark slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="images/ileaf_ilearn/home.png" class="d-block w-100 img-fluid" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="images/ileaf_ilearn/completed_terrarium_01.png" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="images/ileaf_ilearn/completed_terrarium_02.png" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="images/ileaf_ilearn/summary.png" data-bs-toggle="modal" data-bs-target="#modal4" class="d-block w-100 img-fluid" alt="...">
                </div>
            </div>

            <!-- carousel controls -->
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>

        <div class="project text-center mt-5">
            <a class="info" target="_blank" href="https://ileaf-ilearn.appspot.com/">VISIT PROJECT</a>
        </div>

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

		<p class="h2 pt-4">iLeaf-iLearn</p>
		<p class="text-justify">Our hack teaches basic sustainability through a quiz-style web app. Our target audience is elementary to middle school students. We realize sustainability is not taught enough at schools, so we made it our goal to have users at least learn one new thing. Learning is being done at every step; after every question, an explanation for the correct answer pops up.</p>

		<p class="h2 pt-3">My Contribution</p>
		<p class="text-justify">For this project, I worked on creating some of the modal dialogue boxes that would notify the user of their correct answer from the quiz. I also worked on a component that represented the user's progression through the quiz. This was done using Angular. Additionally, I worked on the styles of the website mainly using CSS/Angular.</p>

        <p class="h2 pt-3">Technologies Used</p>
        <ul>
            <li>Angular.js</li>
            <li>Node.js</li>
            <li>HTML</li>
            <li>CSS</li>
            <li>p5</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>