Develop #3

Nehemimosqueda520 · 2025-08-04T08:28:03Z

Summary by CodeRabbit

New Features
- Added Technologies and Certificates sections; revamped Projects with new items, links and updated nav/hero content.
- Contact form migrated to Formspree with required fields and reCAPTCHA; CV and contact links updated.
Style
- New theme color, centered layouts, refined hero typography, enhanced styles and hover/transition effects for services, technologies, and certificates.
- Adjusted on-scroll reveal animations.
Documentation
- New README with project overview, SEO guidance, setup, and contribution instructions.
Chores
- Added workspace configuration for development tools; removed legacy slider/carousel feature.

Update contact section with new form

Improve contact form security

Develop

change form text to english

…s-section-with-icons Add certificates section

Develop

…ards

…ction-with-service-cards Update services section with service packages

edit price

…de-certificados Fix certificates section styling

Develop

little break

uwu

…rm-to-prevent-spam Add CAPTCHA to contact form

Improve SEO metadata and image descriptions

…section-with-technology-boxes Add technologies section with icons

coderabbitai · 2025-08-22T01:56:34Z

Walkthrough

Adds a workspace VS Code settings file, a new README, large HTML content and metadata updates (new sections, projects, Formspree contact with reCAPTCHA script), substantial CSS for new sections and a theme color change, and JS updates including const refactors, ScrollReveal expansion, and removal of Swiper.

Changes

Cohort / File(s)	Summary
Workspace Config `\.vscode/settings.json`	Adds workspace VS Code settings with `CodeGPT.apiKey` set to "CodeGPT Plus Beta".
Documentation `README.md`	New README describing the portfolio, project structure, SEO/Open Graph notes, Formspree + Google reCAPTCHA guidance, usage and contribution instructions.
Markup & Content `index.html`	Major content/structure overhaul: updated title, favicon, metadata/OG, canonical URL; renamed/added sections (About Me / aboutMe, Technologies, Certificates, Projects); updated hero, social links, CV/Cover Letter downloads; new Services, Technologies and Certificates sections; Projects updates; removed Testimonials; Contact form migrated to Formspree and includes Google reCAPTCHA script; updated images/alt text and links.
Styles `css/style.css`	Theme color changed (`--main-color` from `#754ef9` → `#8b1414`), global/hero typography tweaks, and extensive new styles for Services, Technologies, and Certificates (flex layouts, hover effects, sizing, transitions).
Scripts `js/script.js`	DOM refs converted from `let` → `const` (menuIcon, navbar, sections, navLinks, header); removed Swiper initialization; ScrollReveal targets expanded to include technologies and certificates; re-added/right-origin reveal for some home/about elements.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Browser as Portfolio Site
  participant reCAPTCHA as Google reCAPTCHA
  participant Formspree as Formspree

  User->>Browser: Fill contact form
  Browser->>reCAPTCHA: Load widget (script in page)
  User->>reCAPTCHA: Complete CAPTCHA (optional)
  reCAPTCHA-->>Browser: (token available in page)

  User->>Browser: Submit form
  Browser->>Formspree: POST form data (may include token if form includes it)
  Formspree-->>Browser: Response (success/failure)
  Browser-->>User: Show result

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

I thump my paws on fresh HTML,
New hues in CSS begin to swell.
Scripts now tidy, Swiper hops away,
Forms post onward in the light of day.
Certs and techs parade—hop, hop, hooray! 🐇✨

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

Visit our Status Page to check the current availability of CodeRabbit.
Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 5

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

css/style.css (1)
1077-1079: Don’t globally round every image. Scope the style.

Global border-radius can distort logos, icons, and screenshots. Scope to content images instead.

Apply this diff:
-img {
-    border-radius: 20px;
-}
+.rounded {
+    border-radius: 20px;
+}
Then add class="rounded" to intended images in index.html (see suggested diffs there).
js/script.js (1)
23-27: Guard against missing anchors when updating active link.

querySelector may return null if the href doesn’t exist or IDs change. Add a guard to avoid a runtime error.

Apply this diff:
-                links.classList.remove('active');
-                document.querySelector('header nav a[href*=' + id + ']').classList.add('active');
+                links.classList.remove('active');
+                const activeLink = document.querySelector(`header nav a[href*="${id}"]`);
+                if (activeLink) activeLink.classList.add('active');

🧹 Nitpick comments (22)

README.md (3)

24-31: Minor casing and terminology fixes (Spanish).

Standardize technology names and headings (JavaScript, CSS, Open Graph) for polish.

Apply this diff:

