What I learned

10 years developing Web Apps

Since 2010 I worked on many projects, mainly on private ones.

  • From informative static web pages to complex web applications.
  • From Monoliths to Microservices.
  • From ASP Classic, PHP or Python to Java, Kotlin or C#
  • Back-End, Full-Stack or Front-End.
  • As Developer or Project Manager.
  • Hired on a company or as freelancer
Also worked as head of studies and web development teacher for 3 semesters between august 2016 and december 2017.

Educational Degrees:

Technical Certificate on Computer Systems

Higher Level Education Certificate on Web Application Development

FreeCodeCamp certifications:

  • Responsive Web Design Certification
  • Javascript Algorithms and Data Structures Certification

Programming languages and frameworks:

  • HTML5
  • CSS
  • SCSS
  • JavaScript
  • jQuery
  • Angular
  • React
  • Preact
  • Svelte
  • Vue
  • PHP
  • Java
  • C#
  • Python
  • ROCm

  • And more... Keep reading below to find it out

About this site

  • Was coded "handmade" from scratch.
  • Using HTML5, SASS/SCSS (compiled with CSSNano) and few vanilla JS only (and some ES6 compiled with babel).
  • Includes needed snippets from Katana UI (a CSS framework i'm coding from scratch by my own).
  • Built with Parcel.js bundler.
  • Pushed to Git as VCS ti my personal GitLab.
  • Delivered to you with a CI script as DevOps task.
  • Optimized to deliver a fast, low-weight view with a maximum pagespeed score.
  • As well as all maximum LightHouse scores (Performance, Accessibility, Best Practices and SEO). You can check it adding Google Lighthouse extension to your chrome browser.

  • This web portfolio uses Katana UI, a light-weight fully responsive CSS framework that relies on flex and css events to build it all up.
  • Built with isolated SCSS components to @use only which you need.
  • A pair of vanilla js snippets will be provided only for this specific situations where CSS is not enough.
  • You'll be able to download or clone it when I finish polishing it all.
  • Codepen playground will be provided to fork in few weeks as early access version.
  • Stay close, it's almost here!
  • It will come with a complete DOCUMENTATION Something supposedly that is meant to be in but often lost on IT projects. It's intended to be a comprehensive guide to the written code. , examples included.

About Me

  1. I'm from south Europe (near Barcelona).
  2. I'm 29 years old.
  3. I started coding at 14.
  4. Elementary OS is my main operative system.
  5. My choice for a smartphone OS is Android (i find it more usable and customizable).
  6. I use a low profile keyboard to type fast.
  7. I love adjustable ergonomic chairs. And my back too.
  8. I like to use HTML elements as they are intended to.
  9. I prefer white tea over than all other teas by its "earthy" flavour.
  10. I don't like tea with things. I only like tea. Coffee too, but not coffee with tea.
  11. I've an amazing little dog.
  12. I prefer reading for learning and then take it in practice over watching youtube tutorials.
  13. Spotify and coding? Only when I need to focus on something.
  14. I like National Geographic more than Marvel.
  15. I think Minesweeper is a good casual game.
  16. I was better playing Call of Duty when I was 15 than now.
  17. I like to cook different tasty dishes and learn new ones.
  18. I like my powerless motorbike because i can park almost everywhere.
  19. Jetbrains IDEs are what I habitually use.
  20. I've a desktop and a laptop for emergencies only.

Some projects I worked in

* I can't ensure all the web apps linked here remains the same when I did it or the re-designs that they can suffer from another source.

Reach Me

Working With


                        // Excerpt from Katana-UI flexbox layout
                            @use 'vars/breakpoints';
                        .flexrow {
                              display: flex;
                              flex-flow: row wrap;
                              margin: 0 calc(#{$col-margin}/2 *-1);
  .element, [class*='col-'] {     margin: calc(#{breakpoints.$col-margin}/2);     word-wrap: break-word;   } }


                        // Toggle password visibility
                            function togglePassword (id, el) {
                              var x = document.getElementById(id);
                              if (x.type === "password") {
                                x.type = "text";
                                el.className = 'fa fa-eye showpwd';
                              } else {
                                x.type = "password";
                                el.className = 'fa fa-eye-slash showpwd';


                        "_comment":  "Excerpt from this portfolio package.json using Parcel.js bundler",
  "name": "main",   "version": "1.0.0",   "main": "index.js",   "license": "MIT",   "scripts": {     "start": "parcel index.html",     "build": "parcel build index.html -d build/"   },   "author": "JoelBonetR" }


                        /* Simple preact snippet that shows current day month and year */
                            import './style';
                            import { Component, h, render } from 'preact';

                            export default class App extends Component {
                              render() { return (
                                  <h1>Today's date!</h1>
                                  <div className="clock">
                                    <span>{new Date().getDay() + '/' + new Date().getMonth() + 1 + '/' + new Date().getFullYear()}</span>

                            render( <App />, document.getElementById('app-container') );

HTML5 and emmet

                        <!-- for productivity increase! 
The following emmet... -->
html>(head>title{test})+body>div.container>(div.flexrow.row-1-el.sm-row-2-el>div.element*3)+(div.flexrow>(div.col-50>p{text one})+(div.col-50>span{text two}))
<!-- ... converts into the structure below --> <html>   <head>     <title>test</title>   </head>   <body>     <div class="container">       <div class="flexrow row-1-el sm-row-2-el">         <div class="element"></div>         <div class="element"></div>         <div class="element"></div>       </div>       <div class="flexrow">         <div class="col-50">           <p>text one</p>         </div>         <div class="col-50">           <span>text two</span>         </div>       </div>     </div>   </body> </html>

Angular 2

                        // Excerpt from Angular tour of heroes.
export class HeroListComponent implements OnInit {   heroes: Hero[];   selectedHero: Hero;
  constructor(private service: HeroService) { }   ngOnInit() {     this.heroes = this.service.getHeroes();   }
  selectHero(hero: Hero) { this.selectedHero = hero; } }

Git + CI

                        Git commands and simple basic CI 
stages:   - deploy deploy:    stage: deploy    image: debian:stretch-slim    only:      - master script:    - apt-get update && apt install -y --no-install-recommends lftp    - lftp -e "set ftp:ssl-allow yes; set ssl:verify-certificate yes; mirror -R ./ "$PATH -p 22 -u $USER, $PASSWORD $REMOTE_HOST
git add .gitlab-ci.yml git commit -m "Add CI script" git push master


                        // Excerpt from PHP mailer.
$headers = 'From: '. $email . "\r\n" . 'Reply-To: '. $email . "\r\n" . 'X-Mailer: PHP/' . phpversion(); $status = Mail::send($to, $subject, $message, $headers); if($status == TRUE){

MySQL / MariaDB

                        // MySQL Snippet.
SHOW CREATE TABLE foo;   Table: foo Create Table: CREATE TABLE `t` (   `id` int(11) NOT NULL AUTO_INCREMENT,   `name` char(60) DEFAULT NULL,   PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4


Also working, worked or sometimes use for fun, learning or need:
jQuery, Java, Android, Kotlin, C#, Python, Svelte.js, Bootstrap, shell script, SQL Server, Mustard UI, React, Redux,
                             Webpack, Rollup, Parcel.js, Yarn, npm, npx, Cypress, docker, wordpress, woocommerce, prestashop...
close close close close close close close close