Develop

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "CodeGPT.apiKey": "CodeGPT Plus Beta"
+}

README.md

@@ -0,0 +1,45 @@
+# Nehemías Mosqueda Portfolio
+
+Este repositorio contiene el código fuente para el sitio web del portafolio de Nehemías Mosqueda. El sitio está diseñado para mostrar información sobre habilidades, servicios, proyectos y cómo contactar a Nehemías.
+
+## Estructura del Código
+
+- **index.html**: Archivo principal que define la estructura del sitio web con diferentes secciones como "inicio", "sobre mí", "servicios", "portfolio" y "contacto".
+- **css/style.css**: Archivo CSS personalizado para estilos específicos del sitio web.
+- **js/script.js**: Archivo JavaScript que proporciona funcionalidades adicionales al sitio web.
+- **images**: Carpeta con imágenes utilizadas en el sitio web.
+- **documents**: Contiene archivos descargables como currículum y carta de presentación en formato PDF.
+
+## Secciones del Sitio Web
+
+- **Inicio (Home)**: Presentación de Nehemías Mosqueda con información sobre habilidades y estudios. Enlaces a perfiles de correo electrónico y GitHub. Botón de descarga de currículum.
+- **Sobre Mí (About)**: Breve información personal, actitud hacia el aprendizaje y objetivo profesional.
+- **Servicios (Services)**: Enumeración de servicios ofrecidos con descripciones breves.
+- **Portfolio**: Muestra proyectos con imágenes, títulos y descripciones.
+- **Contacto**: Formulario de contacto con campos para nombre, correo, teléfono, empresa y mensaje.
+- **Contacto**: Formulario de contacto que envía los datos de manera segura a través de HTTPS utilizando el servicio [Formspree](https://formspree.io/).
+- **Footer**: Información de derechos de autor y botón de regreso al inicio.
+
+## Recursos Externos Utilizados
+
+- **Swiper**: Librería JavaScript para crear sliders/carousels.
+- **Boxicons**: Conjunto de iconos utilizados para redes sociales y servicios.
+
+## Optimización para Motores de Búsqueda (SEO)
+
+El sitio incorpora metadatos descriptivos y etiquetas Open Graph para mejorar la visibilidad en buscadores y redes sociales. Todas las imágenes incluyen atributos `alt` descriptivos para favorecer la accesibilidad y el posicionamiento.
+
+## Uso y Contribución
+
+El código es público y puede ser utilizado o modificado. Para contribuir, hacer un fork, realizar cambios y enviar un pull request.
+
+*Nota: Se recomienda mantener actualizados los recursos externos utilizados en el código.*
+
+Para más detalles o mejoras en la documentación, contactar a Nehemías Mosqueda a través de los enlaces proporcionados en el sitio web.
+
+### Configurar el formulario de contacto
+
+El formulario utiliza Formspree para enviar los mensajes de forma segura. Si deseas recibir los correos en tu propia cuenta, registra un formulario en Formspree y actualiza el atributo `action` en `index.html` con el enlace proporcionado por el servicio.
+
+Se ha incorporado Google reCAPTCHA para prevenir el spam. Registra tu dominio y reemplaza el valor de `data-sitekey` en `index.html` por tu clave de sitio.
+

css/style.css

@@ -14,7 +14,7 @@
 :root {
     --bg-color: #fdfdfd;
     --text-color: #333;
-    --main-color: #754ef9;
+    --main-color: #8b1414;
     --white-color: #fdfdfd;
     --shadow-color: rgba(0, 0, 0, .2);
 }
@@ -65,6 +65,8 @@ body {
     margin-right: auto;
 }
 
+
+
 .navbar a {
     position: relative;
     font-size: 1.7rem;
@@ -137,6 +139,8 @@ section {
     font-size: 5.6rem;
     font-weight: 700;
     margin-bottom: .3rem;
+    line-height: 60px;
+    margin-top: 20px;
 }
 
 .home-content p {
@@ -204,6 +208,7 @@ section {
     display: flex;
     justify-content: center;
     align-items: center;
+    text-align: center;
     animation: professionRotate 13s ease-out infinite;
 }
 
@@ -382,6 +387,139 @@ span {
     margin: 1rem 0 3rem;
 }
 
+.services-box ul {
+    text-align: left;
+    margin: 1rem 0 2rem 1.5rem;
+    font-size: 1.6rem;
+}
+
+.services-box ul li {
+    margin-bottom: .5rem;
+    list-style-type: disc;
+}
+
+.technologies {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 10rem 7% 2rem;
+}
+
+.technologies {
+    min-height: auto;
+    padding-bottom: 10rem;
+}
+
+.technologies h2 {
+    margin-bottom: 5rem;
+}
+
+.technologies .technologies-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 2rem;
+}
+
+.technologies-container .technology-box {
+    flex: 1 1 30rem;
+    background: var(--bg-color);
+    padding: 3rem 2rem 4rem;
+    border-radius: 2rem;
+    box-shadow: 0 .1rem .5rem var(--shadow-color);
+    text-align: center;
+    border-top: .6rem solid var(--main-color);
+    border-bottom: .6rem solid var(--main-color);
+    height: 25rem;
+}
+
+.technologies-container .technology-box:hover {
+     box-shadow: 0 .1rem 2rem var(--shadow-color);
+    transform: scale(1.02);
+    transition: .5s ease;
+}
+
+.technology-box:hover h3 {
+    color: var(--main-color);
+}
+
+.technology-box h3 {
+    font-size: 2.6rem;
+    margin-bottom: 2rem;
+}
+
+.tech-icons {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+}
+
+.tech-icons i {
+    font-size: 5rem;
+    color: var(--main-color);
+}
+
+.tech-icons svg {
+    width: 5rem;
+    height: 5rem;
+}
+
+.certificates {
+    min-height: auto;
+    padding-bottom: 10rem;
+}
+
+.certificates h2 {
+    margin-bottom: 5rem;
+}
+
+.certificates .certificates-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 2rem;
+}
+
+.certificates-container .certificates-box {
+    flex: 1 1 30rem;
+    background: var(--bg-color);
+    padding: 3rem 2rem 4rem;
+    border-radius: 2rem;
+    box-shadow: 0 .1rem .5rem var(--shadow-color);
+    text-align: center;
+    border-top: .6rem solid var(--main-color);
+    border-bottom: .6rem solid var(--main-color);
+    transition: .5s ease;
+}
+
+.certificates-container .certificates-box:hover {
+    box-shadow: 0 .1rem 2rem var(--shadow-color);
+    transform: scale(1.02);
+}
+
+.certificates-box i {
+    font-size: 7rem;
+    color: var(--main-color);
+}
+
+.certificates-box h3 {
+    font-size: 2.6rem;
+    transition: .5s ease;
+}
+
+.certificates-box:hover h3 {
+    color: var(--main-color);
+}
+
+.certificates-box p {
+    font-size: 1.6rem;
+    margin: 1rem 0 3rem;
+}
+
 .portfolio {
     min-height: auto;
     padding-bottom: 10rem;