WELCOME TO MY PORTFOLIO

My name is John Paul B. Mangeron

The name of my portfolio is Craft Idea's Studio

ABOUT ME

Front-end developer

As a Front-End Developer, I transform creative designs into fully functional, responsive, and interactive websites that deliver seamless user experiences. By leveraging modern technologies such as HTML, CSS, and JavaScript, I build clean, efficient, and scalable interfaces that perform smoothly across all devices and browsers. I focus on writing well-structured code, optimizing performance, and ensuring accessibility, so every project is not only visually appealing but also technically robust, user-friendly, and aligned with real-world usability standards. My goal is to create engaging digital experiences that connect brands with users and leave a lasting impression.

Web-designer

My journey as a Web Designer revolves around crafting visually stunning, intuitive, and highly responsive websites that deliver meaningful user experiences. I focus on combining strong design principles with modern, innovative technologies to create layouts that are not only aesthetically pleasing but also functional and easy to navigate. With a deep understanding of user behavior, typography, color theory, and visual hierarchy, I design websites that captivate audiences and clearly communicate brand identity. I am passionate about turning ideas into engaging digital experiences that help businesses connect with their audience, build trust, and stand out in today’s competitive online landscape.

Vibe coder ai

As a “Vibe Coder,” I seamlessly integrate AI-powered tools into my workflow to generate clean, efficient, and scalable HTML, CSS, and JavaScript code. I specialize in transforming creative concepts and visual ideas into interactive, high-performance web experiences. By blending human creativity with artificial intelligence, I accelerate development without compromising quality, ensuring every project is visually vibrant, technically sound, and optimized for real-world usability. My approach focuses on experimentation, innovation, and flow—turning ideas into living, breathing digital experiences that feel as good as they look.

Graphic designer

As a graphic designer, I have proudly embraced powerful open-source alternatives to traditional creative software, allowing me to produce high-quality work with flexibility and efficiency. My go-to tools include GIMP for image manipulation and photo compositing, Inkscape for creating precise vector graphics and illustrations, Darktable for professional photo color grading and enhancement, OpenShot for quick and efficient video edits, and Kdenlive for more advanced video production and post-processing. This free and open-source creative suite empowers me to work without limitations, giving me complete creative control while maintaining professional standards. By leveraging these tools, I can deliver visually compelling designs, polished visuals, and engaging multimedia content—all without the burden of expensive software, proving that powerful creativity is driven by skill and vision, not price.

SOFTWARE SKILLS

HTML

HTML (HyperText Markup Language) is the standard language for creating web pages. I use HTML to structure content on the web.

CSS

CSS (Cascading Style Sheets) is used to style and layout web pages. I use CSS to make web pages visually appealing and responsive.

JavaScript

JavaScript is a programming language that allows you to implement complex features on web pages. I use JavaScript to create interactive and dynamic web experiences.

Visual Studio Code

Visual Studio Code is a source-code editor made by Microsoft. I use VS Code for coding, debugging, and version control.

GIMP

As a graphic designer, I utilize GIMP as a powerful and free alternative to Adobe Photoshop. My skills in GIMP allow me to create high-quality raster images for various projects, offering a cost-effective solution without compromising on professional results.

Microsoft Office

Microsoft Office is a suite of productivity applications. I use Microsoft Office for document creation, data analysis, and presentations

INKSCAPE

As a graphic designer, I utilize Inkscape, a powerful open-source alternative to Adobe Illustrator, to create high-quality vector graphics. My expertise spans logo design, poster creation, SVG and vector illustration, and more, providing cost-effective and professional design solutions.

DARKTABLE

I'm a graphic designer who uses Darktable, a powerful open-source alternative to Adobe Lightroom, for image editing and post-processing. My proficiency in Darktable allows me to enhance and refine photos, achieving professional-quality results without the expense of proprietary software.

OPENSHOT

As a graphic designer, Openshot is my preferred video editor. It's free, user-friendly, and powerful enough for both quick edits and complex projects, allowing seamless integration of graphic design elements.

KDENLIVE

Hi, I'm a graphic designer who loves using Kdenlive for video editing! I find it's a powerful and versatile tool, perfect for everything from simple cuts and edits to more complex projects. I appreciate its open-source nature and the flexibility it offers. I'll be sharing some of my Kdenlive tips and tricks soon, so stay tuned!

TRELLO

Trello is my go-to tool for organizing my daily tasks as a front-end developer, web designer, and graphic designer. I use it to manage projects, track progress, and collaborate effectively with team members. The Kanban-style boards help me visualize my workload and prioritize tasks efficiently.

ASANA

Asana is my project management backbone. It helps me stay organized and on top of deadlines across my roles as a front-end developer, web designer, and graphic designer. I appreciate its ability to manage tasks, track progress, and facilitate clear communication within teams.

IFTTT

IFTTT is a key part of my daily workflow as a front-end developer, web designer, vibe coder AI, and graphic designer. I leverage its automation capabilities to connect various apps and services, creating custom workflows that improve my productivity and reduce manual effort.

ZAPIER

