isond.github.io/translation-nation.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
<!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 - Translation Nation</title>

</head>

<body>

    <!-- <p class="h1 text-center" id="name_title">DIANNE ISON</p> -->
    <!-- <p class="h1 text-center" id="name_title"><a class="text-decoration-none text-reset" href="index.html">DIANNE ISON</a></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">Translation Nation</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>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="images/translation_nation/home.png" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="images/translation_nation/text_chat.png" class="d-block w-100" 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">
            <p><a class="info" target="_blank" href="https://codingcamels.firebaseapp.com">VISIT PROJECT</a></p>
            <p class="fs-3"><span class="fas fa-award"></span> Best UI/UX at AthenaHacks 2019</p>
        </div>

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

		<p class="h2 pt-4">Translation Nation</p>
		<p class="text-justify">Translation Nation is a web app for chatting that allows for users to speak or text in whatever language they want to, and be able to talk to someone else who may not speak the same language. A user who speaks English could communicate with their friend who speaks Spanish, and the app will output their speech and/or text in their preferred languages.</p>

		<p class="h2 pt-3">My Contribution</p>
		<p class="text-justify">I contributed on the Front-End of our web application. We utilized HTML, CSS, and Javascript as well as the Google Media Design Lite (MDL) Library. Since our web app was built on top of a chat API that used its own interface, we applied our own styles that would reflect the message of our project: "Speak volumes, beyond words". The overall theme of our UI was to represent characteristics of the globe to show that we are trying to break language barriers.</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>