Portfolio Project


Overview + Challenge

The goal was to create an engaging, responsive portfolio that bridges my journey from visual art to product and web design.

Tools: HTML, CSS, Figma, JavaScript, Bootstrap, Adobe Fresco, Adobe Color, Github

Role: Front-end Developer

Timeline: 1 week

Git Repo →

Research

To gather inspiration, I searched:

  • Award-winning sites on CSS Design Awards
  • Mentor portfolios to benchmark layout and flow
  • Pinterest moodboards to refine style direction
  • Adobe Color for a natural, grounded colour palette

Through this process, I identified common UX/UI patterns, emerging animation trends, and opportunities to differentiate through a nature-inspired aesthetic that reflects my creative identity.

Colour Palette

Ideation

Mountains, textures, and earthy tones became key to my visual language. The site had to feel like me — minimalist yet expressive, approachable yet structured. I sketched a few homepage layouts and experimented in Figma with typography, contrast, and spacing.

Color Palette

Prototyping

After locking in the visual direction by hand, I transitioned to HTML/CSS, used Figma for mockups and design elements, and implemented interactive elements using Bootstrap and JavaScript.

Use of Bootstrap

<div class="row">
          <div class="col-12 col-md-6 col-lg-3">
            <div class="testimonial">
              <p><b>Justine Ross</b><br>Sr. Project Manager @ J.D. Power<br><br><i>“Mansi is one of the most talented...</i></p>
            </div>
          </div>
        </div>

Unique Background Element

body.home {
          background-image: url("img/background.jpeg");
          background-size: contain;
          background-position: center 290px;
          background-repeat: no-repeat;
        }

Consistent Styling

.testimonial {
          width: 100%;  
          background: #2B2111;
          border-radius: 22px;
          display: flex;
          align-items: center;
          text-align: center;
          color: floralwhite;
          padding: 20px;
          flex-direction: column; 
          justify-content: flex-start;
        }

Outcome + Next Steps

The final product is a custom, responsive portfolio that reflects my personal style, highlights my work across visual design, UX thinking, and frontend development.

Since I took my first web design course in 2022, web design has skyrocketed into much more. This project reminded me that sometimes going back to basics (code, grid systems, composition) yields the most authentic results. While I plan to explore more animated or no-code elements in the future, this version is entirely hand-built — and it represents me at this moment in my career.


Back To Top →