-- **Swiper**: Librería JavaScript para crear sliders/carousels.
-- **Boxicons**: Conjunto de iconos utilizados para redes sociales y servicios.
+- **Swiper**: Librería JavaScript para sliders/carousels.
+- **Boxicons**: Set de íconos para redes sociales y servicios.
@@
-## Optimización para Motores de Búsqueda (SEO)
+## 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.
+El sitio incorpora metadatos descriptivos y etiquetas Open Graph para mejorar la visibilidad en buscadores y redes sociales.

34-36: Style: avoid “realizar” as a comodín verb.

More concise Spanish reads better here.

Apply this diff:

-El código es público y puede ser utilizado o modificado. Para contribuir, hacer un fork, realizar cambios y enviar un pull request.
+El código es público y puede ser utilizado o modificado. Para contribuir, haz un fork, propone cambios y envía un pull request.

40-45: Clarify reCAPTCHA/Formspree integration steps.

Note that reCAPTCHA requires server-side verification (handled by Formspree), and site keys are public. Add a note to rotate keys only if secret keys are exposed elsewhere.

Proposed addition:

 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.
+
+Formspree valida el token de reCAPTCHA en el servidor. Asegúrate de:
+- Usar el dominio correcto en la configuración de reCAPTCHA.
+- Mantener privada la clave secreta del servidor (nunca subirla al repositorio).
+- Verificar que el formulario responde con 200 OK en Formspree tras resolver el CAPTCHA.

css/style.css (4)

138-144: Heading spacing changes — check for overflow on very small screens.

The added line-height and top margin can clip in <=315px breakpoints for long names. Consider reducing line-height at the 315px media query.

Sample tweak in the smallest breakpoint:

 @media (max-width: 315px) {
   .home-content h1 {
-        font-size: 4.5rem;
+        font-size: 4.2rem;
+        line-height: 1.1;
   }
 }

438-442: Define transitions on the base element, not on :hover.

Place transition on .technology-box so it animates both enter and exit.

Apply this diff:

-.technologies-container .technology-box:hover {
-     box-shadow: 0 .1rem 2rem var(--shadow-color);
-    transform: scale(1.02);
-    transition: .5s ease;
-}
+.technologies-container .technology-box {
+    transition: transform .3s ease, box-shadow .3s ease;
+}
+.technologies-container .technology-box:hover {
+    box-shadow: 0 .1rem 2rem var(--shadow-color);
+    transform: scale(1.02);
+}

366-369: Keyboard accessibility parity with hover effects.

Mirror hover visuals for keyboard users via :focus-within.

Apply this diff:

 .services-container .services-box:hover {
     box-shadow: 0 .1rem 2rem var(--shadow-color);
     transform: scale(1.02);
 }
+.services-container .services-box:focus-within {
+    box-shadow: 0 .1rem 2rem var(--shadow-color);
+    transform: scale(1.02);
+    outline: 2px solid var(--main-color);
+    outline-offset: 2px;
+}

 .certificates-container .certificates-box:hover {
     box-shadow: 0 .1rem 2rem var(--shadow-color);
     transform: scale(1.02);
 }
+.certificates-container .certificates-box:focus-within {
+    box-shadow: 0 .1rem 2rem var(--shadow-color);
+    transform: scale(1.02);
+    outline: 2px solid var(--main-color);
+    outline-offset: 2px;
+}

Also applies to: 499-502

597-600: Ensure link focus is visible over the image overlay.

Apply this diff:

 .portfolio-layer a {
     display: inline-flex;
@@
     border-radius: 50%;
 }
+.portfolio-layer a:focus-visible {
+    outline: 3px solid var(--white-color);
+    outline-offset: 3px;
+}

js/script.js (6)

32-35: Avoid querying the header on every scroll.

Cache the header element once; only toggle classes on scroll.

Apply this diff here:

-const header = document.querySelector('.header');
-header.classList.toggle('sticky', window.scrollY > 100);
+header.classList.toggle('sticky', window.scrollY > 100);

And add this near the top of the file (outside the scroll handler):

const header = document.querySelector('.header');

38-41: Unconditionally collapsing the menu on any scroll may be jarring.

Consider collapsing only when the user scrolls past a threshold or when the navbar is open and the user clicks a link.

Possible tweak:

-if (navbar.classList.contains('active')) {
-  menuIcon.classList.remove('bx-x');
-  navbar.classList.remove('active');
-}
+if (navbar.classList.contains('active') && window.scrollY > 100) {
+  menuIcon.classList.remove('bx-x');
+  navbar.classList.remove('active');
+}

