Social Links Profile Hecho con HTML, CSS y JS con JSON y manejo de DOM

What are you most proud of, and what would you do differently next time?

Frontend Mentor - Social links profile solution

Esta es mi solución al desafío Social Links Profile de Frontend Mentor. Los desafíos de Frontend Mentor te ayudan a mejorar tus habilidades de codificación mediante la construcción de proyectos realistas.

📖 Descripción general

El desafío

Los usuarios deben poder:

1. Ver el diseño óptimo según el tamaño de pantalla de su dispositivo.

2. Ver los datos dinamicamente almacenados en el archivo data.json

3. Ver los diseños de Flexbox y los efectos de hover.

Bonus: Use datos de dos archivos .JSON para alternar un cambio de idiomas ya sea Español o Ingles.

Links

• Solution URL: Solucion
• Live Site URL: Sitio en Vivo

🛠️ Mi proceso

Tecnologias utilizadas

• HTML: Estructura semántica del componente.

• CSS: Estilos avanzados con Flexbox y hovers interactivos.

• JavaScript: Uso de Fetch API para cargar los idiomas y evento de click para cambiar el idioma a Ingles o Español. Ademas cargamos los datos dinamicamente.

• Google Fonts: Fuente Inter para un diseño moderno.

Lo que Aprendi

1. Diseño responsive: Usé media queries y un enfoque mobile-first para adaptar el diseño a diferentes dispositivos.

2. Manipulación del DOM: Aprendi a manipular el DOM para cargar los datos dinámicos desde un archivo JSON.

3. Proceso De Pedido: Aprendi a crear un proceso de pedido con un modal.

4. Cambio de idioma: aprendi a altenar el idioma al hacer click en un boton.

<figure class="card__image"></figure>
<article class="card__content">
  <div class="card__content--titles">
    <h1 class="card__content--name"></h1>
    <h2 class="card__content--location"></h2>
  </div>
  <h3 class="card__content--profesion"></h3>
  <div class="card__content--links">
    <a href="https://github.com/ImBenja" class="card__link github"></a>
    <a
      href="https://www.frontendmentor.io/profile/ImBenja"
      class="card__link frontendmentor"
    ></a>
    <a
      href="https://www.linkedin.com/in/benjam%C3%ADn-ju%C3%A1rez-b712592b8/"
      class="card__link linkedin"
    ></a>
    <a href="https://x.com/benjajuarez_2" class="card__link twitter"></a>
    <a
      href="https://www.instagram.com/benjajuarez1_/?hl=es"
      class="card__link instagram"
    ></a>
  </div>
</article>

// main.js
import { loadData } from "./components/data.js";
import { loadTranslations, toggleLanguage } from "./components/languaje.js";

document.addEventListener("DOMContentLoaded", () => {
  loadData();
  loadTranslations();

  // Botón de cambio de idioma
  const langBtn = document.getElementById("langBtn");
  langBtn.addEventListener("click", toggleLanguage);
});

// data.js
import {
  nameTitle,
  locationTitle,
  profesionTitle,
  linkGithub,
  linkFrontendMentor,
  linkLinkedin,
  linkTwitter,
  linkInstagram,
  containerImage,
} from "../util/const.js";

export function loadData() {
  fetch("assets/locales/data.json")
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.json();
    })
    .then((data) => {
      const img = document.createElement("img");
      img.src = data.profileCard.profileImg;
      img.alt = data.profileCard.name;
      img.classList.add("card__image--profile");

      containerImage.appendChild(img);
      nameTitle.textContent = data.profileCard.name;
      locationTitle.textContent = data.profileCard.location;
      profesionTitle.innerHTML = '"' + data.profileCard.profesion + '."';
      linkGithub.textContent = data.profileCard.contactSocial.linkGithub;
      linkFrontendMentor.textContent =
        data.profileCard.contactSocial.linkMentor;
      linkLinkedin.textContent = data.profileCard.contactSocial.linkLinkedin;
      linkTwitter.textContent = data.profileCard.contactSocial.linkX;
      linkInstagram.textContent = data.profileCard.contactSocial.linkIG;
    });
}

👨‍💻 Autor

• GitHub - ImBenja
• Frontend Mentor - @ImBenja
• Instagram - @benjajuarez1_
• Twitter - @benjajuarez_2
• Linkedin - Benjamim Juarez

🙏 Agradecimientos

Agradezco a Frontend Mentor por proporcionar este desafío y a la comunidad por su apoyo y feedback.