Welcome to my website Portfolio

Hi, I'm John Russel

a |

I’m a Front End Developer, UI/UX Designer, Video Editor, and Vector Artist living in the Philippines. Started with creating basic websites when I was in college, learning UI/UX, taking video editing and videography as a hobby, and making different vector art really helped me boost my creative side.

here are my social links

features

What I do

front-end developer

I found myself particulary interested in designing, prototyping, and making mockup designs that helped me pursue and become a good Website Developer.

UI/UX Designer

I started designing in Adobe XD and later transitioned to Figma. Designing UI/UX flows taught me the do's and don'ts of effective design.

Video Editor

I create engaging video content by editing footage, adding effects, and sound design using tools like Adobe Premiere Pro and After Effects.

Vector Artist

I create digital paintings using Adobe Photoshop and Adobe Illustrator. With these tools, I also create motion graphics and animated objects using Adobe After Effects.

you can check my works here

my portfolio

websites

CoreProc, Inc. Clone Image

View more

CoreProc, Inc. Clone

The project was inspired by the Company that I am working CoreProc, Inc. This is an approach to clone and redesign the landing page of our main website. Some of the assets that are included here are gathered in the CoreProc website, but the redesign was fixed and manipulated in Adobe XD. The approach I took for it is to be lively featuring people, animations, and other colors to showcase life, growth, and technology. This project is done using Next.js and TailwindCss.

Boo Cyber Security Image

View more

Boo Cyber Security

The project design was made using Adobe Illustrator, I decided to use Ghosts as my sort of mascots because, in cyber security the company is protecting you even though you cannot see it physically. In a way where ghosts does the same thing like float or just be there watching you. My approach to this is quite playful where ghosts follows you to showcase that Boo Cyber Security is tracking you in order to protect you from malwares or any cyber attacks in general. This project is done using Vuejs and TailwindCss.

Netflix Clone Image

View more

Netflix Clone

Since the pandemic that had happened, socializing is quite limited, yes granted that we have different social media for us to communicate with each other we do still get bored, that is why Netflix is one of the things that I used to reduce boredom when I'm just alone. This project is done using ReactJS and TailwindCss for the Front End and Axios, Firebase, and TheMovieDB for the Back End.

Plants Image

View more

Plants

Since the pandemic has kept people inside their homes, my mother enjoyed planting and taking care of different plants to keep her mind off of boredom. Watching her water the plants, change its soil, replacing their pots. I learned a thing or two about the plants that she is taking care of. This inspired me to make this little website inside Codepen where I added the different plants I liked and plants I wanted to have in the future.

Soda Cans Image

View more

Soda Cans

The reason for the creation of this website is when I saw a video reel on Facebook showing how to create a figma design for soda cans, then I was fascinated by the idea of it that I tried to recreate it in Codepen. Featuring hovers, sliders, responsiveness and its overall colorfullness, plus my likeness to these soda brands, it really made me happy.

UI/UX Design

Lydias Lechon Image

View more

Lydias Lechon

Lydia's Lechon is a well-known restaurant in the Philippines that specializes in serving succulent and crispy lechon (whole roasted pig) They have been in the business for over 55 years and are famous for their boneless lechon stuffed with seafood paella. Lydia's Lechon offers a variety of lechon options, including whole lechon, bento meals, party trays, and more. This Design is created and done with Figma.

Kappartner App UI Image

View more

Kappartner App UI

Marlboro Kappartner app is a mobile app for users to buy IQOS devices. What is IQOS device? The IQOS device is a heat-not-burn tobacco product developed by Philip Morris International. IQOS devices come in various models, including the IQOS ILUMA Prime, IQOS ILUMA, and IQOS ILUMA One, each offering different features and designs. The devices are designed to provide a more satisfying tobacco experience with reduced harm. This Design is created and done with Figma.

Marlboro - Crafted 7 UPCs Promo Image

View more

Marlboro - Crafted 7 UPCs Promo

UPC or Unique Pack Code is a type of code that can be seen in a Marlboro Cigarette Pack, these code can be inputted in the Marlboro.ph website and users can win vouchers, prizes, and many more. Marlboro is a well-known brand of cigarettes owned by Philip Morris International. It's one of the most popular and widely recognized cigarette brands in the world. Marlboro Crafted is a type of cigarette that offers a unique and premium smoking experience. This Design is created and done with Figma.

