Exploring Functionality

This section serves as an interactive guide to explore and understand the various features embedded within this portfolio. It's designed to provide both code snippets and descriptive content, allowing users to delve deeper into specific functionalities or sections. Whether you're curious about how certain React hooks are used or you want to learn more about the structure of different portfolio sections, this space gives you a detailed and interactive view. Simply search for a keyword or explore predefined topics to uncover more information. Feel free to explore and learn more about the portfolio's features and how they work. Happy exploring!

Search functionality & search bar

The search functionality in the explore section is a powerful tool that allows users to quickly find specific information or code snippets related to the portfolio. This component was designed to serve as a dynamic space for code exploration and feature documentation within the portfolio. It functions as an interactive module where users can search for specific terms, view code snippets, and navigate directly to relevant sections in the text and is prominently displayed at the top of the page, allowing users to quickly input their search queries.

Key functionalities include:

• Search Bar: This allows users to enter keywords to search for either specific sections (like -Projects- ) or code examples (such as -useEffect-). Based on the input, the component will either highlight and display relevant code or smoothly scroll to the appropriate section of the page.

import React, { useEffect } from 'react';

const Example = () => {
  useEffect(() => {
    console.log('Component mounted');
  }, []);

  return <div>Check the console!</div>;
};

• Code Snippet Viewer: The component showcases live examples of code snippets in a structured way, ensuring clarity and responsiveness, even on smaller screens. Each snippet is displayed with proper formatting and syntax highlighting, enhancing readability.

• Smooth Scrolling: For specific search terms like -Projects- or -About-, the component auto-scrolls to the corresponding section within the document, creating a seamless navigation experience.

• Tooltip Integration: Tippy.js tooltips have been incorporated to provide subtle guidance. When hovering over keywords like "useEffect" or "Project section," tooltips prompt the user to enter specific terms into the search bar for detailed information. For the moment Tippy.js is not relevant for the search functionality.

The component is fully responsive, adapting well to different screen sizes and resolutions, ensuring a consistent experience across devices. The inclusion of dark mode compatibility further enhances its usability, providing a pleasant experience for users who prefer a darker interface.

Challenges and Solutions in the Explore Component

During the development of the Notes component, several challenges arose, especially around making the search functionality and UI/UX seamless.

1. Managing Search Functionality: Initially, the search bar was built to filter code examples, but I also wanted it to scroll to specific sections like "Project" or "useEffect." It took some time to align the logic of keyword-based scrolling with the filtered code examples. The challenge was avoiding conflicts between the two, ensuring that the search term displayed relevant code snippets without breaking the section scrolling.

Solution: By utilizing the -useRef- and scrollIntoView methods, I implemented smooth scrolling while maintaining the search functionality. Additionally, conditional logic was adjusted to ensure that if the search term matched a section keyword, the scroll would activate, and any "No results found" messages would disappear.

