├── .gitignore
├── README.md
├── jsconfig.json
├── next.config.js
├── package-lock.json
├── package.json
├── public
    ├── data
    │   └── projects.json
    ├── favicon.ico
    ├── img
    │   ├── icons
    │   │   ├── icon-144.png
    │   │   ├── icon-192.png
    │   │   ├── icon-32.png
    │   │   ├── icon-48.png
    │   │   └── icon-96.png
    │   ├── logo-white.png
    │   ├── logo.png
    │   └── placeholders
    │   │   ├── apps.jpg
    │   │   ├── banner-devices.png
    │   │   ├── cursos.jpg
    │   │   ├── design.jpg
    │   │   ├── develop.jpg
    │   │   └── me.jpg
    ├── manifest.json
    └── sitemap.xml
└── src
    ├── api
        └── index.js
    ├── components
        ├── Layout.jsx
        ├── cards
        │   └── Project.jsx
        ├── footer
        │   └── index.jsx
        ├── header
        │   └── index.jsx
        └── popover
        │   └── index.jsx
    ├── helpers
        └── ga.js
    ├── pages
        ├── 404.jsx
        ├── _app.jsx
        ├── _document.jsx
        ├── index.jsx
        ├── politicas.jsx
        └── portafolio.jsx
    └── sass
        ├── components
            ├── alerts
            │   └── _popover.scss
            ├── buttons
            │   └── _buttons.scss
            ├── footer
            │   └── _footer.scss
            ├── header
            │   └── _header.scss
            └── inputs
            │   └── _inputs.scss
        ├── core
            ├── _colors.scss
            ├── _dev.scss
            ├── _fonts.scss
            ├── _spacings.scss
            └── _trejocode.scss
        ├── libs
            ├── _animate.scss
            ├── _cogotoast.scss
            └── _nprogress.scss
        ├── pages
            ├── _error.scss
            ├── _home.scss
            └── _portafolio.scss
        └── style.scss


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | /public/sw.js
15 | /public/sw.js.map
16 | /public/workbox-*.js
17 | /public/workbox-*.js.map
18 | 
19 | # production
20 | /build
21 | 
22 | # misc
23 | .DS_Store
24 | *.pem
25 | .env*
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | 
32 | # local env files
33 | .env.local
34 | .env.development.local
35 | .env.test.local
36 | .env.production.local
37 | 
38 | # vercel
39 | .vercel
40 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Trejocode](https://res.cloudinary.com/trejocode/image/upload/v1586298449/Trejocode/logo_t0otlj.png)
 2 | 
 3 | # 🌐 Trejocode.com - Sitio Web
 4 | 
 5 | Sitio Web oficial de trejocode.com - Construido en Next.js y servido estáticamente 📄
 6 | 
 7 | ---
 8 | 
 9 | Trejocode.com Official Website - Built in Next.js and statically served
10 | 
11 | ### 🎉 1.3.0 hCaptcha
12 | 
13 | ### 1.2.0 Lazy Loading for Images
14 | 
15 | #### 1.1.0 Dark Theme
16 | 
17 | <img width="860" src="https://res.cloudinary.com/trejocode/image/upload/v1596647419/Trejocode/trejocode-dark_l8b32y.gif" />
18 | 
19 | ### 🏷️ Características / Features
20 | 
21 | - Carga de imágenes difereidas / Lazy Load for Images
22 | - Optimizado para SEO / SEO Ready
23 | - Esenciales WCAG 2.1 para la accesibilidad Web / Essential WCAG 2.1 for Web accessibility
24 | - Dark Theme Inicial / Basic Dark Theme
25 | - Ruteador / Router
26 | - Cliente HTTP / HTTP Client
27 | - PWA Listo / PWA Ready
28 | - SASS precargado / SASS incorporated
29 | - NProgress Loader
30 | - Código documentado / Documented code
31 | - Estructura de carpetas / Folder structure
32 | - Última versión mayor de React y Next.js / React and Next.js latest version.
33 | 
34 | ### 🚀 Para empezar / Get started
35 | 
36 | Estas instrucciones le proporcionarán una copia del proyecto en funcionamiento en su máquina local para fines de desarrollo. Consulte la sección de implementación para obtener notas sobre cómo desplegar el proyecto en producción.
37 | 
38 | ---
39 | 
40 | These instructions will provide you with a copy of the running project on your local machine for development purposes. See the implementation section for notes on how to deploy the project into production.
41 | 
42 | ```bash
43 | cd web
44 | npm install
45 | npm run dev
46 | ```
47 | 
48 | ### 📐 Requisitos / Requirements
49 | 
50 | - Node min: 12
51 | - Web Browser
52 | - Text Editor
53 | 
54 | ### 📦 Construido con / Build with
55 | 
56 | - [Next.js](https://nextjs.org)
57 | - [React Cool Img](https://www.npmjs.com/package/react-cool-img)
58 | 
59 | ### 🤝 Colaboradores / Collaborators
60 | 
61 | <table>
62 |   <tr>
63 |     <td align="center"><a href="https://www.trejocode.com"><img src="https://avatars1.githubusercontent.com/u/16879799?s=460&u=eb7ea04180a48e1069862102426992cd591df9cc&v=4" width="100px;" alt="Trejito code"/><br /><sub><b>Trejocode</b></sub></a><br /><a href="https://github.com/TrejoCode/upqroo/commits?author=TrejoCode" title="Design">🎨</a> <a href="#" title="Code">💻</a> <a href="#" title="Project Management">📆</a></td>
64 |   </tr>
65 | </table>
66 | 
67 | ## Licencia
68 | 
69 | Este proyecto está licenciado bajo la Licencia MIT - vea el archivo [LICENSE.md](LICENSE.md) para más detalles.
70 | 
71 | ---
72 | 
73 | This project is licensed under the MIT License - see the file [LICENSE.md](LICENSE.md) for more details.
74 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"compilerOptions": {
3 | 		"baseUrl": "src"
4 | 	},
5 | 	"include": ["src"]
6 | }


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   exportPathMap: async function (
 3 |     defaultPathMap,
 4 |     { dev, dir, outDir, distDir, buildId }
 5 |   ) {
 6 |     return {
 7 |       "/": { page: "/" },
 8 |       "/portafolio": { page: "/portafolio" },
 9 |       "/politicas": { page: "/politicas" },
10 |     };
11 |   },
12 |   trailingSlash: false,
13 | };
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "web",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build && next export",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "@hcaptcha/react-hcaptcha": "^0.3.6",
12 |     "axios": "^0.21.1",
13 |     "cogo-toast": "^4.2.3",
14 |     "next": "10.1.3",
15 |     "node-sass": "^5.0.0",
16 |     "nprogress": "^0.2.0",
17 |     "react": "17.0.2",
18 |     "react-cool-img": "^1.2.9",
19 |     "react-dom": "17.0.2",
20 |     "react-icons": "^4.2.0"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/public/data/projects.json:
--------------------------------------------------------------------------------
  1 | [
  2 | 	{
  3 | 		"title": "Web",
  4 | 		"projects": [
  5 | 			{
  6 | 				"name": "React Boilerplate",
  7 | 				"slug": "github.com/TrejoCode/react-boilerplate",
  8 | 				"url": "https://github.com/TrejoCode/react-boilerplate",
  9 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613481/Trejocode/portfolio/react-boilerplate_e8ciwp.png",
 10 | 				"services": [
 11 | 					"Open Source",
 12 | 					"Desarrollo Web"
 13 | 				]
 14 | 			},
 15 | 			{
 16 | 				"name": "Absolem Marketing",
 17 | 				"slug": "www.absolemarketing.com.mx",
 18 | 				"url": "https://absolemarketing.com.mx",
 19 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613479/Trejocode/portfolio/absolem-marketing_yj95cp.png",
 20 | 				"services": [
 21 | 					"Desarrollo Web",
 22 | 					"Diseño Web"
 23 | 				]
 24 | 			},
 25 | 			{
 26 | 				"name": "Buenos Días",
 27 | 				"slug": "www.buenosdiasmexico.mx",
 28 | 				"url": "https://www.buenosdiasmexico.mx",
 29 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613482/Trejocode/portfolio/buenos-dias_v2qyqx.png",
 30 | 				"services": [
 31 | 					"Diseño Web",
 32 | 					"Desarrollo Web"
 33 | 				]
 34 | 			},
 35 | 			{
 36 | 				"name": "Best Line Cancún",
 37 | 				"slug": "www.bestlinecancun.com",
 38 | 				"url": "https://www.bestlinecancun.com",
 39 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613481/Trejocode/portfolio/bestline-cancun_zrqkzr.png",
 40 | 				"services": [
 41 | 					"Diseño Web",
 42 | 					"Desarrollo Web"
 43 | 				]
 44 | 			},
 45 | 			{
 46 | 				"name": "Core.css",
 47 | 				"slug": "github.com/TrejoCode/css",
 48 | 				"url": "https://github.com/TrejoCode/css",
 49 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613482/Trejocode/portfolio/core-css_k8mktc.png",
 50 | 				"services": [
 51 | 					"Open Source",
 52 | 					"Diseño Web"
 53 | 				]
 54 | 			},
 55 | 			{
 56 | 				"name": "CRM Altura",
 57 | 				"slug": "crm.alturacancun.com",
 58 | 				"url": "https://crm.alturacancun.com",
 59 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613479/Trejocode/portfolio/altura-cancun_w5qlfz.png",
 60 | 				"services": [
 61 | 					"Desarrollo Web",
 62 | 					"Desarrollo PWA"
 63 | 				]
 64 | 			},
 65 | 			{
 66 | 				"name": "De la Luz",
 67 | 				"slug": "www.delaluz.com.mx",
 68 | 				"url": "https://www.delaluz.com.mx/",
 69 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613477/Trejocode/portfolio/delaluz_y6h6oo.png",
 70 | 				"services": [
 71 | 					"Diseño Web",
 72 | 					"Desarrollo Web"
 73 | 				]
 74 | 			},
 75 | 			{
 76 | 				"name": "Elfos Gourmet",
 77 | 				"slug": "www.elfosgourmet.eu",
 78 | 				"url": "https://www.elfosgourmet.eu",
 79 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613478/Trejocode/portfolio/elfos-gourmet_f3yx4n.png",
 80 | 				"services": [
 81 | 					"Diseño Web",
 82 | 					"Desarrollo Web"
 83 | 				]
 84 | 			},
 85 | 			{
 86 | 				"name": "BéCé Online",
 87 | 				"slug": "www.beceonline.com",
 88 | 				"url": "https://www.beceonline.com",
 89 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613481/Trejocode/portfolio/bece-online_zkamto.png",
 90 | 				"services": [
 91 | 					"Desarrollo Web",
 92 | 					"Diseño Web"
 93 | 				]
 94 | 			},
 95 | 			{
 96 | 				"name": "Chicle y Pega",
 97 | 				"slug": "www.chicleypegacreativo.com",
 98 | 				"url": "https://www.chicleypegacreativo.com",
 99 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613482/Trejocode/portfolio/chicle-y-pega_uk9nuv.png",
100 | 				"services": [
101 | 					"Diseño Web",
102 | 					"Desarrollo Web"
103 | 				]
104 | 			},
105 | 			{
106 | 				"name": "Universidad Politécnica de Quinana Roo",
107 | 				"slug": "www.upqroo.edu.mx",
108 | 				"url": "http://www.upqroo.edu.mx",
109 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613479/Trejocode/portfolio/upqroo_u13ntu.png",
110 | 				"services": [
111 | 					"Diseño Web",
112 | 					"Desarrollo Web"
113 | 				]
114 | 			},
115 | 			{
116 | 				"name": "EM-Sistemas",
117 | 				"slug": "www.em-sistemas.net",
118 | 				"url": "https://www.em-sistemas.net/",
119 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613478/Trejocode/portfolio/em-sistemas_aagmbx.png",
120 | 				"services": [
121 | 					"Diseño Web",
122 | 					"Responsive Web"
123 | 				]
124 | 			},
125 | 			{
126 | 				"name": "California Fitness",
127 | 				"slug": "www.californiafitness.com.mx",
128 | 				"url": "http://www.californiafitness.com.mx",
129 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613482/Trejocode/portfolio/california-fitness_smoc04.png",
130 | 				"services": [
131 | 					"Diseño Web",
132 | 					"Responsive Web"
133 | 				]
134 | 			},
135 | 			{
136 | 				"name": "Go Workers",
137 | 				"slug": "www.goworkers.es",
138 | 				"url": "https://www.goworkers.es",
139 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613478/Trejocode/portfolio/go-workers_c3ropc.png",
140 | 				"services": [
141 | 					"Desarrollo Web",
142 | 					"Desarrollo PWA"
143 | 				]
144 | 			},
145 | 			{
146 | 				"name": "Waala Influencers",
147 | 				"slug": "www.waalainfluencers.com",
148 | 				"url": "https://www.waalainfluencers.com",
149 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613480/Trejocode/portfolio/waala_tioy01.png",
150 | 				"services": [
151 | 					"Desarrollo Web",
152 | 					"Desarrollo PWA"
153 | 				]
154 | 			}
155 | 		]
156 | 	},
157 | 	{
158 | 		"title": "Wordpress",
159 | 		"projects": [
160 | 			{
161 | 				"name": "Sergio Orduña",
162 | 				"slug": "www.soarch.mx",
163 | 				"url": "http://www.soarch.mx",
164 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613479/Trejocode/portfolio/soarch_xq3i8u.png",
165 | 				"services": [
166 | 					"Administración Web",
167 | 					"Diseño Web"
168 | 				]
169 | 			},
170 | 			{
171 | 				"name": "Eat Copper Branch",
172 | 				"slug": "www.eatcopperbranch.com",
173 | 				"url": "https://eatcopperbranch.com",
174 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613478/Trejocode/portfolio/eat-copper-branch_vxgv0s.png",
175 | 				"services": [
176 | 					"Administración Web",
177 | 					"Diseño Web"
178 | 				]
179 | 			},
180 | 			{
181 | 				"name": "Balcón del zócalo",
182 | 				"slug": "www.balcondelzocalo.com",
183 | 				"url": "https://www.balcondelzocalo.com",
184 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613480/Trejocode/portfolio/balcon-del-zocalo_yynxzk.png",
185 | 				"services": [
186 | 					"Administración Web",
187 | 					"Diseño Web"
188 | 				]
189 | 			},
190 | 			{
191 | 				"name": "Dolcezzza",
192 | 				"slug": "www.dolcezza.ca",
193 | 				"url": "https://dolcezza.ca",
194 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613478/Trejocode/portfolio/dolcezza_rzrg0c.png",
195 | 				"services": [
196 | 					"Administración Web",
197 | 					"Diseño Web"
198 | 				]
199 | 			},
200 | 			{
201 | 				"name": "Luxe Transportation",
202 | 				"slug": "www.luxe-transportation.com",
203 | 				"url": "https://luxe-transportation.com/es",
204 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613480/Trejocode/portfolio/luxe-transportation_di8v3u.png",
205 | 				"services": [
206 | 					"Administración Web",
207 | 					"Diseño Web"
208 | 				]
209 | 			},
210 | 			{
211 | 				"name": "Fidelis Marketing Group",
212 | 				"slug": "www.fidelismarketinggroup.com",
213 | 				"url": "https://www.fidelismarketinggroup.com",
214 | 				"img": "https://res.cloudinary.com/trejocode/image/upload/v1606613479/Trejocode/portfolio/fidelis-marketing_rut7kf.png",
215 | 				"services": [
216 | 					"Administración Web",
217 | 					"Diseño Web"
218 | 				]
219 | 			}
220 | 		]
221 | 	}
222 | ]


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/web/e209f4409a0c314752165a1357573c97fe9bd050/public/favicon.ico


--------------------------------------------------------------------------------
/public/img/icons/icon-144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/web/e209f4409a0c314752165a1357573c97fe9bd050/public/img/icons/icon-144.png


--------------------------------------------------------------------------------
/public/img/icons/icon-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/web/e209f4409a0c314752165a1357573c97fe9bd050/public/img/icons/icon-192.png


--------------------------------------------------------------------------------
/public/img/icons/icon-32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/web/e209f4409a0c314752165a1357573c97fe9bd050/public/img/icons/icon-32.png


--------------------------------------------------------------------------------
/public/img/icons/icon-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/web/e209f4409a0c314752165a1357573c97fe9bd050/public/img/icons/icon-48.png


--------------------------------------------------------------------------------
/public/img/icons/icon-96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/web/e209f4409a0c314752165a1357573c97fe9bd050/public/img/icons/icon-96.png


--------------------------------------------------------------------------------
/public/img/logo-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/web/e209f4409a0c314752165a1357573c97fe9bd050/public/img/logo-white.png


--------------------------------------------------------------------------------
/public/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/web/e209f4409a0c314752165a1357573c97fe9bd050/public/img/logo.png


--------------------------------------------------------------------------------
/public/img/placeholders/apps.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/web/e209f4409a0c314752165a1357573c97fe9bd050/public/img/placeholders/apps.jpg


--------------------------------------------------------------------------------
/public/img/placeholders/banner-devices.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/web/e209f4409a0c314752165a1357573c97fe9bd050/public/img/placeholders/banner-devices.png


--------------------------------------------------------------------------------
/public/img/placeholders/cursos.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/web/e209f4409a0c314752165a1357573c97fe9bd050/public/img/placeholders/cursos.jpg


--------------------------------------------------------------------------------
/public/img/placeholders/design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/web/e209f4409a0c314752165a1357573c97fe9bd050/public/img/placeholders/design.jpg


--------------------------------------------------------------------------------
/public/img/placeholders/develop.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/web/e209f4409a0c314752165a1357573c97fe9bd050/public/img/placeholders/develop.jpg


--------------------------------------------------------------------------------
/public/img/placeholders/me.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TrejoCode/web/e209f4409a0c314752165a1357573c97fe9bd050/public/img/placeholders/me.jpg


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"short_name": "Trejocode",
 3 | 	"name": "Trejocode",
 4 | 	"icons": [
 5 | 		{
 6 | 			"src": "img/icons/icon-32.png",
 7 | 			"type": "image/png",
 8 | 			"sizes": "32x32"
 9 | 		},
10 | 		{
11 | 			"src": "/img/icons/icon-48.png",
12 | 			"type": "image/png",
13 | 			"sizes": "48x48"
14 | 		},
15 | 		{
16 | 			"src": "/img/icons/icon-96.png",
17 | 			"type": "image/png",
18 | 			"sizes": "96x96"
19 | 		},
20 | 		{
21 | 			"src": "/img/icons/icon-144.png",
22 | 			"type": "image/png",
23 | 			"sizes": "144x144"
24 | 		},
25 | 		{
26 | 			"src": "/img/icons/icon-192.png",
27 | 			"type": "image/png",
28 | 			"sizes": "192x192"
29 | 		}
30 | 	],
31 | 	"start_url": ".",
32 | 	"orientation": "portrait",
33 | 	"lang": "es-MX",
34 | 	"display": "standalone",
35 | 	"theme_color": "#33c8a3",
36 | 	"background_color": "#ffffff"  
37 | }
38 | 


--------------------------------------------------------------------------------
/public/sitemap.xml:
--------------------------------------------------------------------------------
 1 | <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 2 |     <url>
 3 |         <loc>https://www.trejocode.com</loc>
 4 |         <priority>1.00</priority>
 5 |     </url>
 6 |     <url>
 7 |         <loc>https://www.trejocode.com/portafolio</loc>
 8 |         <priority>0.80</priority>
 9 |     </url>
