/Portfolio

My personal portfolio a collection of projects I've built demonstrating what I can do as a web developer

Primary LanguageHTML

Portfolio Project

Project Overview

This project is a personal portfolio website designed to showcase my skills, projects, and experience. It serves as a platform for potential employers, clients, and collaborators to learn more about my work. The site includes multiple pages that cover my bio, project showcases, and a contact form.

Purpose

The purpose of this project is to create a professional online presence that effectively communicates my competencies in web development and design. It is tailored for recruiters, clients, and other industry professionals looking for a comprehensive view of my work.

Features

  • Responsive Design: The site is fully responsive, adapting to different screen sizes to provide a seamless experience on desktops, tablets, and mobile devices.
  • Accessible Content: The website is designed to be accessible to all users, with high-contrast text, alt text for images, and semantic HTML structure.
  • Interactive Elements: The site includes interactive components such as pop-ups, modals, and form submissions, all controlled by the user.
  • Custom CSS and Tailwind CSS: Custom styles and Tailwind CSS enhance the user experience while adhering to modern web standards.

Technologies Used

  • HTML5: For the structure and content of the site.
  • CSS3: For styling, including Tailwind CSS for utility-first styling.
  • JavaScript: To handle interactivity and enhance user experience.
  • Git & GitHub: For version control and collaboration.
  • Tailwind CSS: To ensure responsive design and consistent styling.

Accessibility Considerations

  • Alt Text: All images include alt text descriptions to aid screen readers.
  • Color Contrast: Colors have been chosen to ensure sufficient contrast between text and background elements.
  • Keyboard Navigation: The site is fully navigable via keyboard for users who may not use a mouse.

Testing

The website has been manually tested across various devices and browsers to ensure consistent performance and responsiveness. All code has been validated using the W3C HTML and CSS validators, with no significant issues found.

Download

You can download the entire project as a ZIP file:

Download Portfolio Project

Installation and Deployment

Download and Setup

  1. Clone the repository:

    git clone https://github.com/PinkyCodeMaster/Portfolio
  2. Open the project in Visual Studio Code:

    cd Portfolio
    code .
  3. Install the Live Server extension in Visual Studio Code:

    • Go to the Extensions view by clicking on the Extensions icon in the Sidebar or by pressing Ctrl+Shift+X.
    • Search for "Live Server" and install it.
  4. Open index.html with Live Server:

    • Right-click on the index.html file in the Explorer panel.
    • Select Open with Live Server.
  5. View the website:

    • Your default web browser should open with the URL http://127.0.0.1:5500 (or a similar local address), displaying your portfolio website.

Deployment

Deploy the site using GitHub Pages or any preferred hosting service by pushing the project files to a public repository.

Development Process

Throughout the development of this project, I followed a structured approach that included wireframing, designing, and coding. Each stage was documented through descriptive commit messages, reflecting the evolution of the project.

Screenshots

Home Page Project Showcase

Acknowledgments

  • Inspiration and resources from various online tutorials, which are credited in the comments within the codebase.

License

This project is licensed under the MIT License. See the LICENSE file for more details.