diff --git a/public/download-7.gif b/public/download-7.gif new file mode 100644 index 0000000..a4168e8 Binary files /dev/null and b/public/download-7.gif differ diff --git a/src/App.tsx b/src/App.tsx index b6c8d2a..9e2a45d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,8 +11,7 @@ import Sponsers from './components/Sponsers'; import About from './components/pages/About'; import WorldMap from './components/WorldMap'; import Contact from './components/pages/Contact'; - -const Blog = () =>
Blog Page
; +import Blog from './components/pages/Blog'; function App() { return ( diff --git a/src/components/global.tsx b/src/components/global.tsx index a8ce3cc..0cc8ed2 100644 --- a/src/components/global.tsx +++ b/src/components/global.tsx @@ -1,407 +1,407 @@ "use client"; -import React, { lazy, Suspense } from "react"; +import { lazy, Suspense } from "react"; // Use React's lazy loading instead of Next.js dynamic import const World = lazy(() => - import("../components/ui/globe").then((module) => ({ - default: module.World, - })) + import("../components/ui/globe").then((module) => ({ + default: module.World, + })) ); export function GlobeDemo() { - const globeConfig = { - pointSize: 4, - globeColor: "#062056", - showAtmosphere: true, - atmosphereColor: "#FFFFFF", - atmosphereAltitude: 0.1, - emissive: "#062056", - emissiveIntensity: 0.1, - shininess: 0.9, - polygonColor: "rgba(255,255,255,0.7)", - ambientLight: "#38bdf8", - directionalLeftLight: "#ffffff", - directionalTopLight: "#ffffff", - pointLight: "#ffffff", - arcTime: 1000, - arcLength: 0.9, - rings: 1, - maxRings: 3, - initialPosition: { lat: 22.3193, lng: 114.1694 }, - autoRotate: true, - autoRotateSpeed: 0.5, - }; - const colors = ["#06b6d4", "#3b82f6", "#6366f1"]; - const sampleArcs = [ - { - order: 1, - startLat: -19.885592, - startLng: -43.951191, - endLat: -22.9068, - endLng: -43.1729, - arcAlt: 0.1, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 1, - startLat: 28.6139, - startLng: 77.209, - endLat: 3.139, - endLng: 101.6869, - arcAlt: 0.2, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 1, - startLat: -19.885592, - startLng: -43.951191, - endLat: -1.303396, - endLng: 36.852443, - arcAlt: 0.5, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 2, - startLat: 1.3521, - startLng: 103.8198, - endLat: 35.6762, - endLng: 139.6503, - arcAlt: 0.2, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 2, - startLat: 51.5072, - startLng: -0.1276, - endLat: 3.139, - endLng: 101.6869, - arcAlt: 0.3, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 2, - startLat: -15.785493, - startLng: -47.909029, - endLat: 36.162809, - endLng: -115.119411, - arcAlt: 0.3, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 3, - startLat: -33.8688, - startLng: 151.2093, - endLat: 22.3193, - endLng: 114.1694, - arcAlt: 0.3, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 3, - startLat: 21.3099, - startLng: -157.8581, - endLat: 40.7128, - endLng: -74.006, - arcAlt: 0.3, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 3, - startLat: -6.2088, - startLng: 106.8456, - endLat: 51.5072, - endLng: -0.1276, - arcAlt: 0.3, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 4, - startLat: 11.986597, - startLng: 8.571831, - endLat: -15.595412, - endLng: -56.05918, - arcAlt: 0.5, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 4, - startLat: -34.6037, - startLng: -58.3816, - endLat: 22.3193, - endLng: 114.1694, - arcAlt: 0.7, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 4, - startLat: 51.5072, - startLng: -0.1276, - endLat: 48.8566, - endLng: -2.3522, - arcAlt: 0.1, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 5, - startLat: 14.5995, - startLng: 120.9842, - endLat: 51.5072, - endLng: -0.1276, - arcAlt: 0.3, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 5, - startLat: 1.3521, - startLng: 103.8198, - endLat: -33.8688, - endLng: 151.2093, - arcAlt: 0.2, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 5, - startLat: 34.0522, - startLng: -118.2437, - endLat: 48.8566, - endLng: -2.3522, - arcAlt: 0.2, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 6, - startLat: -15.432563, - startLng: 28.315853, - endLat: 1.094136, - endLng: -63.34546, - arcAlt: 0.7, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 6, - startLat: 37.5665, - startLng: 126.978, - endLat: 35.6762, - endLng: 139.6503, - arcAlt: 0.1, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 6, - startLat: 22.3193, - startLng: 114.1694, - endLat: 51.5072, - endLng: -0.1276, - arcAlt: 0.3, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 7, - startLat: -19.885592, - startLng: -43.951191, - endLat: -15.595412, - endLng: -56.05918, - arcAlt: 0.1, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 7, - startLat: 48.8566, - startLng: -2.3522, - endLat: 52.52, - endLng: 13.405, - arcAlt: 0.1, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 7, - startLat: 52.52, - startLng: 13.405, - endLat: 34.0522, - endLng: -118.2437, - arcAlt: 0.2, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 8, - startLat: -8.833221, - startLng: 13.264837, - endLat: -33.936138, - endLng: 18.436529, - arcAlt: 0.2, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 8, - startLat: 49.2827, - startLng: -123.1207, - endLat: 52.3676, - endLng: 4.9041, - arcAlt: 0.2, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 8, - startLat: 1.3521, - startLng: 103.8198, - endLat: 40.7128, - endLng: -74.006, - arcAlt: 0.5, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 9, - startLat: 51.5072, - startLng: -0.1276, - endLat: 34.0522, - endLng: -118.2437, - arcAlt: 0.2, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 9, - startLat: 22.3193, - startLng: 114.1694, - endLat: -22.9068, - endLng: -43.1729, - arcAlt: 0.7, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 9, - startLat: 1.3521, - startLng: 103.8198, - endLat: -34.6037, - endLng: -58.3816, - arcAlt: 0.5, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 10, - startLat: -22.9068, - startLng: -43.1729, - endLat: 28.6139, - endLng: 77.209, - arcAlt: 0.7, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 10, - startLat: 34.0522, - startLng: -118.2437, - endLat: 31.2304, - endLng: 121.4737, - arcAlt: 0.3, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 10, - startLat: -6.2088, - startLng: 106.8456, - endLat: 52.3676, - endLng: 4.9041, - arcAlt: 0.3, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 11, - startLat: 41.9028, - startLng: 12.4964, - endLat: 34.0522, - endLng: -118.2437, - arcAlt: 0.2, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 11, - startLat: -6.2088, - startLng: 106.8456, - endLat: 31.2304, - endLng: 121.4737, - arcAlt: 0.2, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 11, - startLat: 22.3193, - startLng: 114.1694, - endLat: 1.3521, - endLng: 103.8198, - arcAlt: 0.2, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 12, - startLat: 34.0522, - startLng: -118.2437, - endLat: 37.7749, - endLng: -122.4194, - arcAlt: 0.1, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 12, - startLat: 35.6762, - startLng: 139.6503, - endLat: 22.3193, - endLng: 114.1694, - arcAlt: 0.2, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 12, - startLat: 22.3193, - startLng: 114.1694, - endLat: 34.0522, - endLng: -118.2437, - arcAlt: 0.3, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 13, - startLat: 52.52, - startLng: 13.405, - endLat: 22.3193, - endLng: 114.1694, - arcAlt: 0.3, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 13, - startLat: 11.986597, - startLng: 8.571831, - endLat: 35.6762, - endLng: 139.6503, - arcAlt: 0.3, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 13, - startLat: -22.9068, - startLng: -43.1729, - endLat: -34.6037, - endLng: -58.3816, - arcAlt: 0.1, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - { - order: 14, - startLat: -33.936138, - startLng: 18.436529, - endLat: 21.395643, - endLng: 39.883798, - arcAlt: 0.3, - color: colors[Math.floor(Math.random() * (colors.length - 1))], - }, - ]; + const globeConfig = { + pointSize: 4, + globeColor: "#062056", + showAtmosphere: true, + atmosphereColor: "#FFFFFF", + atmosphereAltitude: 0.1, + emissive: "#062056", + emissiveIntensity: 0.1, + shininess: 0.9, + polygonColor: "rgba(255,255,255,0.7)", + ambientLight: "#38bdf8", + directionalLeftLight: "#ffffff", + directionalTopLight: "#ffffff", + pointLight: "#ffffff", + arcTime: 1000, + arcLength: 0.9, + rings: 1, + maxRings: 3, + initialPosition: { lat: 22.3193, lng: 114.1694 }, + autoRotate: true, + autoRotateSpeed: 0.5, + }; + const colors = ["#06b6d4", "#3b82f6", "#6366f1"]; + const sampleArcs = [ + { + order: 1, + startLat: -19.885592, + startLng: -43.951191, + endLat: -22.9068, + endLng: -43.1729, + arcAlt: 0.1, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 1, + startLat: 28.6139, + startLng: 77.209, + endLat: 3.139, + endLng: 101.6869, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 1, + startLat: -19.885592, + startLng: -43.951191, + endLat: -1.303396, + endLng: 36.852443, + arcAlt: 0.5, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 2, + startLat: 1.3521, + startLng: 103.8198, + endLat: 35.6762, + endLng: 139.6503, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 2, + startLat: 51.5072, + startLng: -0.1276, + endLat: 3.139, + endLng: 101.6869, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 2, + startLat: -15.785493, + startLng: -47.909029, + endLat: 36.162809, + endLng: -115.119411, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 3, + startLat: -33.8688, + startLng: 151.2093, + endLat: 22.3193, + endLng: 114.1694, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 3, + startLat: 21.3099, + startLng: -157.8581, + endLat: 40.7128, + endLng: -74.006, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 3, + startLat: -6.2088, + startLng: 106.8456, + endLat: 51.5072, + endLng: -0.1276, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 4, + startLat: 11.986597, + startLng: 8.571831, + endLat: -15.595412, + endLng: -56.05918, + arcAlt: 0.5, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 4, + startLat: -34.6037, + startLng: -58.3816, + endLat: 22.3193, + endLng: 114.1694, + arcAlt: 0.7, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 4, + startLat: 51.5072, + startLng: -0.1276, + endLat: 48.8566, + endLng: -2.3522, + arcAlt: 0.1, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 5, + startLat: 14.5995, + startLng: 120.9842, + endLat: 51.5072, + endLng: -0.1276, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 5, + startLat: 1.3521, + startLng: 103.8198, + endLat: -33.8688, + endLng: 151.2093, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 5, + startLat: 34.0522, + startLng: -118.2437, + endLat: 48.8566, + endLng: -2.3522, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 6, + startLat: -15.432563, + startLng: 28.315853, + endLat: 1.094136, + endLng: -63.34546, + arcAlt: 0.7, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 6, + startLat: 37.5665, + startLng: 126.978, + endLat: 35.6762, + endLng: 139.6503, + arcAlt: 0.1, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 6, + startLat: 22.3193, + startLng: 114.1694, + endLat: 51.5072, + endLng: -0.1276, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 7, + startLat: -19.885592, + startLng: -43.951191, + endLat: -15.595412, + endLng: -56.05918, + arcAlt: 0.1, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 7, + startLat: 48.8566, + startLng: -2.3522, + endLat: 52.52, + endLng: 13.405, + arcAlt: 0.1, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 7, + startLat: 52.52, + startLng: 13.405, + endLat: 34.0522, + endLng: -118.2437, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 8, + startLat: -8.833221, + startLng: 13.264837, + endLat: -33.936138, + endLng: 18.436529, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 8, + startLat: 49.2827, + startLng: -123.1207, + endLat: 52.3676, + endLng: 4.9041, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 8, + startLat: 1.3521, + startLng: 103.8198, + endLat: 40.7128, + endLng: -74.006, + arcAlt: 0.5, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 9, + startLat: 51.5072, + startLng: -0.1276, + endLat: 34.0522, + endLng: -118.2437, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 9, + startLat: 22.3193, + startLng: 114.1694, + endLat: -22.9068, + endLng: -43.1729, + arcAlt: 0.7, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 9, + startLat: 1.3521, + startLng: 103.8198, + endLat: -34.6037, + endLng: -58.3816, + arcAlt: 0.5, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 10, + startLat: -22.9068, + startLng: -43.1729, + endLat: 28.6139, + endLng: 77.209, + arcAlt: 0.7, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 10, + startLat: 34.0522, + startLng: -118.2437, + endLat: 31.2304, + endLng: 121.4737, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 10, + startLat: -6.2088, + startLng: 106.8456, + endLat: 52.3676, + endLng: 4.9041, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 11, + startLat: 41.9028, + startLng: 12.4964, + endLat: 34.0522, + endLng: -118.2437, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 11, + startLat: -6.2088, + startLng: 106.8456, + endLat: 31.2304, + endLng: 121.4737, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 11, + startLat: 22.3193, + startLng: 114.1694, + endLat: 1.3521, + endLng: 103.8198, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 12, + startLat: 34.0522, + startLng: -118.2437, + endLat: 37.7749, + endLng: -122.4194, + arcAlt: 0.1, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 12, + startLat: 35.6762, + startLng: 139.6503, + endLat: 22.3193, + endLng: 114.1694, + arcAlt: 0.2, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 12, + startLat: 22.3193, + startLng: 114.1694, + endLat: 34.0522, + endLng: -118.2437, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 13, + startLat: 52.52, + startLng: 13.405, + endLat: 22.3193, + endLng: 114.1694, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 13, + startLat: 11.986597, + startLng: 8.571831, + endLat: 35.6762, + endLng: 139.6503, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 13, + startLat: -22.9068, + startLng: -43.1729, + endLat: -34.6037, + endLng: -58.3816, + arcAlt: 0.1, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + { + order: 14, + startLat: -33.936138, + startLng: 18.436529, + endLat: 21.395643, + endLng: 39.883798, + arcAlt: 0.3, + color: colors[Math.floor(Math.random() * (colors.length - 1))], + }, + ]; - return ( -
-
- Loading
}> - - -
- - ); + return ( +
+
+ Loading
}> + + +
+ + ); } diff --git a/src/components/magicui/animated-beam.tsx b/src/components/magicui/animated-beam.tsx index 5c02b3b..3413787 100644 --- a/src/components/magicui/animated-beam.tsx +++ b/src/components/magicui/animated-beam.tsx @@ -53,17 +53,17 @@ export const AnimatedBeam: React.FC = ({ // Calculate the gradient coordinates based on the reverse prop const gradientCoordinates = reverse ? { - x1: ["90%", "-10%"], - x2: ["100%", "0%"], - y1: ["0%", "0%"], - y2: ["0%", "0%"], - } + x1: ["90%", "-10%"], + x2: ["100%", "0%"], + y1: ["0%", "0%"], + y2: ["0%", "0%"], + } : { - x1: ["10%", "110%"], - x2: ["0%", "100%"], - y1: ["0%", "0%"], - y2: ["0%", "0%"], - }; + x1: ["10%", "110%"], + x2: ["0%", "100%"], + y1: ["0%", "0%"], + y2: ["0%", "0%"], + }; useEffect(() => { const updatePath = () => { @@ -86,19 +86,16 @@ export const AnimatedBeam: React.FC = ({ rectB.top - containerRect.top + rectB.height / 2 + endYOffset; const controlY = startY - curvature; - const d = `M ${startX},${startY} Q ${ - (startX + endX) / 2 - },${controlY} ${endX},${endY}`; + const d = `M ${startX},${startY} Q ${(startX + endX) / 2 + },${controlY} ${endX},${endY}`; setPathD(d); } }; // Initialize ResizeObserver - const resizeObserver = new ResizeObserver((entries) => { - // For all entries, recalculate the path - for (let entry of entries) { - updatePath(); - } + const resizeObserver = new ResizeObserver(() => { + // Just call updatePath without referencing unused entry parameter + updatePath(); }); // Observe the container element diff --git a/src/components/pages/Blog.tsx b/src/components/pages/Blog.tsx new file mode 100644 index 0000000..e61f93c --- /dev/null +++ b/src/components/pages/Blog.tsx @@ -0,0 +1,139 @@ +import { motion } from "motion/react"; +import { BlogCard, BlogPost } from "../ui/BlogCard"; + +// Sample blog data - in a real app, this would come from an API +const blogPosts: BlogPost[] = [ + { + id: "1", + title: "How AI is Revolutionizing Software Development", + excerpt: "Artificial intelligence is transforming the way we build software. Learn how AI-powered tools are automating coding tasks, improving code quality, and accelerating development cycles for teams of all sizes.", + imageUrl: `https://apexsoft.in/wp-content/uploads/2024/10/download-7.gif`, + date: "Apr 12, 2024", + author: "Sarah Chen", + category: "AI" + }, + { + id: "2", + title: "The Future of Web Development: Web Assembly", + excerpt: "Web Assembly (WASM) is changing the game for web performance. Discover how this binary format is making it possible to run high-performance applications in the browser without sacrificing speed or security.", + imageUrl: "https://apexsoft.in/wp-content/uploads/2024/10/Untitled-design.gif", + date: "Apr 8, 2024", + author: "Michael Rodriguez", + category: "Web Dev" + }, + { + id: "3", + title: "Building Resilient Microservices Architecture", + excerpt: "Microservices offer flexibility and scalability, but they come with challenges. This article explores best practices for creating resilient microservices that can handle failures gracefully and scale efficiently.", + imageUrl: "https://apexsoft.in/wp-content/uploads/2024/10/Untitled-design-1-1024x1024.gif", + date: "Apr 2, 2024", + author: "Emily Watson", + category: "Architecture" + }, + { + id: "4", + title: "The Rise of Edge Computing in Modern Applications", + excerpt: "Edge computing brings processing power closer to data sources, reducing latency and improving user experience. Learn why this approach is becoming essential for modern applications and IoT solutions.", + imageUrl: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=2070&auto=format&fit=crop", + date: "Mar 28, 2024", + author: "James Kim", + category: "Infrastructure" + }, + { + id: "5", + title: "7 DevOps Practices to Improve Your Software Delivery", + excerpt: "DevOps isn't just a buzzword—it's a set of practices that can dramatically improve your software delivery process. Explore seven key DevOps practices that can transform your team's efficiency.", + imageUrl: "https://images.unsplash.com/photo-1537884944318-390069bb8665?q=80&w=2070&auto=format&fit=crop", + date: "Mar 22, 2024", + author: "Lisa Thompson", + category: "DevOps" + }, + { + id: "6", + title: "Securing Your API: Best Practices and Common Pitfalls", + excerpt: "APIs are the backbone of modern applications, but they can also be a security vulnerability. Learn how to properly secure your APIs against common attacks and ensure data integrity.", + imageUrl: "https://images.unsplash.com/photo-1510511459019-5dda7724fd87?q=80&w=2070&auto=format&fit=crop", + date: "Mar 18, 2024", + author: "David Garcia", + category: "Security" + }, + { + id: "7", + title: "The Impact of Quantum Computing on Cryptography", + excerpt: "Quantum computing poses both challenges and opportunities for cryptography. Discover how quantum computers could break current encryption standards and what post-quantum cryptography looks like.", + imageUrl: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?q=80&w=2070&auto=format&fit=crop", + date: "Mar 12, 2024", + author: "Sophia Williams", + category: "Security" + }, + { + id: "8", + title: "Creating Accessible Web Applications: A Comprehensive Guide", + excerpt: "Web accessibility is not just a legal requirement but a moral imperative. This guide offers practical strategies for building web applications that are usable by everyone, regardless of ability.", + imageUrl: "https://images.unsplash.com/photo-1551650975-87deedd944c3?q=80&w=1974&auto=format&fit=crop", + date: "Mar 6, 2024", + author: "Ryan Martinez", + category: "Web Dev" + }, + { + id: "9", + title: "Leveraging GraphQL for More Efficient API Queries", + excerpt: "REST isn't the only option for API design. Learn how GraphQL can provide more efficient data fetching, reduce over-fetching, and simplify frontend development with flexible queries.", + imageUrl: "https://images.unsplash.com/photo-1539185441755-769473a23570?q=80&w=2071&auto=format&fit=crop", + date: "Feb 28, 2024", + author: "Olivia Taylor", + category: "API" + }, + { + id: "10", + title: "The Evolution of JavaScript: From ES5 to ES2024", + excerpt: "JavaScript has evolved dramatically over the past decade. This article traces the language's evolution from ES5 through to the latest features in ES2024, highlighting key improvements along the way.", + imageUrl: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?q=80&w=2074&auto=format&fit=crop", + date: "Feb 22, 2024", + author: "Alex Johnson", + category: "JavaScript" + }, + { + id: "11", + title: "Containerization vs. Serverless: Choosing the Right Approach", + excerpt: "Both containerization and serverless architectures offer unique advantages for application deployment. This comparison helps you decide which approach is best suited for your specific use cases.", + imageUrl: "https://images.unsplash.com/photo-1520085601670-ee14aa5fa3e8?q=80&w=1770&auto=format&fit=crop", + date: "Feb 16, 2024", + author: "Nathan Lee", + category: "Cloud" + }, + { + id: "12", + title: "Real-time Data Processing with Apache Kafka", + excerpt: "Apache Kafka has become the go-to solution for real-time data streaming. Learn how to implement Kafka for efficient event processing, data pipelines, and building reactive systems.", + imageUrl: "https://images.unsplash.com/photo-1544383835-bda2bc66a55d?q=80&w=2021&auto=format&fit=crop", + date: "Feb 10, 2024", + author: "Mia Wilson", + category: "Big Data" + }, +]; + +export default function Blog() { + return ( +
+ + + {/* Search and filter section could be added here */} + + {/* Blog grid */} +
+ {blogPosts.map((post, index) => ( + + + + ))} +
+
+ ); +} diff --git a/src/components/ui/BlogCard.tsx b/src/components/ui/BlogCard.tsx new file mode 100644 index 0000000..b706154 --- /dev/null +++ b/src/components/ui/BlogCard.tsx @@ -0,0 +1,85 @@ +import { motion } from "motion/react"; + +export interface BlogPost { + id: string; + title: string; + excerpt: string; + imageUrl: string; + date: string; + author: string; + category: string; +} + +interface BlogCardProps { + post: BlogPost; +} + +export function BlogCard({ post }: BlogCardProps) { + return ( + + {/* Glow effect behind card on hover */} +
+ +
+ {/* Image container with overlay */} +
+
+ {post.title} +
+ {post.category} +
+
+ + {/* Content */} +
+
+

+ {post.title} +

+

+ {post.excerpt} +

+
+ +
+
+ {post.date} + • + {post.author} +
+ + + + Read more + + + + + +
+
+
+ + ); +} diff --git a/src/components/ui/globe.tsx b/src/components/ui/globe.tsx index 411f2cf..629dca6 100644 --- a/src/components/ui/globe.tsx +++ b/src/components/ui/globe.tsx @@ -1,19 +1,19 @@ "use client"; import { useEffect, useRef, useState } from "react"; -import { Color, Scene, Fog, PerspectiveCamera, Vector3 } from "three"; +import { Color, Scene, Fog, PerspectiveCamera, Vector3, Group, Material, MeshPhongMaterial } from "three"; import ThreeGlobe from "three-globe"; import { useThree, Canvas, extend } from "@react-three/fiber"; import { OrbitControls } from "@react-three/drei"; -import countries from "@/data/globe.json"; +import countries from "../../data/globe.json"; + +// Fix Three-Fiber type extension declare module "@react-three/fiber" { interface ThreeElements { - threeGlobe: ThreeElements["mesh"] & { - new(): ThreeGlobe; - }; + threeGlobe: any; } } -extend({ ThreeGlobe: ThreeGlobe }); +extend({ ThreeGlobe }); const RING_PROPAGATION_SPEED = 3; const aspect = 1; @@ -60,11 +60,24 @@ interface WorldProps { data: Position[]; } -let numbersOfRings = [0]; +// Define interfaces for data types +interface GlobePoint { + size: number; + order: number; + color: string; + lat: number; + lng: number; +} + +interface RingData { + lat: number; + lng: number; + color: string; +} export function Globe({ globeConfig, data }: WorldProps) { const globeRef = useRef(null); - const groupRef = useRef(); + const groupRef = useRef(null); // Properly type the ref const [isInitialized, setIsInitialized] = useState(false); const defaultProps = { @@ -88,7 +101,7 @@ export function Globe({ globeConfig, data }: WorldProps) { useEffect(() => { if (!globeRef.current && groupRef.current) { globeRef.current = new ThreeGlobe(); - (groupRef.current as any).add(globeRef.current); + groupRef.current.add(globeRef.current); setIsInitialized(true); } }, []); @@ -97,16 +110,19 @@ export function Globe({ globeConfig, data }: WorldProps) { useEffect(() => { if (!globeRef.current || !isInitialized) return; - const globeMaterial = globeRef.current.globeMaterial() as unknown as { - color: Color; - emissive: Color; - emissiveIntensity: number; - shininess: number; - }; - globeMaterial.color = new Color(globeConfig.globeColor); - globeMaterial.emissive = new Color(globeConfig.emissive); - globeMaterial.emissiveIntensity = globeConfig.emissiveIntensity || 0.1; - globeMaterial.shininess = globeConfig.shininess || 0.9; + try { + // Use proper type for material + const globeMaterial = globeRef.current.globeMaterial() as MeshPhongMaterial; + + if (globeMaterial) { + globeMaterial.color = new Color(globeConfig.globeColor || '#1d072e'); + globeMaterial.emissive = new Color(globeConfig.emissive || '#000000'); + globeMaterial.emissiveIntensity = globeConfig.emissiveIntensity || 0.1; + globeMaterial.shininess = globeConfig.shininess || 0.9; + } + } catch (error) { + console.error("Error setting globe material:", error); + } }, [ isInitialized, globeConfig.globeColor, @@ -119,75 +135,80 @@ export function Globe({ globeConfig, data }: WorldProps) { useEffect(() => { if (!globeRef.current || !isInitialized || !data) return; - const arcs = data; - let points = []; - for (let i = 0; i < arcs.length; i++) { - const arc = arcs[i]; - const rgb = hexToRgb(arc.color) as { r: number; g: number; b: number }; - points.push({ - size: defaultProps.pointSize, - order: arc.order, - color: arc.color, - lat: arc.startLat, - lng: arc.startLng, - }); - points.push({ - size: defaultProps.pointSize, - order: arc.order, - color: arc.color, - lat: arc.endLat, - lng: arc.endLng, - }); - } - - // remove duplicates for same lat and lng - const filteredPoints = points.filter( - (v, i, a) => - a.findIndex((v2) => - ["lat", "lng"].every( - (k) => v2[k as "lat" | "lng"] === v[k as "lat" | "lng"], - ), - ) === i, - ); - - globeRef.current - .hexPolygonsData(countries.features) - .hexPolygonResolution(3) - .hexPolygonMargin(0.7) - .showAtmosphere(defaultProps.showAtmosphere) - .atmosphereColor(defaultProps.atmosphereColor) - .atmosphereAltitude(defaultProps.atmosphereAltitude) - .hexPolygonColor(() => defaultProps.polygonColor); - - globeRef.current - .arcsData(data) - .arcStartLat((d) => (d as { startLat: number }).startLat * 1) - .arcStartLng((d) => (d as { startLng: number }).startLng * 1) - .arcEndLat((d) => (d as { endLat: number }).endLat * 1) - .arcEndLng((d) => (d as { endLng: number }).endLng * 1) - .arcColor((e: any) => (e as { color: string }).color) - .arcAltitude((e) => (e as { arcAlt: number }).arcAlt * 1) - .arcStroke(() => [0.32, 0.28, 0.3][Math.round(Math.random() * 2)]) - .arcDashLength(defaultProps.arcLength) - .arcDashInitialGap((e) => (e as { order: number }).order * 1) - .arcDashGap(15) - .arcDashAnimateTime(() => defaultProps.arcTime); - - globeRef.current - .pointsData(filteredPoints) - .pointColor((e) => (e as { color: string }).color) - .pointsMerge(true) - .pointAltitude(0.0) - .pointRadius(2); - - globeRef.current - .ringsData([]) - .ringColor(() => defaultProps.polygonColor) - .ringMaxRadius(defaultProps.maxRings) - .ringPropagationSpeed(RING_PROPAGATION_SPEED) - .ringRepeatPeriod( - (defaultProps.arcTime * defaultProps.arcLength) / defaultProps.rings, + try { + const arcs = data; + const points: GlobePoint[] = []; + + for (let i = 0; i < arcs.length; i++) { + const arc = arcs[i]; + + points.push({ + size: defaultProps.pointSize, + order: arc.order, + color: arc.color, + lat: arc.startLat, + lng: arc.startLng, + }); + points.push({ + size: defaultProps.pointSize, + order: arc.order, + color: arc.color, + lat: arc.endLat, + lng: arc.endLng, + }); + } + + // remove duplicates for same lat and lng + const filteredPoints = points.filter( + (v, i, a) => + a.findIndex((v2) => + ["lat", "lng"].every( + (k) => v2[k as keyof typeof v2] === v[k as keyof typeof v], + ), + ) === i, ); + + globeRef.current + .hexPolygonsData(countries.features) + .hexPolygonResolution(3) + .hexPolygonMargin(0.7) + .showAtmosphere(defaultProps.showAtmosphere) + .atmosphereColor(defaultProps.atmosphereColor) + .atmosphereAltitude(defaultProps.atmosphereAltitude) + .hexPolygonColor(() => defaultProps.polygonColor); + + globeRef.current + .arcsData(data) + .arcStartLat((d: Position) => d.startLat * 1) + .arcStartLng((d: Position) => d.startLng * 1) + .arcEndLat((d: Position) => d.endLat * 1) + .arcEndLng((d: Position) => d.endLng * 1) + .arcColor((e: Position) => e.color) + .arcAltitude((e: Position) => e.arcAlt * 1) + .arcStroke(() => [0.32, 0.28, 0.3][Math.round(Math.random() * 2)]) + .arcDashLength(defaultProps.arcLength) + .arcDashInitialGap((e: Position) => e.order * 1) + .arcDashGap(15) + .arcDashAnimateTime(() => defaultProps.arcTime); + + globeRef.current + .pointsData(filteredPoints) + .pointColor((e: GlobePoint) => e.color) + .pointsMerge(true) + .pointAltitude(0.0) + .pointRadius(2); + + globeRef.current + .ringsData([]) + .ringColor((e: RingData) => e.color) + .ringMaxRadius(defaultProps.maxRings) + .ringPropagationSpeed(RING_PROPAGATION_SPEED) + .ringRepeatPeriod( + (defaultProps.arcTime * defaultProps.arcLength) / defaultProps.rings, + ); + } catch (error) { + console.error("Error building globe data:", error); + } }, [ isInitialized, data, @@ -209,21 +230,25 @@ export function Globe({ globeConfig, data }: WorldProps) { const interval = setInterval(() => { if (!globeRef.current) return; - const newNumbersOfRings = genRandomNumbers( - 0, - data.length, - Math.floor((data.length * 4) / 5), - ); - - const ringsData = data - .filter((d, i) => newNumbersOfRings.includes(i)) - .map((d) => ({ - lat: d.startLat, - lng: d.startLng, - color: d.color, - })); - - globeRef.current.ringsData(ringsData); + try { + const newNumbersOfRings = genRandomNumbers( + 0, + data.length, + Math.floor((data.length * 4) / 5), + ); + + const ringsData = data + .filter((d, i) => newNumbersOfRings.includes(i)) + .map((d) => ({ + lat: d.startLat, + lng: d.startLng, + color: d.color, + })); + + globeRef.current.ringsData(ringsData); + } catch (error) { + console.error("Error updating rings:", error); + } }, 2000); return () => { @@ -231,7 +256,7 @@ export function Globe({ globeConfig, data }: WorldProps) { }; }, [isInitialized, data]); - return ; + return } />; } export function WebGLRendererConfig() { @@ -273,8 +298,8 @@ export function World(props: WorldProps) { enableZoom={false} minDistance={cameraZ} maxDistance={cameraZ} - autoRotateSpeed={1} - autoRotate={true} + autoRotateSpeed={globeConfig.autoRotateSpeed || 1} + autoRotate={globeConfig.autoRotate !== false} minPolarAngle={Math.PI / 3.5} maxPolarAngle={Math.PI - Math.PI / 3} /> @@ -283,12 +308,12 @@ export function World(props: WorldProps) { } export function hexToRgb(hex: string) { - var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; - hex = hex.replace(shorthandRegex, function (m, r, g, b) { + const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + hex = hex.replace(shorthandRegex, function (_, r, g, b) { return r + r + g + g + b + b; }); - var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), diff --git a/src/registry/magicui/animated-beam.tsx b/src/registry/magicui/animated-beam.tsx index c4aae26..096f038 100644 --- a/src/registry/magicui/animated-beam.tsx +++ b/src/registry/magicui/animated-beam.tsx @@ -94,11 +94,9 @@ export const AnimatedBeam: React.FC = ({ } // Initialize ResizeObserver - const resizeObserver = new ResizeObserver((entries) => { - // For all entries, recalculate the path - for (const entry of entries) { - updatePath() - } + const resizeObserver = new ResizeObserver(() => { + // Remove unused entry parameter + updatePath(); }) // Add a small delay to ensure refs are properly set diff --git a/tsconfig.json b/tsconfig.json index 173ed14..6657b50 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,23 +1,25 @@ { - "files": [], - "references": [ - { - "path": "./tsconfig.app.json" - }, - { - "path": "./tsconfig.node.json" + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + "strict": true, + "noUnusedLocals": false, + "noUnusedParameters": false, + "noFallthroughCasesInSwitch": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] } - ], - "compilerOptions": { - "module": "ESNext", - "target": "ESNext", - "moduleResolution": "Bundler", - "verbatimModuleSyntax": true, - "esModuleInterop": true, - "jsx": "react-jsx", - "baseUrl": ".", - "paths": { - "@/*": ["src/*"] - } - } - } \ No newline at end of file + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} \ No newline at end of file diff --git a/tsconfig.node.json b/tsconfig.node.json index 9728af2..835334d 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -8,10 +8,10 @@ /* Bundler mode */ "moduleResolution": "bundler", - "allowImportingTsExtensions": true, + "allowImportingTsExtensions": false, "verbatimModuleSyntax": true, "moduleDetection": "force", - "noEmit": true, + "noEmit": false, /* Linting */ "strict": true, @@ -19,7 +19,8 @@ "noUnusedParameters": true, "erasableSyntaxOnly": true, "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true + "noUncheckedSideEffectImports": true, + "composite": true }, "include": ["vite.config.ts"] } diff --git a/vite.config.ts b/vite.config.ts index 6820108..eeb31ec 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,5 +4,18 @@ import tailwindcss from '@tailwindcss/vite' import tsconfigPaths from 'vite-tsconfig-paths'; export default defineConfig({ - plugins: [react(),tailwindcss(), tsconfigPaths()], + plugins: [react(), tailwindcss(), tsconfigPaths()], + build: { + // Increase error logging + reportCompressedSize: true, + // Remove sourcemaps in production to reduce build size + sourcemap: false, + // Configure minification + minify: 'terser', + terserOptions: { + compress: { + drop_console: true, + }, + }, + }, })