import { useState, useRef, useEffect } from "react";
  const exploreSectionRef = useRef(null);
    useEffect(() => {
   if (searchTerm.toLowerCase() === "exp") {
    exploreSectionRef.current?.scrollIntoView({ behavior: "smooth" });
}, [searchTerm]);
    

2. Preventing Unwanted Display of Code Terms: A problem arose where keywords such as useEffect would automatically display at the top when unnecessary. Initially, they appeared even if no search was conducted.

Solution: By adding specific logic, wiht -filteredCodes- I made sure that keywords and their associated code snippets were only displayed after a search was conducted. This cleaned up the interface and improved user experience.

const filteredCodes = Object.entries(codeExamples).filter(([key]) =>
 key.toLowerCase().includes(searchTerm.toLowerCase())
 );
  {searchTerm && hasResults ? (
   <>
    {filteredCodes.map(([key, code]) => (
     <div key={key}>
      <span className={styles.keyword}>{key}</span>
       <pre className={styles.codeBlock}>
        <code className="language-jsx">{code}</code>
       </pre>
     </div>
  ))}
  </>
  ) : searchTerm ? (
<p className={styles.results}>No results found.</p>
) : null}

3. Making the Component Responsive: The code snippets in the component initially faced issues with responsiveness, especially on smaller screen sizes. The code blocks would overflow or not wrap correctly, making it difficult to view the content.

Solution: Using CSS properties like word-wrap and controlling the width, I ensured that the code snippets remained responsive across all devices, without breaking the layout.

4. Tooltip Integration with Tippy.js: Integrating tooltips for a better user guide when exploring the Notes section added another layer of complexity. I wanted users to understand the search functionality by simply hovering over key terms.

Solution: I integrated Tippy.js, a powerful tooltip library, to display guidance like "Please enter a word in the search bar for a detailed view of the code." This helped provide direction while maintaining simplicity.

5. Modal Window Management: Handling the modal window for the Explore section and ensuring that it opened and closed correctly, while preserving the state of the search bar, was another challenge.

Solution: I refined the state management -closeModal-, ensuring that when the modal closed, it would reset the search term but retain any updates made to the content while the modal was active.

const closeModal = () => {
setIsModalOpen(false);
 setSearchTerm("");
};
    

Home component

The Home section serves as the central hub of the portfolio, designed to welcome visitors and give them a clear introduction to what the portfolio is all about. It highlights the core vision of the project, showcasing both creativity and technical skills. This section not only invites users to explore various projects and components, but also provides a first glance at the approach behind the portfolio—combining simplicity, utility, and continuous improvement. It’s the place where visitors can start their journey into the portfolio, setting the tone for a seamless and engaging user experience.

The Home component is responsible for displaying the main section of my portfolio, offering an introduction as a developer and a visible section showcasing my tech stack. It was designed to give visitors a first impression of who i am and the technologies i work with, with a simple but functional design.

1. Imports: I used react-icons to add icons representing the various technologies in my tech stack. The components MobileContactInfo and PropTypes are imported, with MobileContactInfo being used to display contact information on mobile devices.

2. Main Home Section: The first section of the component is a <div> containing an <h1> that displays the section title, "Home", along with a subtitle, "My profile". This section gives users a first visual impression of my homepage.

3. Tech Stack: In this section, i've displayed the icons of the technologies i work with. By using icons like FaHtml5, FaCss3Alt, FaJsSquare, and others, i provided a quick visual reference of the languages and tools in wich i am proficient in.

Challenges and Solutions:

For the Home component, i didn’t encounter major issues during implementation, but handling dark mode was a small detail that required attention. In my case, i solved this by conditionally applying CSS classes for -darkMode-. This approach ensures that the page looks good in both regular and dark modes.

darkMode: `
  <div
className={'${styles.homeSection} ${darkMode ? styles.darkHome : ""}'}
>
`

About Component

In this section, I take a moment to share my journey as a developer and the story behind my portfolio. I believe that a portfolio is not just a showcase of skills and projects; it's a reflection of the passion, challenges, and learning experiences that shape a developer. Here, you'll find insights into my background, my approach to coding, and what motivates me in this ever-evolving field. I invite you to explore and get to know the person behind the code. It is a simple component with no issues during implementation. Therefore, let's dive into the narrative that makes my portfolio unique and personal.

Work Component

The Work section is a central part of my portfolio, designed to showcase my projects and highlight the skills and technologies I've used in each project. This section not only provides a visual representation of my work but also serves as a testament to my dedication to continuous learning and improvement. It's a place where visitors can explore the projects I've worked on, understand the technologies used, and gain insights into my approach to problem-solving.

This component serves as a showcase for my professional projects, presenting a collection of websites and applications i have developed. It incorporates a visually appealing layout and emphasizes user experience through dynamic features.

Key Features:

1. Dynamic Styling: The component utilizes conditional styling based on the -darkMode prop- to enhance user experience, ensuring it looks great in both light and dark themes.

2. Project Showcase:

• The component displays a series of projects, each with a brief description highlighting its main features and technologies used. For example, it showcases an airsoft club website featuring dynamic capabilities and modern design elements. Each project includes a link to the live website and a "Read More" section that provides additional details about the project, including its full description and accompanying images.

• For example, it showcases an airsoft club website featuring dynamic capabilities and modern design elements.

• Each project includes a link to the live website and a "Read More" section that provides additional details about the project, including its full description and accompanying images.

3. User Interaction:

• Users can click on project links to access live demos and read more detailed information about each project.

• The layout includes a responsive design that adapts well to different screen sizes, ensuring accessibility.

Challenges and Solutions in the Work Profile Component

Throughout the development of the Work Profile section, I encountered challenges, such as an issue with the modal where the close button would move up unexpectedly. After some troubleshooting, i realized that this was caused by the use of -backdrop-filter-, which required careful adjustment to ensure proper placement of elements. It seems that backdrop-filter was affecting the positioning of the modal's close button, that had position: absolute.

To address this issue, i implemented a workaround by moving the container of the modal to a separate element. This change resolved the positioning issue, allowing the close button to remain in the correct position.

Overall, the Work Profile section serves as a comprehensive overview of my skills and projects, reflecting my growth as a developer and my commitment to delivering quality work.

Projects Component

In this section, you'll find a curated collection of my projects, showcasing the diverse range of skills and technologies I've employed throughout my development journey. Each project reflects my commitment to creating user-friendly, functional, and visually appealing web applications. Feel free to explore the details and insights behind each project, as they demonstrate my approach to problem-solving and my passion for web development.

Challenges and Solutions in the Projects Component

While implementing the Work Profile component, I encountered challenges with the scrolling behavior, which affected both the Work Profile and Projects pages. This issue was eventually resolved, ensuring a smoother user experience.

After long nights of debugging and testing, scouring through code and documentation, I managed to find the root cause of the issue in the App.jsx file. The problem with the scrolling behavior affecting both pages was resolved by adding an id to the main container. And that because in my layout, there are three components: 1. the header with the footer component, 2. the main container, and 3. the aside component. This change allowed for a more controlled scrolling experience when navigating between different routes in the application. Additionally, I moved all the logic of <BrowserRouter> from App.jsx to main.jsx, further improving the structure of the application.

Specifically, an id of -mainContainer- was assigned to the <main> element, enabling the use of JavaScript to scroll to the top of this container whenever the location.pathname changed. The implementation involved a useEffect hook that monitored the location.pathname:

import { Routes, Route, useLocation } from "react-router-dom";
.....

useEffect(() => {
const mainContainer = document.getElementById("mainContainer");
if (mainContainer) {
  mainContainer.scrollTo(0, 0);
 }
}, [location.pathname]);
....

 id="mainContainer"
  

This effectively resets the scroll position to the top of the mainContainer every time the user navigates to a new route, ensuring a smoother user experience across the application.

Contact Component

The Contact component serves as a simple yet effective space for visitors to reach out and connect. It features a welcoming message expressing gratitude for visiting the portfolio and a brief introduction to its purpose. The layout is designed to be clean and accessible, ensuring that visitors can easily find my contact information.

Overall, this component enhances the user experience by fostering communication while maintaining a straightforward design.

Aside Component

The Aside component plays a crucial role in providing additional resources and navigation links within the portfolio. Initially, this component presented challenges, particularly with the visibility of links that did not remain consistent after being visited.

To address this, I created a new component called ResourceLinks. This separation of logic allowed for a more organized structure with the use of a variable -ResourcesLinks- and improved the management of the resource links. The ResourceLinks component is designed to store the state of the links in local storage, ensuring that their visibility is maintained until the user refreshes the page.

const ResourceLinks = ({ links, markAsVisited, isVisited, group }) => {
const [hoveredLink, setHoveredLink] = useState(null);

After importing the ResourceLinks component into the Aside component, i created a new variable -markAsVisited- and -isVisited- to store the visited links.

const markAsVisited = (url, group) => {
setVisitedLinks((prev) => ({
   ...prev,
 [group]: [...(prev[group] || []), url],
  }));
};

 const isVisited = (url, group) => {
  return visitedLinks[group]?.includes(url);
 };

 const nodeLinks = [
  { url: "https://example.com/skills1.2", name: "Update soon" },
 ];

This enhancement not only streamlines the user experience but also allows for dynamic interaction with the links.

Key features of the Aside component include:

• Resource Links: A dedicated section that provides valuable links for web development, keeping the content relevant and updated.

• State Management: Utilizes local storage to remember the state of the links, enhancing usability and preventing confusion.

• Separation of Concerns: The introduction of the ResourceLinks component contributes to better organization and clarity in the codebase.

Overall, the Aside component effectively complements the portfolio, offering easy access to resources while addressing previous challenges with link visibility.