Tim Chen

Style Guide

This is the styleguide of my portfolio for debugging purpose. if you are a visitor, please navigate back using the header~

Ethos

The tone and voice should be concise, confident and infomative, with a blend of profesisonal and personal. The visual style should be modern, simple, organized, bold, flexible and adoptive. The emotion should overall welcoming and relaxed. The keyword is subtle and elegant.

Typography

Font: Satoshi

Variants: Satoshi Variable(Variable font) * Satoshi Variable Italic(Variable font)
* Satoshi Light * Satoshi Light Italic
* Satoshi Regular * Satoshi Italic
* Satoshi Medium * Satoshi Medium Italic
* Satoshi Bold * Satoshi Bold Italic
* Satoshi Black * Satoshi Black Italic

Heading 1 Title

Heading 2 Subtitle

Heading 3

Heading 4

Heading 5

Paragraph

span

Code Exmaple

<h1>Title</h1>
<h2>Subtitle</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<p>Paragraph</p>
<span>span</span>

Color

Pure White

Softer White for footer

Lesser black for Borders

Pure Black

Interactive Elements

Cursor Blob

CSS Selector

#blob

Code Exmaple

<div id="blob"></div>

Navigation link

About

CSS Selector

.nav-link + .navlink-underline-animation

Code Exmaple

<a href="#" class="nav-link navlink-underline-animation">About</a>

Combined Element

Header

Tim Chen

Code Exmaple

<div class="header-container"> <a class="title" href="#">Tim Chen</a> <nav class="navigation"> <a href="#" class="nav-link navlink-underline-animation">About</a> </nav> </div>

Cases - Interaction Hover

A Beautiful Clock

#3D Modeling CAD
Gif showing the beautiful colck turning

Code Exmaple

<a href="SeventyFiverr.html" class="cases"> <div class="cases-content"> <h3>A Beautiful Clock</h3> <span>#3D Modeling CAD</span> </div> <div class="cases-right"> <img src="imgs/Beautiful%20Clock%20Gif.gif" alt="Gif showing the beautiful colck turning"> </div> </a>

Footer

Oh hi, didn't see you there. I was just ...

Pixel Pushing - Sketching - Daydreaming- Inspirations Discovering- Project Grinding- Reading- Designing- Million-Dollar-Idea Sketching - Coffee Brewing- Product Researching - DIY-ing - Baking - Pixel Pushing - Sketching - Daydreaming- Inspirations Discovering- Project Grinding- Reading- Designing- Million-Dollar-Idea Sketching - Coffee Brewing- Product Researching - DIY-ing - Baking -
@2023, Updated 2023/4/10, Built by Me.
<footer> <h3 class="footer-text">Oh hi, didn't see you there. I was just ...</h3> <div class="footer-top"> <div class="scroll-wrap"> <div class="scroll"> <span>Pixel Pushing</span> <span>-</span> <span>Sketching</span> <span>-</span> <span>Daydreaming</span><span>-</span> <span>Inspirations Discovering</span><span>-</span> <span>Project Grinding</span><span>-</span> <span>Reading</span><span>-</span> <span>Designing</span><span>-</span> <span>Million-Dollar-Idea Sketching</span><span> -</span> <span>Coffee Brewing</span><span>-</span> <span>Product Researching</span><span> - </span> <span>DIY-ing</span><span> - </span> <span>Baking</span><span> - </span> <span>Pixel Pushing</span> <span>-</span> <span>Sketching</span> <span>-</span> <span>Daydreaming</span><span>-</span> <span>Inspirations Discovering</span><span>-</span> <span>Project Grinding</span><span>-</span> <span>Reading</span><span>-</span> <span>Designing</span><span>-</span> <span>Million-Dollar-Idea Sketching</span><span> -</span> <span>Coffee Brewing</span><span>-</span> <span>Product Researching</span><span> - </span> <span>DIY-ing</span><span> - </span> <span>Baking</span><span> - </span> </div> </div> </div> <div class="footer-bottom"> <div class="footer-info"> <span>@2023, Updated 2023/4/10,</span> <a class="jump-link" href="https://github.com/TimChenCSY/Portfolio">Built by Me. </a> </div> <div> <a class="jump-link" href="styleguidesheet.html">StyleGuide</a> </div> </div> </footer>

Citation

  • Portfolio Inspiration from:
    • https://by-erwinhines.com/
    • https://geletina.com/#contact
    • https://druh.in/
    • https://maelanlemeur.com/
  • Stop scroll bar https://blog.hubspot.com/website/hide-scrollbar-css
  • Blob cursor inspired from https://www.youtube.com/watch?v=PWabkdTkS_0
  • Setting Fontface:
    • https://stackoverflow.com/questions/69267704/how-to-import-at-woff2-font-and-use-it-in-a-sass-setting
    • https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
  • Hover underline animation: https://www.30secondsofcode.org/css/s/hover-underline-animation/
  • Page load fade in animation: https://www.geeksforgeeks.org/how-to-create-fade-in-effect-on-page-load-using-css/
  • Normalize from: normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
  • Font license: @license * * Font Family: Satoshi * Designed by: Deni Anggara * URL: https://www.fontshare.com/fonts/satoshi * © 2023 Indian Type Foundry *