Archive of Renderings and Drawings

A collection of graduate school projects in disciplines such as architecture, urban design, motion capture, and data visualization.

Demo

• https://archival.dev.yliang.net/

Features

• Hovering on cards

  

  <div *ngSwitchDefault class="wrapper">
     <div *ngFor="let img of images; index as i;" class="card card-one">
        <div class="project" (click)="openDialog(i, selection.value)">
              <img src={{img.image}} alt="">
              <div class="center">
                 <div class="title">{{img.name}}</div>
              </div>
        </div>
     </div>
  </div>
  
  .card {
     position: relative;
     ...
     &:hover {
        img {
           filter: blur(3px);
           transition: 0.3s ease-in-out;
        }
        .center {
           opacity: 1;
           transition: 0.3s ease-in-out;
        }
     }
     img {
        width: 100%;
        ...
     }
     .center {
        opacity: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        ...
     }
  }
  

• Toggle dark and light modes

  By setting the styles of the root element to the value of either dark color or light color CSS variables, it allows a user to toggle between light and dark mode. The current mode is stored in local storage so that it persists across page reloads.

  

  darkColors: string = `
     --color-bg-primary: var(--color-darker);
     --color-bg-secondary: var(--color-dark);
     ...
  `;
  
  lightColors: string = `
     --color-bg-primary: var(--color-lighter);
     --color-bg-secondary: var(--color-light);
     ...
  `;
  
  ngOnInit() {
     if (localStorage.getItem('mode') !== 'light' && this.rootElem) {
        this.rootElem.style.cssText = this.darkColors;
        this.darkMode = true;
     }
  }
  

• Wave movement

  

  .wave {
     animation: horizontal-move 12s linear infinite;
  
     &:nth-child(1) {
        animation-delay: -3s;
        opacity: 0.75;
     }
  
     &:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 30s;
     }
  
     &:nth-child(3) {
        animation-delay: -6s;
        animation-duration: 15s;
     }
  }
  
  @keyframes horizontal-move {
     0% {
        transform: translate(-90px, 0%);
     }
     100% {
        transform: translate(85px, 0%);
     }
  }
  

Summary

Over the years, I have developed an interest in design that spans multiple mediums - from the physical world to the digital world. As an architectural designer, I strive to reshape cityscapes in a way that is both practical and sensible. As a web designer, I aim to create virtual environments that are intuitive and helpful. I believe that design follows function and comes from an understanding of the experience.