10 |     <url>
11 |         <loc>https://www.trejocode.com/politicas</loc>
12 |         <priority>0.50</priority>
13 |     </url>
14 | </urlset>


--------------------------------------------------------------------------------
/src/api/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @version 1.0.0
 3 |  * @author Trejocode - Sergio
 4 |  * @description Cliente HTTP para todas las peticiones Web
 5 |  */
 6 | 
 7 | import axios from "axios";
 8 | const baseUrl = process.env.NEXT_PUBLIC_API_URL;
 9 | 
10 | /**
11 |  * @description Realizar petición HTTP GET
12 |  * @param { String } endpoint: Endpoint de la solicitud
13 |  */
14 | export const get = async (endpoint) => {
15 |   try {
16 |     const { data } = await axios.get(`${baseUrl}${endpoint}`, {
17 |       headers: {
18 |         Authorization: process.env.NEXT_PUBLIC_API_KEY,
19 |       },
20 |     });
21 |     return { data };
22 |   } catch (error) {
23 |     if (error.response) {
24 |       return { error: error.response.data };
25 |     } else {
26 |       return { error: error.message };
27 |     }
28 |   }
29 | };
30 | 
31 | /**
32 |  * @description Realizar petición HTTP POST
33 |  * @param { String } endpoint: Endpoint de la solicitud
34 |  * @param { Object } payload: Objecto body de la solicitud
35 |  */
36 | export const post = async (endpoint, payload) => {
37 |   try {
38 |     const { data } = await axios.post(`${baseUrl}${endpoint}`, payload, {
39 |       headers: {
40 |         Authorization: process.env.NEXT_PUBLIC_API_KEY,
41 |       },
42 |     });
43 |     return { data };
44 |   } catch (error) {
45 |     if (error.response) {
46 |       return { error: error.response.data };
47 |     } else {
48 |       return { error: error.message };
49 |     }
50 |   }
51 | };
52 | 


--------------------------------------------------------------------------------
/src/components/Layout.jsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @version 1.0.1
  3 |  * @author Trejocode - Sergio
  4 |  * @description Componente <Layout />
  5 |  */
  6 | 
  7 | import Head from "next/head";
  8 | import Header from "components/header";
  9 | import Footer from "components/footer";
 10 | 
 11 | /**
 12 |  * @description Plantilla general de la aplicación
 13 |  * @param { String } title: "meta name"
 14 |  * @param { String } description: "meta description"
 15 |  * @param { String } keywords: "meta keywords"
 16 |  */
 17 | 
 18 | const Layout = ({ title, description, keywords, children }) => {
 19 |   return (
 20 |     <div className="flex main column">
 21 |       <Head>
 22 |         <meta charSet="UTF-8" />
 23 |         <meta name="robots" content="index" />
 24 |         <meta name="author" content="Trejocode" />
 25 |         <link rel="manifest" href="/manifest.json" />
 26 |         <meta name="theme-color" content="#33c8a3" />
 27 |         <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
 28 |         <title>
 29 |           {" "}
 30 |           {title
 31 |             ? title + " - Trejocode"
 32 |             : "Trejocode - Diseño y desarrollo Web"}{" "}
 33 |         </title>
 34 |         <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
 35 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 36 |         <meta
 37 |           name="keywords"
 38 |           content={
 39 |             keywords
 40 |               ? keywords
 41 |               : "Diseño Web, Desarrollo Web, Programación, Aplicaciones, Progressive Web App cancún"
 42 |           }
 43 |         />
 44 |         <meta
 45 |           name="description"
 46 |           content={
 47 |             description
 48 |               ? description
 49 |               : "Diseño y desarrollo Web, Progressive Web Apps y desarrollo de Software en Cancún | Trejocode"
 50 |           }
 51 |         />
 52 |         {/* --- Open Graph --- */}
 53 |         <meta property="og:type" content="website" />
 54 |         <meta property="og:url" content="https://www.trejocode.com/" />
 55 |         <meta
 56 |           property="og:image"
 57 |           content="https://res.cloudinary.com/trejocode/image/upload/v1585867983/Trejocode/og_ccf7n6.jpg"
 58 |         />
 59 |         <meta
 60 |           property="og:title"
 61 |           content={
 62 |             title
 63 |               ? title + " - Trejocode"
 64 |               : "Trejocode - Diseño y desarrollo Web"
 65 |           }
 66 |         />
 67 |         <meta
 68 |           property="og:description"
 69 |           content={
 70 |             description
 71 |               ? description
 72 |               : "Diseño y desarrollo Web, Progressive Web Apps y desarrollo de Software en Cancún | Trejocode"
 73 |           }
 74 |         />
 75 |         {/* -- IOS Meta -- */}
 76 |         <link rel="apple-touch-icon" href="/img/icons/icon-96.png" />
 77 |         <meta name="apple-mobile-web-app-capable" content="yes" />
 78 |         <meta
 79 |           name="apple-mobile-web-app-title"
 80 |           content="Trejocode - Diseño y desarrollo Web"
 81 |         />
 82 |         <meta
 83 |           name="apple-mobile-web-app-status-bar-style"
 84 |           content="black-translucent"
 85 |         />
 86 |         {/* --- Fonts --- */}
 87 |         <link
 88 |           href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,600,700&display=swap"
 89 |           rel="stylesheet"
 90 |         />
 91 |         {/* --- Twitter --- */}
 92 |         <meta name="twitter:card" content="summary" />
 93 |         <meta name="twitter:url" content="https://www.trejocode.com" />
 94 |         <meta
 95 |           name="twitter:title"
 96 |           content={
 97 |             title
 98 |               ? title + " - Trejocode"
 99 |               : "Trejocode - Diseño y desarrollo Web"
100 |           }
101 |         />
102 |         <meta
103 |           name="twitter:image"
104 |           content="https://res.cloudinary.com/trejocode/image/upload/v1585867983/Trejocode/og_ccf7n6.jpg"
105 |         />
106 |         <meta
107 |           name="twitter:description"
108 |           content={
109 |             description
110 |               ? description
111 |               : "Diseño y desarrollo Web, Progressive Web Apps y desarrollo de Software en Cancún | Trejocode"
112 |           }
113 |         />
114 |       </Head>
115 |       <Header />
116 |       <main>{children}</main>
117 |       <Footer />
118 |     </div>
119 |   );
120 | };
121 | 
122 | export default Layout;
123 | 


--------------------------------------------------------------------------------
/src/components/cards/Project.jsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @version 1.0.0
  3 |  * @author Trejocode - Sergio
  4 |  * @description Componente <CardProjects />
  5 |  */
  6 | 
  7 | import Img from "react-cool-img";
  8 | 
  9 | const CardProjects = ({ projects, index = null, limit }) => {
 10 |   if (index === 0 || index) {
 11 |     return projects[index].projects.map(
 12 |       (project, key) =>
 13 |         key < limit && (
 14 |           <div
 15 |             className="project project-aqua column wow fadeInLeft"
 16 |             data-wow-delay="100ms"
 17 |             key={key}
 18 |           >
 19 |             <div className="image responsive-img justify-center align-center">
 20 |               <Img src={project.img} alt={project.name} title={project.name} />
 21 |             </div>
 22 |             <div className="white-space-16"></div>
 23 |             <div className="information column align-center">
 24 |               <div className="title full column">
 25 |                 <div className="web full justify-center">
 26 |                   <a
 27 |                     className="color-primary-alt text-center font-large weight-semi"
 28 |                     href={project.url}
 29 |                     target="_blank"
 30 |                     rel="noopener"
 31 |                   >
 32 |                     {project.name}
 33 |                   </a>
 34 |                 </div>
 35 |               </div>
 36 |               <div className="description full">
 37 |                 {project.services.map((service, index) => (
 38 |                   <h5 className="color-gray font-tiny" key={index}>
 39 |                     {service}
 40 |                   </h5>
 41 |                 ))}
 42 |               </div>
 43 |             </div>
 44 |             <div className="white-space-16"></div>
 45 |           </div>
 46 |         )
 47 |     );
 48 |   } else {
 49 |     return projects.map((collection, key) => (
 50 |       <div className="column" key={key}>
 51 |         <div className="white-space-16"></div>
 52 |         <h2 className="color-secondary-alt">
 53 |           <span className="color-secondary-alt weight-bold">{"{"}</span>{" "}
 54 |           {collection.title}
 55 |         </h2>
 56 |         <div className="white-space-16"></div>
 57 |         <div className="project-container wrap">
 58 |           {collection.projects.map((project, index) => (
 59 |             <div
 60 |               className="project project-aqua column wow fadeInLeft"
 61 |               data-wow-delay="100ms"
 62 |               key={index}
 63 |             >
 64 |               <div className="image responsive-img justify-center align-center">
 65 |                 <Img
 66 |                   src={project.img}
 67 |                   alt={project.title}
 68 |                   title={project.title}
 69 |                 />
 70 |               </div>
 71 |               <div className="white-space-16"></div>
 72 |               <div className="information column align-center">
 73 |                 <div className="title full column">
 74 |                   <div className="web full justify-center">
 75 |                     <a
 76 |                       className="color-primary-alt text-center font-large weight-semi"
 77 |                       href={project.url}
 78 |                       target="_blank"
 79 |                       rel="noopener"
 80 |                     >
 81 |                       {project.name}
 82 |                     </a>
 83 |                   </div>
 84 |                 </div>
 85 |                 <div className="description full">
 86 |                   {project.services.map((service, index) => (
 87 |                     <h5 className="color-gray font-tiny" key={index}>
 88 |                       {service}
 89 |                     </h5>
 90 |                   ))}
 91 |                 </div>
 92 |               </div>
 93 |               <div className="white-space-16"></div>
 94 |             </div>
 95 |           ))}
 96 |         </div>
 97 |       </div>
 98 |     ));
 99 |   }
100 | };
101 | 
102 | export default CardProjects;
103 | 


--------------------------------------------------------------------------------
/src/components/footer/index.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @version 1.0.1
 3 |  * @author Trejocode - Sergio
 4 |  * @description Componente del Footer
 5 |  */
 6 | 
 7 | import { memo } from "react";
 8 | import Link from "next/link";
 9 | import { TiArrowSortedUp } from "react-icons/ti";
10 | 
11 | const Footer = () => (
12 |   <footer className="column">
13 |     <div className="footer-top justify-center">
14 |       <div className="container">
15 |         <div className="row-responsive full">
16 |           <div className="column full">
17 |             <div className="white-space-24"></div>
18 |             <div className="logo justify-center align-center wow fadeInDown">
19 |               <a href="/" className="responsive-img">
20 |                 <img
21 |                   src="/img/logo-white.png"
22 |                   alt="trejocode logo blanco"
23 |                   title="Trejocode logo blanco"
24 |                 />
25 |               </a>
26 |             </div>
27 |             <div className="white-space-24"></div>
28 |             <div className="top-page full justify-center">
29 |               <Link href="/#header">
30 |                 <a className="justify-center align-center">
31 |                   <TiArrowSortedUp size={"1.2rem"} />
32 |                 </a>
33 |               </Link>
34 |             </div>
35 |           </div>
36 |         </div>
37 |       </div>
38 |     </div>
39 |   </footer>
40 | );
41 | 
42 | export default memo(Footer);
43 | 


--------------------------------------------------------------------------------
/src/components/header/index.jsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @version 1.0.1
  3 |  * @author Trejocode - Sergio
  4 |  * @description Componente del <Header />
  5 |  */
  6 | 
  7 | import { useState, useEffect } from "react";
  8 | import Link from "next/link";
  9 | import { FaLightbulb } from "react-icons/fa";
 10 | import {
 11 |   AiFillLinkedin,
 12 |   AiFillFacebook,
 13 |   AiFillYoutube,
 14 |   AiFillInstagram,
 15 | } from "react-icons/ai";
 16 | 
 17 | const Header = () => {
 18 |   const [theme, setTheme] = useState("light");
 19 | 
 20 |   /**
 21 |    *  @description Activar DarkTheme o LightTheme
 22 |    */
 23 |   const handleTheme = () => {
 24 |     if (theme === "light") {
 25 |       setTheme("dark");
 26 |       localStorage.setItem("data-theme", "dark");
 27 |       document.documentElement.setAttribute("data-theme", "dark");
 28 |     } else {
 29 |       setTheme("light");
 30 |       localStorage.setItem("data-theme", "light");
 31 |       document.documentElement.setAttribute("data-theme", "light");
 32 |     }
 33 |   };
 34 | 
 35 |   useEffect(() => {
 36 |     const theme = localStorage.getItem("data-theme");
 37 |     theme
 38 |       ? document.documentElement.setAttribute("data-theme", theme)
 39 |       : document.documentElement.setAttribute("data-theme", "light");
 40 |   }, []);
 41 | 
 42 |   return (
 43 |     <header className="justify-center" id="header">
 44 |       <div className="container">
 45 |         <div className="left row align-center auto">
 46 |           <div className="logo">
 47 |             <Link href="/">
 48 |               <a aria-label="Trejocode Logo Inicio" role="img">
 49 |                 <img
 50 |                   src="/img/logo.png"
 51 |                   alt="Trejocode logo"
 52 |                   title="Trejocode logo"
 53 |                   className="wow fadeInLeft"
 54 |                 />
 55 |               </a>
 56 |             </Link>
 57 |           </div>
 58 |         </div>
 59 |         <div className="right full">
 60 |           <nav>
 61 |             <Link href="/">
 62 |               <a
 63 |                 className="color-secondary weight-semi wow fadeInLeft"
 64 |                 data-wow-delay="200ms"
 65 |               >
 66 |                 Inicio
 67 |               </a>
 68 |             </Link>
 69 |             <a
 70 |               href="/#services"
 71 |               className="color-secondary weight-semi wow fadeInLeft"
 72 |               data-wow-delay="200ms"
 73 |             >
 74 |               Servicios
 75 |             </a>
 76 |             <a
 77 |               href="/#about"
 78 |               className="color-secondary weight-semi wow fadeInLeft"
 79 |               data-wow-delay="250ms"
 80 |             >
 81 |               Cónoceme
 82 |             </a>
 83 |             <Link href="/portafolio">
 84 |               <a
 85 |                 className="color-secondary weight-semi wow fadeInLeft"
 86 |                 data-wow-delay="250ms"
 87 |               >
 88 |                 Proyectos
 89 |               </a>
 90 |             </Link>
 91 |             <a
 92 |               href="/#contact"
 93 |               className="color-secondary weight-semi wow fadeInLeft"
 94 |               data-wow-delay="300ms"
 95 |             >
 96 |               Contáctame
 97 |             </a>
 98 |           </nav>
 99 |           <div className="social auto wow align-center fadeInLeft">
100 |             <a
101 |               aria-label="LinkedIn"
102 |               data-wow-delay="350ms"
103 |               rel="noopener"
104 |               target="_blank"
105 |               className="align-center wow fadeIn"
106 |               href="https://www.linkedin.com/in/trejocode/"
107 |             >
108 |               <AiFillLinkedin size={18} title="Icono de LinkedIn" />
109 |             </a>
110 |             <a
111 |               aria-label="Facebook"
112 |               data-wow-delay="350ms"
113 |               rel="noopener"
114 |               target="_blank"
115 |               className="align-center wow fadeIn"
116 |               href="https://www.facebook.com/TrejoCode/"
117 |             >
118 |               <AiFillFacebook size={18} title="Icono de Facebook" />
119 |             </a>
120 |             <a
121 |               aria-label="Youtube"
122 |               data-wow-delay="400ms"
123 |               rel="noopener"
124 |               target="_blank"
125 |               className="align-center wow fadeIn"
126 |               href="https://www.youtube.com/trejocode"
127 |             >
128 |               <AiFillYoutube size={18} title="Icono de Youtube" />
129 |             </a>
130 |             <a
131 |               aria-label="Instagram"
132 |               data-wow-delay="400ms"
133 |               rel="noopener"
134 |               target="_blank"
135 |               className="align-center wow fadeIn"
136 |               href="https://www.instagram.com/trejocode/"
137 |             >
138 |               <AiFillInstagram size={18} title="Icono de Instagram" />
139 |             </a>
140 |             <button
141 |               onClick={handleTheme}
142 |               className="btn-light-toggle align-center wow fadeIn"
143 |               data-wow-delay="400ms"
144 |             >
145 |               <FaLightbulb size={16} title="Modo obscuro" />
146 |             </button>
147 |           </div>
148 |         </div>
149 |       </div>
150 |     </header>
151 |   );
152 | };
153 | 
154 | export default Header;
155 | 


--------------------------------------------------------------------------------
/src/components/popover/index.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @version 1.0.0
 3 |  * @author Trejocode - Sergio
 4 |  * @description Componente del <Popover />
 5 |  */
 6 | 
 7 | const Popover = ({ description, link }) => {
 8 |   return (
 9 |     <div className="popover justify-center">
10 |       <div className="container justify-center">
11 |         <a href={link} className="text-center">
12 |           {description}
13 |         </a>
14 |       </div>
15 |     </div>
16 |   );
17 | };
18 | 
19 | export default Popover;
20 | 


--------------------------------------------------------------------------------
/src/helpers/ga.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @version 1.1.0
 3 |  * @author Sergio - Trejocode
 4 |  * @description Custom config para GA
 5 |  */
 6 | 
 7 | export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
 8 | 
 9 | /**
10 |  * @description Asignar la página actual al visor de GA
11 |  * @param { String } url: URL actual
12 |  * @url https://developers.google.com/analytics/devguides/collection/gtagjs/pages
13 |  */
14 | export const pageview = (url) => {
15 |   window.gtag("config", GA_TRACKING_ID, {
16 |     page_path: url,
17 |   });
18 | };
19 | 


--------------------------------------------------------------------------------
/src/pages/404.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @version 1.0.0
 3 |  * @author Trejocode - Sergio
 4 |  * @description Página de error 404
 5 |  */
 6 | 
 7 | import Link from "next/link";
 8 | import Layout from "components/Layout";
 9 | import { FcDeleteDatabase } from "react-icons/fc";
10 | 
11 | const ErrorPage = () => {
12 |   return (
13 |     <Layout
14 |       title="¡Oh no! La página no existe"
15 |       description="La página solicitada no existe"
16 |     >
17 |       <div className="page-error justify-center align-center">
18 |         <div className="column justify-center align-center">
19 |           <FcDeleteDatabase size={96} />
20 |           <div className="white-space-16"></div>
21 |           <h2>¡Oh no! La página que solicitas no existe</h2>
22 |           <div className="white-space-32"></div>
23 |           <div className="btn-container">
24 |             <Link href="/">
25 |               <a className="btn btn-primary">Regresar a inicio</a>
26 |             </Link>
27 |           </div>
28 |         </div>
29 |       </div>
30 |     </Layout>
31 |   );
32 | };
33 | 
34 | export default ErrorPage;
35 | 


--------------------------------------------------------------------------------
/src/pages/_app.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @version 1.2.0
 3 |  * @author Trejocode - Sergio
 4 |  * @description Custom App para habilitar estilos y NProgress
 5 |  */
 6 | 
 7 | import { useEffect } from "react";
 8 | import { useRouter } from "next/router";
 9 | import NProgress from "nprogress";
