diff --git a/src/Components/CardMain.js b/src/Components/CardMain.js index d991d438..763ea594 100644 --- a/src/Components/CardMain.js +++ b/src/Components/CardMain.js @@ -116,7 +116,7 @@ const features = [ id: 9, img: Card9, pro: icon, - hearts: 55, + hearts: 110, title: "BBlocks", dev: "ChrisClark", type: "Gaming", diff --git a/src/Components/Popular.css b/src/Components/Popular.css index 2a359f20..c99bd072 100644 --- a/src/Components/Popular.css +++ b/src/Components/Popular.css @@ -1,87 +1,132 @@ .popular-container { - display: flex; - flex-wrap: wrap; - justify-content: space-around; - gap: 20px; - } - - .card { - background-color: white; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - overflow: hidden; - width: 300px; - margin-bottom: 20px; - } - - .card-image { - width: 100%; - height: 200px; - object-fit: cover; - } - - .card-content { - padding: 15px; - } - - .card-header { - display: flex; - align-items: center; - margin-bottom: 10px; - } - - .profile-icon { - width: 40px; - height: 40px; - border-radius: 50%; - margin-right: 10px; - } - - .card-title { - font-size: 1.2em; - font-weight: bold; - color: #000; - } - - .card-body { - margin-bottom: 10px; - } - - .card-dev, - .card-role, - .card-about, - .card-text { - margin-bottom: 5px; - font-size: 0.9em; - color: #333; - } - - .card-footer { - display: flex; - justify-content: space-between; - margin-top: 10px; - } - - .card-hearts { - font-size: 1.2em; - color: white; - } - - .read-more, - .source-code { - background-color: #6052ff; - color: white; - border: none; - padding: 10px; - border-radius: 10px; - cursor: pointer; - font-size: 14px; - text-align: center; - flex: 1; - margin: 0 5px; - } - - .source-code { - background-color: #00c6ff; - } - \ No newline at end of file + display: flex; + flex-wrap: wrap; + gap: 10px; /* Gap between cards */ + margin-top: 5px; +} + +.popular-card { + background-color: #171238; + border-radius: 10px; + padding: 20px; + width: calc(25% - 10px); /* Adjusted width for 4 cards per row, accounting for gap */ + color: white; + text-align: justify; + position: relative; + height: 330px; + transition: transform 0.3s ease-in-out; + border: 2px solid black; /* Added black border */ +} + +.popular-card:hover { + transform: scale(1.05); +} + +.popular-card img { + margin-left: -10px; + margin-top: -20px; + width: 260px; + height: 110px; + object-fit: cover; +} + +.popular-card h3 { + margin: 10px; + font-size: 20px; + color: #fff; +} + +.popular-card .likes { + position: absolute; + top: 125px; + right: 20px; + font-size: 16px; + color: white; +} + +.popular-card .details { + display: flex; + justify-content: space-between; + margin-top: -12px; + padding: 0 10px; + align-items: flex-start; /* Aligns the items at the start */ +} + +.popular-card .developer, +.popular-card .type { + flex: 1; /* Both sections take equal space */ + font-size: 13px; + color: grey; + font-weight: bold; +} + +.popular-card .developer span, +.popular-card .type span { + display: block; + color: darkturquoise; + padding: 0 12px; +} + +.popular-card .type { + text-align: right; + margin-top: 0; /* Reset the margin */ + max-width: 50%; /* Limits the width of the type section */ + white-space: normal; /* Allows the text to wrap */ + margin-top: -38px; + margin-left: 105px; +} + +.popular-card .developer { + padding-right: 10px; /* Adds a bit more space on the right */ +} + +.popular-card .type { + padding-left: 10px; /* Adds a bit more space on the left */ +} + +.popular-card .author { + font-size: 18px; + color: white; + margin: 10px 0; + padding: 0 12px; + display: flex; + align-items: center; + font-weight: bold; +} + +.popular-card .author p { + margin: 0; + margin-right: 15px; /* Gap between "By:" and the name */ +} + +.popular-card .author span { + color: #00c6ff; + font-weight: bold; +} + +.popular-card .actions { + display: flex; + justify-content: space-between; + margin-top: 28px; +} + +.popular-card .read-more, +.popular-card .source-code { + background-color: #ff21bc; + color: white; + border: none; + padding: 0 12px; + border-radius: 20px; + cursor: pointer; + font-size: 10px; + font-weight: bold; + width: 45%; + text-align: center; + text-decoration: none; + height: 24px; + line-height: 24px; +} + +.popular-card .source-code { + background-color: #00c6ff; +} diff --git a/src/Components/Popular.js b/src/Components/Popular.js index b5a91173..c309fe6f 100644 --- a/src/Components/Popular.js +++ b/src/Components/Popular.js @@ -5,71 +5,96 @@ import Card4 from "./projects/card9.png"; import Card5 from "./projects/card10.png"; import Card6 from "./projects/card11.png"; import Card7 from "./projects/card12.png"; +import icon from './projects/profile.png'; +import icon1 from './projects/profile1.png' import Cardcontainer from "./Cardcontainer"; const Popularitems = [ { id: 1, - title: "StockIT", - developer: "X", - uploadedOn: "dd:mm:yy", - dev: "JaneSmith", - likes: 83, - img: Card1, + img: Card1, + pro: icon, + hearts: 83, + title: "StockIT", + dev: "JaneSmith", + type: "Devops", + role: "Web Designer, UX Specialist", + about: "I'm a versatile professional skilled in web design and user experience, creating intuitive and visually appealing interfaces that enhance user interaction.", + text: "StockIT is a comprehensive platform designed to streamline inventory management and enhance supply chain efficiency for businesses of all sizes. It offers a user-friendly interface with robust features that cater to the diverse needs of retail, manufacturing, and e-commerce sectors. Key functionalities include real-time inventory tracking, automated restocking alerts, and detailed analytics for informed decision-making. StockIT integrates seamlessly with existing ERP and accounting systems, ensuring smooth data flow across various business operations. With advanced reporting tools, businesses can monitor stock levels, forecast demand, and minimize the risks of overstocking or stockouts. StockIT's cloud-based solution provides secure access from any device, enabling teams to manage inventory on the go. Dedicated customer support and regular software updates ensure that users have the latest tools to maintain optimal inventory levels and maximize profitability." }, { id: 2, - title: "TypingTest", - developer: "X", - uploadedOn: "dd:mm:yy", - dev: "SophiaWilson", - likes: 90, - img: Card2, + img: Card7, + pro: icon, + hearts: 90, + title: "TypingTest", + dev: "SophiaWilson", + type: "Education", + role: "Web Developer, SEO Specialist", + about: "I'm a proficient web developer and SEO specialist, dedicated to creating optimized, high-performance websites. I focus on both the technical and strategic aspects of web development to enhance visibility and user engagement.", + text: "TypingTest is a comprehensive platform designed to help users improve their typing speed and accuracy. This intuitive and user-friendly application offers a range of typing tests and practice exercises to suit different skill levels. With TypingTest, users can track their progress over time, identify areas for improvement, and achieve their typing goals. The platform features real-time feedback, detailed performance analytics, and personalized training plans to enhance the learning experience. TypingTest supports multiple languages and keyboard layouts, making it accessible to a global audience. Whether you're a beginner looking to learn touch typing or an experienced typist aiming to increase your speed, TypingTest provides the tools and resources to help you succeed." }, { id: 3, - title: "Artisan", - developer: "X", - uploadedOn: "dd:mm:yy", - dev: "DavidMartinez", - likes: 95, img: Card3, + pro: icon1, + hearts: 95, + title: "Artisan", + dev: "DavidMartinez", + type: "Art & Design", + role: "Graphic Designer, Illustrator", + about: "I'm a creative professional with expertise in graphic design and illustration, dedicated to bringing visual concepts to life through innovative and artistic solutions.", + text: "Artisan is a vibrant online platform dedicated to showcasing and celebrating the work of artists and designers from around the world. This dynamic community allows creators to share their portfolios, connect with peers, and gain exposure for their work. Artisan offers a user-friendly interface where artists can upload their projects, receive feedback, and participate in collaborative opportunities. The platform features a variety of art forms, including digital art, traditional painting, sculpture, and more. With Artisan, users can explore curated galleries, stay updated on the latest trends in art and design, and discover new talent. Whether you're an artist looking to build your online presence or an art enthusiast seeking inspiration, Artisan is the perfect place to explore and engage with the creative community." }, { id: 4, - title: "BBlocks", - developer: "X", - uploadedOn: "dd:mm:yy", - dev: "RachelGreen", - likes: 110, + pro: icon, img: Card4, + hearts: 110, + title: "BBlocks", + dev: "ChrisClark", + type: "Gaming", + role: "Game Developer, Animator", + about: "I'm a game developer and animator passionate about creating immersive and engaging gaming experiences. My expertise spans game design, development, and animation, bringing virtual worlds to life.", + text: "GameOn is an exciting platform for gamers, offering the latest news, reviews, and insights on popular games and gaming trends. With a vibrant community of gaming enthusiasts, GameOn provides a space for users to share their experiences, discuss strategies, and stay informed about upcoming releases. The platform features in-depth game reviews, detailed guides, and exclusive interviews with game developers. Whether you're a casual gamer or a hardcore enthusiast, GameOn is your go-to source for all things gaming. Stay updated with the latest updates, explore new games, and connect with fellow gamers on GameOn." + }, { id: 5, + pro: icon1, + hearts: 83, + img: Card5, title: "ZzShoes", - developer: "X", - uploadedOn: "dd:mm:yy", dev: "ChrisMiller", - likes: 83, - img: Card5, + role: "Full Stack Developer, Cloud Specialist", + type: "Inventory Management", + about: "I'm a full stack developer and cloud specialist, skilled in both client-side and server-side development. My expertise includes deploying applications on cloud platforms and ensuring they are scalable and efficient.", + text: "ZzShoes is a comprehensive platform designed to streamline inventory management and enhance supply chain efficiency for businesses of all sizes. It offers a user-friendly interface with robust features that cater to the diverse needs of retail, manufacturing, and e-commerce sectors. Key functionalities include real-time inventory tracking, automated restocking alerts, and detailed analytics for informed decision-making. StockIT integrates seamlessly with existing ERP and accounting systems, ensuring smooth data flow across various business operations. With advanced reporting tools, businesses can monitor stock levels, forecast demand, and minimize the risks of overstocking or stockouts. StockIT's cloud-based solution provides secure access from any device, enabling teams to manage inventory on the go. Dedicated customer support and regular software updates ensure that users have the latest tools to maintain optimal inventory levels and maximize profitability.", + }, { id: 6, + pro: icon, + hearts: 86, + img: Card6, title: "SearchEngine", - developer: "X", - uploadedOn: "dd:mm:yy", dev: "LauraKing", - likes: 86, - img: Card6, + role: "Web Developer, Content Strategist", + type: "Search Engine Optimization", + about: "I'm a web developer and content strategist, focused on building websites that are not only functional but also content-rich and user-friendly. I ensure that the website's structure and content align with user needs and business goals.", + text: "SearchEngine is a comprehensive platform designed to streamline inventory management and enhance supply chain efficiency for businesses of all sizes. It offers a user-friendly interface with robust features that cater to the diverse needs of retail, manufacturing, and e-commerce sectors. Key functionalities include real-time inventory tracking, automated restocking alerts, and detailed analytics for informed decision-making. StockIT integrates seamlessly with existing ERP and accounting systems, ensuring smooth data flow across various business operations. With advanced reporting tools, businesses can monitor stock levels, forecast demand, and minimize the risks of overstocking or stockouts. StockIT's cloud-based solution provides secure access from any device, enabling teams to manage inventory on the go. Dedicated customer support and regular software updates ensure that users have the latest tools to maintain optimal inventory levels and maximize profitability.", + }, { id: 7, - title: "Aliimg", + title: "AIimage", developer: "X", - uploadedOn: "dd:mm:yy", + type: "AI Image Processing", dev: "OliviaTaylor", - likes: 90, + hearts: 90, img: Card7, + about: "I'm a back-end developer and API integrator, specializing in creating secure and efficient server-side logic and integrating third-party APIs. My work ensures that web and mobile applications have reliable back-end support.", + text: "AIimage is a comprehensive platform designed to streamline inventory management and enhance supply chain efficiency for businesses of all sizes. It offers a user-friendly interface with robust features that cater to the diverse needs of retail, manufacturing, and e-commerce sectors. Key functionalities include real-time inventory tracking, automated restocking alerts, and detailed analytics for informed decision-making. StockIT integrates seamlessly with existing ERP and accounting systems, ensuring smooth data flow across various business operations. With advanced reporting tools, businesses can monitor stock levels, forecast demand, and minimize the risks of overstocking or stockouts. StockIT's cloud-based solution provides secure access from any device, enabling teams to manage inventory on the go. Dedicated customer support and regular software updates ensure that users have the latest tools to maintain optimal inventory levels and maximize profitability.", }, ]; diff --git a/src/Components/TopContainer.css b/src/Components/TopContainer.css index 18420286..93d2cd2d 100644 --- a/src/Components/TopContainer.css +++ b/src/Components/TopContainer.css @@ -1,4 +1,5 @@ -.topContainer{ +/* Top container styles */ +.topContainer { width: 100%; } @@ -8,30 +9,33 @@ height: auto; background: #19162c; display: flex; - flex-direction: row; - justify-content: space-between; + align-items: center; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); - position: relative; - top: 0; + position: fixed; + top: 30px; + margin-left: 60px; gap: 0.1rem; - /* margin-left: 120px; */ } + +/* Search results styles */ #search_results a:hover div { - background-color: #cf00a3; /* This will change the text color to white for better contrast */ + background-color: #cf00a3; } -.lightbutton{ +/* Light button styles */ +.lightbutton { width: auto; - margin-inline: 20px; - margin-left: 40px; + position: relative; + margin: 0 1180px; /* Adjust margin to fit spacing requirements */ z-index: 999999999; - top: 10px; - left : 20px; + position: static; /* Ensure it's not positioned absolutely */ + order: 2; /* Ensure it appears after other elements */ } +/* Profile button styles */ .profileContainer .go-pro-btn { - padding: 10px 20px; /* Adjust padding to change the button size */ + padding: 10px 20px; } /* Navigation items container */ @@ -40,7 +44,7 @@ list-style: none; margin: 0; padding: 0; - flex-direction: row; /* Ensure horizontal alignment */ + flex-direction: row; gap: 7px; } @@ -57,7 +61,6 @@ display: flex; gap: 5px; align-items: center; /* Center items vertically */ -} /* Hover effect for nav item links */ .largeview .nav-item a:hover { @@ -72,7 +75,7 @@ margin-left: 10px; } -.input-div{ +.input-div { display: flex; flex-direction: row; align-items: center; @@ -80,25 +83,24 @@ .inputBox input { position: relative; - padding: 0.5rem 2rem; /* Add padding to the right for the icon */ + padding: 0.5rem 2rem; border-radius: 4px; border: 1px solid #ccc; } .inputBox input:focus { - outline: none; /* Remove default outline on focus */ - border-color: #cf00a3; /* Change border color on focus */ + outline: none; + border-color: #cf00a3; } /* Search button styles */ .searchbtn { - /*position: absolute;*/ top: 10px; - padding-left: 5px; /* Adjust to align with input padding */ + right: 40px; + padding-left: 5px; color: #757380; font-size: 1.5rem; - cursor: pointer; /* Ensure cursor indicates clickable */ - /*margin-left: 30%;*/ + cursor: pointer; } /* Search results container */ @@ -122,29 +124,28 @@ /* Notification styles */ .notification-item:hover { background-color: #cf00a3; - color: white; /* Change text color for better contrast */ + color: white; } /* Mobile view adjustments */ @media screen and (max-width: 1500px) { .navbar { - margin-left: 50px; /* Adjust margin for smaller screens */ + margin-left: 50px; } .largeview { - flex-direction: row; /* Ensure horizontal alignment */ - flex-wrap: nowrap; /* Prevent wrapping to the next line */ + flex-direction: row; + flex-wrap: nowrap; } } -.profileIcon{ - background: #19162c !important; +.profileIcon { + background: #19162c !important; } @media screen and (max-width: 1500px) { .mobview { display: flex; - /* margin-left: 80%; */ flex-direction: row; justify-content: space-between; align-items: center; @@ -163,27 +164,24 @@ .largeview { display: none; } + @keyframes shortvi { - from{ - height: 0px; - opacity: 0; - }to{ - height: 350px; - opacity: 0.9; - } + from { + height: 0px; + opacity: 0; + } + to { + height: 350px; + opacity: 0.9; + } } .mobview #shortview { position: absolute; - /* right: 100%; */ right: 10%; top: 60px; background: rgba(0, 0, 0, 0.8); - border-radius: 10px; - width: 200px; - box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); - z-index: 100000; width: 100vw; display: none; transition: transform 0.3s cubic-bezier(0.17, 0.81, 0.38, 1.39); @@ -197,14 +195,12 @@ background: hsl(190, 85%, 40%); top: -5px; transform: rotate(45deg); - z-index: 100000; } #shortview.show { display: flex; flex-direction: column; align-items: center; - z-index: 100000; } .mobview #shortview ul { @@ -212,7 +208,6 @@ height: 100%; margin: 0; padding: 0; - z-index: 100000; } .mobview #shortview ul li { @@ -224,7 +219,6 @@ color: #757380; text-align: center; font-size: 14px; - z-index: 100000; } .mobview #shortview ul li:hover { @@ -232,14 +226,15 @@ color: #757380; transition: 0.3s; } - .profileIcon{ + + .profileIcon { padding: 0; } } @media (max-width: 830px) { .navbar { - width: 80vw; /* Adjust navbar width for smaller screens */ + width: 80vw; } } @@ -248,8 +243,6 @@ width: 80vw; } - - .profileIconlogin { width: 140px !important; font-size: 12px !important; @@ -261,14 +254,15 @@ z-index: 100; } - .lightbutton{ - position: absolute; + .lightbutton { + position: static; /* Reset position for small screens */ + margin: 0 auto; /* Center align the button */ } .navbar { display: flex; flex-direction: column-reverse; - flex-wrap: wrap; /* Wrap items if needed on very small screens */ + flex-wrap: wrap; height: min-content; margin-left: 0; border-radius: 1rem; @@ -277,7 +271,7 @@ } .largeview { - flex-direction: row; /* Ensure horizontal alignment */ + flex-direction: row; } .inputBox { @@ -305,12 +299,14 @@ top: 18px; } } -@media screen and (max-width:360px){ - .profileContainer{ + +@media screen and (max-width: 360px) { + .profileContainer { display: flex; flex-direction: column; } } + /* Additional styles */ .nav-item a span { white-space: nowrap; @@ -318,19 +314,18 @@ } .nav-item a:hover span { - color: #cf00a3; /* Pink color on hover */ + color: #cf00a3; } #list li { - flex-shrink: 0; /* Prevent items from shrinking */ + flex-shrink: 0; } .bars { display: none; } - -.light .notification-container div{ - background: #F3CFC6; - color: #000000 !important; -} \ No newline at end of file +.light .notification-container div { + background: #F3CFC6; + color: #000000 !important; +} diff --git a/src/Components/TopContainer.js b/src/Components/TopContainer.js index 7acb726d..13ff64cd 100644 --- a/src/Components/TopContainer.js +++ b/src/Components/TopContainer.js @@ -136,9 +136,18 @@ function TopContainer() { return (
- + + +
@@ -161,7 +170,14 @@ function TopContainer() {
- +