45-58: Use const instead of var for Swiper instance.

For consistency and to avoid accidental reassignments.

Apply this diff:

-var swiper = new Swiper(".mySwiper", {
+const swiper = new Swiper(".mySwiper", {

62-67: Use const for darkModeIcon.

It’s not reassigned.

Apply this diff:

-let darkModeIcon = document.querySelector('#darkMode-icon');
+const darkModeIcon = document.querySelector('#darkMode-icon');

79-82: Remove ScrollReveal target for .testimonial-wrapper (section removed).

Avoid selecting non-existent elements.

Apply this diff:

-ScrollReveal().reveal('.home-img img, .services-container, .technologies-container, .certificates-container, .portfolio-box, .testimonial-wrapper, .contact form', { origin: 'bottom' });
+ScrollReveal().reveal('.home-img img, .services-container, .technologies-container, .certificates-container, .portfolio-box, .contact form', { origin: 'bottom' });

83-95: Replace alert with an inline, accessible error message.

Alerts are disruptive and not screen‑reader friendly. Show an inline message and focus it.

Example patch (JS):

-            if (response.length === 0) {
-                e.preventDefault();
-                alert('Please complete the CAPTCHA before submitting.');
-            }
+            if (response.length === 0) {
+                e.preventDefault();
+                const msg = document.getElementById('captcha-error') || Object.assign(document.createElement('p'), { id: 'captcha-error' });
+                msg.textContent = 'Please complete the CAPTCHA before submitting.';
+                msg.style.color = 'var(--main-color)';
+                const widget = contactForm.querySelector('.g-recaptcha');
+                widget?.after(msg);
+                msg.setAttribute('tabindex', '-1');
+                msg.focus();
+            }

And add an empty placeholder below the widget in index.html for better layout (see related HTML suggestion).

index.html (9)

9-18: SEO: add og:url and make og:image absolute.

Open Graph scrapers expect absolute URLs. Also include og:url that matches the canonical.

Apply this diff:

-    <meta property="og:image" content="images/home.png">
+    <meta property="og:image" content="https://portfolio-nehemias.netlify.app/images/home.png">
+    <meta property="og:url" content="https://portfolio-nehemias.netlify.app/">

33-41: Sync nav label with section heading (“Projects”), and improve accessibility.

Rename “Portfolio” to “Projects” for consistency with the H2.
Add aria attributes for the menu icon and link relationships.

Apply this diff:

-            <a href="#portfolio">Portfolio</a>
+            <a href="#portfolio">Projects</a>
@@
-        <div class="bx bx-menu" id="menu-icon"></div>
+        <div class="bx bx-menu" id="menu-icon" role="button" aria-label="Toggle navigation" aria-controls="navbar" aria-expanded="false"></div>

And give the nav an id to match aria-controls:

-        <nav class="navbar">
+        <nav id="navbar" class="navbar">

51-59: Polish copy in hero; fix casing and grammar.

Minor grammar/casing issues (CSS, C#, React).

Apply this diff:

-            <h3>Hi! I am</h3>
+            <h3>Hi! I am</h3>
             <h1 class="title">Nehemías Mosqueda</h1>
             <p>
-                I am a passionate about programming that specializes the most in languages like 
-                HTML, css, JavaScript, C #, react, etc. 
+                I am passionate about programming, with a focus on
+                HTML, CSS, JavaScript, C#, React, and more.
             </p>
-            <p>Lately I am in the third year of the Bachelor's degree of Video Game Production and Digital Entertainment
-                 at the National University of Rafaela (UNRaf).</p>
+            <p>I am currently in the third year of the Bachelor’s Degree in Video Game Production and Digital Entertainment
+               at the National University of Rafaela (UNRaf).</p>

84-86: Casing: “Other languages” → “Other Languages”.

Apply this diff:

-                    <h3>other languages</h3>
+                    <h3>Other Languages</h3>

128-158: Services content: fix typos and spacing; standardize terminology.

“Funcional” → “Functional”.
“Javascript” → “JavaScript”.
Ensure a space after “Technologies:”.

Apply this diff:

-                <p>
-Funcional Website (3-5 Pages)
-</p>
+                <p>Functional Website (3–5 pages)</p>
@@
-                    <li><b>Technologies:</b>HTML, CSS, Javascript, Styling Libraries, Figma, Webflow</li>
+                    <li><b>Technologies:</b> HTML, CSS, JavaScript, styling libraries, Figma, Webflow</li>
@@
-                    <li><b>Technologies:</b>HTML, CSS, Javascript, Styling Libraries, Figma, Webflow</li>
+                    <li><b>Technologies:</b> HTML, CSS, JavaScript, styling libraries, Figma, Webflow</li>

250-316: Performance: lazy-load offscreen images in Projects.

Add loading="lazy" to portfolio thumbnails to reduce initial payload.

Apply this diff across project images:

-                <img src="images/portada.png" alt="Screenshot of SpaceTrip web game">
+                <img src="images/portada.png" alt="Screenshot of SpaceTrip web game" loading="lazy">
@@
-                <img src="images/portada2.png" alt="Screenshot of Deep Ambition game">
+                <img src="images/portada2.png" alt="Screenshot of Deep Ambition game" loading="lazy">
@@
-                <img src="images/sun.png" alt="Icon of ClimAPP weather app">
+                <img src="images/sun.png" alt="Icon of ClimAPP weather app" loading="lazy">
@@
-                <img src="images/drumPad.png" alt="Screenshot of Drum Pad Machine web app">
+                <img src="images/drumPad.png" alt="Screenshot of Drum Pad Machine web app" loading="lazy">
@@
-                <img src="images/calculator.png" alt="Screenshot of Calculator web app">
+                <img src="images/calculator.png" alt="Screenshot of Calculator web app" loading="lazy">
@@
-                <img src="images/markdown.png" alt="Screenshot of Markdown Previewer web app">
+                <img src="images/markdown.png" alt="Screenshot of Markdown Previewer web app" loading="lazy">

322-336: Form: consider dynamic reCAPTCHA theming and inline error placeholder.

Add a placeholder for inline CAPTCHA errors (to pair with the JS change).
Optionally set data-theme to match dark mode.

Apply this diff:

-            <div class="g-recaptcha" data-sitekey="6LdRJ5QrAAAAAO1MX3IcZSKRzr9ss2f1ZYFz35dO"></div>
+            <div class="g-recaptcha" data-sitekey="6LdRJ5QrAAAAAO1MX3IcZSKRzr9ss2f1ZYFz35dO" data-theme="light"></div>
+            <p id="captcha-error" aria-live="polite"></p>

Optional: toggle data-theme when dark mode is enabled.

341-349: Footer year is stale (2023).

Update to the current year or render dynamically.

Apply this diff:

-            <p>Copyright &copy; 2023 | All Rights Reserved.</p>
+            <p>Copyright &copy; 2025 | All Rights Reserved.</p>

Or inject the year via JS if preferred.

94-95: Scope image rounding to a class (matches CSS suggestion).

If you adopt the CSS change to .rounded, add the class to intended images for consistent styling.

Apply this diff (examples):

-            <img src="images/home.png" alt="Portrait of Nehemías Mosqueda">
+            <img src="images/home.png" alt="Portrait of Nehemías Mosqueda" class="rounded">
@@
-            <img src="images/about.png" alt="Illustration representing Nehemías Mosqueda">
+            <img src="images/about.png" alt="Illustration representing Nehemías Mosqueda" class="rounded">
@@
-                <img src="images/portada.png" alt="Screenshot of SpaceTrip web game" loading="lazy">
+                <img src="images/portada.png" alt="Screenshot of SpaceTrip web game" loading="lazy" class="rounded">

(Repeat class="rounded" for other project images as desired.)

Also applies to: 101-102, 250-251, 262-263, 274-275, 284-285, 296-297, 307-308

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

MCP integration is disabled by default for public repositories
Jira integration is disabled by default for public repositories
Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 54cdbc6 and 57aef2e.

⛔ Files ignored due to path filters (11)

documents/coverletter.pdf is excluded by !**/*.pdf
documents/curriculum.pdf is excluded by !**/*.pdf
images/about.png is excluded by !**/*.png
images/calculator.png is excluded by !**/*.png
images/drumPad.png is excluded by !**/*.png
images/favicon.png is excluded by !**/*.png
images/home.png is excluded by !**/*.png
images/markdown.png is excluded by !**/*.png
images/portada.png is excluded by !**/*.png
images/portada2.png is excluded by !**/*.png
images/sun.png is excluded by !**/*.png

📒 Files selected for processing (5)

.vscode/settings.json (1 hunks)
README.md (1 hunks)
css/style.css (5 hunks)
index.html (5 hunks)
js/script.js (4 hunks)

🧰 Additional context used

🪛 LanguageTool

README.md

[typographical] ~5-~5: Mayúsculas y minúsculas recomendadas.
Context: ...ontactar a Nehemías. ## Estructura del Código - index.html: Archivo principal qu...