10 | import * as ga from "helpers/ga";
11 | import "sass/style.scss";
12 | 
13 | const App = ({ Component, pageProps }) => {
14 |   const router = useRouter();
15 | 
16 |   /**
17 |    * @description Escuchar los eventos del Router para controlar el Loader y la asignación de la current page para GA
18 |    */
19 |   useEffect(() => {
20 |     router.events.on("routeChangeStart", () => {
21 |       NProgress.start();
22 |     });
23 | 
24 |     router.events.on("routeChangeComplete", (url) => {
25 |       NProgress.done();
26 |       ga.pageview(url);
27 |     });
28 | 
29 |     return () => {
30 |       router.events.off("routeChangeStart", () => {
31 |         NProgress.done();
32 |       });
33 |     };
34 |   }, []);
35 | 
36 |   return <Component {...pageProps} />;
37 | };
38 | 
39 | export default App;
40 | 


--------------------------------------------------------------------------------
/src/pages/_document.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @version 1.2.0
 3 |  * @author Trejocode - Sergio
 4 |  * @description Configuración adicional de la plantilla HTML
 5 |  */
 6 | 
 7 | import Document, { Html, Head, Main, NextScript } from "next/document";
 8 | import { GA_TRACKING_ID } from "helpers/ga";
 9 | 
10 | class DocumentHTML extends Document {
11 |   static async getInitialProps(ctx) {
12 |     const initialProps = await Document.getInitialProps(ctx);
13 |     return { ...initialProps };
14 |   }
15 | 
16 |   render() {
17 |     return (
18 |       <Html lang="es-MX">
19 |         <Head />
20 |         <body>
21 |           <Main />
22 |           <NextScript />
23 |           <script
24 |             deffer="true"
25 |             src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"
26 |           />
27 |           <script>new WOW().init();</script>
28 |           <script
29 |             async
30 |             data-account="cr2XyIS2q3"
31 |             src="https://cdn.userway.org/widget.js"
32 |           ></script>
33 |           <script
34 |             async
35 |             src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
36 |           />
37 |           <script
38 |             dangerouslySetInnerHTML={{
39 |               __html: `
40 | 							window.dataLayer = window.dataLayer || [];
41 | 							function gtag(){dataLayer.push(arguments);}
42 | 							gtag('js', new Date());
43 | 							gtag('config', '${GA_TRACKING_ID}', {
44 | 							page_path: window.location.pathname,
45 | 							});
46 | 						`,
47 |             }}
48 |           />
49 |         </body>
50 |       </Html>
51 |     );
52 |   }
53 | }
54 | 
55 | export default DocumentHTML;
56 | 


--------------------------------------------------------------------------------
/src/pages/index.jsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @version 1.2.0
  3 |  * @author Trejocode - Sergio
  4 |  * @description Página /index
  5 |  */
  6 | 
  7 | import { useState } from "react";
  8 | import Link from "next/link";
  9 | import Layout from "components/Layout";
 10 | import CardProjects from "components/cards/Project";
 11 | import projects from "../../public/data/projects.json";
 12 | import cogoToast from "cogo-toast";
 13 | import HCaptcha from "@hcaptcha/react-hcaptcha";
 14 | import { post } from "api";
 15 | import Img from "react-cool-img";
 16 | 
 17 | const PageIndex = () => {
 18 |   const [captcha, setCaptcha] = useState(null);
 19 | 
 20 |   const handleSubmit = async (event) => {
 21 |     event.preventDefault();
 22 | 
 23 |     if (captcha) {
 24 |       const form = event.target;
 25 |       const payload = {
 26 |         name: form.name.value,
 27 |         email: form.email.value,
 28 |         message: form.message.value,
 29 |       };
 30 | 
 31 |       const { error } = await post("/email/contact/single", payload);
 32 | 
 33 |       if (error) {
 34 |         cogoToast.error(error, {
 35 |           heading: "No fue posible enviar el mensaje",
 36 |           hideAfter: 5,
 37 |         });
 38 |         return false;
 39 |       }
 40 | 
 41 |       cogoToast.success("Gracias por comunicarte", {
 42 |         heading: "Mensaje Enviado",
 43 |         hideAfter: 4,
 44 |       });
 45 |     } else {
 46 |       cogoToast.error("¡Oh no! Verifica que no seas un robot", {
 47 |         heading: "¿Eres un humano?",
 48 |         hideAfter: 3,
 49 |       });
 50 |     }
 51 |   };
 52 | 
 53 |   return (
 54 |     <Layout>
 55 |       <div className="page-home column">
 56 |         <div className="banner justify-center wow fadeIn">
 57 |           <div className="container row-responsive">
 58 |             <div className="left column">
 59 |               <h1 className="color-secondary">
 60 |                 ¡Hola, i'm <span className="color-primary">trejocode!</span>{" "}
 61 |                 <span role="img" aria-label="Emoji de Saludos">
 62 |                   👋
 63 |                 </span>
 64 |               </h1>
 65 |               <div className="white-space-24"></div>
 66 |               <div className="column">
 67 |                 <h2 className="color-secondary-alt font-medium weight-semi">
 68 |                   Diseño y desarrollo sitios Web increíbles <br />
 69 |                   responsivos, rápidos y autoadministrables
 70 |                 </h2>
 71 |               </div>
 72 |               <div className="white-space-24"></div>
 73 |               <div className="btn-container full">
 74 |                 <a
 75 |                   href="#services"
 76 |                   className="btn btn-medium btn-primary text-center"
 77 |                 >
 78 |                   CONOCER MÁS
 79 |                 </a>
 80 |               </div>
 81 |             </div>
 82 |             <div className="right align-center justify-center">
 83 |               <div
 84 |                 className="reponsive-img justify-center align-center wow fadeIn"
 85 |                 data-wow-delay="300ms"
 86 |               >
 87 |                 <Img
 88 |                   placeholder="/img/placeholders/banner-devices.png"
 89 |                   src="https://res.cloudinary.com/trejocode/image/upload/v1606613481/Trejocode/portfolio/banner-devices_us28ew.png"
 90 |                   alt="Web y Apps"
 91 |                   title="Web y Apps"
 92 |                 />
 93 |               </div>
 94 |             </div>
 95 |           </div>
 96 |         </div>
 97 |         <div className="services justify-center wow fadeIn" id="services">
 98 |           <div className="container row-responsive row-responsive-ipad">
 99 |             <div className="left column">
100 |               <h2 className="color-secondary-alt">
101 |                 <span className="color-secondary-alt weight-bold">{"{ "}</span>
102 |                 SERVICIOS
103 |               </h2>
104 |               <div className="white-space-16"></div>
105 |               <p className="text-justify weight-semi">
106 |                 Concepto <b>+</b> Diseño <b>+</b> Desarrollo <b>+</b> high techs{" "}
107 |                 <b>=</b> ¡Proyectos éxitosos y asombrosos!
108 |               </p>
109 |               <div className="white-space-8"></div>
110 |               <p className="text-justify weight-semi">
111 |                 ¡Trabajemos juntos! Mi pasión es desarrollar la Web, cuénteme su
112 |                 idea y haré todo lo demás.
113 |               </p>
114 |               <div className="white-space-32"></div>
115 |               <h3 className="color-secondary-alt">PROCESO</h3>
116 |               <div className="white-space-16"></div>
117 |               <p className="weight-medium">
118 |                 <b>1.- Idea</b>
119 |               </p>
120 |               <p className="weight-medium">
121 |                 Escucho tus ideas y juntos encontramos el mejor producto.
122 |               </p>
123 |               <div className="white-space-16"></div>
124 |               <p className="weight-medium">
125 |                 <b>2.- Análisis y Desarrollo</b>
126 |               </p>
127 |               <p className="weight-medium">
128 |                 Concepto, especificaciones establecidas para iniciar la creación
129 |                 del proyecto.
130 |               </p>
131 |               <div className="white-space-16"></div>
132 |               <p className="weight-medium">
133 |                 <b>3.- Testing y Liberación</b>
134 |               </p>
135 |               <p className="weight-medium">
136 |                 Pruebas funcionales, paso a paso, tras garantizar el correcto
137 |                 funcionamiento se publicará el proyecto.
138 |               </p>
139 |             </div>
140 |             <div className="right column">
141 |               <div className="card-container row-responsive">
142 |                 <div className="card column wow fadeIn" data-wow-delay="100ms">
143 |                   <div className="card-head justify-center align-center">
144 |                     <div className="responsive-img">
145 |                       <Img
146 |                         placeholder="/img/placeholders/design.jpg"
147 |                         src="https://res.cloudinary.com/trejocode/image/upload/v1606613478/Trejocode/portfolio/design_a8thbs.jpg"
148 |                         alt="Diseño Web"
149 |                         title="Diseño Web"
150 |                         className="holder-image"
151 |                       />
152 |                     </div>
153 |                   </div>
154 |                   <div className="card-body column">
155 |                     <div className="white-space-8"></div>
156 |                     <p className="text-center card-title">
157 |                       <strong>Diseño Web</strong>
158 |                     </p>
159 |                     <div className="white-space-8"></div>
160 |                     <p className="text-center font-tiny card-description">
161 |                       Para que el sitio Web sobresalga entre las demás, debe
162 |                       contar con un diseño innovador y atrayente, con ello
163 |                       transmitirá de la mejor forma lo grandioso del proyecto.
164 |                     </p>
165 |                     <div className="white-space-8"></div>
166 |                     <div className="card-footer column">
167 |                       <p className="text-center font-mini footer-content">
168 |                         Adobe Photoshop, Adobe XD, HTML, CSS y JS serán las
169 |                         herramientas
170 |                       </p>
171 |                     </div>
172 |                   </div>
173 |                 </div>
174 |                 <div className="card column wow fadeIn" data-wow-delay="0.2s">
175 |                   <div className="card-head justify-center align-center">
176 |                     <div className="responsive-img">
177 |                       <Img
178 |                         placeholder="/img/placeholders/develop.jpg"
179 |                         src="https://res.cloudinary.com/trejocode/image/upload/v1606613478/Trejocode/portfolio/develop_bdfqut.jpg"
180 |                         alt="Desarrollo Web"
181 |                         title="Desarrollo Web"
182 |                         className="holder-image"
183 |                       />
184 |                     </div>
185 |                   </div>
186 |                   <div className="card-body column">
187 |                     <div className="white-space-8"></div>
188 |                     <p className="text-center card-title">
189 |                       <strong>Desarrollo Web</strong>
190 |                     </p>
191 |                     <div className="white-space-8"></div>
192 |                     <p className="text-center font-tiny card-description">
193 |                       Maquetación, programación, testing, DevOps, mantenimiento
194 |                       y SEO, son actividades obligatorias para un desarrollo Web
195 |                       exitoso, acompañado de las mejores tecnologías.
196 |                     </p>
197 |                     <div className="white-space-8"></div>
198 |                     <div className="card-footer column">
199 |                       <p className="text-center font-mini footer-content">
200 |                         HTML, CSS, React, Next.js, Node.js, MSSQL, MySQL, Jest,
201 |                         Git, G. Analitycs.
202 |                       </p>
203 |                     </div>
204 |                   </div>
205 |                 </div>
206 |               </div>
207 |               <div className="white-space-32"></div>
208 |               <div className="card-container row-responsive">
209 |                 <div className="card column wow fadeIn" data-wow-delay="100ms">
210 |                   <div className="card-head justify-center align-center">
211 |                     <div className="responsive-img">
212 |                       <Img
213 |                         placeholder="/img/placeholders/apps.jpg"
214 |                         src="https://res.cloudinary.com/trejocode/image/upload/v1606613481/Trejocode/portfolio/apps_law2ya.jpg"
215 |                         alt="Progressive Web Apps"
216 |                         title="Progressive Web Apps"
217 |                         className="holder-image"
218 |                       />
219 |                     </div>
220 |                   </div>
221 |                   <div className="card-body column">
222 |                     <div className="white-space-8"></div>
223 |                     <p className="text-center card-title">
224 |                       <strong>Progressive Web App</strong>
225 |                     </p>
226 |                     <div className="white-space-8"></div>
227 |                     <p className="text-center font-tiny card-description">
228 |                       Las PWA combinan lo mejor de una Web y lo mejor de una
229 |                       aplicación móvil nativa, adaptándose al dispositivo el
230 |                       cual se ejecuta y reduciendo tiempos de desarrollo.
231 |                     </p>
232 |                     <div className="white-space-8"></div>
233 |                     <div className="card-footer column">
234 |                       <p className="text-center font-mini footer-content">
235 |                         HTML, CSS, JS, React, Jest, Lighthouse, Push
236 |                         Notifications
237 |                       </p>
238 |                     </div>
239 |                   </div>
240 |                 </div>
241 |                 <div className="card column wow fadeIn" data-wow-delay="200ms">
242 |                   <div className="card-head justify-center align-center">
243 |                     <div className="responsive-img">
244 |                       <Img
245 |                         placeholder="/img/placeholders/cursos.jpg"
246 |                         src="https://res.cloudinary.com/trejocode/image/upload/v1606613482/Trejocode/portfolio/cursos_u10dt0.jpg"
247 |                         alt="Cursos y Capacitaciones"
248 |                         title="Cursos y Capacitaciones"
249 |                         className="holder-image"
250 |                       />
251 |                     </div>
252 |                   </div>
253 |                   <div className="card-body column">
254 |                     <div className="white-space-8"></div>
255 |                     <p className="text-center card-title">
256 |                       <strong>Cursos y Capacitaciones</strong>
257 |                     </p>
258 |                     <div className="white-space-8"></div>
259 |                     <p className="text-center font-tiny card-description">
260 |                       Domina tecnologías Web, desde 0 hasta
261 |                       diseñador/desarrollador Web y Android, capacitaciones
262 |                       presenciales o en línea, próximamente más cursos.
263 |                     </p>
264 |                     <div className="white-space-8"></div>
265 |                     <div className="card-footer column">
266 |                       <p className="text-center font-mini footer-content">
267 |                         HTML, CSS, JS, React, Next.js, React Native, Diseño Web
268 |                       </p>
269 |                     </div>
270 |                   </div>
271 |                 </div>
272 |               </div>
273 |               <div className="white-space-32"></div>
274 |             </div>
275 |           </div>
276 |         </div>
277 |         <div className="about justify-center wow fadeIn" id="about">
278 |           <div className="container row-responsive">
279 |             <div className="left column">
280 |               <div className="white-space-64"></div>
281 |               <div className="me-picture">
282 |                 <div className="responsive-img column">
283 |                   <Img
284 |                     placeholder="/img/placeholders/me.jpg"
285 |                     src="https://res.cloudinary.com/trejocode/image/upload/v1606613481/Trejocode/portfolio/me_qighks.jpg"
286 |                     alt="trejocode perfil"
287 |                     title="trejocode perfil"
288 |                   />
289 |                   <div className="white-space-8"></div>
290 |                   <p className="text-center">Me, feliz porque visitas mi Web</p>
291 |                 </div>
292 |               </div>
293 |             </div>
294 |             <div className="right column">
295 |               <div className="white-space-64"></div>
296 |               <h2 className="color-primary-alt">
297 |                 <span className="color-primary weight-bold">{"{ "}</span>
298 |                 Me: Sergio Alejandro Trejo
299 |                 <span className="color-primary weight-bold">{" }"}</span>
300 |               </h2>
301 |               <div className="white-space-16"></div>
302 |               <p>
303 |                 <b>
304 |                   Ingeniero en Software, entusiasta del desarrollo Web, desde
305 |                   Cancún, México{" "}
306 |                   <span role="img" aria-label="Emoji de playa">
307 |                     🏖️
308 |                   </span>
309 |                 </b>
310 |               </p>
311 |               <div className="white-space-8"></div>
312 |               <p>
313 |                 Cursé en la Universidad Politécnica de Quintana Roo la
314 |                 Ingeniería en Software en generación 2015 - 2018, durante mi
315 |                 formación adquirí conocimiento en desarrollo Web, apps móviles,
316 |                 sistemas operativos y desarrollo de Software en general, mi
317 |                 proyecto de titulación:
318 |                 <b>
319 |                   <a
320 |                     href="http://new.upqroo.edu.mx/"
321 |                     rel="noopener"
322 |                     target="_blank"
323 |                   >
324 |                     {" "}
325 |                     new.upqroo.com
326 |                   </a>
327 |                 </b>
328 |                 , sitio Web de la Universidad.
329 |               </p>
330 |               <div className="white-space-8"></div>
331 |               <p>
332 |                 Mi primera formación fue en técnico en programación, en CBTis N°
333 |                 111, participé en diferentes concursos durante mi preparación
334 |                 siendo el representante estatal en fotografía y ganador en
335 |                 innovación en el concurso estatal de ciencia y tecnología junto
336 |                 con mis compañeros.
337 |               </p>
338 |               <div className="white-space-16"></div>
339 |               <p>
340 |                 <span className="color-primary weight-bold">{"{"}</span>
341 |                 <b> Empleos </b>
342 |                 <span className="color-primary weight-bold">{"}"}</span>
343 |               </p>
344 |               <div className="white-space-8"></div>
345 |               <p>
346 |                 - <b>ACTUAL:</b> Desarrollador Web Fullstack:
347 |                 <b>
348 |                   <a rel="noopener" target="_blank" href="https://www.jako.mx/">
349 |                     &nbsp; Grupo Jako
350 |                   </a>
351 |                 </b>
352 |               </p>
353 |               <p>
354 |                 - Desarrollador Web:
355 |                 <b>
356 |                   <a
357 |                     rel="noopener"
358 |                     target="_blank"
359 |                     href="https://absolemarketing.com/"
360 |                   >
361 |                     {" "}
362 |                     Absolem Marketing
363 |                   </a>
364 |                 </b>
365 |               </p>
366 |               <p>
367 |                 - Desarrollador Fullstack Web:
368 |                 <b>
369 |                   <a
370 |                     rel="noopener"
371 |                     target="_blank"
372 |                     href="http://www.dwitmexico.com/"
373 |                   >
374 |                     {" "}
375 |                     Dwit México
376 |                   </a>
377 |                 </b>
378 |               </p>
379 |               <div className="white-space-16"></div>
380 |               <p>
381 |                 <span className="color-primary weight-bold">{"{"}</span>
382 |                 <b> Freelance </b>
383 |                 <span className="color-primary weight-bold">{"}"}</span>
384 |               </p>
385 |               <div className="white-space-8"></div>
386 |               <p>
387 |                 - Desarrollo de aplicaciones Android: OrtoControl y Bomberos App
388 |                 (Aplicaciones privadas), para Brasil y Colombia
389 |               </p>
390 |               <p>
391 |                 - Desarrollador Web:
392 |                 <b>
393 |                   <a
394 |                     rel="noopener"
395 |                     target="_blank"
396 |                     href="https://www.bestlinecancun.com/"
397 |                   >
398 |                     {" "}
399 |                     Best Line Cancún
400 |                   </a>
401 |                 </b>
402 |               </p>
403 |               <div className="white-space-64"></div>
404 |             </div>
405 |           </div>
406 |         </div>
407 |         <div className="portfolio justify-center" id="projects">
408 |           <div className="container column">
409 |             <div className="white-space-64"></div>
410 |             <h2 className="color-secondary-alt">
411 |               <span className="color-secondary-alt weight-bold">{"{"}</span>{" "}
412 |               PROYECTOS
413 |             </h2>
414 |             <div className="white-space-16"></div>
415 |             <p className="weight-medium">
416 |               Aquí una increíble colección de proyectos profesionales y de
417 |               código abierto en los que he trabajado durante de mi trayectoria
418 |               profesional como ingeniero en Software, algunos se encuentran aún
419 |               en desarrollo.
420 |             </p>
421 |             <div className="white-space-32"></div>
422 |             <div className="project-container wrap">
423 |               <CardProjects projects={projects} index={0} limit={9} />
424 |             </div>
425 |             <div className="white-space-32"></div>
426 |             <div className="btn-container justify-center">
427 |               <Link href="/portafolio">
428 |                 <a
429 |                   className="btn btn-primary btn-large weight-bold text-center"
430 |                   id="view-all"
431 |                 >
432 |                   VER TODOS LOS PROYECTOS
433 |                 </a>
434 |               </Link>
435 |             </div>
436 |             <div className="white-space-64"></div>
437 |           </div>
438 |         </div>
439 | 
440 |         <div className="contact justify-center wow fadeIn" id="contact">
441 |           <div className="container column">
442 |             <div className="white-space-64"></div>
443 |             <h2 className="color-primary-alt text-center">
444 |               <span className="color-primary weight-bold">{"{"}</span>{" "}
445 |               CONTÁCTAME
446 |             </h2>
447 |             <div className="white-space-8"></div>
448 |             <p className="text-center">
449 |               Cuéntame tu idea, pregúntame o platiquemos
450 |             </p>
451 |             <div className="white-space-32"></div>
452 |             <div className="justify-center align-center">
453 |               <form method="POST" className="column" onSubmit={handleSubmit}>
454 |                 <div className="row justify-between">
455 |                   <div className="input-group column">
456 |                     <label
457 |                       htmlFor="name"
458 |                       className="color-darkgray weight-semi"
459 |                     >
460 |                       Nombre:
461 |                     </label>
462 |                     <div className="white-space-4"></div>
463 |                     <input
464 |                       type="text"
465 |                       name="name"
466 |                       id="name"
467 |                       minLength="6"
468 |                       maxLength="60"
469 |                       className="input input-radius"
470 |                       required
471 |                     />
472 |                   </div>
473 |                   <div className="input-group column">
474 |                     <label
475 |                       htmlFor="email"
476 |                       className="color-darkgray weight-semi"
477 |                     >
478 |                       Correo:
479 |                     </label>
480 |                     <div className="white-space-4"></div>
481 |                     <input
482 |                       type="email"
483 |                       name="email"
484 |                       id="email"
485 |                       minLength="8"
486 |                       maxLength="100"
487 |                       className="input input-radius"
488 |                       required
489 |                     />
490 |                   </div>
491 |                 </div>
492 |                 <div className="white-space-16"></div>
493 |                 <div className="column">
494 |                   <label
495 |                     htmlFor="message"
496 |                     className="color-darkgray weight-semi"
497 |                   >
498 |                     Redacta tu mensaje:
499 |                   </label>
500 |                   <div className="white-space-4"></div>
501 |                   <textarea
502 |                     name="message"
503 |                     rows="10"
504 |                     minLength="25"
505 |                     maxLength="600"
506 |                     className="input input-radius textarea"
507 |                     required
508 |                   ></textarea>
509 |                 </div>
510 |                 <div className="white-space-16"></div>
511 |                 <div className="justify-center">
512 |                   <Link href="/politicas">
513 |                     <a>
514 |                       Al enviar aceptas la política de privacidad del sitio Web,
515 |                       puedes consultarlo con un click.
516 |                     </a>
517 |                   </Link>
518 |                 </div>
519 |                 <div className="white-space-16"></div>
520 |                 <div className="justify-center align-center">
521 |                   <HCaptcha
522 |                     sitekey={process.env.NEXT_PUBLIC_HCAPTCHA}
523 |                     onVerify={(token) => setCaptcha(token)}
524 |                     onExpire={() => setCaptcha(false)}
525 |                     onError={() => setCaptcha(false)}
526 |                   />
527 |                 </div>
528 |                 <div className="white-space-16"></div>
529 |                 <div className="btn-container justify-center">
530 |                   <button
531 |                     type="submit"
532 |                     className="btn btn-large btn-primary color-white weight-bold"
533 |                   >
534 |                     ENVIAR
535 |                   </button>
536 |                 </div>
537 |               </form>
538 |             </div>
539 |             <div className="white-space-64"></div>
540 |           </div>
541 |         </div>
542 |       </div>
543 |     </Layout>
544 |   );
545 | };
546 | 
547 | export default PageIndex;
548 | 


