forked from bloominstituteoftechnology/Preprocessing-I
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
245 lines (227 loc) · 14.1 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
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Maryam Mosstoufi | Resume</title>
<link rel="shortcut icon" href="media/favicon.png" />
<!-- Fonts -->
<script src="https://kit.fontawesome.com/d10a7d406c.js" crossorigin="anonymous"></script>
<!-- Styles -->
<link rel="stylesheet" href="css/index.css">
<!-- Scripts -->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<a href="#intro" class="logo">
<div class="mm-logo">
<span class="mm-bar-one"></span>
<span class="mm-bar-two"></span>
<span class="mm-bar-three"></span>
</div>
<div class="name">Maryam Mosstoufi</div>
</a>
<nav id="top-nav" class="top-nav">
<a class="top-nav-link" href="#skills">Skills</a>
<a class="top-nav-link" href="#about">About</a>
<a class="top-nav-link" href="#education-experience">Education & Experience</a>
<a class="top-nav-link" href="#portfolio">Portfolio</a>
<a class="top-nav-link" href="#contact">Contact</a>
</nav>
</header>
<div id="dot-nav" class="dot-nav">
<a class="dot-nav-link dot-nav-active" href="#intro"><i class="far fa-circle"></i><i class="fas fa-circle"></i></a>
<a class="dot-nav-link" href="#skills"><i class="far fa-circle"></i><i class="fas fa-circle"></i></a>
<a class="dot-nav-link" href="#about"><i class="far fa-circle"></i><i class="fas fa-circle"></i></a>
<a class="dot-nav-link" href="#education-experience"><i class="far fa-circle"></i><i class="fas fa-circle"></i></a>
<a class="dot-nav-link" href="#portfolio"><i class="far fa-circle"></i><i class="fas fa-circle"></i></a>
<a class="dot-nav-link" href="#contact"><i class="far fa-circle"></i><i class="fas fa-circle"></i></a>
</div>
<section id="intro" class="intro">
<img src="media/maryam.svg">
<div>
<h1>Maryam Mosstoufi</h1>
<h2>Branding . Design . UI/UX . Development
</div>
</section>
<section id="skills" class="skills">
<div class="icons">
<img src="media/icons/Adobe_Illustrator_CC_icon.svg" width="200px" height="200px">
<img src="media/icons/Adobe_InDesign_CC_icon.svg" width="200px" height="200px">
<img src="media/icons/Adobe_Photoshop_CC_icon.svg" width="200px" height="200px">
<img src="media/icons/Adobe_Systems_logo_and_wordmark.svg" width="200px" height="200px">
<img src="media/icons/Airtable_Logo.svg" width="200px" height="200px">
<img src="media/icons/Asana_logo.svg" width="200px" height="200px">
<img src="media/icons/CSS3_logo_and_wordmark.svg" width="200px" height="200px">
<img src="media/icons/Google_Docs_logo.svg" width="200px" height="200px">
<img src="media/icons/google-sheets-seeklogo.com.svg" width="200px" height="200px">
<img src="media/icons/HTML5_logo_and_wordmark.svg"width="200px" height="200px">
<img src="media/icons/jira-1.svg" width="200px" height="200px">
<img src="media/icons/Keynote-icon.png" width="200px" height="200px">
<img src="media/icons/LESS_Logo.svg" width="200px" height="200px">
<img src="media/icons/logo_brand_brands_logos_google_slides-512.png" width="200px" height="200px">
<img src="media/icons/Microsoft_Office_Excel_(2018–present).svg" width="200px" height="200px">
<img src="media/icons/PowerPoint_hi-res_icon_(2019).svg" width="200px" height="200px">
<img src="media/icons/React-icon.svg" width="200px" height="200px">
<img src="media/icons/Sass_Logo_Color.svg" width="200px" height="200px">
<img src="media/icons/Sketch_Logo.svg" width="200px" height="200px">
<img src="media/icons/Trello-logo-blue.svg" width="200px" height="200px">
<img src="media/icons/Unofficial_JavaScript_logo_2.svg" width="200px" height="200px">
<img src="media/icons/Vue.js_Logo_2.svg" width="200px" height="200px">
<img src="media/icons/Word_hi-res_icon_(2019).svg" width="200px" height="200px">
<img src="media/icons/Zapier_logo.svg" width="200px" height="200px">
</div>
<div class="content">
<h2>Core Competencies</h2>
<ul>
<li><i class="fas fa-minus"></i>Full Life Cycle Product Development and Management<i class="fas fa-minus"></i></li>
<li><i class="fas fa-minus"></i>User Experience, Design, and Creative Direction<i class="fas fa-minus"></i></li>
<li><i class="fas fa-minus"></i>Product Specifications and Requirements<i class="fas fa-minus"></i></li>
<li><i class="fas fa-minus"></i>Product Plans, Positioning, Roadmaps, and Growth Strategies <i class="fas fa-minus"></i></li>
<li><i class="fas fa-minus"></i>Market Research, Industry, and Competitive Analysis<i class="fas fa-minus"></i></li>
<li><i class="fas fa-minus"></i>Databases, Applications, Storage, and Cloud Solutions<i class="fas fa-minus"></i></li>
<li><i class="fas fa-minus"></i>Software Development Lifecycle<i class="fas fa-minus"></i></li>
<li><i class="fas fa-minus"></i>Content Management Systems<i class="fas fa-minus"></i></li>
<li><i class="fas fa-minus"></i>Metrics, KPIs, and Insights<i class="fas fa-minus"></i></li>
<li><i class="fas fa-minus"></i>Testing and Development<i class="fas fa-minus"></i></li>
<li><i class="fas fa-minus"></i>Business Process Automation and Optimization<i class="fas fa-minus"></i></li>
<li><i class="fas fa-minus"></i>Front-End Development<i class="fas fa-minus"></i></li>
<li><i class="fas fa-minus"></i>Graphic Design & Branding<i class="fas fa-minus"></i></li>
<li><i class="fas fa-minus"></i>Agile Methodologies<i class="fas fa-minus"></i></li>
<li><i class="fas fa-minus"></i>Strategic Planning and Project Management<i class="fas fa-minus"></i></li>
<li><i class="fas fa-minus"></i>Coaching, Mentoring, and Team Building<i class="fas fa-minus"></i></li>
</ul>
</div>
</section>
<section id="about" class="about">
<p>
Transformational product manager with in-depth experience managing and designing innovative technology solutions across a broad range of products and services. Demonstrated expertise in all aspects of full life cycle product development including product requirements, research, analytics, project scope, planning, direction, and growth strategies. Proficient in front-end development, content management systems, UI/UX, branding, and graphic design. Dynamic communicator who builds strong relationships and consistently exceeds objectives while serving as a trusted and valued business partner. Highly skilled in creating creative solutions while holding trust, loyalty and product excellence at core of the organization.
</p>
</section>
<section id="education-experience" class="education-experience">
<div class="education">
<h2>Education</h2>
<ul>
<li>
<h4>Lambda School</h3>
<div>Full Stack Web Development </div>
</li>
<li>
<h4>Bachelor of Arts, Fashion and Retail Merchandising</h4><span>, summa cum laude </span></br>
<div>The Art Institute of Washington | Arlington, VA</div>
</li>
<li>
<h4>Associate Degree, Computer Science</h4>
<div>Shahid Beheshti University | Tehran, Iran</div>
</li>
</ul>
</div>
<div class="experience">
<h2>Experience</h2>
<ul>
<li>
<h4>Product Manager | ZOOXOOS Inc.</h4>
<div>Kensington, MD | 2012-2018</div>
<p>
Led all product management initiatives, identifying and managing high-judgment decisions between features and speed to market. Oversaw product planning, expansion, strategies, and roadmaps. Defined products and new features. Maintained backlogs for product enhancements and new features. Oversaw wireframing, UI/UX, user personas/stories and testing.
Key Contributions and Accomplishments:<br><br>
<i class="fal fa-minus"></i> Proactively added three to six new features on a monthly basis.<br>
<i class="fal fa-minus"></i> Increased user base by 65% after creating creative marketing materials and events..<br>
<i class="fal fa-minus"></i> Substantially improved user engagement by enhancing UX and product efficiency..<br>
<i class="fal fa-minus"></i> Built revolutionary tools including a content management system, website builder, and content marketplace..<br>
</p>
</li>
<li>
<h4>Earlier Professional Experiences</h3><br><br>
<p><i class="fal fa-plus"></i> Product Strategist | Zaroma Co.</p><br>
<p><i class="fal fa-plus"></i> Marketing Consultant | Dry Green’em</p><br>
<p><i class="fal fa-plus"></i> Creative Director | Arasteh Co.</p><br><br>
</li>
</ul>
</div>
</section>
<section id="portfolio" class="portfolio">
<video autoplay="autoplay" loop="loop" muted="muted" playsinline>
<source src="media/portfolio.mp4" type="video/mp4">
</video>
<div>
<a href="https://lambda-portfolio.netlify.app/" target="_blank">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 200 100" style="enable-background:new 0 0 200 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<path class="st0" d="M71.56,57.38H69.5v3.94h2.06c1.56,0,2.3-0.74,2.3-1.97C73.86,58.12,73.12,57.38,71.56,57.38z"/>
<path class="st0" d="M121.31,57.21c-2.09,0-3.77,1.58-3.77,4.2s1.68,4.2,3.77,4.2s3.77-1.58,3.77-4.2S123.4,57.21,121.31,57.21z"/>
<path class="st0" d="M52.29,57.21c-2.09,0-3.77,1.58-3.77,4.2s1.68,4.2,3.77,4.2c2.09,0,3.77-1.58,3.77-4.2
S54.38,57.21,52.29,57.21z"/>
<path class="st0" d="M33.38,57.38h-2.06v3.94h2.06c1.56,0,2.3-0.74,2.3-1.97C35.68,58.12,34.94,57.38,33.38,57.38z"/>
<path class="st0" d="M164.87,57.21c-2.09,0-3.77,1.58-3.77,4.2s1.68,4.2,3.77,4.2s3.77-1.58,3.77-4.2S166.96,57.21,164.87,57.21z"
/>
<path class="st0" d="M0,0v100h200V0H0z M113.58,29.81h3.1l3.65,5.97l3.55-5.97H127l0.03,11.2h-3.44l-0.03-5.11l-2.43,4.1h-1.66
l-2.43-3.92v4.93h-3.44V29.81z M78.88,29.81h9.11v2.85h-5.39v1.31h4.74v2.72h-4.74v1.47h5.6v2.85h-9.32V29.81z M73.28,29.81h3.78
v11.2h-3.78V29.81z M63.79,29.81l2.67,6.55l2.74-6.55h3.71l-4.74,11.2h-3.71l-4.74-11.2H63.79z M33.74,65.68h-2.42v4.13h-5.66
v-16.8h8.09c4.68,0,7.66,2.45,7.66,6.34S38.42,65.68,33.74,65.68z M52.29,70.19c-5.47,0-9.48-3.7-9.48-8.78
c0-5.09,4.01-8.79,9.48-8.79c5.47,0,9.48,3.7,9.48,8.79C61.77,66.5,57.76,70.19,52.29,70.19z M73.89,69.81l-2.86-4.22H69.5v4.22
h-5.66v-16.8h8.09c4.68,0,7.66,2.45,7.66,6.34c0,2.42-1.15,4.25-3.17,5.28l3.53,5.18H73.89z M95.7,57.4h-4.92v12.41h-5.66V57.4
H80.2v-4.39H95.7V57.4z M92.32,41.01l-3.59-11.2h3.89l1.95,6.37l2.06-6.37h3.47l1.95,6.45l2.06-6.45h3.59l-3.59,11.2h-4.05
l-1.81-5.99l-1.9,5.99H92.32z M110.82,57.28h-7.99v2.88h7.01v4.27h-7.01v5.38h-5.66v-16.8h13.66V57.28z M121.31,70.19
c-5.47,0-9.48-3.7-9.48-8.78c0-5.09,4.01-8.79,9.48-8.79s9.48,3.7,9.48,8.79C130.79,66.5,126.78,70.19,121.31,70.19z M127.5,29.81
h3.99l2.29,3.87l2.3-3.87h3.65l-4.22,7.14v4.07h-3.78V36.9L127.5,29.81z M146.1,69.81h-13.25v-16.8h5.66v12.41h7.58V69.81z
M153.33,69.81h-5.66v-16.8h5.66V69.81z M164.87,70.19c-5.47,0-9.48-3.7-9.48-8.78c0-5.09,4.01-8.79,9.48-8.79s9.48,3.7,9.48,8.79
C174.35,66.5,170.34,70.19,164.87,70.19z"/>
</g>
</svg>
</a>
</div>
</section>
<footer id="contact" class="contact">
<div class="title">Contact</div>
<div class="content">
<h3>Get In Touch!</h3>
<div class="info">
<div>
<div><i class="far fa-user"></i>Maryam Mosstoufi</div>
<div><i class="far fa-phone-alt"></i>(240) 899 7556</div>
<div><i class="far fa-at"></i>[email protected]</div>
<div><i class="far fa-map-marker"></i>Washington D.C. Metro Area</div>
<div class="download"><i class="far fa-file-download"></i> Resume</div>
</div>
<form action="">
<input type="text" id="name" name="name" placeholder="Name" autocomplete="off" required>
<input type="email" id="email" name="email" placeholder="Email" autocomplete="off" required>
<input type="tel" id="phone" name="phone" placeholder="Phone Number (optional)"autocomplete="off">
<textarea id="message" rows="4" cols="50" placeholder="Message..." autocomplete="off" required></textarea>
<input class="button" type="submit" value="Submit">
</form>
</div>
<div class="social">
<a href="https://www.linkedin.com/in/maryammosstoufi/" target="_blank"><i class="fab fa-linkedin"></i></a>
<a href="https://github.com/MaryamMosstoufi" target="_blank"><i class="fab fa-github-square"></i></a>
<a href="#"><i class="fab fa-twitter-square" target="_blank"></i></a>
<a href="#"><i class="fab fa-dribbble-square" target="_blank"></i></a>
<a href="#"><i class="fab fa-behance-square" target="_blank"></i></a>
</div>
</div>
</footer>
<div class="copyright">© Maryam Mosstoufi 2020</div>
<a class="to-top" href="#intro"><i class="fas fa-chevron-square-up"></i></a>
</div>
<script>
// Add active class to dot-nav-link on click
var dotNav = document.getElementById("dot-nav");
var dotNavLink = dotNav.getElementsByClassName("dot-nav-link");
for (var i = 0; i < dotNavLink.length; i++) {
dotNavLink[i].addEventListener("click", function() {
var current = document.getElementsByClassName("dot-nav-active");
current[0].className = current[0].className.replace(" dot-nav-active", "");
this.className += " dot-nav-active";
});
}
</script>
</body>
</html>