Mohammed Nuseirat Blog
Building a Modern Developer Portfolio: A Deep Dive into Design and Implementation

Building a Modern Developer Portfolio: A Deep Dive into Design and Implementation

Mohammed Nuseirat's photo
Mohammed Nuseirat
·

4 min read

https://nuseirat.github.io/

As a software engineer, having a strong online presence is crucial in today's competitive tech landscape. In this article, I'll walk you through the process of creating my portfolio website, sharing insights into the design decisions, technical implementations, and lessons learned along the way.

The Vision

When I set out to create my portfolio website, I had several key objectives in mind:

  • Create a memorable first impression

  • Showcase my projects and skills effectively

  • Ensure smooth user experience across all devices

  • Implement modern design principles

  • Maintain optimal performance

Let's dive into how I achieved each of these goals.

Design Philosophy

Dark Theme with Accent Colors

The website uses a dark theme with carefully chosen accent colors:

:root {
    --primary: #ff6b4a;    /* Vibrant orange for primary actions */
    --accent: #9fff4a;     /* Fresh green for secondary highlights */
    --dark: #111;          /* Deep background */
    --gray: #333;          /* Component backgrounds */
    --light: #fff;         /* Text and highlights */
}

This color scheme not only reduces eye strain but also creates a professional, modern look that makes content pop. The contrast between the dark background and light text ensures excellent readability.

Custom Cursor Implementation

One of the unique features is the custom cursor that adds a layer of interactivity:

document.addEventListener('mousemove', (e) => {
    const cursor = document.querySelector('.cursor');
    cursor.style.left = e.clientX + 'px';
    cursor.style.top = e.clientY + 'px';
});

The cursor expands when hovering over interactive elements, providing subtle feedback to users about clickable areas.

Key Components

1. Profile Section

The profile section serves as the website's hero area, featuring:

  • Professional headshot

  • Quick introduction

  • Key statistics

  • Social media links

  • Downloadable CV

The statistics are animated using JavaScript to create engagement:

const animateValue = (element, start, end, duration) => {
    let startTimestamp = null;
    const step = (timestamp) => {
        if (!startTimestamp) startTimestamp = timestamp;
        const progress = Math.min((timestamp - startTimestamp) / duration, 1);
        element.innerHTML = Math.floor(progress * (end - start) + start);
        if (progress < 1) {
            window.requestAnimationFrame(step);
        }
    };
    window.requestAnimationFrame(step);
};

2. Experience Timeline

The experience section uses a vertical timeline layout to present my professional journey. Each entry includes:

  • Role title

  • Company name

  • Duration

  • Key responsibilities

The timeline is enhanced with CSS animations for smooth reveal effects:

.timeline-content:hover {
    transform: translateX(10px);
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 2px;
    background: var(--primary);
}

3. Project Showcase

Projects are displayed in a responsive grid layout with:

  • Project screenshots

  • Brief descriptions

  • Direct links to live demos

  • Interactive hover effects

The image modal feature allows visitors to view project screenshots in detail:

function expandImage(element) {
    const img = element.querySelector('img');
    modal.style.display = "block";
    modalImg.src = img.src;
}

4. Skills Grid

Technical skills are presented in an organized grid with:

  • Icon representation

  • Categorization

  • Hover animations

  • Clean spacing

Performance Optimization

Responsive Images

Images are optimized for different screen sizes to ensure fast loading:

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

Smooth Animations

Animations are handled using CSS transitions and transforms where possible, falling back to JavaScript only when necessary:

.project-card {
    transition: transform 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
}

Mobile Responsiveness

The website is fully responsive with targeted styles for different screen sizes:

@media (max-width: 768px) {
    .profile-content {
        padding: 1rem;
    }

    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

Lessons Learned

  1. Performance Matters: Initially, I had more complex animations that affected performance. Simplifying them improved the user experience significantly.

  2. Progressive Enhancement: Starting with a solid base experience and adding interactive features ensures the site works well for all users.

  3. Accessibility: Using semantic HTML and ensuring proper contrast ratios makes the site accessible to a wider audience.

  4. Code Organization: Keeping CSS variables in a central location makes theme modifications much easier.

Future Improvements

I plan to add:

  • Dark/Light theme toggle

  • More interactive project previews

  • Blog section integration

  • Performance analytics

  • Contact form

Conclusion

Building a portfolio website is an iterative process. This project helped me improve my front-end skills while creating a platform to showcase my work. The key is finding the right balance between aesthetics and functionality.

Feel free to check out the live site and the GitHub repository for the complete source code. I welcome any feedback or suggestions for improvement!

Resources

For those interested in creating their own portfolio, here are some helpful resources:

This article was originally published on Hashnode by Mohammed Nuseirat.