Resume Website

Welcome to the repository for my personal resume website! This platform serves as a showcase of my professional background, skills, experiences, and projects. Please note that the website is not responsive and is optimized for the dimensions of the device it was initially coded on.

Table of contents

• Project Description
• Content
• Features
• Usage
• Demo

Project Description

For my capstone project, I was tasked to demonstrate proficiency in HTML and CSS by designing and building a personal resume site entirely from scratch. This involved handling all aspects of the project, including semantic HTML markup, CSS styling.

Content

The website consists of the following sections:

Home/Hero Section: Introduction with profile image and call-to-action buttons
About: Background and summary of professional details
Skills: Technical skills represented visually in bar graphs
Experience: Education and work experience timeline
Portfolio: Image gallery of projects
Contact: Contact form to get in touch

Features

Clean modern design aesthetic
Semantic HTML5 structure
Dynamic CSS styling and animations
Smooth page navigation and scroll behavior
Visualized data in graphs for skills
Embedded contact form with validation

Usage

To view and utilize this website on your local machine, follow these steps:

Clone or Download the Repository:
    Clone the repository using Git, or
    Download the repository as a ZIP file and extract it to your desired location.

Open with Visual Studio Code (VSCode):
    Open the index.html file in Visual Studio Code.
    Ensure you have the Live Server extension installed in VSCode.

Launch Live Server:
    With the index.html file open, launch Live Server from the VSCode menu.
    This will open the website in your default web browser.

Navigation:
    Once the website is loaded, navigate between different pages by clicking on the links in the navigation bar.

Please Note:

Lack of Responsiveness:
    The website is optimized for a screen resolution of 1399x768 and lacks responsiveness.
    For proper viewing:
        Use Live Server to open the website in Google Chrome.
        Access the developer options (usually by right-clicking on the page and selecting "Inspect" or pressing Ctrl+Shift+I).
        Opt for responsive design and go to custom device settings.
        Insert the dimensions 1399 for width and 728 for height.
        Leave the pixel count blank, save the device settings, and set the zoom level to 75%.

Demo

Please click on the image below to watch the website demo: