DEV Community: Miquel Camps

Doom Captcha - Captchas don't have to be boring

Miquel Camps — Sat, 22 May 2021 19:43:57 +0000

Hi there!

My name is Miquel Camps, I'm a web developer based in Spain, you can find me on twitter and linkedin.

TLDR: You can visit the demo here
https://vivirenremoto.github.io/doomcaptcha/

DOOM Captcha is featured on Product Hunt

I will appreciate if you can take a minute to vote for DOOM Captcha ¡Thanks!

Disclaimer
Don't take this too seriously this is a little project for fun, if you know how to code its pretty easy to break the security of this captcha.

How to use this captcha?

Please check out the website to see the documentation.

Zelda Breath of the Wild - Parallax Effect

Miquel Camps — Tue, 18 May 2021 15:23:10 +0000

Hi there!

My name is Miquel Camps, I'm a web developer based in Spain, you can find me on twitter and linkedin.

TLDR: You can visit the demo here
https://vivirenremoto.github.io/zelda_parallax/

First of all

A few days ago I saw this video by Dylan Greene

I thought it's Awesome but it would be great to see this as a interactive web page.

Steps I took to create this effect

1- I used photoshop to separate the image into layers, this was the most painful part for me, all the layers must be the same dimensions.

To get a decent parallax effect I had to fill the empty spaces of each layer, maybe this is not perfect, anyway I like the final result.

I used 7 layers in total, 5 layers for the landscape and 2 additional layers to give some special effects the grass at the bottom and a the Sun flare.

2- To merge all the layers and put the parallax effect I used this javascript library parallax.js.

3- I put all the layers inside a HTML tag (DIV) to hide the edges with the attribute overflow=hidden:

4- Finally I wrote some media queries to center the character (Link) on a mobile screen.

I hope you like it!

My crazy Resume, based on Resident Evil game

Miquel Camps — Sun, 16 May 2021 11:30:07 +0000

Hi there!

My name is Miquel Camps, I'm a web developer based in Spain, you can find me on twitter and linkedin.

TLDR: You can visit the Resume website here
https://vivirenremoto.github.io/residentevilcv/en.html

Why Resident Evil?

I do enjoy videogames playing and making them too as a hobby, I think they can help you to escape the daily rutine and open your mind in a creative way.

If you check my posts you can see my resumes based on videogames like Mario Bross, Age of Empires, Commandos, etc. and now Resident Evil because I'm a big fan of the saga, especially RE4 and RE2 Remake.

I know this is not the best idea to get a job, maybe no one will understand this, I made it for fun, to be different.

Resume parts

1- Resume: This is the first thing you can see, you can control a guy (Leon S. Kennedy) to move over the map using the keyboard or mouse, if you shoot any zombie with the mouse you can know more details about me (Contact data, Skills, Experience, Tools).

2- Mini game: If you hit the red button with the crosshair you can play a mini game, where i want to show you another experience using the same assets.

Comments

I know the code can be better, I put all my energy to do it fastest as posible and provide a good experience on desktop and mobile.

Any questions?

If you want to ask about something, you can leave your comment below.

How I made my Resume, based on Commandos game

Miquel Camps — Tue, 16 Mar 2021 10:48:53 +0000

Hi there!

My name is Miquel Camps, I'm a web developer based in Spain, you can find me on twitter and linkedin.

TLDR: You can visit the Resume website here
https://vivirenremoto.github.io/commandos/en.html

Do you remember the Commandos game?

In my case it was one of my first PC games, I remember saving and loading the game hundreds of times to pass each mission.

Some time ago I published here in dev.to how I made my resume based on the Age of Empires game and today I wanted to show you my new resume based on the Commandos game.

Check it out
https://vivirenremoto.github.io/commandos/en.html

Mini game (the alarm icon)
https://vivirenremoto.github.io/commandos/en.html?alarm

How it's made?

I didn't start from scratch, my starting point was the code I made for the age of empires CV.

I just changed the images and that's it? It's true that in both cases the navigation is similar, you move a character and when you pass over an object information is shown, but is not the same at all.

To be honest with you in some things I think the Age of Empires CV is better, the terrain, trees and the weather are generated randomly, if you reload the page a few times you will never get the same screen. but I had some limitations and I will take about them later on.

The first step to make this is to collect many resources as posible: images, sounds, music.... in this Commandos CV as I told, I was really limited about Assets, for example I didn't find sprites (images without background) of trees, terrain, buildings of the game, but I found images of soldiers and vehicles on this web.

https://www.spriters-resource.com/

At first I was thinking of putting vehicles instead of buildings like Age of Empires CV but I was not convinced of the idea, then I found the sprite of a parachute and that's where I remembered a mission of the game and I came up with the idea of the boxes falling from a plane, each box represents one thing about me (skills, experience, my stuff, tools).

At the beginning the playable character was this soldier, because I didn't find any sprite or gif of Jack O'Hara - Greet Beret

When I had a first version I sent it to some friends and all told me the same: "Man!!!! Where is the F**** Greet Beret!!!!"

As I said, I didn't find any GIF of Green Beret running, so it was an odyssey to create the animation by myself: I had to install the game on my PC, record a video, cut the video, export it to gif, remove the background of the character in each frame pixel by pixel (8 frames), move each frame to the correct position and finally export the frames to gif, it took me some mental health to do it but, I am very happy with the result.

Next I will tell you how I did some of each elements.

How I made the animation of the flying boxes and the parachute?

jQuery has a method called Animate that allows you to make fluid animations, which is the one I used to make the top position change from point A to point B.

The parachute is a static image, that I reduce it the height to zero and maybe this a is a joke to you, but I'm proud myself about the result haha.

What about the flying plane?

I took the code that I did of the eagle of Age of empires, but in this case the plane only appears in one point, as curiosity at the beginning I put this sprite

But I thought that it was not realistic that later the boxes appear from the top, so I put to the plain image brightness to zero and applied with css opacity 0.5, so that it had the appearance of a shadow.

As a curiosity I tried to put some blur filter effect to the plane shadow with some CSS but it was too realistic for this pixel art style and I removed it.

How I made the audios?

I found all the music, sounds and voices on youtube, there are several websites that allow you to export only the audio as mp3, then i cut them with the free and opensource audio editor Audacity.

What about the mini game pilla-pilla, cops and thieves, catch me if you can?

Basically there are 4 soldiers that run randomly to a point x-y, when they reach the destination another point is generated and so on until you catch them, here there is no artificial intelligence where the CPU escapes from you.

To make it a little more difficult, especially on mobile that the screen is smaller and you could pass the game without doing anything, I put the condition that you have to touch a soldier while running, so it is not a bug is a feature!

What limitations have I found?

Apart of the sprites, I'm not convinced at all that you need to made a click to play an audio in the browser but I didn't find any other solution.

What could be improved?

Everything can be improved, for example a collision system is missing, the background is fake, you can fly with character over forests, water and buildings, but hey! it took me around 3 days doing this in part time, so it's not bad at all, right? :)

Thanks for watching

I hope you liked it much as the Commandos game, if it's true I appreciate a LIKE and I really appreciate if you can SHARE IT to friends, family or coworkers who like this game.

Take a look at my other resumes

Disclaimer

The Copyright policy sets out information and rules for respecting Kalypso Media's copyrights and trademarks in its works. In order to reproduce any of Kalypso Media's content, including images, characters, storylines, or text, we must have Kalypso Media's clear permission to do so.

Become the protagonist of the movie

Miquel Camps — Thu, 05 Nov 2020 15:27:31 +0000

TL;DR

Note: I recommend you to use chrome mobile, because you can take a selfie directly and you don't need to choose an image from your photo gallery.

Long story

The last day I got an idea to get free advertising and I want to share it with you.

Imagine you are the company Marvel and do you want to promote the last movie Venom.

The idea is simple, just put a QR code in your movie ticket like this:

When someone scan this QR code will see a website where they can take a selfie and become the protagonist of the movie.

Then they can download the image and share it on social networks like instagram stories and this is free advertising for the movie.

