[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import type { Metadata } from "next" import MainSection from "@/components/MainSection" import FeaturedWorkSection from "@/components/FeaturedWorkSection" import RunningProjectsSection from "@/components/RunningProjectsSection" import TestimonialsSection from "@/components/TestimonialsSection" import ContactSection from "@/components/ContactSection" import Link from "next/link" export const metadata: Metadata = { title: "Juan Carlos | Web Design & Development Expert", description: "Expert web designer and developer with 7+ years of experience. Specializing in luxury web design, modern web development, and strategic branding solutions for businesses.", keywords: [ "web design", "web development", "branding", "UI/UX design", "React developer", "Next.js expert", "Juan Carlos Jiron", "frontend developer", "software engineer", "Mexico City developer", ], openGraph: { title: "Juan Carlos | Web Design & Development Expert", description: "Transform your digital presence with expert web design, development, and branding services. View my portfolio of high-impact digital solutions.", type: "website", url: "https://juancarlosjiron.com", images: [ { url: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_2292-019aWEtaQKO4sx5JgMnU206SpQrOH0.webp", width: 1200, height: 630, alt: "Juan Carlos - Web Design & Development Expert", }, ], }, twitter: { card: "summary_large_image", title: "Juan Carlos | Web Design & Development Expert", description: "Transform your digital presence with expert web design, development, and branding services. View my portfolio of high-impact digital solutions.", images: ["https://hebbkx1anhila5yf.public.blob.vercel-storage.com/IMG_2292-019aWEtaQKO4sx5JgMnU206SpQrOH0.webp"], }, alternates: { canonical: "https://juancarlosjiron.com", }, authors: [{ name: "Juan Carlos Jiron" }], category: "Technology", robots: { index: true, follow: true, googleBot: { index: true, follow: true, "max-video-preview": -1, "max-image-preview": "large", "max-snippet": -1, }, }, } export default function HomePage() { return (

{/* Navigation */}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import "@/styles/globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Juan - Luxury Web Designs", description: "Portfolio of Juan, specializing in luxury web design and development", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import * as React from "react" import { ThemeProvider as NextThemesProvider } from "next-themes" import { type ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="app/actions.ts" isEdit="true" isQuickEdit="true" isMerged="true" "use server" export async function downloadResume() { const resume = `Juan Software Engineer Manager Mexico City, Mexico (GMT-6) (+52) 55 83 67 99 08 jironjuarezjuan@outlook.com juancarlosjiron.com As a Software Engineer, I developed an Android application used nationwide for delivering medicine in Mexico, created a website that receives 100,000 visitors per month, built an e-commerce platform generating $500,000 in sales per month, and contributed to open-source libraries in the real estate sector. My experience includes working with technologies such as React, Android, Java, Kotlin, TypeScript, and Spring Boot. [... rest of resume content ...]` return new Response(resume, { headers: { "Content-Type": "text/plain", "Content-Disposition": 'attachment; filename="juan-carlos-jiron-resume.txt"', }, }) } [V0_FILE]typescriptreact:file="app/blog/[slug]/page.tsx" isEdit="true" isMerged="true" import Image from "next/image" import { notFound } from "next/navigation" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" // This would typically come from a database or CMS const blogPosts = { "moving-lake": { title: "Moving Lake: Integrating Legacy Technology and Developing New Features", headerImage: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/movinglake.jpg-DgdR0Rro26b57BB3aKF2FfDzWIS2eg.jpeg", content: `

My experience at Moving Lake was a pivotal phase in my career, where I worked on integrating and adapting legacy technology from Casai while continuously developing new features and enhancing visual design for client platforms. For approximately a year, I took on an integral role that spanned backend and frontend development while also leading technical aspects related to project quality and delivery.

Project 1: Vacation Rental System Legacy from Casai

After acquiring technology from Casai, my primary responsibility was to migrate and adapt the vacation rental system to Moving Lake's infrastructure. This project involved two global clients:

Kenya and Tanzania: Collaborated with a client to expand vacation rental operations in Africa.
Argentina: Another client aimed to implement the system in Mexico and Argentina.

My contributions included:

Frontend:

Refactoring the web system developed with:
- React and Styled Components.
- TypeScript and Webpack.
Implementing visual and usability improvements to align the system with client expectations.

Backend:

Developing and maintaining the backend using Django, ensuring seamless integration with the frontend.

Project Management:

Collaborated directly with clients (Product Owners) to gather requirements, prioritize features, and ensure timely deliveries.

While a DevOps team handled the infrastructure, my focus was on complete backend and frontend development, as well as quality assurance testing.

Project 2: Sales Platform for Ofertacero

In this project, I contributed to the ongoing development of a sales platform for Oferta Cero, a client focused on product commercialization. My work centered on:

Adding Visual Identity: Implemented the brand's visual identity using Next.js and Tailwind CSS.
Developing New Features: Enhanced the platform's capabilities by making adjustments and adding new features.
Bug Fixing: Ensured the system operated optimally by resolving technical issues that arose during its operation.

Skills and Achievements

At Moving Lake, I worked independently on key projects, which allowed me to strengthen and apply skills in:

Full-Stack Development: Delivered high-quality, functional products by handling backend, frontend, and testing.
International Collaboration: Worked with global clients across Africa and Latin America, tailoring solutions to different markets.
Technical Project Management: Coordinated meetings, managed backlogs, and ensured on-time deliveries with Product Owners.

Challenges and Learnings

Integrating Legacy Technology: Adapting a system developed by another team to new technical standards was a significant challenge.
Autonomous Work: Being responsible for the entire technical development process helped refine my organizational and technical skills.
Visual Identity: Learned to translate branding concepts into functional and visually consistent interfaces.

Final Outcome

The vacation rental system was successfully migrated and adapted, enabling clients to expand their operations in different regions.
The Oferta Cero sales platform significantly improved its visual identity and functionality, meeting client expectations.
I solidified my technical expertise in React, Next.js, Django, Styled Components, and Tailwind CSS, establishing myself as a comprehensive full-stack developer.

`, }, "casai": { title: "Casai: Leading Mobile and Web Development at Latin America's Largest Real Estate Startup", headerImage: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/casai-UfUulLmLkNIJpj08jTCGCKJXW1DfIX.webp", content: `

My experience at Casai marked a turning point in my professional career. Casai was a startup focused on real estate and short-term rentals, recognized as the largest real estate startup in Latin America, with operations in Mexico and Brazil. I worked there for four years, starting as an Android developer and progressing to become the tech lead of the mobile and web development teams.

Role and Responsibilities

At Casai, I led a multidisciplinary team composed of:

1 additional Android developer.
2 frontend developers.

We collaborated constantly with:

2 product designers.
1 product owner, later replaced to continue development.

We followed the Agile Scrum methodology, which enabled effective communication and iterative value delivery.

Mobile Application Development

At Casai, I developed two Android applications:

Guest Application: Designed for customers to manage their reservations, communicate with the support team, and access relevant information about their stay.
Hotel Front Desk Application: Used internally by reception staff to manage guest check-ins and check-outs, as well as other operational tasks.

Both applications were developed using:

Kotlin as the primary programming language.
Retrofit and Room for backend communication and local data persistence.
XML for user interfaces, adhering to Material Design guidelines.

This experience allowed me to deepen my expertise in Material Design, creating visually appealing and functional interfaces.

Web Development with a Design System

In addition to mobile applications, I led the development of Casai's website. The site included a booking system and administrative functionalities, built with:

React and TypeScript.
Styled Components.
Bootstrap and Webpack.
Storybook for implementing a design system.

While the design system provided visual consistency, I later realized that maintaining complex infrastructure could hinder work in small teams. This lesson was crucial for simplifying systems in future projects.

Microservices and Backend

I also developed a microservice with Spring Boot and Kotlin to integrate the service desk with a queueing system. This microservice monitored and processed new reservations created on the platform. Although my involvement in AWS infrastructure was limited, I resolved critical bugs and ensured the service operated correctly.

Key Learnings and Achievements

Progressed from Android developer to tech lead, showcasing leadership and technical growth.
Developed and maintained two critical Android applications, enhancing guest experience and operational efficiency.
Led the development of a comprehensive website with booking and administrative capabilities.
Gained valuable insights into the challenges of maintaining complex design systems in small teams.
Expanded skill set to include microservice development and backend integration.

My time at Casai was instrumental in shaping my career, providing me with diverse experiences across mobile and web development, team leadership, and startup operations in the competitive real estate tech sector.

`, }, "farmacias-especializadas": { title: "Farmacias Especializadas (FESA): Revolutionizing Medicine Delivery in Mexico", headerImage: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/fesa-N4ChbTd8kgRmw4s62eW64l1KHdB8cK.webp", content: `

One of the most challenging and rewarding projects I've worked on was developing a delivery application for Farmacias Especializadas FESA, a renowned pharmaceutical chain in Mexico. This project involved creating a technological solution to optimize the logistics of delivering medications, both between branches and directly to end customers.

Project Objective

The application was specifically designed for the company's delivery personnel. Its main function was to move stock between pharmacies and deliver medications to customers who placed orders through the call center. Once an order was received, the backend calculated the best delivery route, and this information was sent to and consumed by the mobile application.

FESA Project — Farmacias Especializadas FESA logo, representing the brand for which the delivery app was developed

My Role and Responsibilities

I was the Android developer responsible for the project, participating from its inception to its release on the Play Store. My responsibilities included:

Graphic Interface Design: Creating wireframes and prototypes using Whimsical.
Full App Development: Utilizing technologies such as Jetpack Compose, Kotlin, Retrofit, Room, Flow, and Google Maps and Roads APIs.
Implementation of Key Features:
- Displaying optimized routes for delivery personnel.
- Integration with GPS for real-time tracking.
- Sending notifications and tracking orders.
Test Management: Using Firebase Distribution to distribute APKs among testers and managing simulations in Android Studio to verify app behavior in various locations.
Field Testing: Conducting physical tests with delivery drivers on motorcycles to validate the app's accuracy and usability.

Technologies Used

The project leveraged a robust and modern tech stack, including:

Jetpack Compose for intuitive and efficient UI design.
Kotlin as the primary programming language.
Retrofit for backend communication.
Room and Flow for local data management.
Google Maps, Routes, and GPS APIs for geolocation and route calculation.
Firebase Distribution for managing test versions.

Team and Duration

The team consisted of:

Two backend developers.
One frontend developer.
Myself, as the Android developer.

The project lasted six months, following a defined schedule and constant collaboration between development areas.

Challenges and Learnings

The biggest challenge was ensuring the application worked correctly under real-world conditions. This involved fine-tuning route calculations and optimizing data and battery usage — crucial factors for delivery personnel on the move. Additionally, I learned a lot about the importance of field testing and the value of a well-coordinated team.

Final Outcome

The application was successfully published on the Play Store and is currently used by Farmacias Especializadas FESA delivery personnel to improve medication delivery efficiency. This project not only allowed me to solidify my technical skills but also gave me the satisfaction of creating a product that directly impacts people's lives.

`, }, } export default function BlogPost({ params }: { params: { slug: string } }) { const post = blogPosts[params.slug as keyof typeof blogPosts] if (!post) { notFound() } return (

{post.title}

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --radius: 0.5rem; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Add custom font styles */ @font-face { font-family: "Serif Italic"; src: local("Times New Roman Italic"); font-style: italic; } [V0_FILE]typescriptreact:file="components/MainSection.tsx" isEdit="true" import Image from "next/image" import Link from "next/link" import { ArrowRight } from "lucide-react" import { Swiper, SwiperSlide } from "swiper/react" import { Pagination } from "swiper/modules" import "swiper/css" import "swiper/css/pagination" const projectImages = [ { src: "/placeholder.svg?height=400&width=600", alt: "Web Design Project" }, { src: "/placeholder.svg?height=400&width=600", alt: "Web Development Project" }, { src: "/placeholder.svg?height=400&width=600", alt: "Branding Project" }, ] export default function MainSection() { return (

{/* Project Images Grid/Slider */}

{/* Mobile Slider */}

{projectImages.map((image, index) => (

))}

{/* Desktop/Tablet Grid */}

{projectImages.map((image, index) => (

))}

{/* Hero Section */}

(HELLO, I'M JUAN CARLOS)

SOFTWARE engineer
MANAGER

Transforming ideas into powerful digital solutions. Specializing in web design, development, and branding for businesses that demand excellence.

Let's collaborate

{/* Services Section */}

With over 7 years of experience, I bring your vision to life with cutting-edge designs and robust development, creating waves of innovation and success for your brand.

{["WEB DESIGN", "WEB DEVELOPMENT", "BRANDING", "MOBILE APPS"].map((service, index) => (

{service}

Explore

))}

{/* Exhibition Image */}

) } [V0_FILE]typescriptreact:file="components/FeaturedWorkSection.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Image from "next/image" import Link from "next/link" import { ArrowRight } from "lucide-react" export default function FeaturedWorkSection() { return (

FEATURED
WORK

From nationwide mobile apps to high-traffic websites and e-commerce platforms, my portfolio showcases a blend of innovation and technical expertise.

Let's create

{/* Project Categories */} {[ { title: "WEB DESIGN", number: "01", description: "Creating engaging digital experiences that captivate and convert", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/featured-work-NnKV456M3xYtzxAXoDe9yZ1pG0q3oM.webp", }, { title: "WEB DEVELOPMENT", number: "02", description: "Building scalable, high-performance websites and applications", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/casai-UfUulLmLkNIJpj08jTCGCKJXW1DfIX.webp", }, { title: "BRANDING", number: "03", description: "Crafting unique brand identities that resonate with your audience", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-01-20%20at%2016.59.01-ibCB67QY10et58WW1RgWTpbuaUJdTl.jpeg", }, ].map((category, index) => (

{category.title}

({category.number})

{category.description}

View projects

))}

{/* Our Service Expertise */}

MY SERVICE
EXPERTISE

Leveraging cutting-edge technologies and years of experience to deliver exceptional results across web design, development, and branding.

Start a project

{[ { number: "01", title: "WEB DESIGN", descriptions: [ "Creating intuitive user interfaces that enhance interaction.", "Focusing on user needs to deliver exceptional experiences.", ], }, { number: "02", title: "WEB DEVELOPMENT", descriptions: [ "Building scalable and maintainable web applications.", "Utilizing modern frameworks like React, Next.js, and Django.", ], }, { number: "03", title: "BRANDING", descriptions: [ "Crafting unique visual identities that stand out.", "Implementing consistent branding across digital platforms.", ], }, ].map((service, index) => (

({service.number})

{service.title}

{service.descriptions.map((desc, i) => (

{desc}

))}

) } [V0_FILE]typescriptreact:file="components/RunningProjectsSection.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Image from "next/image" import Link from "next/link" import { ArrowRight, ArrowLeft } from "lucide-react" export default function RunningProjectsSection() { return (

OUR
RUNNING PROJECT

As a front end developer using modern ideas simplicity design and universal visual identification tailored to dedicated and current market.

Let's discuss

{/* Project Showcase */}

Luxury bathroom interior with marble finishes

) } [V0_FILE]typescriptreact:file="components/TestimonialsSection.tsx" isEdit="true" isMerged="true" import Image from "next/image" import Link from "next/link" import { ArrowRight } from "lucide-react" export default function TestimonialsSection() { return (

PEOPLE SAYS
ABOUT ME

As a front end developer using modern ideas simplicity design and universal visual identification tailored to dedicated and current market.

Let's discuss

{/* Testimonials Grid */}

{[ { image: "/placeholder.svg?height=600&width=450", quote: "Mention Mr manners opinion if garrets enabled. To occasional dissimilar impossible sentiments. Do fortune account written prepare invited no passage.", name: "Olivia Scarlett", role: "UI/UX Designer", }, { image: "/placeholder.svg?height=600&width=450", quote: "Mention Mr manners opinion if garrets enabled. To occasional dissimilar impossible sentiments. Do fortune account written prepare invited no passage.", name: "Kiearnan fagan", role: "UI/UX Designer", }, ].map((testimonial, index) => (

{testimonial.quote}

{testimonial.name}

{testimonial.role}

))}

) } [V0_FILE]typescriptreact:file="components/ContactSection.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Image from "next/image" import Link from "next/link" import { ArrowRight } from "lucide-react" export default function ContactSection() { return (

Juan Carlos.

ATTENTION RECRUITERS

Looking for a skilled software engineer with a proven track record? I bring over 7 years of experience in web design, development, and innovative solutions. Explore my portfolio and discover how I can add value to your team.

Download My Resume

Juan Carlos in a professional studio setting

{/* Footer */}

Navigation

{["Work", "About", "Contact", "Services"].map((item) => ( {item} ))}

Services

{["Web Design", "Web Development", "Branding", "Mobile Apps"].map((item) => ( {item} ))}

Connect

{["LinkedIn", "GitHub", "Twitter", "Email"].map((social) => ( {social} ))}

) } [V0_FILE]css:file="styles/globals.css" isQuickEdit="true" isMerged="true" /* This file is automatically generated. Do not edit directly. */ [V0_FILE]typescript:file="utils/contact.ts"

Project 1: Vacation Rental System Legacy from Casai

My contributions included:

Frontend:

Backend:

Project Management:

Project 2: Sales Platform for Ofertacero

Skills and Achievements

Challenges and Learnings

Final Outcome

Role and Responsibilities

Mobile Application Development

Web Development with a Design System

Microservices and Backend

Key Learnings and Achievements

Project Objective

My Role and Responsibilities

Technologies Used

Team and Duration

Challenges and Learnings

Final Outcome

SOFTWARE engineer MANAGER

{service}

FEATURED WORK

{category.title}

MY SERVICE EXPERTISE

{service.title}

OUR RUNNING PROJECT

PEOPLE SAYS ABOUT ME

Juan Carlos.

ATTENTION RECRUITERS

SOFTWARE engineer
MANAGER

FEATURED
WORK

MY SERVICE
EXPERTISE

OUR
RUNNING PROJECT

PEOPLE SAYS
ABOUT ME