-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
184 lines (183 loc) · 10.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Showcasing Ian Sosa's expertise in web development with a focus on clean, responsive design using HTML, CSS, and JavaScript. Explore a curated portfolio of projects that demonstrate a passion for coding, creativity, and user-centered design.">
<title>Ian Sosa | Web development and tech support</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header>
<div id="topNavbar">
<img src="img/logo_ian_header.svg" alt="Ian Sosa's logo">
<button class="icon" onclick="openNavbarDrawer()" aria-label="Toggle navigation links">
<svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 -960 960 960" width="1rem" fill="#121212" aria-hidden="true">
<path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
</svg>
</button>
</div>
<div id="navbarLinks">
<a href="javascript:goTo('top')">Home</a>
<a href="javascript:goTo('projectsContainer')">Projects</a>
<a href="javascript:void(0)" aria-disabled="true">Blog</a>
<a href="javascript:goTo('contactContainer')">Contact</a>
</div>
</header>
<main>
<div id="heroContainer">
<div>
<h1 translate="no">Ian Sosa</h1>
<h2>Frontend Web Developer</h2>
<h2>UX/UI designer</h2>
<h2>Tech support</h2>
</div>
</div>
<div id="aboutContainer">
<div id="aboutImgContainer">
<img src="https://avatars.githubusercontent.com/u/58917248?v=4" alt="Picture of Ian Sosa" height="250px" width="250px">
</div>
<h2 id="aboutTitle">ABOUT ME</h2>
<p id="aboutDescription">I am a determined and methodic person seeking my first formal role in IT. While honing my socio-emotional skills at Forge Foundation, I actively pursue personal projects to enhance my coding abilities. Additionally, l have augmented my skill set with UX/UI Design proficiency gained at Coderhouse, making me a valuable asset to any frontend development team.</p>
</div>
<div id="projectsContainer">
<h2>Projects</h2>
<div id="projectsFilterContainer">
<button id="projectsFilterPrevious" aria-label="Previous projects list filters" disabled>
<svg xmlns="http://www.w3.org/2000/svg" height="2rem" viewBox="0 -960 960 960" width="2rem" fill="#121212" aria-hidden="true">
<path d="M576-240 336-480l240-240 51 51-189 189 189 189-51 51Z"/>
</svg>
</button>
<ul id="projectsFilter">
<li>
<button class="htmlcss" onclick="filterProjects('htmlcss')">HTML-CSS only</button>
</li>
<li>
<button class="js" onclick="filterProjects('js')">Javascript</button>
</li>
<li>
<button class="react" onclick="filterProjects('react')">React</button>
</li>
<li>
<button class="uxui" onclick="filterProjects('uxui')">UX/UI Design</button>
</li>
</ul>
<button id="projectsFilterNext" aria-label="Next projects list filters" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" height="2rem" viewBox="0 -960 960 960" width="2rem" fill="#121212" aria-hidden="true">
<path d="M522-480 333-669l51-51 240 240-240 240-51-51 189-189Z"/>
</svg>
</button>
</div>
<div id="projectsListContainer">
<button id="projectsListPrevious" aria-label="Previous projects" disabled>
<svg xmlns="http://www.w3.org/2000/svg" height="2rem" viewBox="0 -960 960 960" width="2rem" fill="#121212" aria-hidden="true">
<path d="M576-240 336-480l240-240 51 51-189 189 189 189-51 51Z"/>
</svg>
</button>
<ul id="projectsList">
<li class="react">
<img src="https://placehold.co/192x224@2x?text=React" height="224px" width="212px" alt="React E-commerce project image">
<h3>React E-commerce</h3>
<p>Recreating the JavaScript e-commerce site in React using Vite, I learned how to manage states, contexts, and routes, using Firebase as a database.</p>
<div>
<a href="https://sosaian.github.io/Coderhouse-ReactJs-Proyecto-Final/" target="_blank">
<img src="img/icon_demo_project.svg" alt="Play demo icon" aria-hidden="true">
Demo
</a>
<a href="https://github.com/sosaian/Coderhouse-ReactJs-Proyecto-Final" target="_blank">
<img src="img/logo_github_project.svg" alt="Github logo" aria-hidden="true">
Code
</a>
</div>
</li>
<li class="js">
<img src="https://placehold.co/192x224@2x?text=JS" height="224px" width="212px" alt="Javascript E-commerce project image">
<h3>Javascript E-commerce</h3>
<p>Building this e-commerce site solely with JavaScript, I learned how to use AJAX, import libraries and manage products from a JSON file.</p>
<div>
<a href="https://sosaian.github.io/Coderhouse-Javascript-Proyecto-Final/" target="_blank">
<img src="img/icon_demo_project.svg" alt="Play demo icon" aria-hidden="true">
Demo
</a>
<a href="https://github.com/sosaian/Coderhouse-Javascript-Proyecto-Final" target="_blank">
<img src="img/logo_github_project.svg" alt="Github logo" aria-hidden="true">
Code
</a>
</li>
<li class="js">
<img src="https://placehold.co/192x224@2x?text=JS" height="224px" width="212px" alt="My portfolio project image">
<h3>My portfolio</h3>
<p>If you want to see the code of this whole website, click the link down below!</p>
<div>
<a href="https://github.com/sosaian/sosaian" target="_blank">
<img src="img/logo_github_project.svg" alt="Github logo" aria-hidden="true">
Code
</a>
</li>
<li class="uxui">
<img src="https://placehold.co/192x224@2x?text=UX-UI" height="224px" width="212px" alt="UX/UI Report project image">
<h3>UX/UI Report<br>Mobile app</h3>
<p>UX report created as the final project for a course, where I documented the entire research and design process of a mobile application for gamers.</p>
<div>
<a href="https://www.canva.com/design/DAF7DFTPxOk/5G6SBQi1tg8Yok6W1sWVZg/edit?utm_content=DAF7DFTPxOk&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton" target="_blank">
<img src="img/icon_demo_project.svg" alt="Play demo icon" aria-hidden="true">
Watch UX report
</a>
</div>
</li>
<li class="htmlcss">
<img src="https://placehold.co/192x224@2x?text=HTML" height="224px" width="212px" alt="HTML and CSS only Recipe Book project image">
<h3>HTML-CSS only Recipe Book</h3>
<p>With this project, I learned to maximize the utility of HTML and CSS by intentionally avoiding the use of JavaScript to create this recipe book.</p>
<div>
<a href="https://sosaian.github.io/odin-recipes/" target="_blank">
<img src="img/icon_demo_project.svg" alt="Play demo icon" aria-hidden="true">
Demo
</a>
<a href="https://github.com/sosaian/odin-recipes" target="_blank">
<img src="img/logo_github_project.svg" alt="Github logo" aria-hidden="true">
Code
</a>
</div>
</li>
</ul>
<button id="projectsListNext" aria-label="Next projects">
<svg xmlns="http://www.w3.org/2000/svg" height="2rem" viewBox="0 -960 960 960" width="2rem" fill="#121212" aria-hidden="true">
<path d="M522-480 333-669l51-51 240 240-240 240-51-51 189-189Z"/>
</svg>
</button>
</div>
</div>
</main>
<footer id="contactContainer">
<h2>Got any project you want to create? Let's talk!</h2>
<ul>
<li>
<a href="mailTo:[email protected]">
<img src="img/icon_email_contact.svg" alt="Email icon logo" aria-hidden="true">
Email - [email protected]
</a>
</li>
<li>
<a href="https://linkedin.com/in/sosaian" target="_blank">
<img src="img/logo_linkedin_contact.svg" alt="LinkedIn logo" aria-hidden="true">
LinkedIn - in/sosaian
</a>
</li>
<li>
<a href="https://x.com/sosaian_dev" target="_blank">
<img src="img/logo_x_contact.svg" alt="Twitter a.k.a. X logo" aria-hidden="true">
Twitter / 𝕏 - @sosaian_dev
</a>
</li>
<li>
<a href="https://github.com/sosaian" target="_blank">
<img src="img/logo_github_contact.svg" alt="Github logo" aria-hidden="true">
Github - sosaian
</a>
</li>
</ul>
</footer>
<script src="./main.js"></script>
</body>
</html>