https://github.com/rumaisanaveed/career-connect
A portfolio website for our university's event "Career Connect".
https://github.com/rumaisanaveed/career-connect
career career-connect job-fest jobs react students tailwindcss ubit university-event uok
Last synced: 8 months ago
JSON representation
A portfolio website for our university's event "Career Connect".
- Host: GitHub
- URL: https://github.com/rumaisanaveed/career-connect
- Owner: rumaisanaveed
- Created: 2024-12-05T14:36:25.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-12-29T09:56:43.000Z (10 months ago)
- Last Synced: 2024-12-29T10:26:03.219Z (10 months ago)
- Topics: career, career-connect, job-fest, jobs, react, students, tailwindcss, ubit, university-event, uok
- Language: JavaScript
- Homepage: https://career-connect-website.vercel.app
- Size: 4.56 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```bash
git clone https://github.com/rumaisanaveed/career-connect.git
```
2. Navigate to the project directory:
```bash
cd career-connect
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm start
```
5. Open the application in your browser:
```bash
https://localhost:3000
```
## Video
🎥 Watch the demo of the Career Connect website here:
https://github.com/user-attachments/assets/bdef94b4-5d97-4db5-886b-8731260f9827