Client Personal Portfolio Website

After graduating with a master's degree, Camila realized that while her resume was impressive, potential employers were often asking for a portfolio to better showcase her accomplishments and professional journey. As a communications and marketing strategist, she didn’t have visual assets to display, like a designer would, but she did have an extensive list of achievements, statistics, and performance metrics that she wanted to highlight.
The goal of this project was to create an online portfolio that would emphasize her accomplishments while also showcasing her personality, aligning with her desire to work at a more creative company in industries like fashion or product marketing.

My role: Designer Team: Individual Project Industry: Communications

My Role

As the designer and developer of the portfolio, I was responsible for:

UX/UI Design: Creating a user-friendly, visually engaging layout that is both professional and personal.
Front-End Development: Ensuring responsive design, clean code, and semantic structure for future scalability and easy maintenance.
Content Strategy: Collaborating with the client to highlight her career, skills, and achievements in a compelling way.
Branding & Personality Integration: Capturing her personality through design while maintaining a polished, professional tone.

Design Concept & Challenges

Since this portfolio is displaying text instead of visual work the main challenge was creating a portfolio that would appeal to a creative audience while still showcasing her communication and strategy expertise. To achieve this, I focused on the following design principles:

Humanizing the Experience: Adding images from her work experiences and making the site visually dynamic, so it felt more like a personal story.
Storytelling: Using photos and thoughtful typography to highlight her career journey, accomplishments, and future goals.
Balance: Striking the right balance between professionalism and creativity, ensuring the portfolio could appeal to a wide audience.

Portfolio Structure & Key Sections

Navigation & Introduction:
A simple design with a scrolling banner with adjectives that describe the client.
About Me Section:
A short but impactful section introducing the client and explaining why she’s passionate about communications and marketing.
Career Background:
This section details her career journey, from her education to her professional experience. Her work experience was written more as a story of why/how she is the person she is today and passionate about her career. By integrating photos from past roles, I helped bring her story to life.
Accomplishments & Performance:
This section was one of the most important, as it focused on measurable results from her previous positions. We wanted to show the impact of her work—showcasing metrics, such as improvements in business performance or successful campaigns, that stands out apart from other text.
Testimonials:
A section dedicated to client and colleague testimonials. This section humanizes her portfolio even further, making it easier for potential employers to connect with her story and trust her capabilities.
Skills:
Here, I highlighted her key skills, using icons and visuals to make the content engaging while still conveying important information clearly. The section was designed to emphasize her communication and marketing strategy expertise.

Design & Development Considerations

Responsive Design: I used media query's to adjust the layout to different screen sizes, providing a seamless user experience across devices.
Semantic Code & Maintainability: I wrote clean, organized code to ensure that the website is easily editable and maintainable in the future. Using HTML5 semantic elements helped the code to be more straightforward if Camila ever needs to edit it herself.
User Experience (UX): The design is intuitive, with a logical flow that guides visitors through her story, skills, and accomplishments. I ensured that the site was accessible by using aria-labels, ability to pause animated text and user confirmation messages when leaving her website.

                                                                                    
                  JavaScript
        
                  const linkedinLink = document.querySelector('a.linkedin');
                  linkedinLink.addEventListener("click", event => {
                      const userConfirmed = confirm("Do you want to leave the current page and open LinkedIn?");
                      if (!userConfirmed) {
                          event.preventDefault();
                      }
                  });

                                                                                    
                  CSS
        
                  #animated-text-strip:hover .marquee {
                      animation-play-state: paused;
                  }

                                                                                    
                HTML
        
                <nav aria-label="Main navigation">
                    <ul>
                        <li class="nav-item">
                            <a href="#background-section" aria-label="Go to Background section">Work</a>
                        </li>
                        <li class="nav-item">
                            <a class="file" href="images/Camila Meraz CV.pdf" target="_blank" aria-label="Open resume in a new tab">Resume</a>
                        </li>
                        <li class="nav-item">
                            <a href="#footer" aria-label="Go to contact section in the footer">Contact</a>
                        </li>
                    </ul>
                </nav>

Tools & Skills

The skills and tools used to bring this project to life:

Design Tools

Figma

Canva

Web Development

HTML5

CSS3

JavaScript

Github

Accessible & Responsive Design

Flexbox

Media Queries & Aria labels

Conclusion & Reflections

It was great to be able to help Camila create a portfolio that was unique to her and showcased her achievements and personality. This project was a great way to test my front-end developement and design skills and get to learn more about building accessible websites.