Zapier is an indispensable tool in my daily workflow. As a front-end developer, web designer, vibe coder AI and graphic designer, I use it to create automated connections between different apps, improving productivity and reducing manual data entry.

ARTIFICIAL INTELLIGENCE

My daily work as a front-end developer, web designer, vibe Coder AI and graphic designer is significantly enhanced by AI. I use a suite of tools including ChatGPT, DeepSeek, Mango AI, Microsoft Copilot, and Gemini and more (A.I) Tools for tasks ranging from code generation and research to design ideation and content creation. These AI assistants are invaluable for improving efficiency and expanding creative horizons.

VIBE CODING AI

CLICK HERE TO VISIT

PHOTO EDITING , MOCK UP, LOGO MAKING, POSTER MAKING AND MORE PROJECT MAKING.

VIDEO EDITING (PROMOTION PRODUCTS, BLOG, ADS MAKING VIDEO AND MORE...)

PERFUME

Experience the captivating allure of the new Alessia Gabrielle M. Salcon Premium Scent collection. This weekend only, we're offering a special price on this luxurious fragrance. Watch the video to discover the unique scent and take advantage of this limited-time offer. THIS IS PROTOTYPE ONLY.... BY: CRAFT IDEA'S STUDIO.

BURGER

Craving a burger that's BIG on flavor and even BIGGER on value? Burger Station's Super Big Sale is here! For a limited time, get this incredible burger for only $10.00. This video will make your mouth water! THIS IS PROTOTYPE ONLY.... BY: CRAFT IDEA'S STUDIO.

SOAP

Indulge your senses and nourish your skin with our all-natural Honey Peppermint Soap! Made with the finest ingredients and inspired by the serene beauty of nature, this soap will leave you feeling refreshed and rejuvenated. Watch to learn more about the benefits of this luxurious, naturally clean soap. (THIS PROJECT IS PROTOTYPE OR DUMMY ONLY. BY: CRAFT IDEA'S STUDIO)

PIZZA

We're excited to present our new pizza offering! Enjoy a high-quality pizza at an affordable price of $10.00. We also offer a special 5% discount for senior citizens and persons with disabilities (PWD). Free delivery is available within [delivery area]. Watch the video to learn more. THIS PROJECT IS PROTOTYPE OR DUMMY ONLY. BY: CRAFT IDEA'S STUDIO.

ALIEN

"Hello, and welcome to Craft Idea's Studio! In this video, you'll see a prototype/dummy version of 'Alien Invasion 2026: Earth's Last Stand?' This is a work in progress, so please keep in mind that it's not the final product. We're exploring a suspenseful scenario of a fiery battle for survival against an unknown extraterrestrial threat. Let's dive in!" (THIS IS MY EDITING SKILLS) (THIS IS STORY TELLING).

MANANANGGAL

"Welcome to Craft Idea's Studio! This is a prototype/dummy video exploring the legend of the Manananggal. In this work in progress, we delve into the question: Is the Manananggal more than just a monster? Please note that this is an early version, so expect some imperfections. Let's begin!" (THIS IS MY EDITING SKILLS) (THIS IS STORY TELLING).

UGC-LIPSTICK

This user-generated content (UGC) video by Craft Idea's Studio is a vibrant prototype showcasing a playful blend of beauty and creativity. Designed as a dummy concept, it features a bold red lipstick paired with dynamic visuals—strawberries, splashes, and a coastal vibe—all crafted to explore branding possibilities for future campaigns. While not a final release, this mock-up captures the studio’s flair for cinematic styling and product storytelling, offering a glimpse into their evolving aesthetic direction.

UGC-POTATO CHIPS

This playful UGC video from Craft Idea’s Studio is a prototype concept spotlighting their Sour Cream & Onion PARTY SIZE chips. Set in a cozy kitchen, the clip captures the product’s bold flavor and home-snack appeal with a cheerful, hands-on presentation. While still in the dummy stage, the video explores visual branding, packaging cues, and lifestyle integration—laying the groundwork for future promotional content that’s both tasty and relatable.

UGC-COFFEE

This UGC video from Craft Idea’s Studio is a prototype concept designed to test visual storytelling and product appeal for Lune Coffee’s iced beverage line. Featuring bold graphics, floating coffee beans, and a rich brown palette, the clip highlights the brand’s signature iced coffee offerings in both large and small sizes. Though still in the dummy stage, the video explores layout, pricing visibility, and sensory cues—laying the foundation for future promotional content that’s both energizing and visually delicious.

UGC-GINGER LEMONADE BEER

This lively UGC video from Craft Idea’s Studio is a dummy prototype designed to showcase the refreshing appeal of “Ginger Lemonade Beer.” Set against a vibrant, party-inspired backdrop, the concept blends organic ingredients—lime, ginger, and green leaves—with dynamic splash visuals to evoke energy and flavor. Though still in the testing phase, this mock-up explores product positioning, festive mood cues, and organic branding, paving the way for future promotional content that’s both zesty and unforgettable.

FOLLOW ME

EMAIL ME AT: craftidea128@gmail.com

Page updated

Google Sites

Report abuse