Welcome to
Tech Night Ep 4

Coding Your Own Portfolio Website

Speaker Intro

Introduction to STC

Come and check us out!

fb.com/sunwaytechclub

instagram.com/sunwaytechclub

sunwaytechclub

Sunway Tech Club

https://linktr.ee/sunwaytechclub

Workshop Deliverables

• Have a tech portfolio website that is deployed online for FREE
• Know how to use inspect tool to make web development easier
• Know how to use GSAP to make sick animations (or at least the basics)
• Have better web development skills (I hope)
• Know more tips and tricks when it comes to web development

Why are we having this workshop?

Mainly to help out students when they start looking for internships
I delayed my internship search by quite a lot by only creating my website when it was time to look for internships...this resulted in me being late by around a month since I didn't feel confident to submit my resume unless my website was done and decent

Spoiler Alert:

My website still sucked... and the internship search was hell, HHAHHAHAHA

Workshop Preparation

Examples of cool tech portfolios

Inspect Tool

GSAP

GSAP

Getting Started

Put this into your html file

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/TextPlugin.min.js">></script>

GSAP

Simple Animation
*Make the finger emoji...thing move

GSAP

Timeline
*Make things move like an animation such as the text effect

GitHub

• Create a repo and place your files into it
• Name the repo: "your-username.github.io"
  *Has to be exactly the same as your username or it won't work

QnA Session

Please ask stuff or else I will cry T_T

Feedback Session