--------------------------------------------------------------------------------
/src/pages/politicas.jsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @version 1.0.0
  3 |  * @author Trejocode - Sergio
  4 |  * @description Página /politicas
  5 |  */
  6 | 
  7 | import Layout from "components/Layout";
  8 | 
  9 | const PagePolicies = () => {
 10 |   return (
 11 |     <Layout title="Políticas de Privacidad y Recolección de datos - Trejocode">
 12 |       <div className="page-policies justify-center">
 13 |         <div className="container column">
 14 |           <div className="white-space-48"></div>
 15 |           <p>
 16 |             <strong>POLÍTICA DE PRIVACIDAD</strong>
 17 |           </p>
 18 |           <p>&nbsp;</p>
 19 |           <p>
 20 |             La presente Política de Privacidad establece los términos en que
 21 |             TrejoCode usa y protege la información que es proporcionada por sus
 22 |             usuarios al momento de utilizar su sitio web. Esta compañía está
 23 |             comprometida con la seguridad de los datos de sus usuarios. Cuando
 24 |             le pedimos llenar los campos de información personal con la cual
 25 |             usted pueda ser identificado, lo hacemos asegurando que sólo se
 26 |             empleará de acuerdo con los términos de este documento. Sin embargo
 27 |             esta Política de Privacidad puede cambiar con el tiempo o ser
 28 |             actualizada por lo que le recomendamos y enfatizamos revisar
 29 |             continuamente esta página para asegurarse que está de acuerdo con
 30 |             dichos cambios.
 31 |           </p>
 32 |           <div className="white-space-24"></div>
 33 |           <p>
 34 |             <strong>Información que es recogida</strong>
 35 |           </p>
 36 |           <p>
 37 |             Nuestro sitio web podrá recoger información personal por ejemplo:
 38 |             nombre,&nbsp; información de contacto como&nbsp; su dirección de
 39 |             correo electrónica e información demográfica. Así mismo cuando sea
 40 |             necesario podrá ser requerida información específica para procesar
 41 |             algún pedido o realizar una entrega o facturación.
 42 |           </p>
 43 |           <div className="white-space-24"></div>
 44 |           <p>
 45 |             <strong>Uso de la información recogida</strong>
 46 |           </p>
 47 |           <p>
 48 |             Nuestro sitio web emplea la información con el fin de proporcionar
 49 |             el mejor servicio posible, particularmente para mantener un registro
 50 |             de usuarios, de pedidos en caso que aplique, y mejorar nuestros
 51 |             productos y servicios. &nbsp;Es posible que sean enviados correos
 52 |             electrónicos periódicamente a través de nuestro sitio con ofertas
 53 |             especiales, nuevos productos y otra información publicitaria que
 54 |             consideremos relevante para usted o que pueda brindarle algún
 55 |             beneficio, estos correos electrónicos serán enviados a la dirección
 56 |             que usted proporcione y podrán ser cancelados en cualquier momento.
 57 |           </p>
 58 |           <p>
 59 |             TrejoCode está altamente comprometido para cumplir con el compromiso
 60 |             de mantener su información segura. Usamos los sistemas más avanzados
 61 |             y los actualizamos constantemente para asegurarnos que no exista
 62 |             ningún acceso no autorizado.
 63 |           </p>
 64 |           <div className="white-space-24"></div>
 65 |           <p>
 66 |             <strong>Cookies</strong>
 67 |           </p>
 68 |           <p>
 69 |             Una cookie se refiere a un fichero que es enviado con la finalidad
 70 |             de solicitar permiso para almacenarse en su ordenador, al aceptar
 71 |             dicho fichero se crea y la cookie sirve entonces para tener
 72 |             información respecto al tráfico web, y también facilita las futuras
 73 |             visitas a una web recurrente. Otra función que tienen las cookies es
 74 |             que con ellas las web pueden reconocerte individualmente y por tanto
 75 |             brindarte el mejor servicio personalizado de su web.
 76 |           </p>
 77 |           <p>
 78 |             Nuestro sitio web emplea las cookies para poder identificar las
 79 |             páginas que son visitadas y su frecuencia. Esta información es
 80 |             empleada únicamente para análisis estadístico y después la
 81 |             información se elimina de forma permanente. Usted puede eliminar las
 82 |             cookies en cualquier momento desde su ordenador. Sin embargo las
 83 |             cookies ayudan a proporcionar un mejor servicio de los sitios web,
 84 |             estás no dan acceso a información de su ordenador ni de usted, a
 85 |             menos de que usted así lo quiera y la proporcione directamente,
 86 |             visitas a una web. Usted puede aceptar o negar el uso de cookies,
 87 |             sin embargo la mayoría de navegadores aceptan cookies
 88 |             automáticamente pues sirve para tener un mejor servicio web. También
 89 |             usted puede cambiar la configuración de su ordenador para declinar
 90 |             las cookies. Si se declinan es posible que no pueda utilizar algunos
 91 |             de nuestros servicios.
 92 |           </p>
 93 |           <div className="white-space-24"></div>
 94 |           <p>
 95 |             <strong>Enlaces a Terceros</strong>
 96 |           </p>
 97 |           <p>
 98 |             Este sitio web pudiera contener en laces a otros sitios que pudieran
 99 |             ser de su interés. Una vez que usted de clic en estos enlaces y
100 |             abandone nuestra página, ya no tenemos control sobre al sitio al que
101 |             es redirigido y por lo tanto no somos responsables de los términos o
102 |             privacidad ni de la protección de sus datos en esos otros sitios
103 |             terceros. Dichos sitios están sujetos a sus propias políticas de
104 |             privacidad por lo cual es recomendable que los consulte para
105 |             confirmar que usted está de acuerdo con estas.
106 |           </p>
107 |           <div className="white-space-24"></div>
108 |           <p>
109 |             <strong>Control de su información personal</strong>
110 |           </p>
111 |           <p>
112 |             En cualquier momento usted puede restringir la recopilación o el uso
113 |             de la información personal que es proporcionada a nuestro sitio
114 |             web.&nbsp; Cada vez que se le solicite rellenar un formulario, como
115 |             el de alta de usuario, puede marcar o desmarcar la opción de recibir
116 |             información por correo electrónico. &nbsp;En caso de que haya
117 |             marcado la opción de recibir nuestro boletín o publicidad usted
118 |             puede cancelarla en cualquier momento.
119 |           </p>
120 |           <p>
121 |             Esta compañía no venderá, cederá ni distribuirá la información
122 |             personal que es recopilada sin su consentimiento, salvo que sea
123 |             requerido por un juez con un orden judicial.
124 |           </p>
125 |           <p>
126 |             TrejoCode Se reserva el derecho de cambiar los términos de la
127 |             presente Política de Privacidad en cualquier momento.
128 |           </p>
129 |           <div className="white-space-48"></div>
130 |         </div>
131 |       </div>
132 |     </Layout>
133 |   );
134 | };
135 | 
136 | export default PagePolicies;
137 | 


--------------------------------------------------------------------------------
/src/pages/portafolio.jsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @version 1.2.0
 3 |  * @author Trejocode - Sergio
 4 |  * @description Página /portafolio
 5 |  */
 6 | 
 7 | import Layout from "components/Layout";
 8 | import projects from "../../public/data/projects.json";
 9 | import CardProjects from "components/cards/Project";
10 | 
11 | const PagePortafolio = () => {
12 |   return (
13 |     <Layout
14 |       title="Portafolio"
15 |       description="Explora todos los proyectos que realicé o participé como desarrollador"
16 |     >
17 |       <div className="page-portafolio justify-center">
18 |         <div className="container column">
19 |           <div className="white-space-48"></div>
20 |           <h2 className="color-secondary-alt">
21 |             <span className="color-secondary-alt weight-bold">{`{`}</span>{" "}
22 |             PORTAFOLIO
23 |           </h2>
24 |           <div className="white-space-16"></div>
25 |           <p className="weight-medium">
26 |             Esta es una colección de proyectos en los que he trabajado a lo
27 |             largo de mis años como desarrollador y estudiante, esto es lo que
28 |             hago y amo hacer.
29 |           </p>
30 |           <div className="white-space-16"></div>
31 |           <div className="portfolio">
32 |             <CardProjects projects={projects} />
33 |           </div>
34 |           <div className="white-space-48"></div>
35 |         </div>
36 |       </div>
37 |     </Layout>
38 |   );
39 | };
40 | 
41 | export default PagePortafolio;
42 | 


--------------------------------------------------------------------------------
/src/sass/components/alerts/_popover.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @version 1.1.0
 3 |  * @description Estilos del componente PopOver
 4 | */
 5 | 
 6 | .popover {
 7 | 
 8 |     padding: 10px 0;
 9 |     background-color: var(--primary);
10 | 
11 |     a { 
12 |         font-size: 0.93rem; 
13 |         color: var(--white);
14 |         font-weight: $weightSemi;
15 |     }
16 | 
17 |     @media screen and (max-width: 768px) {
18 |         
19 |         a { font-size: 0.9rem; }
20 |     
21 |     }
22 | 
23 | }
24 | 
25 | html[data-theme='dark'] {
26 | 
27 |     .popover {
28 | 
29 |         background-color: var(--white);
30 |     
31 |         a {
32 |             color: var(--black);
33 |         }
34 |     
35 |     }
36 | 
37 | }
38 | 


--------------------------------------------------------------------------------
/src/sass/components/buttons/_buttons.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @version 1.1.0
 3 |  * @description Estilos para los botones
 4 | */
 5 | 
 6 | button, .btn {
 7 |     cursor: pointer;
 8 | }
 9 | 
10 | .btn {
11 |     border-radius: 4px;
12 |     font-size: $fontSmall;
13 |     font-weight: $weightMedium;
14 |     transition: all 250ms ease-in-out;
15 |     padding: $paddingNormal $paddingMedium;
16 | }
17 | 
18 | .btn-medium {
19 |     padding: 14px $paddingMedium;
20 | }
21 | 
22 | .btn-primary {
23 |     color: var(--white);
24 |     background-color: var(--primary);
25 |     &:hover {
26 |         background-color: var(--primary-alt);
27 |     }
28 | }
29 | 
30 | .btn-secondary {
31 |     background-color: var(--secondary);
32 | }
33 | 
34 | .btn-large {
35 |     font-size: $fontSmall;
36 |     padding: $paddingMedium $paddingSemi;
37 | }
38 | 
39 | header {
40 | 
41 |     .btn-light-toggle {
42 |         background-color: transparent;
43 |     }
44 | 
45 | }
46 | 
47 | 
48 | html[data-theme='dark'] {
49 |  
50 |     .btn-primary {
51 |         color: var(--black);
52 |         background-color: #535353;
53 |         &:hover {
54 |             background-color: #6c6c6c;
55 |         }
56 |     }
57 | 
58 | }


--------------------------------------------------------------------------------
/src/sass/components/footer/_footer.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @version 1.1.0
 3 |  * @description Estilos del componente Footer
 4 | */
 5 | 
 6 | footer {
 7 | 
 8 |     .footer-top {
 9 | 
10 |         background-color: var(--primary-alt);
11 | 
12 |         img { max-height: 50px; }
13 | 
14 |         .top-page { display: none; }
15 | 
16 |     }
17 | 
18 | 
19 |     @media screen and (max-width: 576px) {
20 |         
21 |         .footer-top {
22 | 
23 |             .top-page {
24 | 
25 |                 display: flex;
26 |     
27 |                 a {
28 |                     width: 32px;
29 |                     height: 32px;
30 |                     border-radius: 4px;
31 |                     background-color: var(--white);
32 |                     margin-bottom: $marginSemi;
33 |                 }
34 |     
35 |             }
36 | 
37 |         }
38 | 
39 |     }
40 | 
41 | 
42 | }
43 | 
44 | html[data-theme='dark'] {
45 |  
46 |     footer {
47 | 
48 |         .footer-top {
49 |             background-color: var(--white);
50 |         }
51 |         
52 |     }
53 | 
54 | }


--------------------------------------------------------------------------------
/src/sass/components/header/_header.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @version 1.1.0
 3 |  * @description Estilos del componente Header
 4 | */
 5 | 
 6 | header {
 7 | 
 8 |     height: 100px;
 9 |     border-bottom: 1px solid #e9e9e9;
10 | 
11 |     .right {
12 |         align-items: center;
13 |         justify-content: flex-end;
14 |     }
15 | 
16 |     nav {
17 | 
18 |         justify-content: flex-end;
19 | 
20 |         a { 
21 |             padding: 0 $paddingMedium;
22 |             transition: color 300ms ease-in-out;
23 |             &:hover { color: var(--primary); }
24 |         }   
25 | 
26 |     }
27 | 
28 |     .social {
29 | 
30 |         a, button {
31 |             color: var(--primary-alt);
32 |             padding: 0 $paddingNormal;
33 |             transition: color 300ms ease-in-out;
34 |             &:hover { color: var(--primary); }
35 |         }
36 | 
37 |     }
38 | 
39 |     @media screen and (max-width: 992px) {
40 | 
41 |         .left { width: 20%; }
42 | 
43 |         .right  { width: 80%; }
44 | 
45 |         nav {
46 | 
47 |             a { 
48 |                 font-size: $fontText;
49 |                 padding: 0 $paddingNormal;
50 |             }
51 | 
52 |         }
53 |     
54 |     }
55 |     
56 |     @media screen and (max-width: 768px) {
57 | 
58 |         .left {
59 | 
60 |             width: 100%;
61 | 
62 |             .logo {
63 | 
64 |                 img { max-height: 60px; }
65 | 
66 |             }
67 | 
68 |         }
69 | 
70 |         nav { display: none; }
71 | 
72 |         .social a { font-size: $fontMedium; }
73 | 
74 |     }
75 | 
76 | }
77 | 
78 | html[data-theme='dark'] {
79 |  
80 |     header {
81 |         border-bottom: 1px solid #383838;
82 |     }
83 | 
84 | }


--------------------------------------------------------------------------------
/src/sass/components/inputs/_inputs.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @version 1.0.0
 3 |  * @description Estilos para las entradas de datos
 4 | */
 5 | 
 6 | .input {    
 7 |     color: #7a7b7b;
 8 |     font-family: $IBM;
 9 |     font-weight: $weightMedium;
10 |     background-color: #f5f6f7;
11 |     border: 2px solid #dcddde;
12 |     padding: $paddingMedium $paddingNormal;
13 |     transition: border 400ms ease-in-out;
14 | 
15 |     &:focus {
16 |         border: 2px solid var(--aqua);
17 |     }
18 | 
19 | }
20 | 
21 | .input-radius {
22 |     border-radius: 4px;
23 | }
24 | 
25 | .textarea {
26 |     resize: none;
27 |     width: 100%;
28 | }
29 | 
30 | .page-home {
31 |     
32 |     .contact {
33 | 
34 |         .input-group {
35 |             min-width: 48%;
36 |         }
37 | 
38 |     }
39 |     
40 | }


