-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
170 lines (150 loc) · 11.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cristopher PS - Enlaces</title>
<meta name="description" content="Todos los enlaces a mis redes sociales y demás contenido interesantes sobre este mundo de la tecnología y el desarrollo de software">
<meta name="keywords" content="enlaces, links, cristopherps, cristopher ps, redes sociales, desarrollo">
<meta name="author" content="Cristopher PS">
<link rel="shortcut icon" href="./assets/logo-sm-cristopherps.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/tailwind.min.css">
<link rel="stylesheet" href="./css/global.css">
</head>
<body class="font-sans antialiased text-gray-100 leading-normal tracking-wider bg-cover "
style="background-image:url('./assets/background.png');">
<!-- Spinner -->
<div id="spinner" class="hidden h-screen overflow-hidden flex items-center justify-center">
<div class="loader ease-linear rounded-full border-8 border-t-8 border-gray-100 h-64 w-64"></div>
</div>
<!-- Content -->
<div id="content" class="max-w-4xl flex items-center content-center h-auto lg:h-screen flex-wrap mx-auto my-32 lg:my-0">
<!-- Pin to top right corner -->
<div class="absolute top-0 right-0 h-12 w-18 p-4">
<button class="js-change-theme focus:outline-none" aria-label="Cambiar modo oscuro">
<i class="fas fa-sun text-yellow-500 text-3xl"></i>
</button>
</div>
<!--Main Col-->
<div id="profile"
class="w-full lg:w-3/5 rounded-lg lg:rounded-l-lg shadow-2xl bg-gray-900 opacity-75 mx-6 lg:mx-0">
<div class="p-4 md:p-12 text-center">
<!-- Image for mobile view-->
<div class="block lg:hidden rounded-full shadow-xl mx-auto -mt-16 h-48 w-48 bg-cover bg-center"
style="background-image: url('./assets/perfil_sm.png') ">
</div>
<h1 id="logo" class="text-3xl font-bold pt-8 lg:pt-0 pb-4 text-center">
<img alt="Logo Cristopher PS" src="http://cristopherps.com/wp-content/uploads/2019/01/cropped-Logo-CristopherPS-white-1.png"
class="rounded-none lg:rounded-lg lg:rounded-l-none lg:block">
</h1>
<div class="mx-auto w-4/5 pt-3 border-b-2 border-blue-700 opacity-25 text-center"></div>
<div class="mt-6 pb-5 lg:pb-0 w-4/5 lg:w-full mx-auto flex flex-wrap items-center justify-between">
<a class="link" href="https://facebook.com/ps.cristopher" target="blank"
data-tippy-content="@ps.cristopher" aria-label="Facebook">
<svg class="h-6 fill-current text-blue-700 icon-yellow-ps" role="img" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>Facebook</title>
<path
d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0" />
</svg>
</a>
<a class="link" href="https://twitter.com/ps_cristopher" target="blank"
data-tippy-content="@ps_cristopher" aria-label="Twitter">
<svg class="h-6 fill-current text-blue-700 icon-yellow-ps" role="img" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>Twitter</title>
<path
d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z" />
</svg>
</a>
<a class="link" href="https://github.com/ps-cristopher" target="blank"
data-tippy-content="@ps-cristopher" aria-label="GitHub">
<svg class="h-6 fill-current text-blue-700 icon-yellow-ps" role="img" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>GitHub</title>
<path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
</svg>
</a>
<a class="link" href="https://instagram.com/ps_cristopher" target="blank"
data-tippy-content="@ps_cristopher" aria-label="Instagram">
<svg class="h-6 fill-current text-blue-700 icon-yellow-ps" role="img" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>Instagram</title>
<path
d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z" />
</svg>
</a>
<a class="link" href="https://youtube.com/c/CristopherPS" target="blank"
data-tippy-content="@CristopherPS" aria-label="YouTube">
<svg class="h-6 fill-current text-blue-700 icon-yellow-ps" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>YouTube</title>
<path
d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z" />
</svg>
</a>
<a class="link" href="https://www.linkedin.com/in/ps-cristopher" target="blank"
data-tippy-content="@ps-cristopher" aria-label="Linkedin">
<i class="fab fa-linkedin text-2xl fill-current text-blue-700 icon-yellow-ps"></i>
</a>
</div>
<p class="pt-6 text-base font-bold flex items-center justify-center ">
👨🏻💻 Desarrollador Web | Creador de contenido
</p>
<p class="pt-2 text-gray-600 text-xs lg:text-sm flex items-center justify-center">
🇲🇽 Morelos, México
</p>
<p class="pt-4 text-sm">
Ayudando a crear aplicaciones asombrosas 📲 🤩, desarrollar soft skills e impulsar el crecimiento 🚀
</p>
<div class="pt-6 pb-4">
<button onclick="goToLink()" aria-label="Ir a sitio web"
class="w-4/5 bg-blue-700 bg-yellow-ps text-white font-bold py-2 px-4 mb-3 rounded-lg">
<i class="fas fa-globe"></i>
Sitio Web
</button>
<button onclick="goToLink('https://cristopherps.com/tienes-que-aprender-javascript/')" aria-label="Último artículo de mi Blog" class="w-4/5 bg-blue-700 bg-yellow-ps text-white font-bold py-2 px-4 mb-3 rounded-lg">
<i class="fas fa-pen"></i>
Último artículo de mi Blog ✍🏼
</button>
<button onclick="goToLink('https://www.youtube.com/watch?v=irr0mUH356U&t=11s&ab_channel=%7B%7BCristopher_PS%7D%7D')" aria-label="Último video" class="w-4/5 bg-blue-700 bg-yellow-ps text-white font-bold py-2 px-4 mb-3 rounded-lg">
<i class="fab fa-youtube"></i>
Último video 🎥
</button>
<button onclick="goToLink('https://youtu.be/1LiQ_cG0FgM')" aria-label="Último live de ProgramArte" class="w-4/5 bg-blue-700 bg-yellow-ps text-white font-bold py-2 px-4 mb-3 rounded-lg">
<i class="fab fa-youtube"></i>
Último live de ProgramArte 🔴
</button>
<button onclick="goToLink('https://anchor.fm/ps-cristopher')" aria-label="Podcast de ProgramArte" class="w-4/5 bg-blue-700 bg-yellow-ps text-white font-bold py-2 px-4 mb-3 rounded-lg">
<i class="fas fa-podcast"></i>
Podcast de ProgramArte 🎙
</button>
<button onclick="goToLink('https://youtu.be/PBg6tYj_FBQ')" aria-label="Último live de Undefined Devs" class="w-4/5 bg-blue-700 bg-yellow-ps text-white font-bold py-2 px-4 mb-3 rounded-lg">
<i class="fab fa-youtube"></i>
Último live de Undefined Devs 🔴
</button>
<button onclick="goToLink('https://discord.gg/UKPbV3j')" aria-label="Únete a los Undefined Devs" class="w-4/5 bg-blue-700 bg-yellow-ps text-white font-bold py-2 px-4 mb-3 rounded-lg">
<i class="fab fa-discord"></i>
Únete a los Undefined Devs 👨🏻💻
</button>
<button onclick="goToLink('https://covid19mexico.cristopherps.com')" aria-label="PWA Covid 19 México" class="w-4/5 bg-blue-700 bg-yellow-ps text-white font-bold py-2 px-4 rounded-lg">
<i class="fas fa-globe"></i>
PWA Covid 19 México 🇲🇽
</button>
</div>
</div>
</div>
<!--Img Col-->
<div class="w-full lg:w-2/5">
<!-- Big profile image for side bar (desktop) -->
<img alt="Perfil Cristopher PS" src="./assets/perfil_sm.png" class="rounded-none lg:rounded-lg lg:rounded-l-none shadow-2xl hidden lg:block">
</div>
</div>
<script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@4"></script>
<script src="./js/index.js"></script>
</body>
</html>