FromSomebodyElse

Balloon Agency

Project Info

Roles

Front-End Developer

Technical Specs

  • LESS
  • Laravel(PHP)
  • Responsive

Description

Balloon Agency is my most recent project. Balloon services clients looking for behind-the-scenes talent: makeup artists, wardrobe experts, photographers, nutritionists etc. We are predominantly targeting production companies, but we also have the parallel goal of promoting BTS artists and technicians by providing a space to share and showcase their work. A Balloon profile allows for a short autobiography, Instagram feed, a small sample of their work via images or video.

Project Images

Project Code Sample

balloon.less (settings)

// Brand Colors
// ============
@COLOR_PURPLE_GRAY:   #413e46;
@COLOR_WELSH_PURPLE:  #9e1a71;


// Artist Colors
// =============
@ROSE_TRAN:             #ff3239; /* red */
@RAUL_GUERRERO:         #1c4a74; /* cobalt blue */
@ALEXANDRA_BROCK:       #f37b79; /* pink */
@LEE_MORGAN:            #87eb0f; /* brazil green */
@MADELEINE_HAMER:       #08c8cf; /* sky blue */


// File Paths
// ==========
@STATIC_FOLDER:     "/static";
@ASSETS_FOLDER:     "@{STATIC_FOLDER}/assets";
@IMAGES_FOLDER:     "@{STATIC_FOLDER}/images";

artists_default_theme.less (mixin)

.artists-default-theme(@artistsColor, @artistsName) {

// Balloon Logo
// ============
div.menu-toggle-btn {
  background: @artistsColor;
}

// Artist Detail Page
// ==================
.artist-cover {
  background-image: url('@{ASSETS_FOLDER}/artists/@{artistsName}/@{artistsName}_cover.jpg');
  
  h1 {
      color: @artistsColor;
  }
}

.artist-profile {

  a.box-button {
    color: #fff;
    background-color: @artistsColor;
  }
}

.social__links {

  i {
    &:hover {
      background-color: @artistsColor;
    }
  }
}

// Homepage - Featured Artist
// ==========================
&.featured-artist {

  div.feaured-artist-profile-container  {
    background-image:url('@{ASSETS_FOLDER}/home/artists/@{artistsName}_background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  p.artist-name {
    color: @artistsColor;
  }
  
  a.box-button {
    color: #fff;
    background-color: @artistsColor;
  }
}}

rose_tran.less

.rose_tran {
  .artists-default-theme(@ROSE_TRAN, 'rose_tran');
}