--------------------------------------------------------------------------------
/src/sass/core/_colors.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * @version 2.0.0
  3 |  * @author Trejocode - Sergio
  4 |  * @description Base de colores compatible con WCAG AA
  5 | */
  6 | 
  7 | :root {
  8 | 
  9 |     --primary:       #3E816D;
 10 |     --primary-alt:   #288091;
 11 |     --secondary:     #263d54;
 12 |     --secondary-alt: #516376;
 13 |     --success:       #27ae60;
 14 |     --warning:       #f39c12;
 15 |     --danger:        #c0392b;
 16 |     --info:          #258395;
 17 | 
 18 |     --black:     #262626;
 19 |     --white:     #FFFFFF;
 20 |     --gray:      #6c6c6c;  
 21 |     --darkgray:  #4b4b4b;
 22 | 
 23 |     --darkBlue:  #263d54;
 24 |     --darkAqua:  #258395;
 25 |     --aqua:      #33c8a3;
 26 |     --lightBg:   #ebf3f5;
 27 | 
 28 | }
 29 | 
 30 | .color-primary {
 31 |     color: var(--primary);
 32 | }
 33 | 
 34 | .color-primary-alt {
 35 |     color: var(--primary-alt);
 36 | }
 37 | 
 38 | .color-secondary {
 39 |     color: var(--secondary);
 40 | }
 41 | 
 42 | .color-secondary-alt {
 43 |     color: var(--secondary-alt);
 44 | }
 45 | 
 46 | .color-success {
 47 |     color: var(--success);
 48 | }
 49 | 
 50 | .color-warning {
 51 |     color: var(--warning);
 52 | }
 53 | 
 54 | .color-danger {
 55 |     color: var(--danger);
 56 | }
 57 | 
 58 | .color-info {
 59 |     color: var(--info);
 60 | }
 61 | 
 62 | .color-gray {
 63 |     color: var(--gray);
 64 | }
 65 | 
 66 | .color-darkgray {
 67 |     color: var(--darkgray);
 68 | }
 69 | 
 70 | .color-black {
 71 |     color: var(--black);
 72 | }
 73 | 
 74 | .color-white {
 75 |     color: var(--white);
 76 | }
 77 | 
 78 | html[data-theme='dark'] {
 79 |  
 80 |     --primary:       #3E816D;
 81 |     --primary-alt:   #FFFFFF;
 82 |     --secondary:     #FFFFFF;
 83 |     --secondary-alt: #FFFFFF;
 84 |     --success:       #27ae60;
 85 |     --warning:       #f39c12;
 86 |     --danger:        #c0392b;
 87 |     --info:          #258395;
 88 | 
 89 |     --black:     #ebebeb;
 90 |     --white:     #0a0a0a;
 91 |     --gray:      #c2c2c2;  
 92 |     --darkgray:  #a0a0a0;
 93 | 
 94 |     body {
 95 |         background-color: #2c2c2c;
 96 |     }
 97 | 
 98 |     .color-white {
 99 |         color: var(--black);
100 |     }
101 | 
102 |     .color-black {
103 |         color: #000000;
104 |     }
105 |     
106 | 
107 | }


--------------------------------------------------------------------------------
/src/sass/core/_dev.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @version 1.0.0
 3 |  * @description Mixin para pintar los media de colores
 4 | */
 5 | 
 6 | @mixin dev {
 7 | 
 8 |     @media screen and (max-width: 992px) {
 9 |         body { background: gray; }
10 |     }
11 | 
12 |     @media screen and (max-width: 768px) {
13 |         body { background: lightgrey; }
14 |     }
15 | 
16 |     @media screen and (max-width: 576px) {
17 |         body { background: white; }
18 |     }
19 | 
20 | }


--------------------------------------------------------------------------------
/src/sass/core/_fonts.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * @version 1.0.1
  3 |  * @description Estilos para las fuentes de texto
  4 | */
  5 | 
  6 | /*    FONT FAMILIES    */
  7 | 
  8 | $IBM: 'IBM Plex Sans', sans-serif;
  9 | 
 10 | 
 11 | /*    FONT SIZES    */
 12 | 
 13 | $fontMini:      0.8rem;
 14 | $fontTiny:      0.9rem;
 15 | $fontText:      0.93rem;
 16 | $fontSmall:     1rem;
 17 | $fontRegular:   1.2rem;
 18 | $fontMedium:    1.4rem;
 19 | $fontSemi:      1.6rem;
 20 | $fontLarge:     1.8rem;
 21 | $fontDouble:    2rem;
 22 | $fontTriple:    2.5rem;
 23 | 
 24 | .font-triple {
 25 | 	font-size: $fontTriple;
 26 | }
 27 | 
 28 | .font-double {
 29 | 	font-size: $fontDouble;
 30 | }
 31 | 
 32 | .font-large {
 33 | 	font-size: $fontLarge;
 34 | }
 35 | 
 36 | .font-semi {
 37 | 	font-size: $fontSemi;
 38 | }
 39 | 
 40 | .font-medium {
 41 | 	font-size: $fontMedium;
 42 | }
 43 | 
 44 | .font-regular {
 45 | 	font-size: $fontRegular;
 46 | }
 47 | 
 48 | .font-small {
 49 | 	font-size: $fontSmall;
 50 | }
 51 | 
 52 | .font-text {
 53 | 	font-size: $fontText;
 54 | }
 55 | 
 56 | .font-tiny {
 57 | 	font-size: $fontTiny;
 58 | }
 59 | 
 60 | .font-mini {
 61 | 	font-size: $fontMini;
 62 | }
 63 | 
 64 | /*    FONT WEIGHTS 
 65 | 
 66 |     - Based on 'IBM Plex Sans'
 67 | 
 68 | */
 69 | 
 70 | $weightRegular: 400;
 71 | $weightMedium: 	500;
 72 | $weightSemi: 	600;
 73 | $weightBold: 	700;
 74 | 
 75 | h1, h2, h3, h4, h5, h6, p, a, b, span, th, td, li, caption,
 76 | label, strong, legend, em, button, select, option, input, button {
 77 |     color: var(--black);
 78 |     font-family: $IBM;
 79 | }
 80 | 
 81 | h1 {
 82 | 	font-size: $fontLarge;
 83 | 	font-weight: $weightBold;
 84 | }
 85 | 
 86 | h2 {
 87 | 	font-size: $fontSemi;
 88 | 	font-weight: $weightSemi;
 89 | }
 90 | 
 91 | h3 {
 92 | 	font-size: $fontMedium;
 93 | 	font-weight: $weightSemi;
 94 | }
 95 | 
 96 | h4 {
 97 | 	font-size: $fontRegular;
 98 | 	font-weight: $weightMedium;
 99 | }
100 | 
101 | h5 {
102 | 	font-size: $fontSmall;
103 | 	font-weight: $weightMedium;
104 | }
105 | 
106 | h6 {
107 | 	font-size: $fontText;
108 | 	font-weight: $weightRegular;
109 | }
110 | 
111 | p, a, li, label, caption {
112 | 	color: var(--gray);
113 | 	line-height: 1.5rem;
114 |     font-size: $fontText;
115 | }
116 | 
117 | b, i, span, strong, em {
118 | 	color: inherit;
119 | 	font-size: inherit;
120 | }
121 | 
122 | .uppercase {
123 |     text-transform: uppercase;
124 | }
125 | 
126 | .underline {
127 |     text-decoration: underline;
128 | }
129 | 
130 | 
131 | .weight-regular {
132 | 	font-weight: $weightRegular;
133 | }
134 | 
135 | .weight-medium {
136 |     font-weight: $weightMedium;
137 | }
138 | 
139 | .weight-semi {
140 | 	font-weight: $weightSemi;
141 | }
142 | 
143 | .weight-bold {
144 |     font-weight: $weightBold;
145 | }
146 | 
147 | 
148 | ::selection {
149 | 	color: var(--white);
150 |     background-color: var(--primary);
151 | }
152 | 
153 | @media screen and (max-width: 768px) {
154 | 
155 | 	.font-triple { font-size: $fontDouble; }
156 | 	
157 | 	.font-double { font-size: $fontLarge; }
158 | 
159 | }


--------------------------------------------------------------------------------
/src/sass/core/_spacings.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @version 1.0.0
 3 |  * @description Estilos de espaciados
 4 | */
 5 | 
 6 | /*    PADDINGS, MARGINS
 7 | 
 8 |     This properties also applies for 'Margins'
 9 | 
10 | */
11 | 
12 | $paddingNormal: 8px;
13 | $paddingMedium: 16px;
14 | $paddingSemi:   24px;
15 | $paddingLarge:  32px;
16 | $paddingHuge:   48px;
17 | 
18 | 
19 | /*      Margins       */
20 | 
21 | $marginNormal:       8px;
22 | $marginMedium:      16px;
23 | $marginSemi:        24px;
24 | $marginLarge:       32px;
25 | $marginHuge:        48px;
26 | 
27 | /*    WHITE SPACES    */
28 | 
29 | .white-space-4 {
30 |     height: 4px;
31 | }
32 | 
33 | .white-space-8 {
34 |     height: 8px;
35 | }
36 | 
37 | .white-space-16 {
38 |     height: 16px;
39 | }
40 | 
41 | .white-space-24 {
42 |     height: 24px;
43 | }
44 | 
45 | .white-space-32 {
46 |     height: 32px;
47 | }
48 | 
49 | .white-space-48 {
50 |     height: 48px;
51 | }
52 | 
53 | .white-space-64 {
54 |     height: 64px;
55 | }
56 | 
57 | @media screen and (max-width: 768px) {
58 | 
59 |     .white-space-48 {
60 |         height: 32px;
61 |     }
62 |     
63 |     .white-space-64 {
64 |         height: 48px;
65 |     }
66 | 
67 | }


--------------------------------------------------------------------------------
/src/sass/core/_trejocode.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * @version 1.4.0
  3 |  * @author Trejocode - Sergio
  4 |  * @description Hoja de estilos basada en flexbox para maquetar estructuras flexibles
  5 | */
  6 | 
  7 | /* RESET
  8 |    =============================
  9 |    Estas propiedades permiten la compatibilidad de uniformidad cruzada para los navegadores.
 10 | */
 11 | 
 12 | * {
 13 | 
 14 |     margin: 0;
 15 |     padding: 0;
 16 | 
 17 |     &::before { box-sizing: border-box; }
 18 | 
 19 |     &::after { box-sizing: border-box; }
 20 | 
 21 | }
 22 | 
 23 | :root { font-size: 16px; }
 24 | 
 25 | html {
 26 | 
 27 |     font-size: 100%;
 28 |     line-height: 1.15;
 29 |     -webkit-text-size-adjust: 100%;
 30 | 
 31 | }
 32 | 
 33 | body {
 34 |     overflow-x: hidden;
 35 | }
 36 | 
 37 | iframe { border: none; }
 38 | 
 39 | input,  select,
 40 | option, button,
 41 | textarea, optgroup {
 42 | 
 43 |     margin: 0;
 44 | 	border: 0;
 45 |     padding: 0;
 46 |     font-size: 100%;
 47 |     line-height: 1.15;
 48 |     font-family: inherit;
 49 | 
 50 | }
 51 | 
 52 | [type="checkbox"],
 53 | [type="radio"] {
 54 | 
 55 |     padding: 0;
 56 |     box-sizing: border-box;
 57 | 
 58 | }
 59 | 
 60 | a {
 61 | 
 62 |     color: inherit;
 63 |     font-size: inherit;
 64 |     word-break: keep-all;
 65 |     text-decoration: none;
 66 |     background-color: transparent;
 67 | 
 68 | }
 69 | 
 70 | img {
 71 | 
 72 |     height: auto;
 73 |     max-width: 100%;
 74 |     border-style: none;
 75 | 
 76 | }
 77 | 
 78 | 
 79 | /* CLASES
 80 |    =============================
 81 | 	1. = FLEX LAYOUT
 82 | 	2. = ALINEACIÓN
 83 |     3. = ESPACIOS EN BLANCO
 84 |     4. = IMÁGENES
 85 |     6. = DECORATORES
 86 | */
 87 | 
 88 | 
 89 | /*    FLEX LAYOUT
 90 |     - This stylesheet is based on flexbox.
 91 |     - W3 CSS Flexible Box Layout Module:
 92 |        https://www.w3.org/TR/css-flexbox-1
 93 |     
 94 | */
 95 | 
 96 | .flex {
 97 | 
 98 |     width: 100%;
 99 |     display: flex;
100 | 
101 | }
102 | 
103 | .responsive-img {
104 | 
105 |     display: flex;
106 |     align-items: flex-start;
107 |     justify-content: flex-start;
108 | 
109 | }
110 | 
111 | .row {
112 | 
113 |     display: flex;
114 |     flex-direction: row;
115 | 
116 | }
117 | 
118 | .row-responsive {
119 | 
120 |     display: flex;
121 |     flex-direction: row;
122 | 
123 | }
124 | 
125 | .column {
126 | 
127 |     display: flex;
128 |     flex-direction: column;
129 | 
130 | }
131 | 
132 | .wrap {
133 | 
134 |     display: flex;
135 |     flex-wrap: wrap;
136 | 
137 | }
138 | 
139 | .nowrap {
140 | 
141 |     display: flex;
142 |     flex-wrap: nowrap;
143 | 
144 | }
145 | 
146 | 
147 | /*    ALINEACIÓN    */
148 | 
149 | 
150 | .justify-center {
151 | 
152 |     display: flex;
153 |     justify-content: center;
154 | 
155 | }
156 | 
157 | .justify-start {
158 | 
159 |     display: flex;
160 |     justify-content: flex-start;
161 | 
162 | }
163 | 
164 | .justify-end {
165 | 
166 |     display: flex;
167 |     justify-content: flex-end;
168 | 
169 | }
170 | 
171 | .justify-between {
172 | 
173 |     display: flex;
174 |     justify-content: space-between;
175 | 
176 | }
177 | 
178 | .justify-around {
179 | 
180 |     display: flex;
181 |     justify-content: space-around;
182 | 
183 | }
184 | 
185 | .align-center {
186 | 
187 |     display: flex;
188 |     align-items: center;
189 | 
190 | }
191 | 
192 | .align-start {
193 | 
194 |     display: flex;
195 |     align-items: flex-start;
196 | 
197 | }
198 | 
199 | .align-end {
200 | 
201 |     display: flex;
202 |     align-items: flex-end;
203 | 
204 | }
205 | 
206 | .auto {
207 | 
208 |     width: auto;    
209 |     display: flex;
210 | 
211 | }
212 | 
213 | .full {
214 | 
215 |     width: 100%;
216 |     display: flex;
217 | 
218 | }
219 | 
220 | .container {
221 | 
222 |     width: 90%;
223 |     display: flex;
224 | 
225 | }
226 | 
227 | 
228 | 
229 | /*    ALINEACIÓN DEL TEXTO    */
230 | 
231 | 
232 | .text-left { text-align: left; }
233 | 
234 | 
235 | .text-center { text-align: center; }
236 | 
237 | 
238 | .text-justify { text-align: justify; }
239 | 
240 | 
241 | .text-right { text-align: right; }
242 | 
243 | 
244 | 
245 | /*    IMÁGENES    */
246 | 
247 | .cover-img { object-fit: cover; }
248 | 
249 | 
250 | .contain-img { object-fit: contain; }
251 | 
252 | 
253 | 
254 | /*    DECORADORES    */
255 | 
256 | .hidden { display: none !important; }
257 | 
258 | 
259 | .cursor-pointer { cursor: pointer; }
260 | 
261 | 
262 | .grid { display: grid; }
263 | 
264 | 
265 | 
266 | /* MEDIA QUERIES
267 |    =============================
268 | */
269 | 
270 | @media screen and (min-width: 1440px) {
271 | 
272 |     .container { max-width: 1300px; }
273 | 
274 | }
275 | 
276 | 
277 | @media screen and (max-width: 768px) {    
278 |     
279 |     .row-responsive { flex-direction: column; }
280 | 
281 |     .white-space-64 { height: 48px; }
282 |     
283 | }
284 | 
285 | 
286 | @media screen and (max-width: 576px) {
287 | 
288 |     .container { width: 92%; }
289 | 
290 | }


