-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
198 lines (179 loc) · 9.99 KB
/
index.html
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
190
191
192
193
194
195
196
197
198
<!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>Welcome | Airis Wang</title>
<link rel="stylesheet" href="styles/style.css">
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@1&family=Quicksand&display=swap" rel="stylesheet">
</head>
<body class="light-theme">
<header>
<nav>
<ul>
<li class="navlinks"><a href="#about">About</a></li>
<li class="navlinks"><a href="#skills">Skills</a></li>
<li class="navlinks"><a href="#portfolio">Portfolio</a></li>
<li class="navlinks"><a href="#contact">Contact</a></li>
</ul>
<input type="checkbox" id="switch" class="checkbox" />
<label for="switch" class="toggle">
<iconify-icon icon="humbleicons:sun" width="20" height="20"></iconify-icon>
<iconify-icon icon="akar-icons:moon-fill" width="20" height="20"></iconify-icon>
</label>
</nav>
</header>
<main>
<section class="container">
<h1>Airis Wang</h1>
<h2>Software Developer in NYC</h2>
</section>
<section id="about" class="container-element">
<div class="bio">
<h1>Airis <i>(eye • ris)</i></h1>
<p>Hi there!</p>
<div class="animation">👋</div>
<p>
My name is Airis, and I'm a software developer based in NYC with roots in Rio de Janeiro, Brazil.
While I hold a Bachelor of Science in Economics, my rediscovered passion for technology has led me
to pursue a career as a software developer. I am currently a full-stack developer in training at
Ada Developers Academy with a particular interest in iOS development. In my free time, you can
often find me strolling in the city or discovering new restaurants.
</p>
</div>
<img src="../assets/photo.jpeg" alt="Photo of myself" id="selfie">
</section>
<section id="skills" class="container-element">
<h1>Skills</h1>
<h2>Back-End Development</h2>
<ul>
<li>
<iconify-icon icon="akar-icons:python-fill" width="24" height="24"></iconify-icon>
<p>Python</p>
</li>
<li>
<iconify-icon icon="simple-icons:flask" width="24" height="24"></iconify-icon>
<p>Flask</p>
</li>
<li>
<iconify-icon icon="akar-icons:postgresql-fill" width="24" height="24"></iconify-icon>
<p>PostgreSQL</p>
</li>
<li>
<iconify-icon icon="devicon-plain:mysql" width="24" height="24"></iconify-icon>
<p>MySQL</p>
</li>
</ul>
<h2>Front-End Development</h2>
<ul>
<li>
<iconify-icon icon="simple-icons:javascript" width="24" height="24"></iconify-icon>
<p>JavaScript</p>
</li>
<li>
<iconify-icon icon="fontisto:react" width="24" height="24"></iconify-icon>
<p>React</p>
</li>
<li>
<iconify-icon icon="icomoon-free:html-five" width="24" height="24"></iconify-icon>
<p>HTML</p>
</li>
<li>
<iconify-icon icon="uiw:css3" width="24" height="24"></iconify-icon>
<p>CSS</p>
</li>
</ul>
<h2>Mobile Development</h2>
<ul>
<li>
<iconify-icon icon="simple-icons:swift" width="24" height="24"></iconify-icon>
<p>Swift</p>
</li>
<li>
<iconify-icon icon="simple-icons:firebase" width="24" height="24"></iconify-icon>
<p>Firebase</p>
</li>
</ul>
</section>
<section id="portfolio">
<h1>Portfolio</h1>
<div>
<article>
<h2>Task List</h2>
<img src="../assets/portfolio/task-list.png" alt="Task List UI" class="project-ui">
<p>
Designed a Task List app with a RESTful API built in Flask, integrated with a SQL database to ensure data persistance across uses, and deployed on Render. <br><br> The responsive front-end is built in React and provides an intuitive user interface with visual cues once tasks are completed. Users can create, organize, and manage tasks and goals effortlessly, and receive real-time notifications on Slack once tasks are completed.
<br><br>
<em>Technologies:</em> Python, Flask, PostgreSQL, REST API, Postman, Render
<br><br>
<b>Links:</b> <a href="https://airisw.github.io/task-list-front-end/">Live Version</a> | <a href="https://github.com/airisw/task-list-front-end">Front-end</a> | <a href="https://github.com/airisw/task-list-api">Back-end</a>
</p>
</article>
<article>
<h2>Weather Report</h2>
<img src="../assets/portfolio/weather-report.png" alt="Weather Report UI" class="project-ui">
<p>
Developed a front-end web application integrated with the OpenWeather API to fetch real-time weather data for different cities. Users can interact with the interface by changing the temperature, and adjudsting the sky and garden illustrations presented.
<br><br>
<em>Technologies:</em> HTML, CSS, JavaScript
<br><br>
<b>Links:</b> <a href="https://airisw.github.io/weather-report/">Live Version</a> | <a href="https://github.com/airisw/weather-report">GitHub</a>
</p>
</article>
<article>
<h2>PyWordle</h2>
<p>
A word puzzle game developed in Python, inspired by the Wordle game published by NYT, and using the Wonderwords library to generate random words. Originally developed using imperative programming techniques, this project was redesigned using OOP.
<br><br>
<em>Technology:</em> Python
<br><br>
<b>Link:</b> <a href="https://github.com/airisw/pywordle">GitHub</a>
</p>
</article>
<article>
<h2>Swap Meet</h2>
<p>
Implemented OOP principles to develop an app that enables users to exchange items by creating personalized inventories for swapping. The app allows filtering based on best condition and age of each item per category.
<br><br>
<em>Technology:</em> Python
<br><br>
<b>Link:</b> <a href="https://github.com/airisw/swap-meet">GitHub</a>
</p>
</article>
<article>
<h2>Viewing Party</h2>
<p>
This project aims to assist you in managing your personal movies database, as well those of your friends. It will leverage your friends' watched lists to recommend you new movies based on availability within your subscribed streaming services.
<br><br>
<em>Technology:</em> Python
<br><br>
<b>Link:</b> <a href="https://github.com/airisw/viewing-party">GitHub</a>
</p>
</article>
<article>
<h2>Adagrams</h2>
<p>
Word puzzle game inspired by the concept of anagrams similar to Scrabble. Players are given a random set of letters and score points with each word submission.
<br><br>
<em>Technology:</em> Python
<br><br>
<b>Link:</b> <a href="https://github.com/airisw/adagrams-py">GitHub</a>
</p>
</article>
</div>
</section>
<section id="contact">
<h1>Contact</h1>
<ul>
<li><a href="https://www.linkedin.com/in/airisw/"><iconify-icon icon="eva:linkedin-outline" width="24" height="24"></iconify-icon></a></li>
<li><a href="mailto:airiswang@hotmail.com"><iconify-icon icon="mdi:email-heart-outline" width="24" height="24"></iconify-icon></a></li>
<li><a href="https://github.com/airisw"><iconify-icon icon="mingcute:github-line" width="24" height="24"></iconify-icon></a></li>
</ul>
</section>
</main>
<footer>© 2023 Airis Wang</footer>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script src="/src/index.js"></script>
</body>
</html>