diff --git a/src/App.js b/src/App.js index a419e8e2..e5754e51 100644 --- a/src/App.js +++ b/src/App.js @@ -7,6 +7,7 @@ import Settings from "./Components/Settings/SettingsPage"; import About_us from "./Components/footer_section/about_us/About_us"; import BlogPage from "./Components/footer_section/BlogPage/BlogPage"; import FAQPage from "./Components/footer_section/FAQPage/FAQPage"; +import PortFolio from "./Components/PortFolio/PortFolio.js"; import Services from "./Components/footer_section/services/Services"; import ContactUs from "./Components/footer_section/ContactUs/contact_us"; import Readmore from "./Components/Readmore"; diff --git a/src/Components/CardMain.js b/src/Components/CardMain.js index bdf4e049..4b0c3f2e 100644 --- a/src/Components/CardMain.js +++ b/src/Components/CardMain.js @@ -119,7 +119,7 @@ const features = [ img: Card9, pro: icon, hearts: 55, - title: "GameOn", + title: "BBlocks", dev: "ChrisClark", type: "Gaming", role: "Game Developer, Animator", @@ -226,7 +226,7 @@ function CardMain() { />

{project.title}

-
+
{project.hearts} diff --git a/src/Components/Footer.js b/src/Components/Footer.js index 59397e41..dfe18990 100644 --- a/src/Components/Footer.js +++ b/src/Components/Footer.js @@ -42,7 +42,7 @@ const Footer = () => { diff --git a/src/Components/Login.css b/src/Components/Login.css index 0be42951..7bb395e5 100644 --- a/src/Components/Login.css +++ b/src/Components/Login.css @@ -245,7 +245,7 @@ form.sign-in-form { position: absolute; margin-top: 18vh; height: 1520px; - width: 800px; + width: 850px; top: -10%; right: 53%; transform: translateY(-50%); diff --git a/src/Components/Login.js b/src/Components/Login.js index 580ccc3c..906bfedf 100644 --- a/src/Components/Login.js +++ b/src/Components/Login.js @@ -465,8 +465,8 @@ const LogIn = () => {
Log In
-
-
+
+

One of Us?

Log in to access your account and continue collaborating and diff --git a/src/Components/Popular.js b/src/Components/Popular.js index d52b18d8..f4454477 100644 --- a/src/Components/Popular.js +++ b/src/Components/Popular.js @@ -14,7 +14,7 @@ const Popular = () => { id: 1, name: 'StockIT', developer: 'X', - uploadedOn: 'dd:mm:yy', + type: 'DevOps', author: 'JaneSmith', likes: 83, image: Card1, @@ -23,7 +23,7 @@ const Popular = () => { id: 2, name: 'TypingTest', developer: 'X', - uploadedOn: 'dd:mm:yy', + type: 'Education', author: 'SophiaWilson', likes: 90, image: Card2, @@ -32,7 +32,7 @@ const Popular = () => { id: 3, name: 'Artisan', developer: 'X', - uploadedOn: 'dd:mm:yy', + type: 'Art & Design', author: 'DavidMartinez', likes: 95, image: Card3, @@ -41,7 +41,7 @@ const Popular = () => { id: 4, name: 'BBlocks', developer: 'X', - uploadedOn: 'dd:mm:yy', + type: 'Gaming', author: 'RachelGreen', likes: 110, image: Card4, @@ -50,7 +50,7 @@ const Popular = () => { id: 5, name: 'ZzShoes', developer: 'X', - uploadedOn: 'dd:mm:yy', + type: 'Inventory Management', author: 'ChrisMiller', likes: 83, image: Card5, @@ -59,7 +59,7 @@ const Popular = () => { id: 6, name: 'SearchEngine', developer: 'X', - uploadedOn: 'dd:mm:yy', + type: 'Search Engine Optimization', author: 'LauraKing', likes: 86, image: Card6, @@ -68,7 +68,7 @@ const Popular = () => { id: 7, name: 'AliImage', developer: 'X', - uploadedOn: 'dd:mm:yy', + type: 'AI Image Processing', author: 'OliviaTaylor', likes: 90, image: Card7, @@ -77,131 +77,139 @@ const Popular = () => { return (

- - + {popularItems.map((item) => (
@@ -210,12 +218,12 @@ const Popular = () => {
🤍 {item.likes}
- Developer: + Developer {item.developer}
-
- Uploaded On: - {item.uploadedOn} +
+ Type of Project + {item.type}
diff --git a/src/Components/PortFolio/PortFolio.css b/src/Components/PortFolio/PortFolio.css new file mode 100644 index 00000000..ded6ff74 --- /dev/null +++ b/src/Components/PortFolio/PortFolio.css @@ -0,0 +1,136 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #1e1e2f; + color: #fff; +} + +.container2 { + width: 80%; + margin: 0 auto; + padding: 20px; +} +.top1 { + position: absolute; + top: 30px; + left: 100px; + height: 200px; + border: 5px solid #cf00a3; /* Border around the image */ + border-radius: 15px; /* Rounded corners */ + transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */ +} + +.bottom1 { + position: absolute; + top: 30px; + right: 100px; + height: 200px; + border: 5px solid #cf00a3; /* Border around the image */ + border-radius: 15px; /* Rounded corners */ + transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */ +} + +.top:hover, .bottom:hover { + transform: scale(1.1); /* Slightly enlarge the image on hover */ + box-shadow: 0 0 15px rgba(0, 255, 255, 0.7); /* Glow effect */ +} + +/* For better alignment and layout */ +.header img { + width: 100px; + border-radius: 50%; + transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */ + text-align: center; +} + +.header img:hover { + transform: scale(1.1); /* Slightly enlarge the logo on hover */ + box-shadow: 0 0 15px rgba(0, 255, 255, 0.7); /* Glow effect */ +} +.header h1 { + margin: 10px 0; + font-size: 2.5rem; + color: #cf00a3 ; + text-align: center; +} + +.section { + margin: 20px 0; + padding: 20px; + border-radius: 10px; + color: white; + background-color: #2c2c3e; + box-shadow: 7px 7px 32px 0 #6052ff; + transition: transform 0.3s ease, background-color 0.3s ease; + text-align: justify; + border: 2px solid darkturquoise; +} +.section:hover { + background-color: #cf00a3; + transform: scale(1.05); +} +.section h2 { + font-size: 2rem; + margin-bottom: 10px; + color: darkturquoise; +} + +.section p { + font-size: 1.0rem; + line-height: 1.6; + color: white; +} + +.section ul { + list-style: none; + padding: 0; +} + +.section ul li { + background: #333; + margin: 10px 0; + padding: 10px; + border-radius: 5px; +} +.section:nth-of-type(3) ul li:hover { + background-color: darkturquoise; + color: #fff; /* Optional: change text color to contrast with darkturquoise */ +} +/* Common hover effect for all specified sections */ +.key-features ul li:hover, +.why-choose ul li:hover, +.key-benefits ul li:hover { + background-color: darkturquoise; + color: #fff; /* Optional: change text color to contrast with darkturquoise */ + transition: background-color 0.3s ease; /* Smooth transition for background color change */ +} + + +@media screen and (min-width: 768px) { + .container1 { + display: flex; + flex-direction: column; + align-items: justify; + } + + .section { + width: 100%; + } + + .header, + .footer1 { + width: 100%; + } +} + +@media screen and (min-width: 1024px) { + .container1 { + width: 70%; + } + + .section { + margin: 20px auto; + padding: 20px 40px; + } +} diff --git a/src/Components/PortFolio/PortFolio.js b/src/Components/PortFolio/PortFolio.js new file mode 100644 index 00000000..89f7c1c4 --- /dev/null +++ b/src/Components/PortFolio/PortFolio.js @@ -0,0 +1,110 @@ +import React from 'react'; +import './PortFolio.css'; +import logo from "../PortFolio/logo.png"; +import homeIcon from '../FreeLancer/homeicon.png'; +import { Link } from 'react-router-dom'; +import Top from "./UniCollab-Top.png"; +import Bottom from "./UniCollab-Bottom.png"; + +const PortFolio = () => { + return ( +
+ + Home + + Logo + Logo +
+

UniCollab

+ Logo + +
+ UniCollab Typing Animation +
+

About UniCollab

+

+ UniCollab is more than just a platform; it's a gateway to a world where students from different universities/colleges converge to collaborate, innovate, and elevate their projects. Imagine a space where ideas flow freely, where knowledge is shared effortlessly, and where learning transcends classrooms. That's UniCollab for you. +

+
+
+

Scope of the Project

+

+ To actively contribute to UniCollab, I encourage you to delve into the PROPOSED-AIM file which provides a comprehensive outline of our project's overarching goals and feature set. If you identify features that are needed but not yet implemented (as mostly are), please create an issue outlining the feature request for discussion and implementation. Your input will drive UniCollab's evolution as a dynamic and impactful platform for student collaboration. +

+
+
+

Tech Stack

+
    +
  • Node.js with Express.js for the server
    • +
  • MongoDB for the database (using Mongoose for object modeling)
    • +
  • Firebase Authentication for user authentication and authorization
    • +
  • Firebase Cloud Functions for serverless backend logic
    • +
  • React.js for a dynamic and responsive user interface
    • +
  • HTML5, CSS3, JavaScript for elegant and modern design
    • +
  • Firebase Hosting for fast and secure web hosting
    • +
  • Firebase Realtime Database for real-time data synchronization
    • +
  • GitLab CI/CD for automated testing and deployment
    • +
  • Docker for efficient and scalable deployment
    • +
  • Kubernetes for managing containerized applications
    • +
  • AWS for reliable and scalable hosting
    • +
  • AWS Lambda for cost-effective and scalable backend services
    • +
  • AWS S3 for secure and scalable storage solutions
    • +
  • TensorFlow and PyTorch for advanced machine learning capabilities
    • +
  • scikit-learn, pandas, NumPy for data manipulation and analysis
    • +
  • Docker containers for easy deployment of machine learning models
    • +
  • JWT for secure authentication and authorization
    • +
  • D3.js or Chart.js for interactive and visually appealing data representation
    • +
  • Jest for React.js unit testing, Selenium for end-to-end testing
    • +
+
+
+

Key Features

+
    +
  • Project Showcase: Showcase your projects and discover what other students are working on.
    • +
  • Collaborative Tools: Work together seamlessly with integrated collaboration tools.
    • +
  • Knowledge Sharing: Share insights, tips, and tricks with a community passionate about learning.
    • +
  • Career Opportunities: Explore internship and job opportunities from our partner organizations.
    • +
+
+ +
+

Why Choose UniCollab?

+
    +
  • Enhanced Learning: Learn from peers, mentors, and a wealth of shared resources.
    • +
  • Networking Opportunities: Connect with students, professionals, and potential employers.
    • +
  • Project Visibility: Showcase your projects and gain recognition for your work.
    • +
  • Collaboration: Work with a diverse group of students on innovative projects.
    • +
  • Career Growth: Discover job and internship opportunities tailored to your skills and interests.
    • +
  • Community Support: Be part of a supportive and engaging community.
    • +
+
+ +
+

Key Benefits

+
    +
  • Knowledge Sharing: Access a wide range of tutorials, articles, and learning materials.
    • +
  • Real-Time Collaboration: Use integrated tools for seamless teamwork.
    • +
  • Skill Development: Participate in events, workshops, and collaborative projects to enhance your skills.
    • +
  • Recognition: Get recognized for your contributions and projects.
    • +
+
+ +
+ ); +} + +export default PortFolio; diff --git a/src/Components/PortFolio/UniCollab-Bottom.png b/src/Components/PortFolio/UniCollab-Bottom.png new file mode 100644 index 00000000..1eed7995 Binary files /dev/null and b/src/Components/PortFolio/UniCollab-Bottom.png differ diff --git a/src/Components/PortFolio/UniCollab-Top.png b/src/Components/PortFolio/UniCollab-Top.png new file mode 100644 index 00000000..821b4b01 Binary files /dev/null and b/src/Components/PortFolio/UniCollab-Top.png differ diff --git a/src/Components/PortFolio/logo.png b/src/Components/PortFolio/logo.png new file mode 100644 index 00000000..f4775550 Binary files /dev/null and b/src/Components/PortFolio/logo.png differ diff --git a/src/Components/TopContainer.css b/src/Components/TopContainer.css index 38b05b03..d4edc579 100644 --- a/src/Components/TopContainer.css +++ b/src/Components/TopContainer.css @@ -40,7 +40,7 @@ /* Hover effect for nav item links */ .largeview .nav-item a:hover { color: #cf00a3; - font-size: 1.05rem; + font-size: 1.0rem; } /* Input box styles */ diff --git a/src/Components/footer_section/Pricing/pricing.js b/src/Components/footer_section/Pricing/pricing.js index 9d24436e..aea9f975 100644 --- a/src/Components/footer_section/Pricing/pricing.js +++ b/src/Components/footer_section/Pricing/pricing.js @@ -9,7 +9,7 @@ function Pricing() {
- Home + Home
Start your 7 day free trial today
Unlock Advanced Features and Maximize Your Potential with UniCollab Pro.
diff --git a/src/configs/router.js b/src/configs/router.js index ce133122..139c49c4 100644 --- a/src/configs/router.js +++ b/src/configs/router.js @@ -1,4 +1,3 @@ -// router.js import { createBrowserRouter } from "react-router-dom"; import Container from "../Components/Container"; import Footer from "../Components/Footer"; @@ -13,6 +12,7 @@ import Readmore from "../Components/Readmore"; import Login from "../Components/Login"; import Pricing from "../Components/footer_section/Pricing/pricing"; import MyProjects from "../Components/menu_section/my_projects/MyProjects"; +import PortFolio from "../Components/PortFolio/PortFolio"; // Corrected import for PortFolio component import NewProject from "../Components/menu_section/new_project/NewProject"; import Error from "../Components/404_page/Error"; import Profiles from "../Components/Profiles"; @@ -66,7 +66,8 @@ const router = createBrowserRouter([ { path: "/wallet", element: }, { path: "/delicious", element: }, { path: "/trending", element: }, - { path: "/forgot", element: }, // Add the ForgotPassword route + { path: "/forgot", element: }, + { path: "/portfolio", element: }, // Corrected path for PortFolio ]); export default router;