Hero Section for Portfolio Website

This project features an elegantly designed Hero Section created for a portfolio website. The hero section serves as the first impression for visitors, offering a modern and professional look that effectively showcases the portfolio's purpose. It is fully responsive, ensuring a seamless user experience across various devices.

Key Features

• Catchy Headline: The hero section includes a prominent headline, "Crafting Digital Experiences," that clearly conveys the main message of the portfolio.

• Subheadline: A concise subheadline, "I design and develop websites that engage and convert," provides additional context and highlights the value proposition.

• Call-to-Action (CTA) Button: A visually striking CTA button labeled "View My Work" encourages users to explore the portfolio further.

• Background Image: The section is complemented by a high-quality background image, adding visual appeal without overwhelming the content. The image is slightly transparent, ensuring that the text remains readable.

• Logo and Navigation Menu: The navigation bar at the top features a placeholder logo and clean navigation links, offering easy access to different sections of the website.

• Responsive Design: The hero section is fully responsive, adapting to various screen sizes, from desktops to mobile devices.

• Accessibility: Best practices for web accessibility have been followed, including proper text contrast ratios and descriptive alt text for images.

Tech Stack

• React: Used for building the dynamic user interface.
• Tailwind CSS: For crafting the responsive and modern design.
• TypeScript: Ensuring type safety and improving code quality.
• HTML5: The structure of the website.
• CSS3: Custom styles for finer control over the appearance.
• ESLint & Prettier: For maintaining code quality and consistency.

GrapplTech Community Built Web Components Repository

Description

Welcome to the GrapplTech Web Components Repository! This repository is dedicated to housing a variety of web component templates, including navbars, buttons, hero sections, footers, headers, sidebars, and more. These templates are contributed by students and reviewed by our team to ensure high quality. Our goal is to have a comprehensive library of web components ready for the feature launch on 15th August 2024.

Website Link: https://www.grappl.tech/gtcommunitycomponents

Please find the snapshot of the page below

Contribution Process

To contribute to this repository, please follow the steps outlined below:

1. Fork the Repository

   • Navigate to the GrapplTech Web Components Repository on GitHub.
   • Click the "Fork" button at the top right corner of the repository page to create a copy of the repository under your GitHub account.

2. Clone the Forked Repository

   • Clone your forked repository to your local machine using the command:

     git clone https://github.com/your-username/grappltech-web-components.git

   • Navigate into the cloned repository:

     cd grappltech-web-components

3. Create a New Branch

   • Create a new branch for your work:

     git checkout -b your-full-name-category

   • Replace your-full-name-category with your full name and the category you are working on, separated by a hyphen. For example, john-doe-hero-section.

4. Add Your Component Template

   • Create a new folder within the repository with your full name and category as the folder name. For example, JohnDoeHeroSection.
   • Add your component template files to this folder.

5. Commit and Push Your Changes

   • Add and commit your changes with a meaningful commit message:

     git add .
     git commit -m "Added [Category] template by [Your Full Name]"

   • Push your changes to your forked repository:

     git push origin your-full-name-category

6. Create a Pull Request

   • Go to the original GrapplTech Web Components Repository on GitHub.
   • Click on the "Pull Requests" tab and then the "New Pull Request" button.
   • Select your branch from the "compare" dropdown and click "Create Pull Request".
   • Provide a clear title and description for your pull request, and submit it.

7. Review and Merge

   • Our team will review your submission. If any changes are requested, please make them promptly.
   • Once approved, your pull request will be merged into the main repository.

Contributor Table

Please add your details to the table below after your pull request has been merged.

Full Name	Category	Deployed Link	Date	Tech Stack Used
Reethu Keerthana	Hero Section	https://github.com/ReethuKeerthana/GrapplTech-Community-Built-Web-Components	24-06-2024	HTML, CSS, JS

Note

• Ensure your code follows the best practices and is well-documented.
• Keep your component templates simple, reusable, and modular.
• Feel free to reach out to the repository maintainers if you have any questions or need assistance.

We look forward to your valuable contributions and thank you for being a part of the GrapplTech community!