Career Connect Website 🌟

✨ Introduction

This website was built for our university's flagship event, "Career Connect," aimed at bridging the gap between students and leading companies. The platform serves as a virtual hub to showcase event highlights, participating companies, sponsors, and our dedicated team, creating an engaging and interactive experience for all stakeholders.

The project emphasizes clean design, seamless user experience, and reusable code to make future updates effortless.

🛠️ Tech Stack

The project leverages the following tools and technologies to ensure a high-quality and scalable solution:

• React.js: For building the dynamic and interactive user interface.
• Tailwind CSS: For crafting modern, responsive, and aesthetically pleasing designs.
• Figma: For translating high-fidelity UI/UX designs into functional code.
• JavaScript: For dynamic interactivity and logic implementation.

🧩 Reusable Components

The website is built with modular and reusable components to enhance maintainability and scalability. Examples include:

• Header: A common navigation bar used across all pages.
• Cards: Uniform styling for displaying information about companies, sponsors, and team members.
• Footer: Consistent footer design with event and contact details.

🗂️ Sections

The website features the following key sections:

1. Home: A welcoming landing page with event highlights and call-to-action buttons.
2. About: Detailed information about the Career Connect event and its purpose.
3. Companies: A showcase of participating companies and their opportunities.
4. Sponsors: A tribute to the event sponsors who made this initiative possible.
5. Team: A section introducing the dedicated team behind the event.

🚀 The Process

I was provided with a comprehensive Figma design file, and my role was to transform the design into a fully functional, responsive website.

Steps in the process:

1. Analyzing the Design: Carefully studied the Figma file to understand design patterns and layout structure.
2. Setting Up the Project: Created a React project and configured Tailwind CSS for styling.
3. Coding the Components: Developed reusable components to maintain consistency across sections.
4. Testing and Refinements: Ensured responsiveness and cross-browser compatibility for an optimal user experience.

🖥️ Running the Project

Follow these steps to run the project locally:

1. Clone the repository:

   git clone https://github.com/rumaisanaveed/career-connect.git

2. Navigate to the project directory:

   cd career-connect

3. Install dependencies:

   npm install

4. Start the development server:

   npm start

5. Open the application in your browser:

   https://localhost:3000

Video

🎥 Watch the demo of the Career Connect website here:

career-connect.mp4