Liren Guo

Hey! Welcome to my website. I am a self-motivated developer doing work out of passion, for I started and always keep learning new web design/development skills from top tech experts around the world, in addition to being born in a technical background family.

For pastime, I love playing table tennis. I started to get trained when I was 6 years old. It fostered my outgoing personality, taught me to quickly change my strategy when something doesn’t work out and keep fighting even under the pressure of losing. Best of all, I made lots of good friends of different age, gender, country who share the same interest as me and helped me on my career road.

Ultimately, to live is to be happy, and Happiness lies in the joy of achievement and the thrill of creative effort -Franklin D. Roosevelt

Work History & Education

Skills & Knowledge

Visual Design

  • Adobe Photoshop
  • Adobe Illustrator
  • UI Design
  • Color Theory
  • Image Editing

Front-End Development

  • HTML5
  • CSS3
  • JavaScript & Jquery
  • Wordpress
  • Bootstrap
  • PHP
  • Web usability
  • Google Analytics & SEO

Language

  • ChineseNative
  • EnglishAdvanced
  • FrenchBasic

Portfolio

  • Situation

    Re-create a plain html and css based website to be modern and mobile-responsive. Problems:
    1. Too much text info for each product.
    2. Lots of product pictures.

  • Solution

    1. I put the text content for each product in a pop up window, eliminating the potential text overload issue.
    2. Used javascript to automatically scroll the products. For houseball images, I created a dropdown menu for users to select to show the respective product picture, instead of having them displayed all on page.

  • Outcome

    Outcome: The client considered that the new website is better than the old one and exceeded his expectations.

  • Situation

    Create a simple website that is search engine optimized. There is no other content and picture assets except the company's logo when I started.

  • Approach

    Used a suitable wordpress theme to develop the website first, and engaged in online SEO by adjusting titles, meta-tags, keywords, and reducing photos' sizes (increase loading speed). Meanwhile, I built some backlinks and suggested the owner to create rich content to attract more traffic.

  • Skills

    SEO, HTML, CSS

  • Approach

    Took a screenshot of good web design work, and recreated it in photoshop. This is for study purpose only. Credit to the original designer of this work.

  • Skills

    Photoshop, Visual Design

  • Situation

    Code a project that allows people to check the weather of all the cities around the world.

  • Approach

    Use PHP to slice related information from a weather forecast website, and once people type in the keyword (city name), the weather information of the city will be sliced from the forecast website and will be shown in the alert box.

  • Skills

    PHP, HTML, CSS

  • Situation

    Create an ad to be used as the background image on the Xfinity website, promoting the 2015 National Apple Harvest Festival.

  • Approach

    I have searched that the majority of guests coming to the festival are family groups. Therefore I placed a previous visitor —— a smiling little boy, sitting on an apple as an “apple angel” to welcome all the guests and mainly family groups!

  • Outcome

    The client was very satisfied. After minor text changes, it was posted on the Xfinity website immediately.

  • Situation

    Took a screenshot of good web design work, and recreated it in photoshop. This is for study purpose only. Credit to the original designer of this work.

  • Skills

    Visual design, Photoshop

  • Approach

    Took a screenshot of good web design work, and recreated it in photoshop. This is for study purpose only. Credit to the original designer of this work.

  • Skills

    Visual design, Photoshop

  • Situation

    Within the time limit, the client wanted to make the call to action and contact info prominent for people of different age/age (including children) to sign up for the free class and make an appointment. (current -> my design)

  • Approach

    I put the contact info at the top so users can see at first glance, and I made the class sign up title and submit button distinguishable. Meanwhile, Because martial arts is originated from China so I styled it with dark water ink elements to add a sense of Zen, or inner peace, in addition to pure fighting.

  • Rules

    - A player can roll the dices many times and each result gets added to his ROUND score, but he will lose the round score if one of the dices is ‘1’ , and it’s the next player’s turn.
    - He can choose to ‘Hold’ which means that his round score gets added to his GLOBAL score, and it’s the other player’s turn.
    - The player will lose the ENTIRE score if he rolls two ‘6’ in a row.
    - Players can set the winning score themselves and whoever reaches the score first wins.

  • Skills

    Javascript

  • Description

    A budget web application which users can add/delete income and expense items, and the total income, expenses as well as the available budget is calculated and displayed.

  • Skills

    Javascript

  • Description

    Created a youtube mockup web application using React with real Youtube API that when users type in the search bar, the video list on the right automatically updated on the fly, and the video that the user clicked will be automatically played.

  • Skills

    React

  • Description

    A simple book list app using Redux managing application state that users can click a book from the book list containing several books, and the details of the book (title, page, or anything else.) will be displayed.

  • Skills

    Redux

  • Description

    A simple web piano project consisting of audio files and DOM event handlers that users can click on each key to play the sound of a piece of melody.

  • Description

    Created a web alarm clock that shows current time, date (m/day/year) and day of the week, and the screen changes with music playing when it is the set time .

  • Situation

    Searched online for creative photos to be put on the web, and didn't find any the client like, so I decided to create photos on my own.

  • Approach

    One of the characteristic is to lighten the darkness. Inspired by the words from the Bible Genesis 1, I set the background in a dark universe, and "God" opens his hand showing a bulb is lightening our earth. This creatively showed the light's luminous intensity and implied that light brings hope and convenience to our life.

  • Situation

    First time creating a documentary DVD cover.

  • Approach

    Searched online for the correct size of a dvd cover, and viewed lots of examples to get inspiration. After communicating with the owner, I discarded the first version, and created another version which is the photo you are viewing right now.

  • Outcome

    The business owner approved the design and was going to officially make it the cover of his documentary.

  • Situation

    Design a poster for the Champaign 2015 Fall Open at Champaign County Table Tennis Club.

  • Approach

    Local club competition is mainly to make friends and increase community bonding and engagement. I used the sky and the blue color to imply the meanings of non-threatening, determination and ambition to achieve great things. An angel wing corresponds to the sky and implies softness, indicating that competitions matter, but friendship means a lot more.

  • Outcome

    The president of the club emailed me back after received the poster: “This is the best table tennis poster I have ever seen! ”

  • Challenges

    Never done such kind of work before and needed to re-create the areas behind the person once she is removed.

  • Approach

    I taught myself the new skills by watching related tutorial videos and efficiently applied what I have learned to finish the project.

  • Outcome

    Received a text comment from the customer: “I am looking at the photos before and after. Your work is incredible!!”

  • Situation

    This is for a wall print. The original photo's size was quite small and it got really blurry when I enlarged a little bit.

  • Approach

    Under the limitation of the original photo quality, I gave an entirely fresh look of the view and sharpened the photo to increase its resolution.

  • Situation

    Design a 2m-tall poster to promote the Chinese folk artifact made by a folk artist.

  • Approach

    Since the artifacts are made by a specific mud called "Mother Buddha", I set the background to be mud to indicate its origin, and endowed the poster with a sense of nature, kindness, and a little holiness, to perfectly fit with the meaning of the poems . The second poster has more detailed descriptions about the artifacts (component, quantities, price, process, maintenance...). There is a lot of content, so I arranged the text in a way that prevents it from looking crowded.

  • Description

    15 seconds short motion graphic video made with Adobe premiere.

  • Description

    15 seconds short motion graphic video made with Adobe premiere.

  • Description

    Developed a simple weather forecast application allowing users to enter cities name to check the local weather.

  • Skills

    React, Redux, Redux Middleware and Promise. AJAX, SparkLines, and Google Maps API.

Design Process