-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (134 loc) · 14.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head itemscope itemtype="http://schema.org/Person">
<meta charset="UTF-"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<meta http-equiv="refresh" content="3600"/>
<meta itemprop="name" content="Pablo García"/>
<meta itemprop="givenName" content="Pablo"/>
<meta itemprop="familyName" content="García"/>
<meta itemprop="alternateName" content="pablorgarcia"/>
<meta itemprop="jobTitle" content="Angular and Next.js Front-End Web developer"/>
<meta itemprop="hasOccupation" content="Front-End developer"/>
<meta itemprop="brand" content=""/>
<meta itemprop="birthPlace" content="Madrid, Spain, Europe"/>
<meta itemprop="address" content="Madrid, Spain, Europe"/>
<meta itemprop="workLocation" content="Madrid, Spain, Europe"/>
<meta itemprop="nationality" content="Spanish"/>
<meta itemprop="knowsLanguage" content="English, Portuguese, Spanish"/>
<meta itemprop="description" content="Front-End Web Developer building with Angular and Next.js"/>
<meta itemprop="alumniOf" content="Ironhack"/>
<meta itemprop="knows" content="Angular, Next.js, React, JavaScript, TypeScript"/>
<meta itemprop="follows" content="https://github.com/pablorgarcia"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="Author" content="Pablo García"/>
<meta name="description" content="Front-End Web Developer building with Angular and Next.js"/>
<meta name="keywords" content="pablo garcia dev,pablorgarcia,Front End,developer,MEAN,MERN,JavaScript,TypeScript,React,Next.js,Angular,GraphQL,Firebase,SASS,Bootstrap,RWD,Responsive Web Design,Back End,Node,Express,MongoDB,SQL,scrum,ironhack,madrid"/>
<meta name="Copyright" content="Copyright (c) Pablo García"/>
<meta name="robots" content="index, follow"/>
<meta name="msvalidate.01" content="5E5A0156D1D2C8ED33621B02554CF431"/>
<meta name="theme-color" content="#293030"/>
<meta name="apple-mobile-web-app-status-bar-style" content="#293030"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="twitter:title" content="Pablo García, Front-End Web Developer"/>
<meta name="twitter:card" content="Personal website"/>
<meta name="twitter:description" content="Front-End Web Developer building with Angular and Next.js"/>
<link rel="canonical" href="https://pablorgarcia.github.io"/>
<link rel="shortcut icon" href="public/images/icons/favicon.ico"/>
<link rel="icon" sizes="192x192" href="public/images/icons/favicon.png"/>
<link rel="apple-touch-startup-image" href="public/images/icons/favicon.png"/>
<link rel="stylesheet prefetch" href="public/css/main.min.css" as="styles"/>
<link rel="stylesheet prefetch" href="public/css/fonts.min.css" as="styles"/>
<script src="public/js/main-min.js"></script>
<title>Pablo García, Front-End Web Developer Angular and Next.js</title>
</head>
<body>
<header>
<div id="buttonsNav" class="buttons" onclick="openMenuNav()">
<div id="openButton" class="open-button">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div id="closeButton" class="hiding"></div>
</div>
<nav id="navElem" class="hiding">
<div class="nav-container">
<div class="contacts-on-nav">
<ul>
<li><h2>Follow me —</h2></li>
<li><a href="https://www.linkedin.com/in/prgarcia" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg></a></li>
<li><a href="https://github.com/pablorgarcia" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></a></li>
<li><a href="https://codepen.io/pablorgarcia" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1 10.199l-3.64 1.801 3.64 1.796v2.204l-6-2.935v-2.131l6-2.934v2.199zm8 2.866l-6 2.935v-2.204l3.64-1.796-3.64-1.801v-2.199l6 2.935v2.13z"/></svg></a></li>
<li><a href="https://www.youtube.com/c/PabloKart" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg></a></li>
</ul>
</div>
<div class="configurations">
<div class="switch-container">
<h2>Light mode</h2>
<label class="switch">
<input id="myCheck" type="checkbox" onclick="onColorLayoutChangeButton()">
<span class="slider round"></span>
</label>
</div>
</div>
</div>
</nav>
</header>
<main>
<p><b>Hey</b>! I’m <b>Pablo García</b> <span class="highlighted-bg">Front-End Web Developer</span></p>
<p>I code mainly with <span class="highlighted-bg">TypeScript</span>, <span class="highlighted-bg">JavaScript</span>, <span class="highlighted-bg">Angular</span> and <span class="highlighted-bg">Next.js</span></p>
<p>I'm from <span class="highlighted-bg">Madrid, Spain</span> where I'm living today, and before I've also lived in San Francisco California; Sao Paulo, Brazil and Lyon, France</p>
<p>In a very short time I have managed to learn what is necessary to make an application from start to finish and I am looking for an Angular-React project where I can develop my skills</p>
<p>I like hearing from people, so <span class="highlighted-bg">say hello on <a href="https://www.linkedin.com/in/prgarcia" target="_blank">LinkedIn</a></span>. You can write me in English, Portuguese and Spanish</p>
<p class="space-top">Sincerely</p>
<p class="no-space">Pablo García</p>
<p class="space-top cursor-for-last-text"><time></time></p>
</main>
<footer>
<h4><span>01.</span>Specialties</h4>
<div class="tags-container">
<pre title="TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for development of large applications and transcompiles to JavaScript. As TypeScript is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs.">TypeScript</pre>
<pre title="JavaScript is a lightweight, interpreted, object-oriented program language with first-class functions, and is best known as the scripting language for Web pages, but it's used in many non-browser environments as well. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles. JavaScript runs on the client and server sides of the web, which can be used to design/program how the web pages behave on the occurrence of an event. JavaScript is a powerful scripting language, widely used for controlling web page behaviour.">Javascript ES6</pre>
<pre title="Angular is a Front-End framework that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.">Angular</pre>
<pre title="Next.js is a framework providing React-based web applications with server-side rendering and static website generation. Where traditional React apps can only render their content in the client-side browser, Next.js extends this functionality to include applications rendered on the server-side.">Next.js</pre>
<pre title="React can be used as a base in the development of single-page or mobile applications, as it is optimal for fetching rapidly changing data that needs to be recorded. However, fetching data is only the beginning of what happens on a web page, which is why complex React applications usually require the use of additional libraries for state management, routing, and interaction with an API.">React</pre>
<pre title="Sass (Syntactically Awesome Style Sheets) is a CSS extension that enables you to use things like variables, nested rules, inline imports and more. It also helps to keep things organised and allows you to create style sheets faster.">SASS</pre>
<pre title="Node.js is a platform built on Chrome's JavaScript runtime for easily building fast and scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.">Node.js</pre>
<pre title="Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.">Express</pre>
<pre title="MongoDB is a document database with the scalability and flexibility that you want with the querying and indexing that you need.">MongoDB</pre>
<pre title="GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.">GraphQL</pre>
<pre title="Firebase es una plataforma para el desarrollo de aplicaciones web y aplicaciones móviles ubicada en la nube, integrada con Google Cloud Platform, que usa un conjunto de herramientas para la creación y sincronización de proyectos que serán dotados de alta calidad, haciendo posible el crecimiento del número de usuarios y dando resultado también a la obtención de una mayor monetización.">Firebase</pre>
<pre title="Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.">Responsive Web Design</pre>
<pre title="Scrum is an agile project management methodology or framework used primarily for software development projects with the goal of delivering new software capability every 2-4 weeks.">Scrum Agile Methodology</pre>
</div>
<h4><span>02.</span>Contact</h4>
<address>
<h1><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/><path fill="none" d="M0 0h24v24H0z"/></svg>Pablo García</h1>
<h2><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 6V4h-4v2h4zM4 8v11h16V8H4zm16-2c1.11 0 2 .89 2 2v11c0 1.11-.89 2-2 2H4c-1.11 0-2-.89-2-2l.01-11c0-1.11.88-2 1.99-2h4V4c0-1.11.89-2 2-2h4c1.11 0 2 .89 2 2v2h4z"/><path fill="none" d="M0 0h24v24H0z"/></svg>Jr Front-End Web developer</h2>
<h3><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>Madrid, Spain, Europe</h3>
<div class="button-container">
<a class="btn btn--primary" href="https://www.linkedin.com/in/prgarcia" target="_blank">LinkedIn</a>
<a class="btn btn--secondary" href="https://github.com/pablorgarcia" target="_blank">GitHub</a>
</div>
</address>
<section class="links-bottom">
<a href="https://github.com/pablorgarcia/pablorgarcia.github.io/blob/master/COOKIE_POLICY.md" target="_blank">Cookie policy</a>
<a href="https://pablorgarcia.github.io/sitemap.xml" target="_blank">Sitemap</a>
<a href="https://github.com/pablorgarcia/pablorgarcia.github.io/blob/master/LICENSE.md" target="_blank">License ©</a>
</section>
<section class="links-bottom">
<a href="https://github.com/pablorgarcia/pablorgarcia.github.io/blob/master/README.md" target="_blank">About performance of this website</a>
</section>
<section class="links-bottom">
<a class="icon" href="https://www.linkedin.com/in/prgarcia" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg></a>
<a class="icon" href="https://github.com/pablorgarcia" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></a>
</section>
</footer>
<div id="pop-up"></div>
<div id="pop-up-shadow"></div>
<!-- HELLO PARTNET -->
<!-- Feel free to fork it on https://github.com/pablorgarcia/pablorgarcia.github.io -->
<!-- 👋😄 -->
</body>
</html>