DawnM

Building this Responsive Website

A Front-End Developer's Journey

As a front-end developer, creating a compelling portfolio is essential for showcasing skills and attracting opportunities. For my latest project, I took inspiration from a clean and modern Figma design to build a responsive portfolio website. This article delves into the technical aspects, challenges, and solutions encountered during the build process.

Initial Setup and Structure

The project started with a standard HTML5 structure, incorporating semantic elements like <header>, <main>, and <footer>. A key consideration was accessibility, which led to the inclusion of screen reader text for the logo and clear, descriptive alt text for images.

Styling with CSS Variables and Custom Fonts

To maintain consistency and ease of styling, I utilized CSS variables (:root) for colors and fonts. This allowed for quick adjustments across the entire site. Google Fonts were integrated for the "Ubuntu" and "Pacifico" font families, enhancing the site's visual appeal and giving it a more unique personality.

   :root {
        --DMC-pink: #ed1848;
        --DMC-green: #83a138;
        --DMC-blue: #5f91cc;
        --DMC-ink: #343a40;
        --DMC-paper: #f3eff7;
    }

    body {
        font-family: "Ubuntu", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        background-color: var(--DMC-paper);
        color: var(--DMC-ink);
    }

    h1, h2, h3, h4 {
        font-family: "Pacifico", system-ui, sans-serif;
    }

The Sticky Header Challenge

A significant challenge was implementing a sticky header that seamlessly transitioned from transparent to a gradient background with a box shadow upon scrolling. This involved a combination of CSS and JavaScript.

• Initial Transparency:  The header was initially set to background-color: transparent.
• JavaScript Scroll Detection:  JavaScript was used to detect the scroll position. When the user scrolled beyond a certain threshold, the scrolled class was added to the header.
• Gradient and Box Shadow:  The scrolled class applied a linear gradient (background-image: linear-gradient(...)) and a subtle box shadow (box-shadow: ...).
• Smooth Transitions:  CSS transitions (transition: ...) were used to create a smooth visual effect.

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

    function handleScroll() {
        if (window.scrollY > 100) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }
    }

    window.addEventListener('scroll', handleScroll);

Responsive Design

Ensuring responsiveness across a wide range of devices was a major focus. I adopted a mobile-first approach, starting with styles for smaller screens and progressively enhancing for larger displays.

• Media Queries:  Media queries were used extensively to tailor the layout and styles for different screen sizes.
• Dropdown Menu:  For smaller screens, I implemented a dropdown menu for navigation, improving usability on devices with limited screen space.
• Larger Screens:  Recognizing the prevalence of larger displays, I added media queries to optimize the layout for laptops and desktops. This involved adjusting font sizes, spacing, element sizing, and overall layout to ensure the design remained visually appealing and functional on larger viewports.

    /* Mobile-First Responsiveness */
        @media (max-width: 820px) {
        /* ... styles for smaller screens ... */
        }

        @media (min-width: 1024px) {
        /* ... styles for larger screens ... */
        }

Anchor Links and Scroll Margin

To prevent content from being hidden behind the sticky header when using anchor links, I utilized the scroll-margin-top CSS property. This ensured that the target section was positioned correctly below the header upon navigation.

    #projects, #connect {
        scroll-margin-top: 10vh;
    }

Fine-Tuning the Hero Section

The hero section presented a few challenges.

• Dual Images:  I incorporated two different hero images—one for larger screens and a smaller, optimized version for mobile. Media queries were used to control the visibility of each image based on screen size.
• Image Positioning:  The main hero image was initially positioned absolutely, causing it to overlap the edge of the screen on larger displays. I adjusted the positioning to ensure it flowed naturally within the layout.
• CSS Refinement:  Throughout the process, I continuously reviewed and refined the CSS, removing redundancies and optimizing styles for clarity and maintainability.

Conclusion

This project reinforced the importance of responsive design and the challenges of catering to the diverse landscape of devices and screen sizes. By embracing a mobile-first approach and progressively enhancing for larger screens, I was able to create a website that adapts seamlessly to different viewports. The use of CSS variables, media queries, and JavaScript allowed for a flexible and maintainable codebase.

Key Takeaways:

• CSS Variables:  Enhance maintainability and consistency.
• JavaScript for Dynamic Effects:  Enables interactive features like the sticky header.
• Responsive Design:  Crucial for a modern web experience.
• Accessibility:  An essential consideration from the start.
• Attention to Detail:  Careful review and refinement are key to writing clean and efficient code.