I wrote a simple web app to do this using only javascript and canvas, the image is generated on browser, no server is required to upload the image.

Hope you like it

How I made my Resume, based on Mario Bros game

Miquel Camps — Sun, 01 Nov 2020 10:54:44 +0000

Hi there!

My name is Miquel Camps, I'm a freelance web developer based in Spain, you can find me on twitter and linkedin.

You can visit the Resume website here
https://vivirenremoto.github.io/mariocv/en.html

The the source code is on github
https://github.com/vivirenremoto/mariocv/

Controls

You can move Mario to the left or to the right using keyboard arrows on desktop or the arrows buttons on mobile.

What I used

Graphics
Music and sounds from youtube videos
HTML
CSS
jQuery (to write js code with less pain)
Google fonts

The stages

1- Start with the basics
2- Little details
3- Pixel perfect images
4- Polish the code
5- What have been the most difficult things for me?
6- What other problems I found?

Start with the basics

On the screen there are 5 objects:

Mario
Sky (clouds + mountains)
Floor
Information boxes
Arrow buttons

The steps to make this from zero are:
1- Write the HTML
2- Write the CSS
3- Write the Javascript and cry
4- Test, test, test
5- Polish the code

Little details

Mario object is a simple IMG html tag and the src value is a transparent image, yes as you read, the image is really applied using the CSS attribute background.

To create the Mario moving animation there is a sprite image with 3 frames like this.

To change one frame to another, I'm using the attribute "background-position-x" and javascript:

Frame 1, background-position-x: 0px;
Frame 2, background-position-x: -65px;
Frame 3, background-position-x: -130px;

To change the perspective of moving Mario to left or right, I'm using the same image file, but I'm applying the CSS attribute "-webkit-transform":

Left, -webkit-transform:scaleX(-1);
Right, -webkit-transform:scaleX(1);

Pixel perfect images

For the background image i'm using a little image that looks a little bit blurry on desktop.

Victor @olivicmic suggested me to add the CSS attribute to the background "image-rendering: crisp-edges" to get a crispy pixels. Wow! This little tweak makes the difference.

Thank you Victor!

Polish the code

In the first version there is a lot of duplicate code in the user controls when user press the keys or click the arrow buttons, so I put the code in functions.

What have been the most difficult things for me?

All the javascript interaction, dealing with time intervals, the controls on desktop and mobile.

What other problems I found?

Some browsers like Google Chrome not allow to autoplay music, so I have to play the music when users starts some interaction, for example click the screen, press the keys or click the arrow buttons.

Final message

I hope you like it, get some inspiration and it would be great if you can share it to your family and friends who ever play once Mario Bros to bring back some good memories.

Disclaimer

All content on this website, including articles, artwork, screen shots, graphics, logos, digital downloads and other files, is the property of Nintendo, unless owned by a third party, and is protected by German and international copyright, trademark and other intellectual property laws. Trademarks and copyrights for third-party games and characters are owned by the companies that market or license those products.

Take a look at my other resumes

Template for your portafolio

Miquel Camps — Sat, 31 Oct 2020 12:24:55 +0000

Hi DEVs!

I made a simple portafolio template where you can show your sideprojects with the option to filter them using categories.

I'm using Bootstrap for the frontend, the data is hosted in a google spreadsheet, you can upload it on Github Pages to get your own URL for free.

I hope this can be useful for you!

Demo
Google Spreadsheet example (public access required)
Source code

Install

Insert your google spreadsheet ID in this file /static/main.js

var URL = "1gjSO6dzKyucIQMkM3yo4DfZf7tSPOCfZ4wSMP5NInlU"

Customize your own website

Full width

<div class="container fullwidth">

Fixed header on desktop

<body class="fixed">

Show 4 items for row

<div class="col-md-3 item" data-category="{{category}}">

Show 6 items for row

<div class="col-md-2 item" data-category="{{category}}">

Ever seen a 360° resume?

Miquel Camps — Sat, 24 Oct 2020 22:02:23 +0000

Recently I acquired an action cam called insta 360 one r that has the feature to take 360 photos.

