Skip to content

This GitHub repository is used as a template for the lab assignment in the Human-Computer Interaction (HCI) course, Computer Science program at BINUS University International. Please consider using this repository template as a reference according to the specific needs of your project.

Notifications You must be signed in to change notification settings

Juwono136/Lab-Assignment-Responsive-Portfolio-Web

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

5 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🌐 Personal Portfolio Website

πŸ“– Project Overview

This is a single-page responsive portfolio website created as part of a lab assignment. The website showcases personal information, projects, skills, and contact details. It is built using HTML, and CSS.

🎯 Purpose

The goal of this project is to:

  • Practice responsive web design techniques
  • Learn how to structure and style a webpage
  • Showcase personal or sample projects in a professional format

πŸ‘₯ Target Audience

This portfolio is designed for:

  • [βœ…] Potential employers or recruiters

    Note: If you don't have a portfolio yet, please add a fake/sample portfolio first.

🧱 Technologies Used

  • HTML5
  • CSS3 (Flexbox, Box Models, Media Queries)

πŸ“ Layout & Sections

The website includes the following sections:

  • Header – Name and tagline
  • About Me – Short bio and photo
  • Projects – List of projects with descriptions and links
  • Skills – Technical and soft skills
  • Contact – Email, social media, or contact form
  • Footer – Copyright and links

πŸ“± Responsiveness

The site is optimized for:

  • Desktop
  • Tablet
  • Mobile

Responsive design is achieved using media queries and flexible layouts.

πŸ§ͺ How to Run Locally

  1. Open your code editor (e.g., Visual Studio Code, etc.).
  2. In your code editor, open the terminal.
  3. Clone the repository:
    git clone https://github.com/your-username/portfolio-website.git
  4. Open index.html in your browser, or run the website locally using the Live Server Extension.

πŸ“‚ Folder Structure

portfolio-website/
β”‚
β”œβ”€β”€ index.html
β”œβ”€β”€ style.css
β”œβ”€β”€ images/
└── README.md

πŸ“„ Notes

  • I used ChatGPT to help me structure the HTML layout and fix a CSS bug.
  • I designed the color scheme and layout myself using Figma or Canva.
  • I wrote the project descriptions and contact section manually.

πŸ“Έ Screenshots

Add screenshots of your website on different devices here and website design created in Figma or Canva.

About

This GitHub repository is used as a template for the lab assignment in the Human-Computer Interaction (HCI) course, Computer Science program at BINUS University International. Please consider using this repository template as a reference according to the specific needs of your project.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published