--------------------------------------------------------------------------------
/src/sass/libs/_animate.scss:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";body{-webkit-backface-visibility:hidden;}.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes flash{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}}@-moz-keyframes flash{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}}@-o-keyframes flash{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}}@keyframes flash{0%,50%,100%{opacity:1;}25%,75%{opacity:0;}}.animated.flash{-webkit-animation-name:flash;-moz-animation-name:flash;-o-animation-name:flash;animation-name:flash;}@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);}20%,40%,60%,80%{-webkit-transform:translateX(10px);}}@-moz-keyframes shake{0%,100%{-moz-transform:translateX(0);}10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);}20%,40%,60%,80%{-moz-transform:translateX(10px);}}@-o-keyframes shake{0%,100%{-o-transform:translateX(0);}10%,30%,50%,70%,90%{-o-transform:translateX(-10px);}20%,40%,60%,80%{-o-transform:translateX(10px);}}@keyframes shake{0%,100%{transform:translateX(0);}10%,30%,50%,70%,90%{transform:translateX(-10px);}20%,40%,60%,80%{transform:translateX(10px);}}.animated.shake{-webkit-animation-name:shake;-moz-animation-name:shake;-o-animation-name:shake;animation-name:shake;}@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}40%{-webkit-transform:translateY(-30px);}60%{-webkit-transform:translateY(-15px);}}@-moz-keyframes bounce{0%,20%,50%,80%,100%{-moz-transform:translateY(0);}40%{-moz-transform:translateY(-30px);}60%{-moz-transform:translateY(-15px);}}@-o-keyframes bounce{0%,20%,50%,80%,100%{-o-transform:translateY(0);}40%{-o-transform:translateY(-30px);}60%{-o-transform:translateY(-15px);}}@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0);}40%{transform:translateY(-30px);}60%{transform:translateY(-15px);}}.animated.bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-o-animation-name:bounce;animation-name:bounce;}@-webkit-keyframes tada{0%{-webkit-transform:scale(1);}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);}100%{-webkit-transform:scale(1) rotate(0);}}@-moz-keyframes tada{0%{-moz-transform:scale(1);}10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);}40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}100%{-moz-transform:scale(1) rotate(0);}}@-o-keyframes tada{0%{-o-transform:scale(1);}10%,20%{-o-transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{-o-transform:scale(1.1) rotate(3deg);}40%,60%,80%{-o-transform:scale(1.1) rotate(-3deg);}100%{-o-transform:scale(1) rotate(0);}}@keyframes tada{0%{transform:scale(1);}10%,20%{transform:scale(0.9) rotate(-3deg);}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}40%,60%,80%{transform:scale(1.1) rotate(-3deg);}100%{transform:scale(1) rotate(0);}}.animated.tada{-webkit-animation-name:tada;-moz-animation-name:tada;-o-animation-name:tada;animation-name:tada;}@-webkit-keyframes swing{20%,40%,60%,80%,100%{-webkit-transform-origin:top center;}20%{-webkit-transform:rotate(15deg);}40%{-webkit-transform:rotate(-10deg);}60%{-webkit-transform:rotate(5deg);}80%{-webkit-transform:rotate(-5deg);}100%{-webkit-transform:rotate(0deg);}}@-moz-keyframes swing{20%{-moz-transform:rotate(15deg);}40%{-moz-transform:rotate(-10deg);}60%{-moz-transform:rotate(5deg);}80%{-moz-transform:rotate(-5deg);}100%{-moz-transform:rotate(0deg);}}@-o-keyframes swing{20%{-o-transform:rotate(15deg);}40%{-o-transform:rotate(-10deg);}60%{-o-transform:rotate(5deg);}80%{-o-transform:rotate(-5deg);}100%{-o-transform:rotate(0deg);}}@keyframes swing{20%{transform:rotate(15deg);}40%{transform:rotate(-10deg);}60%{transform:rotate(5deg);}80%{transform:rotate(-5deg);}100%{transform:rotate(0deg);}}.animated.swing{-webkit-transform-origin:top center;-moz-transform-origin:top center;-o-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;-moz-animation-name:swing;-o-animation-name:swing;animation-name:swing;}@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%);}15%{-webkit-transform:translateX(-25%) rotate(-5deg);}30%{-webkit-transform:translateX(20%) rotate(3deg);}45%{-webkit-transform:translateX(-15%) rotate(-3deg);}60%{-webkit-transform:translateX(10%) rotate(2deg);}75%{-webkit-transform:translateX(-5%) rotate(-1deg);}100%{-webkit-transform:translateX(0%);}}@-moz-keyframes wobble{0%{-moz-transform:translateX(0%);}15%{-moz-transform:translateX(-25%) rotate(-5deg);}30%{-moz-transform:translateX(20%) rotate(3deg);}45%{-moz-transform:translateX(-15%) rotate(-3deg);}60%{-moz-transform:translateX(10%) rotate(2deg);}75%{-moz-transform:translateX(-5%) rotate(-1deg);}100%{-moz-transform:translateX(0%);}}@-o-keyframes wobble{0%{-o-transform:translateX(0%);}15%{-o-transform:translateX(-25%) rotate(-5deg);}30%{-o-transform:translateX(20%) rotate(3deg);}45%{-o-transform:translateX(-15%) rotate(-3deg);}60%{-o-transform:translateX(10%) rotate(2deg);}75%{-o-transform:translateX(-5%) rotate(-1deg);}100%{-o-transform:translateX(0%);}}@keyframes wobble{0%{transform:translateX(0%);}15%{transform:translateX(-25%) rotate(-5deg);}30%{transform:translateX(20%) rotate(3deg);}45%{transform:translateX(-15%) rotate(-3deg);}60%{transform:translateX(10%) rotate(2deg);}75%{transform:translateX(-5%) rotate(-1deg);}100%{transform:translateX(0%);}}.animated.wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-o-animation-name:wobble;animation-name:wobble;}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);}50%{-webkit-transform:scale(1.1);}100%{-webkit-transform:scale(1);}}@-moz-keyframes pulse{0%{-moz-transform:scale(1);}50%{-moz-transform:scale(1.1);}100%{-moz-transform:scale(1);}}@-o-keyframes pulse{0%{-o-transform:scale(1);}50%{-o-transform:scale(1.1);}100%{-o-transform:scale(1);}}@keyframes pulse{0%{transform:scale(1);}50%{transform:scale(1.1);}100%{transform:scale(1);}}.animated.pulse{-webkit-animation-name:pulse;-moz-animation-name:pulse;-o-animation-name:pulse;animation-name:pulse;}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-webkit-animation-timing-function:ease-out;}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;}80%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;}100%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function:ease-in;}}@-moz-keyframes flip{0%{-moz-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-moz-animation-timing-function:ease-out;}40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-moz-animation-timing-function:ease-out;}50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in;}80%{-moz-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-moz-animation-timing-function:ease-in;}100%{-moz-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-moz-animation-timing-function:ease-in;}}@-o-keyframes flip{0%{-o-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-o-animation-timing-function:ease-out;}40%{-o-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-o-animation-timing-function:ease-out;}50%{-o-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-o-animation-timing-function:ease-in;}80%{-o-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-o-animation-timing-function:ease-in;}100%{-o-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-o-animation-timing-function:ease-in;}}@keyframes flip{0%{transform:perspective(400px) translateZ(0) rotateY(0) scale(1);animation-timing-function:ease-out;}40%{transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);animation-timing-function:ease-out;}50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;}80%{transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);animation-timing-function:ease-in;}100%{transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);animation-timing-function:ease-in;}}.animated.flip{-webkit-backface-visibility:visible !important;-webkit-animation-name:flip;-moz-backface-visibility:visible !important;-moz-animation-name:flip;-o-backface-visibility:visible !important;-o-animation-name:flip;backface-visibility:visible !important;animation-name:flip;}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-webkit-transform:perspective(400px) rotateX(-10deg);}70%{-webkit-transform:perspective(400px) rotateX(10deg);}100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1;}}@-moz-keyframes flipInX{0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-moz-transform:perspective(400px) rotateX(-10deg);}70%{-moz-transform:perspective(400px) rotateX(10deg);}100%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1;}}@-o-keyframes flipInX{0%{-o-transform:perspective(400px) rotateX(90deg);opacity:0;}40%{-o-transform:perspective(400px) rotateX(-10deg);}70%{-o-transform:perspective(400px) rotateX(10deg);}100%{-o-transform:perspective(400px) rotateX(0deg);opacity:1;}}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);opacity:0;}40%{transform:perspective(400px) rotateX(-10deg);}70%{transform:perspective(400px) rotateX(10deg);}100%{transform:perspective(400px) rotateX(0deg);opacity:1;}}.animated.flipInX{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipInX;-moz-backface-visibility:visible !important;-moz-animation-name:flipInX;-o-backface-visibility:visible !important;-o-animation-name:flipInX;backface-visibility:visible !important;animation-name:flipInX;}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1;}100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}}@-moz-keyframes flipOutX{0%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1;}100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}}@-o-keyframes flipOutX{0%{-o-transform:perspective(400px) rotateX(0deg);opacity:1;}100%{-o-transform:perspective(400px) rotateX(90deg);opacity:0;}}@keyframes flipOutX{0%{transform:perspective(400px) rotateX(0deg);opacity:1;}100%{transform:perspective(400px) rotateX(90deg);opacity:0;}}.animated.flipOutX{-webkit-animation-name:flipOutX;-webkit-backface-visibility:visible !important;-moz-animation-name:flipOutX;-moz-backface-visibility:visible !important;-o-animation-name:flipOutX;-o-backface-visibility:visible !important;animation-name:flipOutX;backface-visibility:visible !important;}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}40%{-webkit-transform:perspective(400px) rotateY(-10deg);}70%{-webkit-transform:perspective(400px) rotateY(10deg);}100%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:1;}}@-moz-keyframes flipInY{0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}40%{-moz-transform:perspective(400px) rotateY(-10deg);}70%{-moz-transform:perspective(400px) rotateY(10deg);}100%{-moz-transform:perspective(400px) rotateY(0deg);opacity:1;}}@-o-keyframes flipInY{0%{-o-transform:perspective(400px) rotateY(90deg);opacity:0;}40%{-o-transform:perspective(400px) rotateY(-10deg);}70%{-o-transform:perspective(400px) rotateY(10deg);}100%{-o-transform:perspective(400px) rotateY(0deg);opacity:1;}}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);opacity:0;}40%{transform:perspective(400px) rotateY(-10deg);}70%{transform:perspective(400px) rotateY(10deg);}100%{transform:perspective(400px) rotateY(0deg);opacity:1;}}.animated.flipInY{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipInY;-moz-backface-visibility:visible !important;-moz-animation-name:flipInY;-o-backface-visibility:visible !important;-o-animation-name:flipInY;backface-visibility:visible !important;animation-name:flipInY;}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:1;}100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}}@-moz-keyframes flipOutY{0%{-moz-transform:perspective(400px) rotateY(0deg);opacity:1;}100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}}@-o-keyframes flipOutY{0%{-o-transform:perspective(400px) rotateY(0deg);opacity:1;}100%{-o-transform:perspective(400px) rotateY(90deg);opacity:0;}}@keyframes flipOutY{0%{transform:perspective(400px) rotateY(0deg);opacity:1;}100%{transform:perspective(400px) rotateY(90deg);opacity:0;}}.animated.flipOutY{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipOutY;-moz-backface-visibility:visible !important;-moz-animation-name:flipOutY;-o-backface-visibility:visible !important;-o-animation-name:flipOutY;backface-visibility:visible !important;animation-name:flipOutY;}@-webkit-keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}@-moz-keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}@-o-keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}@keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}.animated.fadeIn{-webkit-animation-name:fadeIn;-moz-animation-name:fadeIn;-o-animation-name:fadeIn;animation-name:fadeIn;}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);}100%{opacity:1;-webkit-transform:translateY(0);}}@-moz-keyframes fadeInUp{0%{opacity:0;-moz-transform:translateY(20px);}100%{opacity:1;-moz-transform:translateY(0);}}@-o-keyframes fadeInUp{0%{opacity:0;-o-transform:translateY(20px);}100%{opacity:1;-o-transform:translateY(0);}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}.animated.fadeInUp{-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp;}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);}100%{opacity:1;-webkit-transform:translateY(0);}}@-moz-keyframes fadeInDown{0%{opacity:0;-moz-transform:translateY(-20px);}100%{opacity:1;-moz-transform:translateY(0);}}@-o-keyframes fadeInDown{0%{opacity:0;-o-transform:translateY(-20px);}100%{opacity:1;-o-transform:translateY(0);}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px);}100%{opacity:1;transform:translateY(0);}}.animated.fadeInDown{-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown;}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);}100%{opacity:1;-webkit-transform:translateX(0);}}@-moz-keyframes fadeInLeft{0%{opacity:0;-moz-transform:translateX(-20px);}100%{opacity:1;-moz-transform:translateX(0);}}@-o-keyframes fadeInLeft{0%{opacity:0;-o-transform:translateX(-20px);}100%{opacity:1;-o-transform:translateX(0);}}@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-20px);}100%{opacity:1;transform:translateX(0);}}.animated.fadeInLeft{-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft;}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);}100%{opacity:1;-webkit-transform:translateX(0);}}@-moz-keyframes fadeInRight{0%{opacity:0;-moz-transform:translateX(20px);}100%{opacity:1;-moz-transform:translateX(0);}}@-o-keyframes fadeInRight{0%{opacity:0;-o-transform:translateX(20px);}100%{opacity:1;-o-transform:translateX(0);}}@keyframes fadeInRight{0%{opacity:0;transform:translateX(20px);}100%{opacity:1;transform:translateX(0);}}.animated.fadeInRight{-webkit-animation-name:fadeInRight;-moz-animation-name:fadeInRight;-o-animation-name:fadeInRight;animation-name:fadeInRight;}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);}100%{opacity:1;-webkit-transform:translateY(0);}}@-moz-keyframes fadeInUpBig{0%{opacity:0;-moz-transform:translateY(2000px);}100%{opacity:1;-moz-transform:translateY(0);}}@-o-keyframes fadeInUpBig{0%{opacity:0;-o-transform:translateY(2000px);}100%{opacity:1;-o-transform:translateY(0);}}@keyframes fadeInUpBig{0%{opacity:0;transform:translateY(2000px);}100%{opacity:1;transform:translateY(0);}}.animated.fadeInUpBig{-webkit-animation-name:fadeInUpBig;-moz-animation-name:fadeInUpBig;-o-animation-name:fadeInUpBig;animation-name:fadeInUpBig;}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);}100%{opacity:1;-webkit-transform:translateY(0);}}@-moz-keyframes fadeInDownBig{0%{opacity:0;-moz-transform:translateY(-2000px);}100%{opacity:1;-moz-transform:translateY(0);}}@-o-keyframes fadeInDownBig{0%{opacity:0;-o-transform:translateY(-2000px);}100%{opacity:1;-o-transform:translateY(0);}}@keyframes fadeInDownBig{0%{opacity:0;transform:translateY(-2000px);}100%{opacity:1;transform:translateY(0);}}.animated.fadeInDownBig{-webkit-animation-name:fadeInDownBig;-moz-animation-name:fadeInDownBig;-o-animation-name:fadeInDownBig;animation-name:fadeInDownBig;}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);}100%{opacity:1;-webkit-transform:translateX(0);}}@-moz-keyframes fadeInLeftBig{0%{opacity:0;-moz-transform:translateX(-2000px);}100%{opacity:1;-moz-transform:translateX(0);}}@-o-keyframes fadeInLeftBig{0%{opacity:0;-o-transform:translateX(-2000px);}100%{opacity:1;-o-transform:translateX(0);}}@keyframes fadeInLeftBig{0%{opacity:0;transform:translateX(-2000px);}100%{opacity:1;transform:translateX(0);}}.animated.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;-moz-animation-name:fadeInLeftBig;-o-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig;}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);}100%{opacity:1;-webkit-transform:translateX(0);}}@-moz-keyframes fadeInRightBig{0%{opacity:0;-moz-transform:translateX(2000px);}100%{opacity:1;-moz-transform:translateX(0);}}@-o-keyframes fadeInRightBig{0%{opacity:0;-o-transform:translateX(2000px);}100%{opacity:1;-o-transform:translateX(0);}}@keyframes fadeInRightBig{0%{opacity:0;transform:translateX(2000px);}100%{opacity:1;transform:translateX(0);}}.animated.fadeInRightBig{-webkit-animation-name:fadeInRightBig;-moz-animation-name:fadeInRightBig;-o-animation-name:fadeInRightBig;animation-name:fadeInRightBig;}@-webkit-keyframes fadeOut{0%{opacity:1;}100%{opacity:0;}}@-moz-keyframes fadeOut{0%{opacity:1;}100%{opacity:0;}}@-o-keyframes fadeOut{0%{opacity:1;}100%{opacity:0;}}@keyframes fadeOut{0%{opacity:1;}100%{opacity:0;}}.animated.fadeOut{-webkit-animation-name:fadeOut;-moz-animation-name:fadeOut;-o-animation-name:fadeOut;animation-name:fadeOut;}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);}100%{opacity:0;-webkit-transform:translateY(-20px);}}@-moz-keyframes fadeOutUp{0%{opacity:1;-moz-transform:translateY(0);}100%{opacity:0;-moz-transform:translateY(-20px);}}@-o-keyframes fadeOutUp{0%{opacity:1;-o-transform:translateY(0);}100%{opacity:0;-o-transform:translateY(-20px);}}@keyframes fadeOutUp{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-20px);}}.animated.fadeOutUp{-webkit-animation-name:fadeOutUp;-moz-animation-name:fadeOutUp;-o-animation-name:fadeOutUp;animation-name:fadeOutUp;}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);}100%{opacity:0;-webkit-transform:translateY(20px);}}@-moz-keyframes fadeOutDown{0%{opacity:1;-moz-transform:translateY(0);}100%{opacity:0;-moz-transform:translateY(20px);}}@-o-keyframes fadeOutDown{0%{opacity:1;-o-transform:translateY(0);}100%{opacity:0;-o-transform:translateY(20px);}}@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(20px);}}.animated.fadeOutDown{-webkit-animation-name:fadeOutDown;-moz-animation-name:fadeOutDown;-o-animation-name:fadeOutDown;animation-name:fadeOutDown;}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(-20px);}}@-moz-keyframes fadeOutLeft{0%{opacity:1;-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(-20px);}}@-o-keyframes fadeOutLeft{0%{opacity:1;-o-transform:translateX(0);}100%{opacity:0;-o-transform:translateX(-20px);}}@keyframes fadeOutLeft{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(-20px);}}.animated.fadeOutLeft{-webkit-animation-name:fadeOutLeft;-moz-animation-name:fadeOutLeft;-o-animation-name:fadeOutLeft;animation-name:fadeOutLeft;}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(20px);}}@-moz-keyframes fadeOutRight{0%{opacity:1;-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(20px);}}@-o-keyframes fadeOutRight{0%{opacity:1;-o-transform:translateX(0);}100%{opacity:0;-o-transform:translateX(20px);}}@keyframes fadeOutRight{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(20px);}}.animated.fadeOutRight{-webkit-animation-name:fadeOutRight;-moz-animation-name:fadeOutRight;-o-animation-name:fadeOutRight;animation-name:fadeOutRight;}@-webkit-keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);}100%{opacity:0;-webkit-transform:translateY(-2000px);}}@-moz-keyframes fadeOutUpBig{0%{opacity:1;-moz-transform:translateY(0);}100%{opacity:0;-moz-transform:translateY(-2000px);}}@-o-keyframes fadeOutUpBig{0%{opacity:1;-o-transform:translateY(0);}100%{opacity:0;-o-transform:translateY(-2000px);}}@keyframes fadeOutUpBig{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-2000px);}}.animated.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;-moz-animation-name:fadeOutUpBig;-o-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig;}@-webkit-keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);}100%{opacity:0;-webkit-transform:translateY(2000px);}}@-moz-keyframes fadeOutDownBig{0%{opacity:1;-moz-transform:translateY(0);}100%{opacity:0;-moz-transform:translateY(2000px);}}@-o-keyframes fadeOutDownBig{0%{opacity:1;-o-transform:translateY(0);}100%{opacity:0;-o-transform:translateY(2000px);}}@keyframes fadeOutDownBig{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(2000px);}}.animated.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;-moz-animation-name:fadeOutDownBig;-o-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig;}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(-2000px);}}@-moz-keyframes fadeOutLeftBig{0%{opacity:1;-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(-2000px);}}@-o-keyframes fadeOutLeftBig{0%{opacity:1;-o-transform:translateX(0);}100%{opacity:0;-o-transform:translateX(-2000px);}}@keyframes fadeOutLeftBig{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(-2000px);}}.animated.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;-moz-animation-name:fadeOutLeftBig;-o-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig;}@-webkit-keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(2000px);}}@-moz-keyframes fadeOutRightBig{0%{opacity:1;-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(2000px);}}@-o-keyframes fadeOutRightBig{0%{opacity:1;-o-transform:translateX(0);}100%{opacity:0;-o-transform:translateX(2000px);}}@keyframes fadeOutRightBig{0%{opacity:1;transform:translateX(0);}100%{opacity:0;transform:translateX(2000px);}}.animated.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;-moz-animation-name:fadeOutRightBig;-o-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig;}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);}50%{opacity:1;-webkit-transform:scale(1.05);}70%{-webkit-transform:scale(.9);}100%{-webkit-transform:scale(1);}}@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.3);}50%{opacity:1;-moz-transform:scale(1.05);}70%{-moz-transform:scale(.9);}100%{-moz-transform:scale(1);}}@-o-keyframes bounceIn{0%{opacity:0;-o-transform:scale(.3);}50%{opacity:1;-o-transform:scale(1.05);}70%{-o-transform:scale(.9);}100%{-o-transform:scale(1);}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3);}50%{opacity:1;transform:scale(1.05);}70%{transform:scale(.9);}100%{transform:scale(1);}}@-webkit-keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);}100%{-webkit-transform:translateY(0);}}@-moz-keyframes slideInDown{0%{opacity:0;-moz-transform:translateY(-2000px);}100%{-moz-transform:translateY(0);}}@-o-keyframes slideInDown{0%{opacity:0;-o-transform:translateY(-2000px);}100%{-o-transform:translateY(0);}}@keyframes slideInDown{0%{opacity:0;transform:translateY(-2000px);}100%{transform:translateY(0);}}.slideInDown{-webkit-animation-name:slideInDown;-moz-animation-name:slideInDown;-o-animation-name:slideInDown;animation-name:slideInDown;}@-webkit-keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);}100%{-webkit-transform:translateX(0);}}@-moz-keyframes slideInLeft{0%{opacity:0;-moz-transform:translateX(-2000px);}100%{-moz-transform:translateX(0);}}@-o-keyframes slideInLeft{0%{opacity:0;-o-transform:translateX(-2000px);}100%{-o-transform:translateX(0);}}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-2000px);}100%{transform:translateX(0);}}.slideInLeft{-webkit-animation-name:slideInLeft;-moz-animation-name:slideInLeft;-o-animation-name:slideInLeft;animation-name:slideInLeft;}@-webkit-keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);}100%{-webkit-transform:translateX(0);}}@-moz-keyframes slideInRight{0%{opacity:0;-moz-transform:translateX(2000px);}100%{-moz-transform:translateX(0);}}@-o-keyframes slideInRight{0%{opacity:0;-o-transform:translateX(2000px);}100%{-o-transform:translateX(0);}}@keyframes slideInRight{0%{opacity:0;transform:translateX(2000px);}100%{transform:translateX(0);}}.slideInRight{-webkit-animation-name:slideInRight;-moz-animation-name:slideInRight;-o-animation-name:slideInRight;animation-name:slideInRight;}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(-2000px);}}@-moz-keyframes slideOutLeft{0%{-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(-2000px);}}@-o-keyframes slideOutLeft{0%{-o-transform:translateX(0);}100%{opacity:0;-o-transform:translateX(-2000px);}}@keyframes slideOutLeft{0%{transform:translateX(0);}100%{opacity:0;transform:translateX(-2000px);}}.slideOutLeft{-webkit-animation-name:slideOutLeft;-moz-animation-name:slideOutLeft;-o-animation-name:slideOutLeft;animation-name:slideOutLeft;}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0);}100%{opacity:0;-webkit-transform:translateX(2000px);}}@-moz-keyframes slideOutRight{0%{-moz-transform:translateX(0);}100%{opacity:0;-moz-transform:translateX(2000px);}}@-o-keyframes slideOutRight{0%{-o-transform:translateX(0);}100%{opacity:0;-o-transform:translateX(2000px);}}@keyframes slideOutRight{0%{transform:translateX(0);}100%{opacity:0;transform:translateX(2000px);}}.slideOutRight{-webkit-animation-name:slideOutRight;-moz-animation-name:slideOutRight;-o-animation-name:slideOutRight;animation-name:slideOutRight;}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0);}100%{opacity:0;-webkit-transform:translateY(-2000px);}}@-moz-keyframes slideOutUp{0%{-moz-transform:translateY(0);}100%{opacity:0;-moz-transform:translateY(-2000px);}}@-o-keyframes slideOutUp{0%{-o-transform:translateY(0);}100%{opacity:0;-o-transform:translateY(-2000px);}}@keyframes slideOutUp{0%{transform:translateY(0);}100%{opacity:0;transform:translateY(-2000px);}}.slideOutUp{-webkit-animation-name:slideOutUp;-moz-animation-name:slideOutUp;-o-animation-name:slideOutUp;animation-name:slideOutUp;}.animated.bounceIn{-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-o-animation-name:bounceIn;animation-name:bounceIn;}@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);}60%{opacity:1;-webkit-transform:translateY(-30px);}80%{-webkit-transform:translateY(10px);}100%{-webkit-transform:translateY(0);}}@-moz-keyframes bounceInUp{0%{opacity:0;-moz-transform:translateY(2000px);}60%{opacity:1;-moz-transform:translateY(-30px);}80%{-moz-transform:translateY(10px);}100%{-moz-transform:translateY(0);}}@-o-keyframes bounceInUp{0%{opacity:0;-o-transform:translateY(2000px);}60%{opacity:1;-o-transform:translateY(-30px);}80%{-o-transform:translateY(10px);}100%{-o-transform:translateY(0);}}@keyframes bounceInUp{0%{opacity:0;transform:translateY(2000px);}60%{opacity:1;transform:translateY(-30px);}80%{transform:translateY(10px);}100%{transform:translateY(0);}}.animated.bounceInUp{-webkit-animation-name:bounceInUp;-moz-animation-name:bounceInUp;-o-animation-name:bounceInUp;animation-name:bounceInUp;}@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);}60%{opacity:1;-webkit-transform:translateY(30px);}80%{-webkit-transform:translateY(-10px);}100%{-webkit-transform:translateY(0);}}@-moz-keyframes bounceInDown{0%{opacity:0;-moz-transform:translateY(-2000px);}60%{opacity:1;-moz-transform:translateY(30px);}80%{-moz-transform:translateY(-10px);}100%{-moz-transform:translateY(0);}}@-o-keyframes bounceInDown{0%{opacity:0;-o-transform:translateY(-2000px);}60%{opacity:1;-o-transform:translateY(30px);}80%{-o-transform:translateY(-10px);}100%{-o-transform:translateY(0);}}@keyframes bounceInDown{0%{opacity:0;transform:translateY(-2000px);}60%{opacity:1;transform:translateY(30px);}80%{transform:translateY(-10px);}100%{transform:translateY(0);}}.animated.bounceInDown{-webkit-animation-name:bounceInDown;-moz-animation-name:bounceInDown;-o-animation-name:bounceInDown;animation-name:bounceInDown;}@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);}60%{opacity:1;-webkit-transform:translateX(30px);}80%{-webkit-transform:translateX(-10px);}100%{-webkit-transform:translateX(0);}}@-moz-keyframes bounceInLeft{0%{opacity:0;-moz-transform:translateX(-2000px);}60%{opacity:1;-moz-transform:translateX(30px);}80%{-moz-transform:translateX(-10px);}100%{-moz-transform:translateX(0);}}@-o-keyframes bounceInLeft{0%{opacity:0;-o-transform:translateX(-2000px);}60%{opacity:1;-o-transform:translateX(30px);}80%{-o-transform:translateX(-10px);}100%{-o-transform:translateX(0);}}@keyframes bounceInLeft{0%{opacity:0;transform:translateX(-2000px);}60%{opacity:1;transform:translateX(30px);}80%{transform:translateX(-10px);}100%{transform:translateX(0);}}.animated.bounceInLeft{-webkit-animation-name:bounceInLeft;-moz-animation-name:bounceInLeft;-o-animation-name:bounceInLeft;animation-name:bounceInLeft;}@-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);}60%{opacity:1;-webkit-transform:translateX(-30px);}80%{-webkit-transform:translateX(10px);}100%{-webkit-transform:translateX(0);}}@-moz-keyframes bounceInRight{0%{opacity:0;-moz-transform:translateX(2000px);}60%{opacity:1;-moz-transform:translateX(-30px);}80%{-moz-transform:translateX(10px);}100%{-moz-transform:translateX(0);}}@-o-keyframes bounceInRight{0%{opacity:0;-o-transform:translateX(2000px);}60%{opacity:1;-o-transform:translateX(-30px);}80%{-o-transform:translateX(10px);}100%{-o-transform:translateX(0);}}@keyframes bounceInRight{0%{opacity:0;transform:translateX(2000px);}60%{opacity:1;transform:translateX(-30px);}80%{transform:translateX(10px);}100%{transform:translateX(0);}}.animated.bounceInRight{-webkit-animation-name:bounceInRight;-moz-animation-name:bounceInRight;-o-animation-name:bounceInRight;animation-name:bounceInRight;}@-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1);}25%{-webkit-transform:scale(.95);}50%{opacity:1;-webkit-transform:scale(1.1);}100%{opacity:0;-webkit-transform:scale(.3);}}@-moz-keyframes bounceOut{0%{-moz-transform:scale(1);}25%{-moz-transform:scale(.95);}50%{opacity:1;-moz-transform:scale(1.1);}100%{opacity:0;-moz-transform:scale(.3);}}@-o-keyframes bounceOut{0%{-o-transform:scale(1);}25%{-o-transform:scale(.95);}50%{opacity:1;-o-transform:scale(1.1);}100%{opacity:0;-o-transform:scale(.3);}}@keyframes bounceOut{0%{transform:scale(1);}25%{transform:scale(.95);}50%{opacity:1;transform:scale(1.1);}100%{opacity:0;transform:scale(.3);}}.animated.bounceOut{-webkit-animation-name:bounceOut;-moz-animation-name:bounceOut;-o-animation-name:bounceOut;animation-name:bounceOut;}@-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0);}20%{opacity:1;-webkit-transform:translateY(20px);}100%{opacity:0;-webkit-transform:translateY(-2000px);}}@-moz-keyframes bounceOutUp{0%{-moz-transform:translateY(0);}20%{opacity:1;-moz-transform:translateY(20px);}100%{opacity:0;-moz-transform:translateY(-2000px);}}@-o-keyframes bounceOutUp{0%{-o-transform:translateY(0);}20%{opacity:1;-o-transform:translateY(20px);}100%{opacity:0;-o-transform:translateY(-2000px);}}@keyframes bounceOutUp{0%{transform:translateY(0);}20%{opacity:1;transform:translateY(20px);}100%{opacity:0;transform:translateY(-2000px);}}.animated.bounceOutUp{-webkit-animation-name:bounceOutUp;-moz-animation-name:bounceOutUp;-o-animation-name:bounceOutUp;animation-name:bounceOutUp;}@-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0);}20%{opacity:1;-webkit-transform:translateY(-20px);}100%{opacity:0;-webkit-transform:translateY(2000px);}}@-moz-keyframes bounceOutDown{0%{-moz-transform:translateY(0);}20%{opacity:1;-moz-transform:translateY(-20px);}100%{opacity:0;-moz-transform:translateY(2000px);}}@-o-keyframes bounceOutDown{0%{-o-transform:translateY(0);}20%{opacity:1;-o-transform:translateY(-20px);}100%{opacity:0;-o-transform:translateY(2000px);}}@keyframes bounceOutDown{0%{transform:translateY(0);}20%{opacity:1;transform:translateY(-20px);}100%{opacity:0;transform:translateY(2000px);}}.animated.bounceOutDown{-webkit-animation-name:bounceOutDown;-moz-animation-name:bounceOutDown;-o-animation-name:bounceOutDown;animation-name:bounceOutDown;}@-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);}20%{opacity:1;-webkit-transform:translateX(20px);}100%{opacity:0;-webkit-transform:translateX(-2000px);}}@-moz-keyframes bounceOutLeft{0%{-moz-transform:translateX(0);}20%{opacity:1;-moz-transform:translateX(20px);}100%{opacity:0;-moz-transform:translateX(-2000px);}}@-o-keyframes bounceOutLeft{0%{-o-transform:translateX(0);}20%{opacity:1;-o-transform:translateX(20px);}100%{opacity:0;-o-transform:translateX(-2000px);}}@keyframes bounceOutLeft{0%{transform:translateX(0);}20%{opacity:1;transform:translateX(20px);}100%{opacity:0;transform:translateX(-2000px);}}.animated.bounceOutLeft{-webkit-animation-name:bounceOutLeft;-moz-animation-name:bounceOutLeft;-o-animation-name:bounceOutLeft;animation-name:bounceOutLeft;}@-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0);}20%{opacity:1;-webkit-transform:translateX(-20px);}100%{opacity:0;-webkit-transform:translateX(2000px);}}@-moz-keyframes bounceOutRight{0%{-moz-transform:translateX(0);}20%{opacity:1;-moz-transform:translateX(-20px);}100%{opacity:0;-moz-transform:translateX(2000px);}}@-o-keyframes bounceOutRight{0%{-o-transform:translateX(0);}20%{opacity:1;-o-transform:translateX(-20px);}100%{opacity:0;-o-transform:translateX(2000px);}}@keyframes bounceOutRight{0%{transform:translateX(0);}20%{opacity:1;transform:translateX(-20px);}100%{opacity:0;transform:translateX(2000px);}}.animated.bounceOutRight{-webkit-animation-name:bounceOutRight;-moz-animation-name:bounceOutRight;-o-animation-name:bounceOutRight;animation-name:bounceOutRight;}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(-200deg);opacity:0;}100%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;}}@-moz-keyframes rotateIn{0%{-moz-transform-origin:center center;-moz-transform:rotate(-200deg);opacity:0;}100%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1;}}@-o-keyframes rotateIn{0%{-o-transform-origin:center center;-o-transform:rotate(-200deg);opacity:0;}100%{-o-transform-origin:center center;-o-transform:rotate(0);opacity:1;}}@keyframes rotateIn{0%{transform-origin:center center;transform:rotate(-200deg);opacity:0;}100%{transform-origin:center center;transform:rotate(0);opacity:1;}}.animated.rotateIn{-webkit-animation-name:rotateIn;-moz-animation-name:rotateIn;-o-animation-name:rotateIn;animation-name:rotateIn;}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}}@-moz-keyframes rotateInUpLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}}@-o-keyframes rotateInUpLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(90deg);opacity:0;}100%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1;}}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}}.animated.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;-moz-animation-name:rotateInUpLeft;-o-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}}@-moz-keyframes rotateInDownLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}}@-o-keyframes rotateInDownLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(-90deg);opacity:0;}100%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1;}}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}}.animated.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;-moz-animation-name:rotateInDownLeft;-o-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}}@-moz-keyframes rotateInUpRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}}@-o-keyframes rotateInUpRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(-90deg);opacity:0;}100%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1;}}@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}}.animated.rotateInUpRight{-webkit-animation-name:rotateInUpRight;-moz-animation-name:rotateInUpRight;-o-animation-name:rotateInUpRight;animation-name:rotateInUpRight;}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}}@-moz-keyframes rotateInDownRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}}@-o-keyframes rotateInDownRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(90deg);opacity:0;}100%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1;}}@keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}}.animated.rotateInDownRight{-webkit-animation-name:rotateInDownRight;-moz-animation-name:rotateInDownRight;-o-animation-name:rotateInDownRight;animation-name:rotateInDownRight;}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0;}}@-moz-keyframes rotateOut{0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0;}}@-o-keyframes rotateOut{0%{-o-transform-origin:center center;-o-transform:rotate(0);opacity:1;}100%{-o-transform-origin:center center;-o-transform:rotate(200deg);opacity:0;}}@keyframes rotateOut{0%{transform-origin:center center;transform:rotate(0);opacity:1;}100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}}.animated.rotateOut{-webkit-animation-name:rotateOut;-moz-animation-name:rotateOut;-o-animation-name:rotateOut;animation-name:rotateOut;}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}}@-moz-keyframes rotateOutUpLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}}@-o-keyframes rotateOutUpLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1;}100%{-o-transform-origin:left bottom;-o-transform:rotate(-90deg);opacity:0;}}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}}.animated.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;-moz-animation-name:rotateOutUpLeft;-o-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft;}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}}@-moz-keyframes rotateOutDownLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}}@-o-keyframes rotateOutDownLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1;}100%{-o-transform-origin:left bottom;-o-transform:rotate(90deg);opacity:0;}}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}}.animated.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;-moz-animation-name:rotateOutDownLeft;-o-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}}@-moz-keyframes rotateOutUpRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}}@-o-keyframes rotateOutUpRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1;}100%{-o-transform-origin:right bottom;-o-transform:rotate(90deg);opacity:0;}}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}}.animated.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;-moz-animation-name:rotateOutUpRight;-o-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight;}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}}@-moz-keyframes rotateOutDownRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}}@-o-keyframes rotateOutDownRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1;}100%{-o-transform-origin:right bottom;-o-transform:rotate(-90deg);opacity:0;}}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}}.animated.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;-moz-animation-name:rotateOutDownRight;-o-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;}@-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;}20%,60%{-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;}40%{-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;}80%{-webkit-transform:rotate(60deg) translateY(0);opacity:1;-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;}100%{-webkit-transform:translateY(700px);opacity:0;}}@-moz-keyframes hinge{0%{-moz-transform:rotate(0);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out;}20%,60%{-moz-transform:rotate(80deg);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out;}40%{-moz-transform:rotate(60deg);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out;}80%{-moz-transform:rotate(60deg) translateY(0);opacity:1;-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out;}100%{-moz-transform:translateY(700px);opacity:0;}}@-o-keyframes hinge{0%{-o-transform:rotate(0);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out;}20%,60%{-o-transform:rotate(80deg);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out;}40%{-o-transform:rotate(60deg);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out;}80%{-o-transform:rotate(60deg) translateY(0);opacity:1;-o-transform-origin:top left;-o-animation-timing-function:ease-in-out;}100%{-o-transform:translateY(700px);opacity:0;}}@keyframes hinge{0%{transform:rotate(0);transform-origin:top left;animation-timing-function:ease-in-out;}20%,60%{transform:rotate(80deg);transform-origin:top left;animation-timing-function:ease-in-out;}40%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out;}80%{transform:rotate(60deg) translateY(0);opacity:1;transform-origin:top left;animation-timing-function:ease-in-out;}100%{transform:translateY(700px);opacity:0;}}.animated.hinge{-webkit-animation-name:hinge;-moz-animation-name:hinge;-o-animation-name:hinge;animation-name:hinge;}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);}}@-moz-keyframes rollIn{0%{opacity:0;-moz-transform:translateX(-100%) rotate(-120deg);}100%{opacity:1;-moz-transform:translateX(0px) rotate(0deg);}}@-o-keyframes rollIn{0%{opacity:0;-o-transform:translateX(-100%) rotate(-120deg);}100%{opacity:1;-o-transform:translateX(0px) rotate(0deg);}}@keyframes rollIn{0%{opacity:0;transform:translateX(-100%) rotate(-120deg);}100%{opacity:1;transform:translateX(0px) rotate(0deg);}}.animated.rollIn{-webkit-animation-name:rollIn;-moz-animation-name:rollIn;-o-animation-name:rollIn;animation-name:rollIn;}@-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);}}@-moz-keyframes rollOut{0%{opacity:1;-moz-transform:translateX(0px) rotate(0deg);}100%{opacity:0;-moz-transform:translateX(100%) rotate(120deg);}}@-o-keyframes rollOut{0%{opacity:1;-o-transform:translateX(0px) rotate(0deg);}100%{opacity:0;-o-transform:translateX(100%) rotate(120deg);}}@keyframes rollOut{0%{opacity:1;transform:translateX(0px) rotate(0deg);}100%{opacity:0;transform:translateX(100%) rotate(120deg);}}.animated.rollOut{-webkit-animation-name:rollOut;-moz-animation-name:rollOut;-o-animation-name:rollOut;animation-name:rollOut;}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);opacity:0;}60%{-webkit-transform:translateX(-20%) skewX(30deg);opacity:1;}80%{-webkit-transform:translateX(0%) skewX(-15deg);opacity:1;}100%{-webkit-transform:translateX(0%) skewX(0deg);opacity:1;}}@-moz-keyframes lightSpeedIn{0%{-moz-transform:translateX(100%) skewX(-30deg);opacity:0;}60%{-moz-transform:translateX(-20%) skewX(30deg);opacity:1;}80%{-moz-transform:translateX(0%) skewX(-15deg);opacity:1;}100%{-moz-transform:translateX(0%) skewX(0deg);opacity:1;}}@-o-keyframes lightSpeedIn{0%{-o-transform:translateX(100%) skewX(-30deg);opacity:0;}60%{-o-transform:translateX(-20%) skewX(30deg);opacity:1;}80%{-o-transform:translateX(0%) skewX(-15deg);opacity:1;}100%{-o-transform:translateX(0%) skewX(0deg);opacity:1;}}@keyframes lightSpeedIn{0%{transform:translateX(100%) skewX(-30deg);opacity:0;}60%{transform:translateX(-20%) skewX(30deg);opacity:1;}80%{transform:translateX(0%) skewX(-15deg);opacity:1;}100%{transform:translateX(0%) skewX(0deg);opacity:1;}}.animated.lightSpeedIn{-webkit-animation-name:lightSpeedIn;-moz-animation-name:lightSpeedIn;-o-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;-moz-animation-timing-function:ease-out;-o-animation-timing-function:ease-out;animation-timing-function:ease-out;}.animated.lightSpeedIn{-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s;}@-webkit-keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);opacity:1;}100%{-webkit-transform:translateX(100%) skewX(-30deg);opacity:0;}}@-moz-keyframes lightSpeedOut{0%{-moz-transform:translateX(0%) skewX(0deg);opacity:1;}100%{-moz-transform:translateX(100%) skewX(-30deg);opacity:0;}}@-o-keyframes lightSpeedOut{0%{-o-transform:translateX(0%) skewX(0deg);opacity:1;}100%{-o-transform:translateX(100%) skewX(-30deg);opacity:0;}}@keyframes lightSpeedOut{0%{transform:translateX(0%) skewX(0deg);opacity:1;}100%{transform:translateX(100%) skewX(-30deg);opacity:0;}}.animated.lightSpeedOut{-webkit-animation-name:lightSpeedOut;-moz-animation-name:lightSpeedOut;-o-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;-moz-animation-timing-function:ease-in;-o-animation-timing-function:ease-in;animation-timing-function:ease-in;}.animated.lightSpeedOut{-webkit-animation-duration:0.25s;-moz-animation-duration:0.25s;-o-animation-duration:0.25s;animation-duration:0.25s;}


