-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
220 lines (171 loc) · 10.2 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
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" id="dark-mode-general-link"><link type="text/css" rel="stylesheet" id="dark-mode-custom-link"><style type="text/css" id="dark-mode-custom-style"></style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elián Magni's Profile Page</title>
<!-- Bootstrap-Core-CSS -->
<link rel="stylesheet" href="./bundles/css/bootstrap.css">
<!-- Style-CSS -->
<link rel="stylesheet" href="./bundles/css/style.css" type="text/css" media="all">
<!-- Font-Awesome-Icons-CSS -->
<link rel="stylesheet" href="./bundles/css/font-awesome.css">
<!-- //Custom-Files -->
<!-- Web-Fonts -->
<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
<!-- //Web-Fonts -->
<!-- favicon -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="./bundles/images/favicon.ico" type="image/x-icon">
<!-- GitHub Calendar -->
<!-- Library -->
<script
src="https://unpkg.com/github-calendar@latest/dist/github-calendar.min.js">
</script>
<!-- CSS -->
<link rel="stylesheet" href="./bundles/css/github-calendar.css"/>
<link rel="stylesheet" href="./bundles/css/progress-bar.css"/>
</head>
<body>
<!-- Progress bar indicator -->
<div class="scroll-indicator"></div>
<div id="page" class="page">
<div class="main-top py-1 bg bg2" style="outline: none; cursor: inherit;">
<!-- header -->
<header>
<div class="container-fluid px-lg-4">
<nav class="py-4">
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop">
<ul class="menu mt-md-3">
<li class="active"><a href="index.html" style="outline: none; cursor: inherit;">Home</a></li>
<li><a href="#about" class="scroll" style="outline: none; cursor: inherit;">About me & CV</a></li>
<li><a href="#skills-tools" class="scroll" style="outline: none; cursor: inherit;">Skills & Tools</a></li>
<li><a href="#projects" class="scroll" style="outline: none; cursor: inherit;">Projects</a></li>
<li><a href="#contact" class="scroll" style="outline: none; cursor: inherit;">Contact me</a></li>
</ul>
</nav>
</div>
</header>
<!-- banner -->
<div class="main-w3pvt">
<div class="container-fluid">
<div class="row">
<div class="style-banner">
<h1 class="text-white editContent" style="outline: none; cursor: inherit;">Hello, my name is Elián Magni</h1>
<p class="mt-5 text-white editContent" style="outline: none; cursor: inherit;">I'm a Fullstack RoR Developer based in Argentina.</p>
<a href="#about" class="btn button-style mt-sm-5 mt-4 scroll mr-2" style="outline: none; cursor: inherit;">About me</a>
</div>
</div>
</div>
</div>
<!-- //banner -->
</div>
</div>
</section>
<!-- about me-->
<section class="about-me text-center" id="about" style="outline: none; cursor: inherit;">
<h1 class="about-title py-1">About me</h1>
<div class="about-me-wrapper d-flex mb-1 pb-2">
<img class="about-me-pic" src="./bundles/images/profilepic.jpeg" alt="profilepic">
<div style="align-self: center;">
<p class="about-me-description px-3">My name is Elián Magni. I'm a Fullstack Ruby on Rails Developer based in Argentina. I like to learn new things and I'm thrilled by new challenges.</p>
<p class="about-me-description px-3">After taking Java lessons by myself for a couple months, I decided to attend Le Wagon's Buenos Aires Coding Bootcamp. I have been working part-time as a developer since then, and I am now looking forward to continue a full-time career change into software development.
I am pursuing a CS degree.
I also like music (I play a couple instruments as a hobby), photography and being outdoors.</p>
</div>
<div class="cv-link">
<a target="#" href="https://drive.google.com/file/d/1Pz1ffOttdeI0frBmn66lHbirH4TVfJ93/view?usp=sharing">Download my CV</a>
</div>
</div>
</section>
<!-- skills & tools -->
<section class="skills-tools text-center" id="skills-tools">
<div class="container">
<h1 class="skills-title pb-3">Skills & tools</h1>
<div class="tech-icons-container d-flex">
<img class="tech-icon" src="./bundles/images/techIcons/ruby.svg" alt="" data-toggle="tooltip" data-placement="top" title="Ruby">
<img class="tech-icon" src="./bundles/images/techIcons/rails.svg" alt="" data-toggle="tooltip" data-placement="top" title="Ruby on Rails">
<img class="tech-icon" src="./bundles/images/techIcons/html.svg" alt="" data-toggle="tooltip" data-placement="top" title="HTML5">
<img class="tech-icon" src="./bundles/images/techIcons/javascript.svg" alt="" data-toggle="tooltip" data-placement="top" title="Javascript">
<img class="tech-icon" src="./bundles/images/techIcons/css.svg" alt="" data-toggle="tooltip" data-placement="top" title="CSS">
<img class="tech-icon" src="./bundles/images/techIcons/sass.svg" alt="" data-toggle="tooltip" data-placement="top" title="SASS">
<img class="tech-icon" src="./bundles/images/techIcons/postgresql.svg" alt="" data-toggle="tooltip" data-placement="top" title="PostgreSQL">
<img class="tech-icon" src="./bundles/images/techIcons/node-js.svg" alt="" data-toggle="tooltip" data-placement="top" title="Node-js">
<img class="tech-icon" src="./bundles/images/techIcons/git.svg" alt="" data-toggle="tooltip" data-placement="top" title="Git Version Control">
<img class="tech-icon" src="./bundles/images/techIcons/github.svg" alt="" data-toggle="tooltip" data-placement="top" title="GitHub">
<img class="tech-icon" src="./bundles/images/techIcons/heroku.svg" alt="" data-toggle="tooltip" data-placement="top" title="Heroku">
</div>
</div>
</section>
<!-- projects -->
<section class="projects text-center" id="projects">
<div class="container pb-3">
<h1 class="project-title py-1 text-center">Projects</h1>
<!-- GitHub Calendar -->
<div class="calendar my-3" style="color: white;">
Loading the data just for you. If you see this plugin is not working
</div>
<div class="row about-info-augue">
<div class="col-md-4 about-aug about-aug1 editContent" style="outline: none; cursor: inherit;">
<h4 class="editContent" style="outline: none; cursor: inherit;">Side projects</h4>
<p class="editContent" style="outline: none; cursor: inherit;"></p>
<p class="mt-4 editContent" style="outline: none; cursor: inherit;">These are my main side projects I developed with my team @ Le Wagon Coding Bootcamp.</p>
<p>The projects feature things like Geocoding, chatrooms, filters, searching and more.</p>
<p>Feel free to check them out!</p>
</div>
<div class="col-md-4 project-img" style="outline: none; cursor: inherit;">
<div class="project-container">
<div class="hovers">
<p class="hover-text">TeamAppsis is a platform to meet developers and entrepeneurs</p>
<a href="http://www.teamappsis.com/" target="#" class="btn btn-primary hover-button">Visit</a>
</div>
<img src="bundles/images/teamappsis.jpeg" class="img-fluid mb-4" style="outline: none; cursor: inherit;">
</div>
</div>
<div class="col-md-4 project-img" style="outline: none; cursor: inherit;">
<div class="project-container">
<div class="hovers">
<p class="hover-text">NotADogBnb is an AirBnb clone with a twist.</p>
<a href="https://notadogbnb.herokuapp.com/" target="#" class="btn btn-primary hover-button">Visit</a>
</div>
<img src="bundles/images/notadog.jpeg" class="img-fluid mb-4" style="outline: none; cursor: inherit;">
</div>
</div>
</div>
</div>
</section>
<!-- contact -->
<section class="contact text-center" id="contact">
<div class="container">
<h1 class="contact-title">Let's get in touch</h1>
<div class="text-center">
<ul class="socials d-flex">
<li class="m-3"><a target="#" href="https://github.com/1990eam"><span class="social-icon fa fa-github"></span></a></li>
<li class="m-3"><a target="#" href="https://www.linkedin.com/in/eli%C3%A1n-magni-07312a49/"><span class="social-icon fa
fa-linkedin"></span></a></li>
<li class="m-3"><a target="#" href="https://twitter.com/1990eam"><span class="social-icon fa fa-twitter"></span></a></li>
</ul>
</div>
</div>
</section>
<!-- SCRIPTS -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- scroll to top button -->
<button onclick="topFunction()" id="myBtn" title="Go to top"><i></i>Scroll up</button>
<!-- github calendar -->
<script src="./bundles/javascript/github-calendar.js"></script>
<!-- scroll to top button-->
<script src="./bundles/javascript/scroll_to_top.js"></script>
<!-- Progress bar -->
<script src="./bundles/javascript/progress-bar.js"></script>
<!-- tooltips -->
<script src="./bundles/javascript/tooltips.js"></script>
</body>
</html>