-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
187 lines (170 loc) · 9.42 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marcos Congregado Front-End</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="styleResponsive.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<!--Fuentes de google-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Handjet:wght@300&family=IBM+Plex+Mono:ital,wght@1,600&family=Josefin+Sans:ital,wght@1,700&family=Raleway:wght@500&family=Roboto+Condensed:ital@1&family=Ysabeau+SC:wght@600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:ital,wght@1,500&family=Bebas+Neue&family=Big+Shoulders+Inline+Text:wght@500&family=Playfair+Display:ital,wght@1,500&family=Raleway:wght@500&family=Share+Tech+Mono&family=Tektur&family=Wallpoet&family=Ysabeau+SC:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<ul class="ulNav" id="nav">
<li class="btnNavWelcome">
<a href="#welcome" id="navLi">
Welcome
<i class='bx bx-home'></i>
</a>
</li>
<li class="btnNavSkills">
<a href="#skills" id="navLi">
Skills
<i class='bx bx-joystick'></i>
</a>
</li>
<li class="btnNavAbout">
<a href="#presentation" id="navLi">
About Me
<i class='bx bx-user'></i>
</a>
</li>
<li class="btnNavProyects">
<a href="#projects" id="navLi">
Projects
<i class='bx bx-edit'></i>
</a>
</li>
<li class="btnNavContact">
<a href="#footer" id="navLi">
Contact
<i class='bx bx-phone'></i>
</a>
</li>
</ul>
<!-- <div class="icon-mouse">
<i class='bx bx-ghost'></i>
</div>-->
<header class="headerWelcome" id="welcome">
<section class="cardWelcome">
<div class="h1h2Welcome">
<h1 class="h1Welcome">This is Me</h1>
<h2 class="h2Welcome">Thanks for visit my Portfolio</h2>
</div>
<figure class="figWelcome">
<img class="imgWelcome" src="newYo2.0.png" alt="a pic of me">
</figure>
</section>
<div class="h4Welcome">
<h4>Marcos Congregado</h4>
<h4>FullStack Developer</h4>
<a href="https://github.com/MarcosGCM97" target="_blank">GitHub<i class='bx bxl-github'></i></a>
<a target="_blank" href="./Marcos Congregado Front-End Developer.pdf">Cv<i class='bx bx-file'></i></a>
</div>
</header>
<article class="articleSkills" id="skills">
<div class="divSoftSkills divSkills">
<h3 class="h3Skills">Soft-Skills</h3>
<ul class="ulSoftSkills ulSkills">
<li class="liSoftSkills left"><i class='bx bx-group'></i>Teamwork</li>
<li class="liSoftSkills right">Management Time<i class='bx bx-timer'></i></li>
<li class="liSoftSkills left"><i class='bx bxs-user-plus'></i>Adaptibility</li>
<li class="liSoftSkills right">Stress Management<i class='bx bx-heart'></i></li>
<li class="liSoftSkills left"><i class='bx bx-conversation'></i>Comunication</li>
<li class="liSoftSkills right">Problem Solving<i class='bx bx-help-circle'></i></li>
</ul>
</div>
<div class="divHardSkills divSkills">
<h3 class="h3Skills">Hard-Skills</h3>
<ul class="ulHardSkills ulSkills">
<li class="liHardSkills left"><i class='bx bxl-react'></i>React.js</li>
<li class="liHardSkills right">JavaScript<i class='bx bxl-javascript'></i></li>
<li class="liHardSkills left"><i class='bx bxl-css3' ></i>Css</li>
<li class="liHardSkills right">Tailwind.css<i class='bx bxl-tailwind-css' ></i></li>
<li class="liHardSkills left"><i class='bx bxl-nodejs' ></i>Node.js</li>
<li class="liHardSkills right">Express.js<i class='bx bx-code-alt'></i></li>
<li class="liHardSkills left"><i class='bx bxl-mongodb'></i>MongoDB</li>
<li class="liHardSkills right">GitHub<i class='bx bxl-github'></i></li>
<li class="liHardSkills left"><i class='bx bxl-git'></i>Git</li>
</ul>
</div>
</article>
<section class="sectionPresentation" id="presentation">
<h2 class="h2Presentation">About Me</h2>
<article class="Presentation">
<div class="divHobbies divPresent" id="divPresent">
<h4>My Hobbies</h4>
<p>One of my hobby is rugby, which relaxes me and concentrates me. I am also a coach of the lower categories, where I strengthen other soft skills.</p>
<p>Listening to music is another hobby of mine, and within this vast world of music, I am constantly amazed day after day.</p>
</div>
<div class="divPresentBack divPresent" id="divPresent">
<h4>My Knowledge</h4>
<p>I like to learn, I am an administrator in a local company and I have customer service and negotiation skills.</p>
<p>As a developer, I've been training for two years and I feel competent to work and show what I know.</p>
<p></p>
</div>
<div class="divPresentLeft divPresent" id="divPresent">
<h4>English level</h4>
<p>While I can understand texts and conversations, I tend to downplay my responses. However, as I gain more experience, I can respond with greater fluency.</p>
</div>
<div class="divPresentRight divPresent" id="divPresent">
<h4>My Beginnings</h4>
<p>Since 2020, I have been working to improve my programming skills.</p>
<p>I start with html and css , after this section you can see my first projects</p>
</div>
</article>
</section>
<section class="sectionProjects" id="projects">
<h2>Here, you can see some of my projects...</h3>
<div class="divProjectsScroll" id="divScroll">
<div class="divJs divProjects" id="div-js">
<section>
<h2>React, Tailwind, NodeJs, MongoDb</h2>
<p><i class='bx bxl-react'></i><i class='bx bxl-tailwind-css' ></i><i class='bx bxl-nodejs' ></i><i class='bx bxl-mongodb'></i></p>
<p>This is a FullStack project. With this page, you can organize your life by taking notes about the tasks that you have to do in your current days. Additionally, you can save phone numbers and view the weather of any city that you wish through an API.</p>
<a href="https://superapp-8ary.onrender.com/" target="_blank"><img class="imgJs" src="./img/SuperApp.png" alt="FullStack Web page image"></a>
</section>
<section>
<h2>React and CSS</h2>
<p><i class='bx bxl-react'></i><i class='bx bxl-tailwind-css' ></i></p>
<p>I developed this web in less than a day to secure a job as freelancer, It’s just a mockup with no backend functionality. The mockup was copied from a Figma project.</p>
<a href="https://smartwaterproject.netlify.app/" target="_blank"><img src="./img/smartWater.png" alt="Front-End Web Page image"></a>
</section>
<section>
<h2>React, Css, NodeJS, MongoDB</h2>
<p><i class='bx bxl-react'></i><i class='bx bxl-css3' ></i><i class='bx bxl-nodejs' ></i><i class='bx bxl-mongodb'></i></p>
<p>In this case I developed a Web App for save your favorite Blogs, you have to Log in the session for see your saved blogs</p>
<a href="https://blogsapp-wj6c.onrender.com/" target="_blank"><img src="./img/blogApp.png" alt=""></a>
</section>
</div>
</div>
</section>
<footer class="footer" id="footer">
<h2 class="h2Footer">Contact Me</h2>
<div class="locationDivFooter divFooter">
<i class='bx bx-map'></i>
<h3><strong>Location</strong></h3>
<p><em>Argentina - Córdoba</em></p>
</div>
<div class="mailDivFooter divFooter">
<i class='bx bx-mail-send'></i>
<h3><strong>Email</strong></h3>
<p><em>marcoscongregado@gmail.com</em></p>
<button onclick="location.href='mailto:marcoscongregado@gmail.com';">Talk with me</button>
</div>
<div class="phoneDivFooter divFooter">
<i class='bx bx-phone-call'></i>
<h3><strong>Phone</strong></h3>
<p><em>+54 3543 650722</em></p>
<button onclick="location.href='https://wa.me/543543650722';">Talk with me</button>
</div>
</footer>
<script src="script.js"></script>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
</body>
</html>