--------------------------------------------------------------------------------
/src/sass/libs/_cogotoast.scss:
--------------------------------------------------------------------------------
1 | /*
2 | *   @name cogotoast.scss
3 | *   @description Librería de Cogo Toast
4 | */
5 | 
6 | .ct-text {
7 |     font-family: $IBM;
8 | }


--------------------------------------------------------------------------------
/src/sass/libs/_nprogress.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 | * @name nprogress.scss
 3 | * @description Librería de NProgress
 4 | */
 5 | 
 6 | #nprogress { pointer-events: none; }
 7 | 
 8 | #nprogress .bar {
 9 | 	top: 0;
10 | 	left: 0;
11 | 	z-index: 1;
12 | 	height: 5px;
13 | 	width: 100%;
14 | 	position: fixed;
15 | 	background-color: var(--primary);
16 | }
17 | 
18 | #nprogress .peg {	
19 | 	right: 0px;
20 | 	width: 100px;
21 | 	height: 100%;	
22 | 	opacity: 1.0;
23 | 	display: block;
24 | 	position: absolute;
25 | 	box-shadow: 0 0 10px var(--primary), 0 0 5px var(--primary);
26 | 	-webkit-transform: rotate(3deg) translate(0px, -4px);
27 | 	-ms-transform: rotate(3deg) translate(0px, -4px);
28 | 	transform: rotate(3deg) translate(0px, -4px);
29 | }
30 | 
31 | #nprogress .spinner {	
32 | 	top: 15px;
33 | 	z-index: 2;
34 | 	right: 15px;	
35 | 	display: block;
36 | 	position: fixed;
37 | }
38 | 
39 | #nprogress .spinner-icon {
40 | 	width: 18px;
41 | 	height: 18px;
42 | 	box-sizing: border-box;	
43 | 	border-top-color: var(--primary);
44 | 	border-left-color: var(--primary);
45 | 	border-radius: 50%;
46 | 	border: solid 2px transparent;
47 | 	-webkit-animation: nprogress-spinner 400ms linear infinite;
48 | 	animation: nprogress-spinner 400ms linear infinite;
49 | }
50 | 
51 | .nprogress-custom-parent {
52 | 	overflow: hidden;
53 | 	position: relative;
54 | }
55 | 
56 | .nprogress-custom-parent #nprogress .spinner,
57 | .nprogress-custom-parent #nprogress .bar {
58 | 	position: absolute;
59 | }
60 | 
61 | @-webkit-keyframes nprogress-spinner {
62 | 	0%   { -webkit-transform: rotate(0deg); }
63 | 	100% { -webkit-transform: rotate(360deg); }
64 | }
65 | @keyframes nprogress-spinner {
66 | 	0%   { transform: rotate(0deg); }
67 | 	100% { transform: rotate(360deg); }
68 | }
69 | 