I thought it would be a good idea to make a resume that can be watched in 360 view, check it out.

To create this cool effect i'm using this javascript library called A-frame.

Source code

I hope you like it!

Take a look at my other resumes

A simple problem and the solution in many programming languages

Miquel Camps — Sun, 20 Sep 2020 10:00:24 +0000

Usually to find the code equivalent from one language to another one I use google and stackoverflow, I want to make something easier to use.

I want to recopile the solution to simple programming problems such as defining a string variable, concatenating two strings or replacing a text in many languages as posible.

I think this can be very useful when you want to learn a new language or you need to switch between them, you know the theory but maybe you don't know the syntax.

If you know a better solution for a problem or you are missing a programming language solution all the pull request are welcome.

Link to the GIT repo

Emotion controls for the web

Miquel Camps — Sat, 12 Sep 2020 08:22:04 +0000

Information

Imagine interacting on the web through emotions with your face.

This is a browser extension for chrome and firefox that allows you to interact with some websites.

Video

Demo

Controls

The controls are pretty simple you just need your face:

Install the extension

Chrome
Firefox
You have to allow access to the webcam on the websites that I mentioned above.

Notes

I recommend to disable the extension or closing the website if you are not using it, because it works even if the tab is not active or you open a new tab in the browser.
To interact on facebook twitter and instagram, you have to open the publication, it doesn't work in the timeline.
If you are wearing glasses, it may be difficult for the recognition system to detect a happy or angry face.

Technologies

Javascript
face-api.js by Vincent Mühler

Source code

the extension is opensource and you can see that no information is stored on any server.
You can disable or remove the extension in any time.

Source code on Github

Copyright

Due copyright thing I had to use this song

"It's My Life" Cover - BON JOVI by Dan Vasc

The worst captcha ever, Squat captcha!

Miquel Camps — Sun, 06 Sep 2020 18:34:57 +0000

Information

This captcha forces you to do 10 squats to continue.

This demo works with chrome/firefox, desktop environment and also a webcam is required.

Demo

Simple form with Squat Captcha

Click the button and enable the webcam to try this infamous captcha.

Video

Technologies

Javascript
face-api.js by Vincent Mühler

Chrome extension for Amazon

Prevent compulsive purchases on amazon, after installing this extension you are forced to do 10 squats to buy any product on amazon.

To install unzip the file and load it on chrome as unpacked extension.

https://github.com/vivirenremoto/squat_captcha/raw/master/chrome_amazon_squats.zip

Source code

https://github.com/vivirenremoto/squat_captcha

Use your lock screen as a business card - Weekend project

Miquel Camps — Sun, 06 Sep 2020 10:46:52 +0000

Information

This is an old weekend project I made a few years ago in PHP, Today I rewrite the code to generate the wallpaper using only javascript.

In the fist version I was using PHP-GD to generate the background and Google Chart API to generate the QR code image, now I'm using javascript-canvas to generate the full image and qrious a javascript library to generate the QR via javascript.

I hope you find it useful for networking in your upcoming events.

Demo

https://vivirenremoto.github.io/idwallpaper/

Features

Help the environment, you don't waste paper
Quick access, just turn on the phone
It's an image, compatible with any phone
You don't have to install any app

Tecnologies

javascript
canvas
qrious javascript library

Source code

https://github.com/vivirenremoto/idwallpaper

DEV Community: Miquel Camps

Doom Captcha - Captchas don't have to be boring

Zelda Breath of the Wild - Parallax Effect

My crazy Resume, based on Resident Evil game

How I made my Resume, based on Commandos game

Become the protagonist of the movie

How I made my Resume, based on Mario Bros game

Template for your portafolio

Ever seen a 360° resume?

A simple problem and the solution in many programming languages

Emotion controls for the web

Information

Video

Demo

Controls

Install the extension

Notes

Technologies

Source code

Copyright

The worst captcha ever, Squat captcha!

Information

Demo

Video

Technologies

Chrome extension for Amazon

Source code

Use your lock screen as a business card - Weekend project

Information

Demo

Features

Tecnologies

Source code

Options