-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (120 loc) · 6.05 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juan Carlos López</title>
<meta charset="UTF-8">
<meta name="title" content="Juan Carlos López" />
<meta name="viewport" content="width=device-width, maximum-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="static/css/app.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-73390564-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<section id="home" class="backstretch">
<header class="header">
<button class="header-button icon-menu" id="navbar-toggle"></button>
</header>
<div class="info">
<div class="container">
<a href="#">
<img class="logo" src="static/images/avatar.jpg" width="200" height="200" alt="Avatar">
</a>
<h2 class="home-name">Juan Carlos López</h2>
<h2 class="home-twitter">
<a href="https://www.twitter.com/jclopezdev" target="_blank">@jclopezdev</a>
</h2>
</div>
</div>
<nav id="nav" class="nav">
<ul class="clearfix">
<li><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</section>
<section id="profile" class="profile container">
<h3 class="profile-title">Profile</h3>
<div class="profile-description">
<p>
I am passionate about web development, I like teamwork, and I am constantly looking forward to learning new technologies and using the best practices and methodologies.
</p>
<p>
I am currently working at <a href="https://magmalabs.io" target="_blank">MagmaLabs</a> as a Software Engineer and whenever I have time I participate also in side projects and help in some open source events and
<a href="http://www.facebook.com/agscode/" target="_blank">communities </a>
by mentoring those who are just beginning in web development and of course learning from them.
</p>
</div>
<div class="profile-links">
<a class="profile-link twitter icon-twitter" href="http://twitter.com/jclopezdev/" target="_blank">@jclopezdev</a>
<a class="profile-link linkedin icon-linkedin" href="https://linkedin.com/in/jclopezdev" target="_blank">jclopezdev</a>
<a class="profile-link github icon-github" href="http://github.com/jclopezdev/" target="_blank">jclopezdev</a>
</div>
</section>
<section id="work" class="work container">
<h3 class="work-title">Previous projects</h3>
<div class="work-container">
<article class="work-item">
<figure class="Work-imageContainer">
<img class="Work-image" src="static/images/works/seproinmex.jpg" width="256" height="150" alt="Seproinmex">
</figure>
<figcaption class="work-description">Seproinmex</figcaption>
</article>
<article class="work-item">
<figure class="Work-imageContainer">
<a href="http://www.lightsound.com.mx/" target="_blank">
<img class="Work-image" src="static/images/works/lightsound.jpg" width="256" height="150" alt="Lightsound Luz y Sonido">
</a>
</figure>
<figcaption class="work-description">Lightsound Luz y Sonido</figcaption>
</article>
<article class="work-item">
<figure class="Work-imageContainer">
<img class="Work-image" src="static/images/works/adateck.jpg" width="256" height="150" alt="Adateck | Cómputo y Tecnología" title="Adateck | Cómputo y Tecnología">
</figure>
<figcaption class="work-description">Adateck | Computo y Tecnología</figcaption>
</article>
<article class="work-item">
<figure class="Work-imageContainer">
<img class="Work-image" src="static/images/works/paintzoom.jpg" width="256" height="150" alt="Paint Zoom" title="Paint Zoom">
</figure>
<figcaption class="work-description">Paint Zoom</figcaption>
</article>
<article class="work-item">
<figure class="Work-imageContainer">
<a href="http://www.trilatero.net/" target="_blank">
<img class="Work-image" src="static/images/works/trilatero.jpg" width="256" height="150" alt="Trilátero Agencia de Publicidad">
</a>
</figure>
<figcaption class="work-description">Trilátero | Agencia de Publicidad</figcaption>
</article>
</div>
</section>
<section id="contact" class="contact container">
<h3 class="contact-title">Contact</h3>
<p class="contact-description">
If you like my work and have some project to work on, just send me an email or contact me through my social networks.
</p>
<div class="contact-options">
<a href="mailto:jclopezdev@gmail.com" class="contact-button"><i class="icon"></i> Contact me</a>
<div class="contact-social-networks">
<a class="twitter icon-twitter" href="http://twitter.com/jclopezdev/" target="_blank"></a>
<a class="linkedin icon-linkedin" href="https://linkedin.com/in/jclopezdev" target="_blank"></a>
<a class="github icon-github" href="http://github.com/jclopezdev/" target="_blank"></a>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="static/js/vendor.js"></script>
<script src="static/js/custom.js"></script>
</body>
</html>