PageSourceSearch

https://alvarotrigo.com/

html alvarotrigo.com collected 2026-09-24 15:25:32 UTC 42,493 bytes, 714 lines download raw bytes

1<!DOCTYPE html>
2<html xmlns="https://www.w3.org/1999/xhtml">
3
4<head>
5    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6    <title>Alvaro Trigo | Portfolio</title>
7    <meta name="author" content="Alvaro Trigo Lopez" />
8    <meta name="description" content="Alvaro Trigo porfolio. Here you can take a look at some of my works on web programming, design and marketing." />
9    <meta name="keywords"  content="alvaro,trigo,lopez,portfolio,blog,website,fullpage,jquery,plugin,fullscren,screen,full,developer" />
10    <meta name="viewport" content="width=device-width,initial-scale=1">
11    <meta name="Resource-type" content="Document" />
12    <meta name="robots" content="ALL" />
13    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400|Open+Sans" rel="stylesheet">
14
15    <link rel="canonical" href="https://alvarotrigo.com" />
16    <link rel="apple-touch-icon" sizes="180x180" href="https://alvarotrigo.com/fullPage/favicons/apple-touch-icon.png">
17    <link rel="mask-icon" href="https://alvarotrigo.com/fullPage/favicons/safari-pinned-tab.svg" color="#5bbad5">
18    <link rel="shortcut icon" type="image/png" href="https://alvarotrigo.com/fullPage/favicons/favicon-16x16.png" sizes="16x16">
19    <link rel="shortcut icon" type="image/png" href="https://alvarotrigo.com/fullPage/favicons/favicon-32x32.png" sizes="32x32">
20    <link rel="shortcut icon" type="image/png" href="https://alvarotrigo.com/fullPage/favicons/favicon-48x48.png" sizes="48x48">
21    <link rel="shortcut icon" type="image/png" href="https://alvarotrigo.com/fullPage/favicons/favicon-64x64.png" sizes="64x64">
22    <link rel="shortcut icon" type="image/png" href="https://alvarotrigo.com/fullPage/favicons/favicon-76x76.png" sizes="76x76">
23    <link rel="shortcut icon" type="image/png" href="https://alvarotrigo.com/fullPage/favicons/favicon-120x120.png" sizes="120x120">
24    <link rel="shortcut icon" type="image/png" href="https://alvarotrigo.com/fullPage/favicons/favicon-128x128.png" sizes="128x128">
25    <link rel="shortcut icon" type="image/png" href="https://alvarotrigo.com/fullPage/favicons/favicon-152x152.png" sizes="152x152">
26    <link rel="shortcut icon" type="image/png" href="https://alvarotrigo.com/fullPage/favicons/favicon-180x180.png" sizes="180x180">
27    <link rel="shortcut icon" type="image/png" href="https://alvarotrigo.com/fullPage/favicons/favicon-192x192.png" sizes="192x192">
28    <link rel="shortcut icon" href="https://alvarotrigo.com/fullPage/favicons/favicon.ico">
29
30     <!--
31    <link rel="stylesheet" type="text/css" href="css/text.css" />
32    <link rel="stylesheet" type="text/css" href="css/styles.css" />
33    <link rel="stylesheet" type="text/css" href="css/fontello.css" />
34    <link rel="stylesheet" type="text/css" href="bower_components/nprogress/nprogress.css" />
35    -->
36
37    <link rel="stylesheet" type="text/css" href="dist/combined.min.css?v=12" />
38
39    <!-- Google Analytics (Do not copy this!!) -->
40    
40<script>
vendor: 365 bytes, lines 40-46
40
41      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
42      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
43      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
44      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
45
46      ga('create', '
46UA-94005074-1
vendor: 46 bytes, lines 46-48
46', 'auto');
47      ga('send', 'pageview');
48    
48</script>
48
49
50    <!-- Google tag (gtag.js) GA4 -->
vendor: 68 bytes, lines 50-51
50
51    <script async src="https://www.googletagmanager.com/gtag/js?id=
51G-Q0MF57YDRL
vendor: 16 bytes, lines 51-52
51"></script>
52    
52<script>
53    
vendor: 139 bytes, lines 53-56
53window.dataLayer = window.dataLayer || [];
54    function gtag(){dataLayer.push(arguments);}
55    gtag('js', new Date());
56    gtag('config', '
56G-Q0MF57YDRL
vendor: 8 bytes, lines 56-57
56');
57    
57</script>
57
58
59    <!-- Facebook Pixel Code (Do not copy this!!)-->
60    
60<script>
vendor: 419 bytes, lines 60-66
60
61    !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
62    n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
63    n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
64    t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
65    document,'script','https://connect.facebook.net/en_US/fbevents.js');
66    fbq('init', '
661786065945027357
vendor: 4 bytes, line 66
66'); 
66// Insert your pixel ID here.
67    fbq('track', 'PageView');
68    </script>
68
69    <noscript><img height="1" width="1" style="display:none"
70    src="https://www.facebook.com/tr?id=1786065945027357&ev=PageView&noscript=1"
71    /></noscript>
72    <!-- DO NOT MODIFY -->
73    <!-- End Facebook Pixel Code -->
74</head>
75<body>
76
77<header class="header animate">
78    <div class="header-wrapper">
79        <h1 class="header-logo">Álvaro Trigo<span class="logo-end">_</span></h1>
80        <ul class="header-menu">
81            <li><a href="#projects">Projects</a></li>
82            <li><a href="#about">About</a></li>
83            <li><a href="https://alvarotrigo.com/blog/">Blog</a></li>
84            <li><a href="#photos">Photos</a></li>
85            <li><a href="#contact">Contact</a></li>
86            <li><a href="https://twitter.com/imac2" target="_blank" class="no-link icon-twitter"></a></li>
87        </ul>
88        <a class="header-burgerMenu no-link" href="#"><span></span></a>
89    </div>
90</header>
91
92<div class="hero" data-anchor="">
93    <h3>Hello there! I'm <a href="https://twitter.com/imac2" target="_blank">Álvaro Trigo</a></h3>
94    <h3>Currently creating beautiful stuff in Cambridge, UK.</h3>
95
96    <p class="stars">
97        <span>19,385</span><i class="icon-star" aria-hidden="true"></i> at <a href="https://github.com/alvarotrigo">Github</a>
98    </p>
99    <p class="rank">
100        <!-- <a href="https://github-awards.com/users?city=cambridge&language=javascript" id="city_rank" class="rank-value"></a> of Cambridge,
101        <a href="https://github-awards.com/users?country=united+kingdom&language=javascript" id="country_rank" class="rank-value"></a> of UK, -->
102        Top <a href="https://gitstar-ranking.com/alvarotrigo" id="world_rank" class="rank-value"></a> worldwide
103    </p>
104</div>
105
106<div class="ripple-wrapper"></div>
107<ul class="projects" data-anchor="projects">
108    <li class="project project-fullpage ripple">
109        <div class="project-actions">
110            <a href="#fullpage" class="project-link icon-link no-link"></a>
111            <div class="project-close-info icon-cancel icon-cancel"></div>
112            <div class="project-info">i</div>
113        </div>
114
115        <div class="project-image"></div>
116        <a href="#fullpage" class="project-content ">
117            <h3 class="project-title"><span>fullpage.js</span></h3>
118            <span class="project-underline"></span>
119            <div class="project-description"><span>Create full screen pages fast and simple</span></div>
120        </a>
121    </li>
122    <li class="project project-pagepiling ripple">
123        <div class="project-actions">
124            <a href="#pagepiling" class="project-link icon-link no-link"></a>
125            <div class="project-close-info icon-cancel"></div>
126            <div class="project-info">i</div>
127        </div>
128
129        <div class="project-image"></div>
130        <a href="#pagepiling" class="project-content">
131            <h3 class="project-title"><span>pagePiling.js</span></h3>
132            <span class="project-underline"></span>
133            <div class="project-description"><span>Create a scrolling pile of sections</span></div>
134        </a>
135    </li>
136    <li class="project project-multiscroll ripple">
137        <div class="project-actions">
138            <a href="#multiscroll" class="project-link icon-link no-link"></a>
139            <div class="project-close-info icon-cancel"></div>
140            <div class="project-info">i</div>
141        </div>
142
143        <div class="project-image"></div>
144        <a href="#multiscroll" class="project-content">
145            <h3 class="project-title"><span>multiScroll.js</span></h3>
146            <span class="project-underline"></span>
147            <div class="project-description"><span>Create two scrolling sections per page</span></div>
148        </a>
149    </li>
150    <li class="project project-funnytext ripple">
151        <div class="project-actions">
152            <a href="#funnytext" class="project-link icon-link no-link"></a>
153            <div class="project-close-info icon-cancel"></div>
154            <div class="project-info">i</div>
155        </div>
156
157        <div class="project-image"></div>
158        <a href="#funnytext" class="project-content">
159            <h3 class="project-title"><span>funnyText.js</span></h3>
160            <span class="project-underline"></span>
161            <div class="project-description"><span>Create funny moving texts</span></div>
162        </a>
163    </li>
164    <li class="project project-validpic ripple">
165        <div class="project-actions">
166            <a href="#validpic" class="project-link icon-link no-link"></a>
167            <div class="project-close-info icon-cancel"></div>
168            <div class="project-info">i</div>
169        </div>
170
171        <div class="project-image"></div>
172        <a href="#validpic" class="project-content">
173            <h3 class="project-title"><span>valiPic.js</span></h3>
174            <span class="project-underline"></span>
175            <div class="project-description"><span>Front-end image validator</span></div>
176        </a>
177    </li>
178    <li class="project project-websites ripple">
179        <div class="project-actions">
180            <a href="#websites" class="project-link icon-link no-link"></a>
181            <div class="project-close-info icon-cancel"></div>
182            <div class="project-info">i</div>
183        </div>
184
185        <div class="project-image"></div>
186        <a href="#websites" class="project-content">
187            <h3 class="project-title"><span>WWW</span></h3>
188            <span class="project-underline"></span>
189            <div class="project-description"><span>Websites I've done or worked in</span></div>
190        </a>
191    </li>
192</ul>
193
194<div class="about" data-anchor="about">
195    <div class="text-wrap animate-text">
196        <h2>About<span class="logo-end">_</span></h2>
197        <p class="text-intro">
198           I'm a web developer who aims to combine the beauty of design with the logical perfection of coding. Training myself every day and pushing my own limits to discover new ways of creating a great experience for the users.
199        </p>
200        <p>
201            I'm <span id="current-age"></span> years old, from Spain. I'm a computer scientist and hold an MSc in Computer Engineering and a BSc in Technical Engineering In Computer Science For Management, both from Burgos University.
202            I also enjoyed a scholarship at the Millersville University of Pennsylvania in the USA.
203        </p>
204        <p>
205            I started getting passionate about web developing at the age of 16 when I created my first website. Since then I kept learning day by day on my own until today.
206        </p>
207        <p>
208            Currently working mainly on <a href="https://alvarotrigo.com/fullPage/">fullPage.js</a>. And doing side projects like <a href="https://alvarotrigo.com/shadow-gradients/">CSS Shadow Gradients</a>.
209        </p>
210    </div>
211</div>
212
213<div class="photos">
214    <div class="text-wrap animate-text">
215        <h2>Podcasts<span class="logo-end">_</span></h2>
216        <p class="text-intro">
217            Here's a list of podcasts where I've been invited:
218        </p>
219        <p>
220          <ul style="line-height: 1.8em;font-size: 1.4em;list-style-type: unset;margin-left: 2em;">
221            <li><a class="no-link" href="https://www.software-engineering-unlocked.com/money-open-source-software/" target="_blank" rel="nofollow noopener">Software Engineering Unlocked 🇬🇧</a></li>
222            <li><a class="no-link" href="https://podcast.sustainoss.org/116" target="_blank" rel="nofollow noopener">Sustain OSS 🇬🇧</a></li>
223            <li><a class="no-link" href="https://www.matildaexp.com/events" target="_blank" rel="nofollow noopener">Re-inventing the wheel with fullpage.js 🇬🇧</a></li>
224            <li><a class="no-link" href="https://www.danielprimo.io/blog/vivir-de-tu-propio-codigo-con-alvaro-trigo" target="_blank" rel="nofollow noopener">Web Reactiva 🇪🇸</a></li>
225            <li><a class="no-link" href="https://anchor.fm/24h24l/episodes/04-Vivir-de-tu-producto-e1btbva" target="_blank" rel="nofollow noopener">24H24L 🇪🇸</a></li>
226            <li><a class="no-link" href="https://open.spotify.com/episode/7LjkiDx7YZEuFb6SMOGbU6" target="_blank" rel="nofollow noopener">Tomando un café 🇪🇸</a></li>
227            <li><a class="no-link" href="https://www.youtube.com/watch?v=wCGAunpfGyE" target="_blank" rel="nofollow noopener">Pau Ninja 🇪🇸</a></li>
228            <li><a class="no-link" href="https://www.ivoox.com/gestionar-proyectos-github-monetizando-open-source-audios-mp3_rf_30163340_1.html" target="_blank" rel="nofollow noopener">República Web 🇪🇸</a></li>
229            <li><a class="no-link" href="https://open.spotify.com/episode/4gjbiHGPRSyXjswbYqR3Vm" target="_blank" rel="nofollow noopener">Product Chat 🇪🇸</a></li>
230          </ul>  
231        </p>
232        <p>
233            Do you have a podcast and want to invite me over? <a href="#contact">Contact me.</a>
234        </p>
235    </div>
236</div>
237
238
239<div class="photos" data-anchor="photos">
240    <div class="text-wrap animate-text">
241        <h2>What I Use<span class="logo-end">_</span></h2>
242        <p class="text-intro">
243            <a href="uses/">Here's a list of things</a> I use as a developer & creator.
244        </p>
245    </div>
246</div>
247
248
249<div class="photos" data-anchor="photos">
250    <div class="text-wrap animate-text">
251        <h2>Photos<span class="logo-end">_</span></h2>
252        <p class="text-intro">
253            I also like photography! Check out my pics <a href="https://flickr.com/alvarot" target="_blank">on flickr</a>.
254        </p>
255        <a class="no-link" href="https://flickr.com/alvarot" target="_blank">
256            <img id="my-photos" class="lazy-load" alt="Check my photos!" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://raw.github.com/alvarotrigo/fullPage.js/master/examples/imgs/intro.png" />
257        </a>
258    </div>
259</div>
260
261
262<div class="contact"  data-anchor="contact">
263    <div class="text-wrap animate-text">
264        <h2>Contact<span class="logo-end">_</span></h2>
265        <p class="text-intro">
266            Estimates, questions, information? Don't hesitate to contact me.
267        </p>
268
269        <form action="contact.php" method="POST" id="contact-form">
270            <div class="input-text input-half">
271                <label class="input-text-placeholder" for="form-name">Name</label>
272                <input type="text" id="form-name" name="form-name" required />
273            </div><div class="input-text input-half">
274                <label class="input-text-placeholder" for="form-email">Email</label>
275                <input type="email" id="form-email" name="form-email" required />
276            </div>
277
278            <div class="input-text input-half">
279                <label class="input-text-placeholder" for="form-email">Topic</label>
280                <div class="select">
281                    <select id="topic" name="topic" required>
282                        <option value="" disabled selected>Select your topic</option>
283                        <option value="gutenberg">Gutenberg Wordpress plugin for fullpage.js</option>
284                        <option value="elementor">Elementor Wordpress plugin for fullpage.js</option>
285                        <option value="fullpage">fullPage.js</option>
286                        <option value="pagepiling">pagePiling.js</option>
287                        <option value="multiscroll">multiScroll.js</option>
288                        <option value="other">Other</option>
289                    </select>
290                </div>
291            </div><div class="input-text input-textarea input-half">
292                <label class="input-text-placeholder" for="form-body">Are you human? What is <span id="human-1"></span> + <span id="human-2"></span>?</label>
293                <input type="text" id="form-anti-bots-answer" name="form-answer" required />
294            </div>
295
296            <div class="input-text">
297                <label class="input-text-placeholder" for="form-email">Subject</label>
298                <input type="text" id="form-subject" name="form-subject" required />
299            </div>
300
301            <div class="input-text input-textarea">
302                <label class="input-text-placeholder" for="form-body">Message</label>
303                <div class="contact-newsletter-warning" style="margin:6px 0;">Is it about fullpage? Please check the <a href="https://alvarotrigo.com/fullPage/help/" target="_blank" rel="noopener">fullPage.js Help</a> or the <a href="https://alvarotrigo.com/fullPage/extensions/faqs.html" target="_blank" rel="noopener">extensions FAQs</a> first. <a href="https://github.com/alvarotrigo/fullPage.js#reporting-issues" target="_blank" rel="noopener">Reporting non extensions' issues?</a></div>
304                <textarea id="form-body" name="form-body" required></textarea>
305            </div>
306
307            <div class="contact-newsletter-warning">
308                <input type="checkbox" name="want-to-subscribe" id="want-to-subscribe">
309                <label for="want-to-subscribe">
309I want to receive emails about Alvaro Trigo's amazing projects and the latest news regarding them!
310                </label>
311            </div>
312            <div class="contact-newsletter-warning">You can also find me at <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f199949d81b1909d8790839e858398969edf929e9c">[email&#160;protected]</a></div>
313
314
315            <input type="text" name="surname" id="form-surname" autocomplete="off" />
316
317            <button class="item-button contact-button">
318                <i class="loader"></i>
319                Send email
320            </button>
321        </form>
322    </div>
323</div>
324
325<ul class="social-links">
326    <li><a href="https://twitter.com/imac2" class="icon-twitter"></a></li>
327    <li><a href="https://github.com/alvarotrigo" class="icon-github-circled"></a></li>
328    <li><a href="https://linkedin.com/in/alvarotrigo/en" class="icon-linkedin no-link"></a></li>
329</ul>
330
331<div class="info animated" tabindex="1">
332    <div class="info-bg"></div>
333    <a href="#" class="info-close no-link"></a>
334    <div class="info-content info-fullpage animated fadeInDown">
335
336        <div class="text-wrap ">
337            <h2>fullpage.js</h2>
338                    <p class="info-stars" data-name="fullpage.js">
339            <span></span>
340            <i class="icon-star" aria-hidden="true"></i>
341            <a href="https://github.com/alvarotrigo/fullPage.js">at Github</a>
342        </p>
343            <p class="text-intro">
344                Created as a side project, <a href="https://alvarotrigo.com/fullPage/">fullPage.js</a> is a jQuery and Javascript open source library to create full screen scrolling websites.
345                Used and trusted by companies such as Google, Ebay, McDonalds, EA, Nikon, Vodafone and British Airway, it is currently the most popular, used and complete library of its kind.
346            </p>
347            <p>
348                <a href="https://github.com/alvarotrigo/fullPage.js" class="no-link">
349                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://raw.github.com/alvarotrigo/fullPage.js/master/examples/imgs/intro.png" alt="fullpage.js" />
350                </a>
351            </p>
352            <p>
353                It is currently placed in the top 50 <a href="https://github.com/search?l=JavaScript&o=desc&p=5&q=stars%3A%3E1&s=stars&type=Repositories">most starred</a> and <a href="https://github.com/search?l=JavaScript&o=desc&p=4&q=stars%3A%3E1&s=forks&type=Repositories">most forked</a> Javascript projects in the world at Github and <a href="https://twitter.com/IMAC2/status/619480935776579585">it has been named by printed magazines</a> such as Web Designer Magazine.
354            </p>
355            <p>
356                More than 140 people have contributed to this open source project and still contributing nowadays thanks to its popularity I was named a trending Javascript developer on GitHub multiple times.
357            </p>
358            <p>
359                Check the <a href="https://alvarotrigo.com/fullPage/">fullpage.js landing page</a>.
360            </p>
361
362            <h3>What is it?</h3>
363            <p>
364                The library provides a straightforward way to create full-screen auto-scrolling websites. A task that can seem simple initially but gets quite complicated once you start covering issues such as browser compatibility, touch devices, kinetic trackpad scrolling, URL linking, accessibility, responsiveness, callbacks, etc.
365            </p>
366            <p>
367                What makes fullpage.js so powerful is the way it simplifies all this work for any developer who wants to have a production-ready website. Tested by thousands of developers on tens of devices and over a period of more than 9 years makes it a reliable tool to use. And of course, a precious time saver that allows developers to focus on developing the site and not its inner behavior.
368            </p>
369
370            <h3>Open source</h3>
371            <p>
372                Avaiable through the GPLv3 licence for <a href="https://github.com/alvarotrigo/react-fullpage">React</a>, <a href="https://github.com/alvarotrigo/vue-fullpage.js">Vue</a> and <a href="https://github.com/alvarotrigo/angular-fullpage">Angular</a> it is ideal to use in any kind of websites or comercial products.
373            </p>
374            <p>
375                Due to its popularity, it is also easy to find fullpage.js integrated into other platforms by third parties. From <a href="https://alvarotrigo.com/fullPage/utils/wordpress.html">Wordpress themes</a> to <a href="https://rubygems.org/gems/fullpagejs-rails">Ruby gems</a>.
376            </p>
377
378            <h3>WordPress</h3>
379            <p>
380                I also decided to provide official fullPage.js plugins for the <a href="https://alvarotrigo.com/fullPage/wordpress-plugin-elementor/">Elementor</a> and <a href="https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/">Gutenberg</a> builder for WordPress, and soon for <a href="https://alvarotrigo.com/fullPage/wordpress-plugin-divi/">Divi</a>!
381            </p>
382
383            <h3>Extra features</h3>
384            <p>
385                The project has been growing with time and due to the diversity of requested features, I decided to provide <a href="https://alvarotrigo.com/fullPage/extensions/">fullpage.js extensions</a> that can be added to enhance its behavior.
386            </p>
387
388            <button class="item-button info-close-button">&lt; Go back</button>
389        </div>
390    </div>
391
392    <div class="info-content info-funnytext animated fadeInDown">
393        <p class="info-stars" data-name="funnytext.js">
394            <span></span>
395            <i class="icon-star" aria-hidden="true"></i>
396            <a href="https://github.com/alvarotrigo/funnyText.js">at Github</a>
397        </p>
398
399        <div class="text-wrap ">
400            <h2>funnyText.js</h2>
401
402            <p class="text-intro">
403                Brought into a jQuery plugin from a custom script I did for <a href="https://www.parisoptimalplanning.com/">a website I worked in</a>.
404            </p>
405            <p>
406                <a href="https://github.com/alvarotrigo/funnyText.js" class="no-link">
407                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://raw.githubusercontent.com/alvarotrigo/funnyText.js/master/imgs/intro.jpg" alt="funnyText" />
408                </a>
409            </p>
410
411            <p>
412                This simple script provides a way to create funny moving texts in a simple way. Not much else to say about it :)
413            </p>
414
415            <button class="item-button info-close-button">&lt; Go back</button>
416        </div>
417    </div>
418
419    <div class="info-content info-validpic animated fadeInDown">
420        <p class="info-stars" data-name="validpic.js">
421            <span></span>
422            <i class="icon-star" aria-hidden="true"></i>
423            <a href="https://github.com/alvarotrigo/validPic.js">at Github</a>
424        </p>
425
426        <div class="text-wrap ">
427            <h2>validPic.js</h2>
428
429            <p class="text-intro">
430                Tired of not finding any library to validate images on the client side I decided to create one for my own use and for anybody else who want to save some time doing it. Yeah, we all know client-side validation is just one of the many steps and we should never rely only on it, but hey! It helps!
431            </p>
432            <p>
433                Personally, I'm using it in a side project where users can upload pictures and see the result in real-time before the image gets uploaded to the server side.
434            </p>
435            <p>
436                This library makes use of the <a href="https://en.wikipedia.org/wiki/Magic_number_(programming)">magic numbers</a> to detect different mime-types, therefore even when the mime-type gets modified we can still figure out it it is what it claims to be.
437            </p>
438
439            <button class="item-button info-close-button">&lt; Go back</button>
440        </div>
441    </div>
442
443    <div class="info-content info-websites animated fadeInDown">
444        <div class="text-wrap ">
445            <h2>Websites</h2>
446            <p class="text-intro">
447                Here's a bunch of websites I've done from the scratch. You can see my name in the `author` meta tag in all of them.
448            </p>
449
450            <div class="info-websites-websites">
451
452                <h3>Public work</h3>
453
454                <div class="info-website first">
455                    <div class="info-website-preview">
456                        <a href="https://alvarotrigo.com/shadow-gradients/" target="_blank">
457                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="imgs/websites/css-shadow-gradients.png" alt="CSS Shadow Gradients Generator" />
458                        </a>
459                        <h4>CSS Shadow Gradients Generator</h4>
460                        <a href="https://alvarotrigo.com/shadow-gradients/" target="_blank" class="info-website-preview-url">CSS Shadow Gradients Generator</a>
461                    </div>
462                    <div class="info-website-description">
463                        <p>
464                            One day I thought it'd be nice to add some beautiful gradients in a shadow for a web design I was working in. 
465                        </p>
466                        <p>
467                            I then searched for a CSS generator to find the fastest way to do it, and I got shocked to find out there was no tool to generate these CSS gradients for my shadow.
468                        </p>
469                        <p>
470                            So, I decided it was time to make the world a better place and build a CSS shadow gradients generator.
471                        </p>
472                    </div>
473                </div>
474
475                <div class="info-website">
476                    <div class="info-website-preview">
477                        <a href="https://fullstats.io" target="_blank">
478                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="imgs/websites/fullstats.jpg" alt="Advanced Gumroad Analytics" />
479                        </a>
480                        <h4>fullstats.io</h4>
481                        <a href="https://fullstats.io" target="_blank" class="info-website-preview-url">fullstats.io</a>
482                    </div>
483                    <div class="info-website-description">
484                        <p>
485                            As a Gumroad user, I started to feel the need for more advanced analytics. I wanted to maximize profit and to do so I had to know how to take decisions based on data. 
486                        </p>
487                        <p>
488                            I started creating a small analytics panel for myself and then I realized many others were also missing better analytics in Gumroad so I decided to make it public and create a platform for it.
489                        </p>
490                    </div>
491                </div>
492
493                <div class="info-website">
494                    <div class="info-website-preview">
495                        <a href="https://www.parisoptimalplanning.com" target="_blank">
496                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="imgs/websites/paris.jpg" alt="Paris Optimal Planning" />
497                        </a>
498                        <h4>Paris Optimal Planning</h4>
499                        <a href="https://www.parisoptimalplanning.com" target="_blank" class="info-website-preview-url">www.parisoptimalplanning.com</a>
500                    </div>
501                    <div class="info-website-description">
502                        <p>
503                            Product website for my former employer: The Port of Felixstowe.
504                        </p>
505                        <p>
506                            I created it from the scratch using CakePHP framework. It has been designed for desktops, mobile phones, and tablet devices. There is a big work on jQuery and CSS. Techniques such as a dynamic load of images were applied to speed up the load as well as javascript and CSS compression. Other techniques applied: SEO, CSS3 media queries, CSS3 animations, browser detection, and device detection.
507                        </p>
508                    </div>
509                </div>
510
511                <div class="info-website">
512                    <div class="info-website-preview">
513                        <a href="https://www.boxreload.com" target="_blank">
514                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="imgs/websites/boxreload.jpg" alt="Boxreload" />
515                        </a>
516                        <h4>Boxreload</h4>
517                        <a href="https://www.boxreload.com" target="_blank" class="info-website-preview-url">www.boxreload.com</a>
518                    </div>
519                    <div class="info-website-description">
520                        <p>
521                            Product website for my former employer: The Port of Felixstowe.
522                        </p>
523                        <p>
524                            Designed in CakePHP by using one of my plugins - fullPage.js. Its responsive design makes it look great on tablets and mobile phones. Fallbacks for old browsers have been applied for videos and css3 animations as well as techniques such as lazy loading, video compression, and CSS/JS minification. I made use of Velocity.js for SVG animations.
525                        </p>
526                    </div>
527                </div>
528
529                <!-- <h3>Side projects</h3> -->
530
531                <!-- <div class="info-website first">
532                    <div class="info-website-preview">
533                        <a href="https://www.todopetardos.com" target="_blank">
534                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="imgs/websites/todopetardos.jpg" alt="Todopetardos" />
535                        </a>
536                        <h4>Todopetardos</h4>
537                        <a href="https://www.todopetardos.com" target="_blank" class="info-website-preview-url">www.todopetardos.com</a>
538                    </div>
539                    <div class="info-website-description">
540                        <p>
541                            It's currently the biggest fireworks and firecrackers community in spanish language.
542                        </p>
543                        <p>
544                            I created it when i was 17 years old and i still maintaining it obtaining benefits from different sources including enterprises of the niche. I coded it all from the scratch without any CMS, it is 
544written mainly on PHP under the MVC pattern. I also designed a back-end to manage different sections of the page.
545                        </p>
546                        <p>
547                            This site kept me interested in web developing for around 7 years and helped me to improve on the field while I was still studying.
548                        </p>
549                    </div>
550                </div> -->
551
552
553
554                <!-- <div class="info-website">
555                    <div class="info-website-preview">
556                        <a href="https://wallpapers-for-ipad.com/tuentitis/index.php" target="_blank">
557                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="imgs/websites/tuentitis.jpg" alt="Tuentitis" />
558                        </a>
559                        <h4>Tuentitis</h4>
560                        <a href="https://wallpapers-for-ipad.com/tuentitis/index.php" target="_blank" class="info-website-preview-url">www.tuentitis.es (inactive domain)</a>
561                    </div>
562                    <div class="info-website-description">
563                        <p>
564                            I created it during my student summer just for fun. It's a test to get the percentage of addiction of what it was the main social network at spain at that time (Tuenti.es) It got more than 8.000 visits during the first week and it was promoted using Tuenti.es and Twitter.
565                        </p>
566                    </div>
567                </div>
568
569                <div class="info-website">
570                    <div class="info-website-preview">
571                        <a href="https://www.wallpapers-for-ipad.com" target="_blank">
572                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="imgs/websites/w4ipad.jpg" alt="Wallpapers for ipad" />
573                        </a>
574                        <h4>Wallpapers For iPad</h4>
575                        <a href="https://www.wallpapers-for-ipad.com" target="_blank" class="info-website-preview-url">www.wallpapers-for-ipad.com</a>
576                    </div>
577                    <div class="info-website-description">
578                        <p>
579                            Introduced some months after the first iPad was launched, it is a website to download iPad wallpapers and have a preview of the final result before downloading and applying them.
580                        </p>
581                        <p>
582                            I created a backend to add and resize wallpapers. A cron job was created for this task adding them programmatically at different times of the day. Then, syncronization with twitter was done automatically promoting the new items.
583                        </p>
584                        <p>It's developed in PHP.</p>
585                    </div>
586                </div>
587
588                <div class="info-website">
589                    <div class="info-website-preview">
590                        <a href="https://www.newipadwallpapers.com" target="_blank">
591                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="imgs/websites/newIpadWallpapers.jpg" alt="New iPad Wallpapers" />
592                        </a>
593                        <h4>New iPad Wallpapers</h4>
594                        <a href="https://www.newipadwallpapers.com" target="_blank" class="info-website-preview-url">www.newipadwallpapers.com</a>
595                    </div>
596                    <div class="info-website-description">
597                        <p>
598                            Just another website about wallpapers based on the previous one. The backend was the biggest change as I had to deal with big image resolutions, crop and adapt them as I wanted.
599                        </p>
600                    </div>
601                </div> -->
602
603                <h3>Side freelance work</h3>
604                <div class="info-website first">
605                    <div class="info-website-preview">
606                        <a href="https://www.jrtrigo.es" target="_blank">
607                            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="imgs/websites/jrtrigo.jpg" alt="JR Trigo" />
608                        </a>
609                        <h4>JRTrigo</h4>
610                        <a href="https://www.jrtrigo.es" target="_blank" class="info-website-preview-url">www.jrtrigo.es</a>
611                    </div>
612                    <div class="info-website-description">
613                        <p>
614                            An artist's website that is available in 4 different languages.
615                        </p>
616                        <p>
617                            Started working on it when I was a student. I created a full-screen lazy load slider for it that had to contain more than 250 images.
618                        </p>
619                        <p>
620                            It contains more than 160 paintings and more than 800 images. I developed both the front-end and the back-end, allowing the author to change and upload new content. No CMS or framework was used. Plain PHP and MySQL. Resizing image techniques were applied.
621                        </p>
622                    </div>
623                </div>
624
625                <button class="item-button info-close-button">&lt; Go back</button>
626
627            </div>
628        </div>
629    </div>
630
631    <div class="info-content info-multiscroll animated fadeInDown">
632        <p class="info-stars" data-name="multiscroll.js">
633            <span></span>
634            <i class="icon-star" aria-hidden="true"></i>
635            <a href="https://github.com/alvarotrigo/multiscroll.js">at Github</a>
636        </p>
637        <div class="text-wrap ">
638            <h2>multiScroll.js</h2>
639            <p class="text-intro">
640                A jQuery plugin to create multi-scrolling websites with two vertical panels or layouts. The screen will be split into two panels in a way they scroll vertically in opposite directions.
641            </p>
642            <p>
643                <a href="https://github.com/alvarotrigo/multiscroll.js" class="no-link">
644                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://raw.github.com/alvarotrigo/multiScroll.js/master/examples/imgs/multiscroll.png" alt="multiscroll.js" />
645                </a>
646            </p>
647            <p>
648                Designers look always for new ways of surprising their viewers and this plugin was born with that same purpose in mind. Ideal for the concept of split layouts.
649            </p>
650            <p>
651                Used by the community in multiple projects such as <a href="https://alvarotrigo.com/fullPage/utils/wordpress.html">this Wordpress theme</a>.
652            </p>
653
654            <button class="item-button info-close-button">&lt; Go back</button>
655        </div>
656    </div>
657
658     <div class="info-content info-pagepiling animated fadeInDown ">
659        <p class="info-stars" data-name="pagepiling.js">
660            <span></span>
661            <i class="icon-star" aria-hidden="true"></i>
662            <a href="https://github.com/alvarotrigo/pagePiling.js">at Github</a>
663        </p>
664        <div class="text-wrap ">
665            <h2>pagePiling.js</h2>
666            <p class="text-intro">
667                Created as a side project, pagePiling.js is a jQuery library that provides an auto-scrolling effect between sections piled one over another.
668                Used by companies such as Facebook, Logitech, or Walt Disney Family Museum.
669            </p>
670            <p>
671                <a href="https://github.com/alvarotrigo/pagePiling.js" class="no-link">
672                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://raw.github.com/alvarotrigo/pagePiling.js/master/examples/imgs/pagePiling-plugin.png" alt="pagepiling.js" />
673                </a>
674            </p>
675            <p>
676                It was created from the basics of its big brother, <a href="#fullpage">fullpage.js</a>, and it shares many of its methods and options. It was inspired in part by the website of the <a href="https://www.hugeinc.com/">Hugeinc</a> design which led me later on to create <a href="https://www.onextrapixel.com/2015/04/09/how-to-create-a-beautiful-fullscreen-single-scrolling-page-like-huge-inc/">a tutorial</a> in onextrapixel about how to create a site like it.
677            </p>
678            <p>
679                Unlike many modern scripts or CSS3 effects, I decided to keep providing support for old browsers such as IE 8 or Opera 12, which makes the library quite unique within the field.
680            </p>
681
682            <button class="item-button info-close-button">&lt; Go back</button>
683        </div>
684    </div>
685</div>
686
687<div class="footer">
688    <p class="footer-by">A project by <a href="https://twitter.com/imac2" class="small-link">Alvaro Trigo</a></p>
689    <div>
690        <a href="https://alvarotrigo.com/blog/private-policy/" class="no-link" style="font-size: 0.7em;">Privacy Policy</a>
691    </div>
692</div>
693
694<div class="notification">
695    <span class="notification-message"></span>
696    <span class="notification-close close-x-wrapper">
697        <a href="#" class="close-x no-link"></a>
698    </span>
699</div>
vendor: 110 bytes, lines 699-701
699
700
701<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
701<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
701
702<!--
702<script src="js/jquery.min.js"></script>
702-->
703
704<!--
705<script type="text/javascript" src="bower_components/nprogress/nprogress.js"></script>
vendor: 1 bytes, line 705
705
706<script type="text/javascript" src="bower_components/jquery-unveil/jquery.unveil.js"></script>
vendor: 1 bytes, line 706
706
707<script type="text/javascript" src="js/main.js"></script>
707
708-->
709
710<script type="text/javascript" src="dist/combined.min.js?v=10"></script>
710
711
712<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"638a4feb8a304d00a3cba4b5d668b0f8","r":1,"spa":2}' crossorigin="anonymous"></script>
712
713</body>
714</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.