Jason Fang - Projects

My personal website developed by using HTML, CSS and JavaScript. As a programmer and magician, I need two separate websites for two kinds of audiences, but I also need to integrate these two websites together. It's a simple static website, but I developed this website by myself. A lot of skills are required to build this website.

More than 20,000 lines of code were written by myself from the scratch. Because most people view websites on their phones or tablets, I had to always check the developer tool to make sure that this website can work on any size screen and device, from the biggest desktops to the smallest smartphones. However, even the coding part is very difficult and important, I'd like to talk more about the design and ideas behind this website. After all, creative thinking is the most precious thing in the world.

1. Landing Page
I wanted to build a simple landing page that can show me immediately and directly to my audiences. Only two buttons, "Magician" and "Programmer", are on my landing page. People can choose the service they need as long as they open my landing page.

2. Real Landing Page
After my visitors choose one page, it's the real landing page which has my information as a magician or a programmer. I introduce myself to my visitors, and on my magician page, there's a "programmer" button below. Just in case if they've chosen the wrong one and vice versa.

3. Background
On my magician landing page, I have some magic-related figures, such as playing cards, magician hats, rabbits, and so on. On my programmer landing page, I have some coding-related figures, such as laptop, "Hello, World, Python logo and so on. These background images could also remind my visitor if they are on the correct page.

4. Portfolio
The portfolio is the most important part of my website, which is the reason that people visit my website. There are many different types of my works, only images, only video, text, text with images, text with video. If my visitor want to see more details about a project, they can choose to see more details and visit my GitHub page to see my code. This part is very user-friendly.

5. Call to Action and Contact Me
I'd like to encourage people to contact me. There are many call to action buttons on my website. My number, email address, Instagram page, GitHub page are in the most obvious place as well.

Overall, my personal website is a small project compared with big companies' websites. It's a big project for me. In the technical part, I used HTML, CSS, JavaScript, Adobe Photoshop, Adobe Premiere to develop this website. In the marketing part, I used many digital marketing theories in order to build a responsive and user-friendly website. A lot of skills are required to build the website and a lot of skills are required to be on the website.

Software used: HTML, CSS, JavaScript, Intellij IDEA, Git, Adobe Photoshop, Adobe Premiere, AWS S3, AWS Route 53, AWS CloudFront

Click the "Code" button to see the code of this website

Portfolio Code