--------------------------------------------------------------------------------
/src/sass/pages/_error.scss:
--------------------------------------------------------------------------------
1 | /*
2 |  * @version 1.1.0
3 |  * @description Estilos de la página de /404
4 | */
5 | 
6 | .page-error {
7 |     min-height: 90vh;
8 | }


--------------------------------------------------------------------------------
/src/sass/pages/_home.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * @version 1.1.0
  3 |  * @description Estilos de la página de /
  4 | */
  5 | 
  6 | .page-home {
  7 | 
  8 |     .banner {
  9 | 
 10 |         min-height: 700px;
 11 | 
 12 |         .left {
 13 | 
 14 |             width: 50%;
 15 |             justify-content: center;
 16 | 
 17 |             .btn { width: 430px; }
 18 | 
 19 |         }
 20 | 
 21 |         .right {
 22 | 
 23 |             width: 50%;
 24 | 
 25 |             img { max-width: 400px; }
 26 | 
 27 |         }
 28 | 
 29 |     }
 30 | 
 31 |     .services {
 32 | 
 33 |         padding: 4rem 0;
 34 |         min-height: 600px;
 35 |         background-color: var(--lightBg);
 36 | 
 37 |         .left {
 38 | 
 39 |             top: 0;
 40 |             width: 40%;
 41 |             position: sticky;  
 42 |             align-self: flex-start;
 43 |             margin-right: $paddingLarge;
 44 | 
 45 |             p {
 46 | 
 47 |                 padding: 0 $paddingNormal;
 48 | 
 49 |                 b { color: var(--secondary-alt); }
 50 | 
 51 |             }
 52 | 
 53 |         }
 54 | 
 55 |         .right {
 56 | 
 57 |             width: 60%;
 58 |             margin-left: $paddingNormal;
 59 | 
 60 |         }
 61 | 
 62 |         .card {
 63 | 
 64 |             width: 50%;
 65 |             background-color: var(--white);
 66 |             box-shadow: 2px 4px 2px #e9e9e9;
 67 |             transition: all 250ms ease-in-out;
 68 |             &:first-of-type { margin-right: $paddingNormal; }
 69 |             &:last-of-type { margin-left: $paddingNormal; }
 70 |             &:hover { box-shadow: 0px 4px 3px rgba(37, 131, 149, 0.3); }
 71 | 
 72 |         }
 73 | 
 74 |         .card-head {
 75 | 
 76 |             background-color: var(--primary);
 77 |             border-radius: 4px 4px 0 0;
 78 | 
 79 |             img { border-radius: 4px 4px 0 0; }
 80 | 
 81 |         }
 82 | 
 83 |         .card-body {
 84 | 
 85 |             padding: $paddingMedium;
 86 |             border-radius: 0 0 4px 4px;
 87 |     
 88 |             .card-title {
 89 |                 font-size: $fontRegular;
 90 |             }
 91 |     
 92 |             .card-description {
 93 |                min-height: 90px; 
 94 |             }
 95 |     
 96 |             .card-footer {
 97 |                 height: 70px;
 98 |                 border-top: 2px solid var(--lightBg);
 99 |             }
100 |     
101 |             .footer-content {
102 |                 padding: $paddingNormal 0;
103 |             }
104 | 
105 |         }
106 | 
107 |     }
108 |     
109 |     .about {
110 | 
111 |         background-color: var(--white);
112 | 
113 |         .left {
114 | 
115 |             width: 40%;
116 | 
117 |             .me-picture {
118 | 
119 |                 margin-bottom: $paddingLarge;
120 | 
121 |                 img { 
122 |                     height: 400px;
123 |                     padding-right: $paddingNormal;
124 |                 }
125 | 
126 |             }
127 | 
128 |         }
129 | 
130 |         .right {
131 | 
132 |             width: 60%;
133 | 
134 |             h2 { font-size: 1.55rem; }
135 | 
136 |             p { padding: 0 $paddingNormal; }
137 | 
138 |         }
139 | 
140 |     }
141 | 
142 |     .portfolio {
143 | 
144 |         background-color: var(--lightBg);
145 | 
146 |         .project-container { justify-content: space-between; }
147 | 
148 |         .project {
149 | 
150 |             width: 30%;
151 |             border-radius: 4px;
152 |             padding: $paddingNormal;
153 |             background-color: var(--white);
154 |             box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
155 |             margin: $marginMedium $marginNormal;
156 | 
157 |             .image {
158 | 
159 |                 img { max-height: 180px; }
160 | 
161 |             }
162 | 
163 |             .web { margin-bottom: $marginSemi; }
164 | 
165 |             .description { justify-content: space-around; }
166 | 
167 |         }
168 | 
169 |     }
170 |     
171 |     .contact {
172 | 
173 |         form {
174 | 
175 |             width: 60%;
176 | 
177 |             a { color: var(--gray); }
178 | 
179 |             .btn { width: 35%; }
180 | 
181 |         }
182 | 
183 |     }
184 | 
185 | 
186 |     @media screen and (max-width: 1024px) {
187 |             
188 |         .banner {
189 | 
190 |             .left {
191 | 
192 |                 width: 60%;
193 | 
194 |                 .btn { width: 400px; }
195 | 
196 |             }
197 | 
198 |             .right {
199 | 
200 |                 width: 40%;
201 | 
202 |                 img {
203 |                     z-index: -1;
204 |                     max-width: 300px;
205 |                 }
206 | 
207 |             }
208 |             
209 |         }
210 | 
211 |         .services {
212 | 
213 |             .row-responsive-ipad { flex-direction: column; }
214 | 
215 |             .left {
216 |                 width: 100%;
217 |                 position: relative;
218 |                 margin-bottom: 3rem;
219 |             }
220 | 
221 |             .right {
222 |                 width: 100%;
223 |                 margin-bottom: $paddingLarge;
224 |             }
225 | 
226 |             .card-head {
227 | 
228 |                 .responsive-img { width: 100%; }
229 | 
230 |                 background-color: var(--primary);
231 |                 border-radius: 4px 4px 0 0;
232 |     
233 |                 img { 
234 |                     width: 100%;
235 |                     height: 100%;
236 |                     object-fit: cover;
237 |                 }
238 |     
239 |             }
240 | 
241 |         }
242 | 
243 |         .about {
244 | 
245 |             .left {
246 | 
247 |                 img {
248 |                     width: 85%;
249 |                     height: auto;
250 |                     padding-right: 0;
251 |                     object-fit: cover;
252 |                 }
253 | 
254 |             }
255 | 
256 |             .right {
257 | 
258 |                 p { padding: 0; }  
259 | 
260 |             }
261 | 
262 |         }
263 | 
264 |         .portfolio {
265 | 
266 |             background-color: var(--lightBg);
267 |     
268 |             .project-container { justify-content: space-between; }
269 |     
270 |             .project {
271 | 
272 |                 margin: $marginMedium 0;
273 | 
274 |                 .title { 
275 | 
276 |                     a { font-size: 1.4rem; }
277 | 
278 |                 }
279 |     
280 |             }
281 |     
282 |         }
283 |         
284 |     }
285 | 
286 | 
287 |     @media screen and (max-width: 768px) {
288 |     
289 |         .banner {
290 | 
291 |             min-height: 600px;
292 | 
293 |             .left {
294 |                 margin: $paddingLarge 0;
295 |                 width: 100%;
296 |                 align-items: center;
297 |                 .btn-container { justify-content: center; }
298 |             }
299 | 
300 |             .right {
301 |                 width: 100%;
302 |                 margin: $paddingLarge 0;
303 |             }
304 | 
305 |         }
306 |         
307 | 
308 |         .services {
309 | 
310 |             padding-bottom: 0;
311 | 
312 |             .left { 
313 |                 margin-right: 0; 
314 |                 p { padding: 0; }
315 |             }
316 |             
317 |             .right { 
318 | 
319 |                 margin-left: 0;
320 | 
321 |                 .card-container {
322 |                     flex-direction: row;
323 |                     justify-content: space-between;
324 |                 }
325 | 
326 |             }
327 | 
328 |             .card {
329 |                 width: calc(50% - 1rem);
330 |                 margin: 0;
331 |                 &:first-of-type { margin-right: 0; }
332 |                 &:last-of-type { margin-left: 0; }
333 |             }
334 | 
335 |             .card-head {
336 |                 img { width: 100%; }
337 |             }
338 | 
339 |         }
340 | 
341 |         .about {
342 |             
343 |             .left {
344 | 
345 |                 width: 100%;
346 | 
347 |                 .me-picture{
348 | 
349 |                     margin-bottom: 0;
350 | 
351 |                     .responsive-img { justify-content: center; align-items: center; }
352 | 
353 |                     img {
354 |                         width: 100%;
355 |                         height: auto;
356 |                     }
357 | 
358 |                 }
359 |             }
360 | 
361 |             .right {
362 |                 width: 100%;
363 |                 p { padding: 0; }  
364 |             }
365 | 
366 |         }
367 | 
368 |         .portfolio {
369 | 
370 |             .project { width: 45%; }
371 | 
372 |         }
373 |         
374 |         
375 |         .contact {
376 | 
377 |             form {
378 |                 width: 100%;
379 | 
380 |                 input {
381 | 
382 |                     min-width: 45%;
383 |                     margin: 0 4px;
384 | 
385 |                 }
386 | 
387 |                 a { text-align: center; }
388 | 
389 |                 .btn { width: 80%; }
390 | 
391 |             }
392 | 
393 |         }
394 | 
395 |     }
396 |     
397 |     @media screen and (max-width: 576px) {
398 |     
399 |         .banner {
400 | 
401 |             .left {
402 | 
403 |                 h2 {
404 |                     text-align: center;
405 |                     font-size: $fontRegular;
406 |                 }
407 | 
408 |                 br { display: none; }
409 |             }
410 | 
411 |         }
412 | 
413 | 
414 |         .services {
415 | 
416 |             padding-bottom: 0;
417 | 
418 |             .left { 
419 |                 margin-right: 0; 
420 |                 p { padding: 0; }
421 |             }
422 |             
423 |             .right { 
424 | 
425 |                 margin-left: 0;
426 | 
427 |                 .card-container { flex-direction: column; }
428 | 
429 |                 .white-space-32 { height: 8px; }
430 | 
431 |             }
432 | 
433 |             .card {
434 |                 width: 100%;
435 |                 margin: $marginNormal 0;
436 |             }
437 | 
438 |             
439 | 
440 |             .card-head {
441 |                 img { width: 100%; }
442 |             }
443 | 
444 |         }
445 | 
446 | 
447 |         .about {
448 | 
449 |             .right {
450 |                 h2 { font-size: 1.5rem; }
451 |             }
452 | 
453 |         }
454 | 
455 |         
456 |         .portfolio {
457 | 
458 |             .project {
459 | 
460 |                 width: 100%;
461 |     
462 |                 .image {
463 |                     img { max-height: 140px; }
464 |                 }
465 |     
466 |                 .title { 
467 |                     a { font-size: 1.25rem; }
468 |                 }
469 |     
470 |             }
471 | 
472 |         }
473 | 
474 |     }
475 |     
476 | 
477 |     @media screen and (max-width: 330px) {
478 | 
479 |         .about {
480 | 
481 |             .right {
482 | 
483 |                 h2 { font-size: 1.37rem; }
484 |                 
485 |             }
486 | 
487 |         }
488 | 
489 |     }
490 | 
491 | 
492 | }
493 | 
494 | 
495 | html[data-theme='dark'] {
496 |  
497 |     .page-home {
498 | 
499 |         .services, .portfolio {
500 | 
501 |             background-color: #2c2c2c;
502 | 
503 |         }
504 | 
505 |         .services {
506 |     
507 |             .card {
508 |                 box-shadow: 2px 4px 2px var(--white);
509 |                 &:hover { box-shadow: 0px 4px 3px rgba(23, 49, 54, 0.3); }
510 |             }
511 |     
512 |         }
513 | 
514 |         .portfolio {
515 |     
516 |             .project {
517 |     
518 |                 .image {
519 | 
520 |                     background-color: #ffffff;
521 | 
522 |                 }
523 |     
524 |             }
525 |     
526 |         }
527 | 
528 |     }
529 | 
530 | }


--------------------------------------------------------------------------------
/src/sass/pages/_portafolio.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * @version 1.1.0
  3 |  * @description Estilos de la página de /portafolio
  4 | */
  5 | 
  6 | .page-portafolio {
  7 | 
  8 |     background-color: var(--lightBg);
  9 | 
 10 |     .portfolio {
 11 | 
 12 |         .project-container { justify-content: space-between; }
 13 | 
 14 |         .project {
 15 | 
 16 |             width: 30%;
 17 |             border-radius: 4px;
 18 |             padding: $paddingNormal;
 19 |             background-color: var(--white);
 20 |             box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 21 |             margin: $marginMedium $marginNormal;
 22 | 
 23 |             .image {
 24 |                 img { max-height: 180px; }
 25 |             }
 26 | 
 27 |             .web { margin-bottom: $marginSemi; }
 28 | 
 29 |             .description { justify-content: space-around; }
 30 | 
 31 |         }
 32 | 
 33 |     }
 34 | 
 35 |     @media screen and (max-width: 1024px) {
 36 | 
 37 |         .portfolio {
 38 |     
 39 |             .project-container { justify-content: space-between; }
 40 |     
 41 |             .project {
 42 |     
 43 |                 margin: $marginMedium 0;
 44 | 
 45 |                 .title { 
 46 | 
 47 |                     a { font-size: 1.4rem; }
 48 | 
 49 |                 }
 50 |     
 51 |             }
 52 |     
 53 |         }
 54 |         
 55 |     }
 56 |     
 57 |     @media screen and (max-width: 768px) {
 58 |     
 59 |         .portfolio {
 60 | 
 61 |             .project { width: 45%; }
 62 | 
 63 |         }
 64 |         
 65 |     }
 66 |     
 67 |     @media screen and (max-width: 576px) {
 68 |     
 69 |         .portfolio {
 70 | 
 71 |             .project {
 72 | 
 73 |                 width: 100%;
 74 |     
 75 |                 .image {
 76 | 
 77 |                     img { max-height: 140px; }
 78 | 
 79 |                 }
 80 |     
 81 |                 .title { 
 82 | 
 83 |                     a { font-size: 1.25rem; }
 84 | 
 85 |                 }
 86 |     
 87 |             }
 88 |             
 89 |         }
 90 |         
 91 |     }
 92 | 
 93 | }
 94 | 
 95 | html[data-theme='dark'] {
 96 |  
 97 |     .page-portafolio {
 98 | 
 99 |         background-color: #2c2c2c;
100 | 
101 |         .services {
102 |     
103 |             .card {
104 |                 box-shadow: 2px 4px 2px var(--white);
105 |                 &:hover { box-shadow: 0px 4px 3px rgba(23, 49, 54, 0.3); }
106 |             }
107 |     
108 |         }
109 | 
110 |         .portfolio {
111 |     
112 |             .project {
113 |     
114 |                 .image {
115 | 
116 |                     background-color: #ffffff;
117 | 
118 |                 }
119 |     
120 |             }
121 |     
122 |         }
123 | 
124 |     }
125 | 
126 | }


--------------------------------------------------------------------------------
/src/sass/style.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @version 1.1.1
 3 |  * @author Trejocode - Sergio
 4 |  * @description Constructor de la hoja de estilos
 5 | */
 6 | 
 7 | @import './core/trejocode';
 8 | @import './core/colors';
 9 | @import './core/fonts';
10 | @import './core/spacings';
11 | 
12 | @import './components/buttons/buttons';
13 | @import './components/header/header';
14 | @import './components/inputs/inputs';
15 | @import './components/footer/footer';
16 | @import './components/alerts/popover';
17 | 
18 | @import './libs/animate';
19 | @import './libs/cogotoast';
20 | @import './libs/nprogress';
21 | 
22 | @import './pages/home';
23 | @import './pages/portafolio';
24 | @import './pages/error';


--------------------------------------------------------------------------------