gilbertoesp.github.io/index.html at main · gilbertoesp/gilbertoesp.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width , initial-scale=1.0">
    <link rel="stylesheet" href="./css/phone.css">
    <link
        rel="stylesheet"
        href="./css/tablet.css"
        media="screen and (min-width: 600px)">
    <link
        rel="stylesheet"
        href="./css/desktop.css"
        media="screen and (min-width: 800px)">
    <!-- Fuentes.  -->
    <link href="https://fonts.google.com/share?selection.family=Manrope:wght@200;400;600" rel="stylesheet">

    <title>@gilbertoesp</title>
</head>
<body>
   <header>
        <nav>
            <a href="#whoami">Who am I?</a>
            <a href="#stack">Stack</a>
            <a href="#proyectos">Proyectos</a>
            <a href="#social">Social</a>
        </nav>
   </header>
   <main>
        <section id="hola__mundo">
            <!-- Hola Mundo -->
            <h1>¡Hola Mundo!</h1>
        </section>
        <section id="whoami">
            <!-- Who am I -->
            <p>Soy <strong>Glberto Espinoza</strong> desarrollo para la web con tecnologías estándar y reutilizables. Entre más simple, mejor es para mantener. <br> <br> Lo complejo se compone de lo sencillo.</p>
            <div>
                <button id="button__show_cv">Descargar CV</button>
            </div>
        </section>
        <section id="stack">
            <!-- Stack -->
            <h2>Stack</h2>
            <div id="stack__list">
                <figure>
                    <!-- JS -->
                    <img class="" src="https://juliomixco.com/static/f00708cb380288f97a3fbfa72862ce1b/19ca5/javascript-logo.png" alt="">
                </figure>
                <figure>
                    <!-- html 5 -->
                    <img class="" src="https://logodownload.org/wp-content/uploads/2016/10/html5-logo-3-768x1084.png" alt="">
                </figure>
                <figure>
                    <!-- css -->
                    <img class="" src="https://cdn.freebiesupply.com/logos/large/2x/css-3-logo-png-transparent.png" alt="">
                </figure>
                <figure>
                    <!-- linux -->
                    <img class="" src="https://ctrl.alt.coop/img/skill/linux.svg" alt="">
                </figure>
            </div>
        </section>
        <section id="proyectos">
            <!-- Proyectos -->
            <h2>Proyectos</h2>
            <div id="proyectos__list">
                <article>
                    <figure>
                        <img src="./imgs/biologando.png" alt="">
                    </figure>
                    <h3>Biologando con Miguel</h3>
                    <p>Página de divulgación cientifíca</p>
                    <div class="proyectos__links">
                        <a href="https://gilbertoesp.github.io/biologando-con-miguel/">Live</a>
                        <a href="https://github.com/gilbertoesp/biologando-con-miguel">Source</a>
                    </div>
                </article>

                <article>
                    <figure>
                        <img src="./imgs/estoicos.png" alt="">
                    </figure>
                    <h3>Frases Estoicas</h3>
                    <p>Paquete público en NPM para uso en terminal</p>
                    <div class="proyectos__links">
                        <a href="https://www.npmjs.com/package/frases-estoicas">Live</a>
                        <a href="https://github.com/gilbertoesp/frases-estoicas">Source</a>
                    </div>
                </article>

                <article>
                    <figure>
                        <img src="./imgs/whoisthatpokemon.png" alt="">
                    </figure>
                    <h3>Who is that Pokemon!</h3>
                    <p>App JS donde jugar el clásico de televisión de los 90</p>
                    <div class="proyectos__links">
                        <a href="https://gilbertoesp.github.io/whoisthatPokemon/">Live</a>
                        <a href="https://github.com/gilbertoesp/whoisthatPokemon">Source</a>
                    </div>
                </article>

                <article>
                    <figure>
                        <img src="./imgs/batatabit.png" alt="">
                    </figure>
                    <h3>Batatabit</h3>
                    <p>Landing en diseño responsivo estándar</p>
                    <div class="proyectos__links">
                        <a href="https://gilbertoesp.github.io/batatabit/">Live</a>
                        <a href="https://github.com/gilbertoesp/batatabit">Source</a>
                    </div>
                </article>
            </div>
        </section>
        <section id="sociales">
            <!-- Social -->
            <h2>Sociales</h2>
            <div id="sociales__list">
                <figure>
                    <!-- github -->
                    <a href="https://github.com/gilbertoesp">
                        <img src="./imgs/github_logo.png" alt="">
                    </a>
                </figure>
                <figure>
                    <!-- linkedin -->
                    <a href="https://www.linkedin.com/in/gilbertoesp/">
                        <img src="./imgs/linkedin-logo-1.png" alt="">
                    </a>
                </figure>
                <figure>
                    <!-- platzi -->
                    <a href="https://platzi.com/p/gilbertoesp">
                        <img src="./imgs/platzi-logo.png" alt="">
                    </a>
                </figure>
            </div>
        </section>
   </main>
   <footer>
    <p>Made with 💚<br>2023</p>
   </footer>
   <script src="./js/main.js"></script>
</body>
</html>