Marlboro - Voucher Raffle Entry Image

View more

Marlboro - Voucher Raffle Entry

Marlboro Crafted is a type of cigarette that offers a unique and premium smoking experience. Voucher codes can be entered in the Marlboro.ph website and user can gain points for each voucher codes inputted, these points can be used to buy and avail vouchers, e-gifts and many more. Marlboro is a well-known brand of cigarettes owned by Philip Morris International. It's one of the most popular and widely recognized cigarette brands in the world. This Design is created and done with Figma.

Marlboro - IPL Banner Image

View more

Marlboro - IPL Banner

IPL Banner is a page of Marlboro.ph website where users can view possible rewards that can be claimed using their points. This also shows users that have won Major and Minor prizes given by Marlboro. Marlboro is a well-known brand of cigarettes owned by Philip Morris International. It's one of the most popular and widely recognized cigarette brands in the world. Marlboro Crafted is a type of cigarette that offers a unique and premium smoking experience. This Design is created and done with Figma.

videos

Rite n' Lite Soda Commercial Image

View more

Rite n' Lite Soda Commercial

The soda commercial is done using Adobe Premiere Pro, all the videos of the can rolling, ice hitting the glass, and glass filling up with soda is all done and videograph by myself. The commercial is a project of mine in my previous subject in my college and in the subject of Mandarin. This video project is done using Premiere Pro and After Effects.

BulSu CICT Graduation Image

View more

BulSu CICT Graduation

The culmination of dreams especially the students that are awaiting for their graduation is hyped by this teaser video which is made in Adobe After Effects and was done by me. This was given to me by our College Publication for the Graduation of the students in Academic Year 2020-2021. This video project is done using After Effects.

Service Management Track Image

View more

Service Management Track

When a new students enrolls for a specialization, it is quite hard for them to choose and grasp what is the difference between each specialization. Having the video that tackles what Service Management Program does for a student and what can the students expect when they take this track or specialization in college. The project is done using Adobe After Effects and the images where done using Adobe Illustrator.

vector arts

Underwater Image

View more

Underwater

I have always been fascinated with the deep waters, some find it eerie or full of nightmares, but for me I always find it calming and quite relaxing especially when seeing sea creatures. This Artwork is created and done with Adobe Illustrator.

Lucifer Fallen Angel Image

View more

Lucifer Fallen Angel

Lucifers depiction in this artwork is where a story which there is a War in Heaven and it is the instance that Lucifer was expelled or banished from the heavenly realm and arrived in the terrestrial. Lucifer's emotion boasts how prideful of a character he is and the ambition caused him be lustful of power exceeding of God. This Artwork is created and done with Adobe Illustrator.

Landscape Image

View more

Landscape

Mountains and hills are some of the top places I have always wanted to go to, creating this art made me really excited on the possibility that maybe sooner or later I will be able to climb and traverse such beauty. This Artwork is created and done with Adobe Illustrator.

know me more

my resume

education

Bachelor of Science in Information and Techology

Major in Web and Mobile Development

Bulacan State University


I took my degree at Bulacan State University for 4yrs where I have spent learning different IT-related studies and enhancing my skills throughout those years.

Science, Technology, Engineering, and Mathematics

La Consolacion University Philippines


I spent my junior year at LCUP which helped me become a better person since it’s a Catholic school. I took the strand STEM in LCUP exposed to complex mathematical and scientific theories and concepts that served as a foundation for my college.

Work Experience

UI Engineer

CoreProc, Inc. | 2022 - 2025


Creating UI/UX via Figma and Adobe XD, making Front-End websites using Vuejs, Next.js, Sass, and TailwindCss

Freelance Video Editor

Upwork | 2021 - July 2022


Editing 2D motion graphics, Commercials, Timeline Video, and Interview / Testimonial videos.

You can download my resume here

Contact

contact with me

HandShake Icon

John Russel Angulo

I found myself particulary interested in designing, prototyping, and making mockup designs that helped me pursue and become a good Website Developer.

Email: Angulo.johnrussel.l.7814@gmail.com

here are my social links