Skip to content

Open-Code-Crafters/Portfolio-Website

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Portfolio Website

This is a personal portfolio website built using HTML, CSS, and JavaScript. The website is fully responsive and features sections for an introduction, about, projects, and a contact form.

Features

  • Home Section: A welcoming introduction with a brief description of yourself and a button to scroll to the "About" section.
  • About Section: A section that provides details about your skills, experience, and a short bio.
  • Projects Section: A showcase of your projects, each with a title and description.
  • Contact Section: A simple contact form that allows visitors to send you a message.
  • Smooth Scrolling: Navigation buttons smoothly scroll to the corresponding sections on the page.
  • Responsive Design: The layout adjusts for different screen sizes, ensuring the website looks great on mobile, tablet, and desktop devices.

Project Structure

portfolio/
│
├── index.html      # Main HTML file
├── styles.css      # CSS styles
└── script.js       # JavaScript for interactivity

Sections Overview

  • Navigation Bar: Links to scroll to Home, About, Projects, and Contact sections.
  • Home Section: Includes a welcome message and a call-to-action button that navigates to the About section. Background image to give a unique look.
  • About Section: Information about yourself, your skills, and what you do.
  • Projects Section: Display a grid of your projects with descriptions of each.
  • Contact Section: A form with fields for name, email, and message. Submit button triggers an alert (can be customized for actual email functionality).
  • Footer: Basic footer with copyright information.

Technologies Used

  • HTML5: For structuring the content of the web pages.
  • CSS3: For styling and layout, including responsiveness and hover effects.
  • JavaScript: For smooth scrolling and form handling.

How to Use

  1. Clone the repository:
git clone https://github.com/yourusername/portfolio-website.git
  1. Navigate into the project folder:
cd Portfolio-Website
  1. Open the index.html file in your browser to view the website.

Customization

  1. Update your personal details in the About section.
  2. Add your projects in the Projects section by copying the existing project card and replacing the content with your own.
  3. Modify the Contact section to connect with your email or use a service like Formspree or EmailJS for handling form submissions.
  4. Responsive Design

The website is designed to be fully responsive and works across various screen sizes. The layout adjusts automatically for mobile, tablet, and desktop devices using CSS media queries.

Contributing

If you'd like to contribute to this project, feel free to fork the repository and submit a pull request.

License

This project is licensed under the MIT License.

Feel free to reach out if you have any questions or suggestions for improvement!