search

puddlejumper26 / xiangs

Personal Website
0 stars 0 forks source link

projects component #9

Open puddlejumper26 opened 4 years ago

puddlejumper26 commented 4 years ago

This part should contain all the big projects I have ever done, ok, some are not real project, but the playground of myself. Anyway, all of them should be displayed here.

Detailed Contents

Angular Material

Design

image

puddlejumper26 commented 4 years ago

HTML

<div class="about-section">
    <mat-accordion>

        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>
              Tmall Website
            </mat-panel-title>
            <mat-panel-description>
              Online shopping website simulation (2018)
            </mat-panel-description>
          </mat-expansion-panel-header>
          <div>

            This project contains the whole pacakge of the front end. It was built with HTML,CSS,Javascript,jQuery and Bootstrap, not suitable for mobile devices<br>

            Please use chrome for the best quality.<br>

            Inside Each Page Please click the <span style="background-color:red;color:white;padding:2px;border-radius:5px;">Valid</span> for the valid links due to language.

            <ul>
                <li><a href="https://puddlejumper26.github.io/js-showcases/projects/tmall_website/front_end/09-final-merge/homepage.html" target="_blank">Home Page</a></li>
                <li><a href="https://puddlejumper26.github.io/js-showcases/projects/tmall_website/front_end/09-final-merge/category.html" target="_blank">Category</a></li>
                <li><a href="https://puddlejumper26.github.io/js-showcases/projectstmall_website/front_end/09-final-merge/product.html" target="_blank">Product</a></li>
                <li><a href="https://puddlejumper26.github.io/js-showcases/projects/tmall_website/front_end/09-final-merge/login.html" target="_blank">Login</a></li>
                <li><a href="https://puddlejumper26.github.io/js-showcases/projects/tmall_website/front_end/09-final-merge/shoppingcart.html" target="_blank">Shopping Cart</a>  - Most complicated with JS, selections,amounts,numbers,quantities changing with each other</li>
                <li><a href="https://puddlejumper26.github.io/js-showcases/projects/tmall_website/front_end/09-final-merge/myorder.html" target="_blank">My Order</a></li>
                <li><a href="https://puddlejumper26.github.io/js-showcases/projects/tmall_website/front_end/09-final-merge/orderconfirmation.html" target="_blank">Order Confirmation</a></li>
                <li><a href="https://puddlejumper26.github.io/js-showcases/projects/tmall_website/front_end/09-final-merge/confirmreceive.html" target="_blank">Confirmation Receive</a></li>
                <li><a href="https://puddlejumper26.github.io/js-showcases/projects/tmall_website/front_end/09-final-merge/payment.html" target="_blank">Payment</a></li>
                <li><a href="https://puddlejumper26.github.io/js-showcases/projects/tmall_website/front_end/09-final-merge/paysuccess.html" target="_blank">Pay Success</a></li>
                <li><a href="https://puddlejumper26.github.io/js-showcases/projects/tmall_website/front_end/09-final-merge/receivedsuccess.html" target="_blank">Receive Success</a></li>
                <li><a href="https://puddlejumper26.github.io/js-showcases/projects/tmall_website/front_end/09-final-merge/evaluation.html" target="_blank">Evaluation</a></li>
                <li><a href="https://puddlejumper26.github.io/js-showcases/projects/tmall_website/front_end/09-final-merge/register.html" target="_blank">Register</a></li>
            </ul>

        </div>
        </mat-expansion-panel>

        <mat-expansion-panel>
            <mat-expansion-panel-header>
              <mat-panel-title>
                Hexo Theme Ashes Development
              </mat-panel-title>
              <mat-panel-description>
                Self developed a Hexo theme (2019)
              </mat-panel-description>
            </mat-expansion-panel-header>
            Basic Info -<br>
                    - Develop a new Hexo theme Ashes <br>
                    - HTML, CSS, Javascript, jQuery, Ejs, Stylus,YAML, Git <br>
                    - Version 1.0
                    <br><br>
                    Function - add another theme to Hexo official website
                    <ul><li><a class="nav-link" href="https://github.com/puddlejumper26/hexo-theme-ashes" target="blank">Hexo- Theme-Ashes</a></li> </ul>
          </mat-expansion-panel>

          <mat-expansion-panel>
            <mat-expansion-panel-header>
              <mat-panel-title>
                Personal Website
              </mat-panel-title>
              <mat-panel-description>
                Built with Angular, Angular Material, etc (2020)
              </mat-panel-description>
            </mat-expansion-panel-header>
             This website is built with Angular (Scss), Typescript, Angular Material

             to be continued....
          </mat-expansion-panel>

      </mat-accordion>
</div>

SCSS

html, body {
    height: 100%;
  }

  div.about-section {
    border-radius: 2px;
    box-shadow: 5px 5px 40px rgba(7, 1, 1, 1);

    position: relative;
    width: 1024px;
    // to make the other component stay in the center
    left: 0;
    top: 100px;
    right: 0;
    bottom: 10px;
    margin: 0 auto;
    padding: 20px;
  }

  mat-expansion-panel {
      border: 1px solid skyblue;
       box-shadow: 0 20px 30px rgba(7, 1, 1, 1);
    opacity: 0.6;
    margin: 20px;
  }

  mat-panel-title {
    color: darkgreen;
    font-weight: 900;
  }