-
Want to Add New Features?
+
+
+ Want to Add New Features ?
+
Suggest new features you'd love to see and help shape the tech community.
@@ -128,12 +131,109 @@ const TechFeatures = () => {
);
};
+const supporters = [
+ { name: 'Digital Ocean', logo: '/assets/SupportedBy/DigitalOcean.png' },
+ { name: 'Git Book', logo: '/assets/SupportedBy/GitBookLight_1.png' },
+ { name: 'Melt CD', logo: '/assets/SupportedBy/meltcd.png' },
+ { name: 'Microsoft for Startups', logo: '/assets/SupportedBy/MicrosoftForStartups.png' },
+ { name: 'MSME', logo: '/assets/SupportedBy/MSME.png' },
+ { name: 'Notion', logo: '/assets/SupportedBy/Notion.png' },
+ { name: 'Peerlist', logo: '/assets/SupportedBy/Peerlist.png' },
+ { name: 'Product Hunt', logo: '/assets/SupportedBy/ProductHunt.png' },
+ { name: 'Vercel', logo: '/assets/SupportedBy/Vercel.png' },
+];
+
+const SupportedBy = () => {
+ return (
+
+
Supported By
+
+
+ {/* First Marquee */}
+
+ {supporters.map((sponsor, index) => (
+
+
+
+ ))}
+
+
+ {/* Second Marquee */}
+
+ {supporters.map((sponsor, index) => (
+
+
+
+ ))}
+
+
+
+ );
+};
+
+const Footer = () => {
+ return (
+
+ );
+};
+
const Home = () => {
return (
+
+
);
};
diff --git a/src/Page/TechDisplay.jsx b/src/Page/TechDisplay.jsx
new file mode 100644
index 00000000..094a5a48
--- /dev/null
+++ b/src/Page/TechDisplay.jsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import { Home, Briefcase, BookOpen, Code, Lightbulb, MessageCircle, User, FileText } from 'lucide-react';
+import Navbar from '../components/Navbar';
+import Globe from '../components/Globe';
+
+const Sidebar = () => {
+ return (
+
+ );
+};
+
+const Hero = () => {
+ return (
+
+
+
+ We're Open Source {'>'} Star Now🌟
+
+
One Place for all your Tech Needs
+
+ Dev Display
+
+
Global platform that fulfills all your tech needs
+
+
+
+
+ );
+};
+
+const TechFeatures = () => {
+ return (
+
+
+
All Tech Features in One Place
+
+ Discover a range of tools, resources, and opportunities to enhance your tech journey and skills.
+
+
+
+
Opportunities
+
Explore various career and learning opportunities in the tech industry.
+
+
+
+
Resources
+
Access a wide range of learning resources, tools, and libraries to boost your skills.
+
+
+
+
Project Showcase
+
Showcase your projects, get feedback, and inspire others to collaborate.
+
+
+
+
Tech Discussion
+
Engage in tech discussions, share ideas, and stay updated on the latest trends.
+
+
+
+
Ideas Submission
+
Submit your innovative ideas, get feedback, and explore collaborations.
+
+
+
+
Portfolio Ideas
+
Get inspired with creative ideas to enhance your portfolio and make an impact.
+
+
+
+
Portfolio Building
+
Learn the best practices to build a standout portfolio that impresses recruiters.
+
+
+
+
Resume Building
+
Create a professional resume with tips and templates tailored to the tech industry.
+
+
+
Want to Add Features?
+
Suggest new features you'd love to see and help shape the tech community.
+
+ );
+};
+
+const TechDisplay = () => {
+ return (
+
+
+ {/* */}
+
+
+ );
+};
+
+export default TechDisplay;
diff --git a/src/components/Globe.jsx b/src/components/Globe.jsx
index c8b8a0f6..2732258c 100644
--- a/src/components/Globe.jsx
+++ b/src/components/Globe.jsx
@@ -1,8 +1,18 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
import createGlobe from 'cobe';
function Globe() {
const canvasRef = useRef();
+ const [globeSize, setGlobeSize] = useState(window.innerWidth < 550 ? 300 : 500);
+
+ useEffect(() => {
+ // Adjust globe size on screen resize
+ const handleResize = () => {
+ setGlobeSize(window.innerWidth < 550 ? 300 : 500);
+ };
+
+ handleResize();
+ }, [window.innerWidth]);
useEffect(() => {
let phi = 0;
@@ -10,8 +20,8 @@ function Globe() {
// Initialize the globe with the canvas ref
const globe = createGlobe(canvasRef.current, {
devicePixelRatio: 1,
- width: 500, // Double the resolution for better quality
- height: 500, // Double the resolution for better quality
+ width: globeSize, // Double the resolution for better quality
+ height: globeSize, // Double the resolution for better quality
phi: 0,
theta: 0,
dark: 1,
@@ -36,18 +46,19 @@ function Globe() {
return () => {
globe.destroy();
};
- }, []);
+ }, [window.innerWidth]);
return (
-
+
);
diff --git a/src/index.css b/src/index.css
index d0c4bfc2..19fcd827 100644
--- a/src/index.css
+++ b/src/index.css
@@ -68,3 +68,64 @@ code {
animation-play-state: paused;
}
}
+
+@keyframes marquee {
+ 0% {
+ transform: translateX(0%);
+ }
+ 100% {
+ transform: translateX(-100%);
+ }
+}
+
+@keyframes marquee2 {
+ 0% {
+ transform: translateX(100%);
+ }
+ 100% {
+ transform: translateX(0%);
+ }
+}
+
+.animate-marquee {
+ animation: marquee 25s linear infinite;
+}
+
+.animate-marquee2 {
+ animation: marquee2 25s linear infinite;
+}
+
+.feature-card {
+ position: relative;
+ overflow: hidden;
+}
+
+/* Create the border effect */
+.feature-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border: 3px solid transparent;
+ border-radius: 10px;
+ background: conic-gradient(#0ea5e9 20deg, transparent 120deg);
+ background-size: 400% 400%;
+ z-index: -1;
+ animation: rotate 10s linear infinite;
+}
+
+@keyframes rotate {
+ 0% {
+ transform: rotate(0deg) scale(1);
+ }
+ 100% {
+ transform: rotate(360deg) scale(1);
+ }
+}
+
+.feature-card-inner {
+ position: relative;
+ z-index: 1;
+}
+
+