diff --git a/blog/Spark-Architecture/index.md b/blog/Spark-Architecture/index.md deleted file mode 100644 index 92338b86..00000000 --- a/blog/Spark-Architecture/index.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -title: "Spark Architecture Explained" -authors: [Aditya-Singh-Rathore] -tags: [Apache Spark, Spark Architecture, Big Data, Distributed Computing, Data Engineering] -date: 2025-08-18 - -description: Apache Spark is a fast, open-source big data framework that leverages in-memory computing for high performance. Its architecture powers scalable distributed processing across clusters, making it essential for analytics and machine learning. - -draft: false -canonical_url: -# meta: -# - name: "robots" -# content: "index, follow" -# - property: "og:title" -# content: "What is Google DeepMind AI?" -# - property: "og:description" -# content: "DeepMind is an auxiliary of Google that centers around man-made brainpower. All the more explicitly, it utilizes a part of AI called AI" -# - property: "og:type" -# content: "article" -# - property: "og:url" -# content: "/blog/getting-started-with-mern" -# - property: "og:image" -# content: "/assets/images/mern-8a27add30515e58f789f89a4c9072818.jpg" -# - name: "twitter:card" -# content: "summary_large_image" -# - name: "twitter:title" -# content: "A Comprehensive Guide to Get You Started with MERN Stack" -# - name: "twitter:description" -# content: "DeepMind is an auxiliary of Google that centers around man-made brainpower. All the more explicitly, it utilizes a part of AI called AI" -# - name: "twitter:image" -# content: "assets/images/mern-8a27add30515e58f789f89a4c9072818.jpg" - ---- - -# Understanding Apache Spark Architecture: A Deep Dive into Distributed Computing - -Hey there, fellow data enthusiasts! 👋 - -I remember the first time I encountered a Spark architecture diagram. It looked like a complex web of boxes and arrows that seemed to communicate in some secret distributed computing language. But once I understood what each component actually does and how they work together, everything clicked into place. - -Today, I want to walk you through Spark's architecture in a way that I wish someone had explained it to me back then - focusing on the core components and how this beautiful system actually works under the hood. - -## What is Apache Spark? - -Before diving into the architecture, let's establish what we're dealing with. Apache Spark is an open-source, distributed computing framework designed to process massive datasets across clusters of computers. Think of it as a coordinator that can take your data processing job and intelligently distribute it across multiple machines to get the work done faster. - -The key insight that makes Spark special? It keeps data in memory between operations whenever possible, which is why it can be dramatically faster than traditional batch processing systems. - -## The Big Picture: High-Level Architecture - -![Spark Architecture](/img/blogs/07-spark_architecture.png) - - -When you look at Spark's architecture, you're essentially looking at a well-orchestrated system with three main types of components working together: - -1. **Driver Program** - The mastermind that coordinates everything -2. **Cluster Manager** - The resource allocator -3. **Executors** - The workers that do the actual processing - -Let's break down each of these and understand how they collaborate. - -## Core Components Deep Dive - -### 1. The Driver Program: Your Application's Brain - -The Driver Program is where your Spark application begins and ends. When you write a Spark program and run it, you're essentially creating a driver program. Here's what makes it the brain of the operation: - -**What the Driver Does:** -- Contains your main() function and defines RDDs and operations on them -- Converts your high-level operations into a DAG (Directed Acyclic Graph) of tasks -- Schedules tasks across the cluster -- Coordinates with the cluster manager to get resources -- Collects results from executors and returns final results - -**Think of it this way:** If your Spark application were a restaurant, the Driver would be the head chef who takes orders (your code), breaks them down into specific cooking tasks, assigns those tasks to kitchen staff (executors), and ensures everything comes together for the final dish. - -The driver runs in its own JVM process and maintains all the metadata about your Spark application throughout its lifetime. - -### 2. Cluster Manager: The Resource Referee - -The Cluster Manager sits between your driver and the actual compute resources. Its job is to allocate and manage resources across the cluster. Spark is flexible and works with several cluster managers: - -**Standalone Cluster Manager:** -- Spark's built-in cluster manager -- Simple to set up and understand -- Great for dedicated Spark clusters - -**Apache YARN (Yet Another Resource Negotiator):** -- Hadoop's resource manager -- Perfect if you're in a Hadoop ecosystem -- Allows resource sharing between Spark and other Hadoop applications - -**Apache Mesos:** -- A general-purpose cluster manager -- Can handle multiple frameworks beyond just Spark -- Good for mixed workload environments - -**Kubernetes:** -- The modern container orchestration platform -- Increasingly popular for new deployments -- Excellent for cloud-native environments - -**The key point:** The cluster manager's job is resource allocation - it doesn't care what your application does, just how much CPU and memory it needs. - -### 3. Executors: The Workhorses - -Executors are the processes that actually run your tasks and store data for your application. Each executor runs in its own JVM process and can run multiple tasks concurrently using threads. - -**What Executors Do:** -- Execute tasks sent from the driver -- Store computation results in memory or disk storage -- Provide in-memory storage for cached RDDs/DataFrames -- Report heartbeat and task status back to the driver - -**Key Characteristics:** -- Each executor has a fixed number of cores and amount of memory -- Executors are launched at the start of a Spark application and run for the entire lifetime -- If an executor fails, Spark can launch new ones and recompute lost data - -Think of executors as skilled workers in our restaurant analogy - they can handle multiple cooking tasks simultaneously and have their own workspace (memory) to store ingredients and intermediate results. - -## How These Components Work Together: The Execution Flow - -Now that we know the players, let's see how they orchestrate a typical Spark application: - -### Step 1: Application Submission -When you submit a Spark application, the driver program starts up and contacts the cluster manager requesting resources for executors. - -### Step 2: Resource Allocation -The cluster manager examines available resources and launches executor processes on worker nodes across the cluster. - -### Step 3: Task Planning -The driver analyzes your code and creates a logical execution plan. It breaks down operations into stages and tasks that can be executed in parallel. - -### Step 4: Task Distribution -The driver sends tasks to executors. Each task operates on a partition of data, and multiple tasks can run in parallel across different executors. - -### Step 5: Execution and Communication -Executors run the tasks, storing intermediate results and communicating progress back to the driver. The driver coordinates everything and handles any failures. - -### Step 6: Result Collection -Once all tasks complete, the driver collects results and returns the final output to your application. - -## Understanding RDDs: The Foundation - -At the heart of Spark's architecture lies the concept of Resilient Distributed Datasets (RDDs). Understanding RDDs is crucial to understanding how Spark actually works. - -**What makes RDDs special:** - -**Resilient:** RDDs can automatically recover from node failures. Spark remembers how each RDD was created (its lineage) and can rebuild lost partitions. - -**Distributed:** RDD data is automatically partitioned and distributed across multiple nodes in the cluster. - -**Dataset:** At the end of the day, it's still just a collection of your data - but with superpowers. - -### RDD Operations: Transformations vs Actions - -RDDs support two types of operations, and understanding the difference is crucial: - -**Transformations** (Lazy): -```scala -val filtered = data.filter(x => x > 10) -val mapped = filtered.map(x => x * 2) -val grouped = mapped.groupByKey() -``` -These operations don't actually execute immediately. Spark just builds up a computation graph. - -**Actions** (Eager): -```scala -val results = grouped.collect() // Brings data to driver -val count = filtered.count() // Returns number of elements -grouped.saveAsTextFile("hdfs://...") // Saves to storage -``` -Actions trigger the actual execution of all the transformations in the lineage. - -This lazy evaluation allows Spark to optimize the entire computation pipeline before executing anything. - -## The DAG: Spark's Optimization Engine - -One of Spark's most elegant features is how it converts your operations into a Directed Acyclic Graph (DAG) for optimal execution. - -### How DAG Optimization Works - -When you chain multiple transformations together, Spark doesn't execute them immediately. Instead, it builds a DAG that represents the computation. This allows for powerful optimizations: - -**Pipelining:** Multiple transformations that don't require data shuffling can be combined into a single stage and executed together. - -**Stage Boundaries:** Spark creates stage boundaries at operations that require data shuffling (like `groupByKey`, `join`, or `repartition`). - -### Stages and Tasks Breakdown - -**Stage:** A set of tasks that can all be executed without data shuffling. All tasks in a stage can run in parallel. - -**Task:** The smallest unit of work in Spark. Each task processes one partition of data. - -**Wide vs Narrow Dependencies:** -- **Narrow Dependencies:** Each partition of child RDD depends on a constant number of parent partitions (like `map`, `filter`) -- **Wide Dependencies:** Each partition of child RDD may depend on multiple parent partitions (like `groupByKey`, `join`) - -Wide dependencies create stage boundaries because they require shuffling data across the network. - -## Memory Management: Where the Magic Happens - -Spark's memory management is what gives it the speed advantage over traditional batch processing systems. Here's how it works: - -### Memory Regions - -Spark divides executor memory into several regions: - -**Storage Memory (60% by default):** -- Used for caching RDDs/DataFrames -- LRU eviction when space is needed -- Can borrow from execution memory when available - -**Execution Memory (20% by default):** -- Used for computation in shuffles, joins, sorts, aggregations -- Can borrow from storage memory when needed - -**User Memory (20% by default):** -- For user data structures and internal metadata -- Not managed by Spark - -**Reserved Memory (300MB by default):** -- System reserved memory for Spark's internal objects - -The beautiful thing about this system is that storage and execution memory can dynamically borrow from each other based on current needs. - -## The Unified Stack: Multiple APIs, One Engine - -What makes Spark truly powerful is that it provides multiple high-level APIs that all run on the same core engine: - -### Spark Core -The foundation that provides: -- Basic I/O functionality -- Task scheduling and memory management -- Fault tolerance -- RDD abstraction - -### Spark SQL -- SQL queries on structured data -- DataFrame and Dataset APIs -- Catalyst query optimizer -- Integration with various data sources - -### Spark Streaming -- Real-time stream processing -- Micro-batch processing model -- Integration with streaming sources like Kafka - -### MLlib -- Distributed machine learning algorithms -- Feature transformation utilities -- Model evaluation and tuning - -### GraphX -- Graph processing and analysis -- Built-in graph algorithms -- Graph-parallel computation - -The key insight: all of these APIs compile down to the same core RDD operations, so they all benefit from Spark's optimization engine and can interoperate seamlessly. - -## Putting It All Together - -Now that we've covered all the components, let's see how they work together in a real example: - -```scala -// This creates RDDs but doesn't execute anything yet -val textFile = spark.textFile("hdfs://large-file.txt") -val words = textFile.flatMap(line => line.split(" ")) -val wordCounts = words.map(word => (word, 1)) -val aggregated = wordCounts.reduceByKey(_ + _) - -// This action triggers execution of the entire pipeline -val results = aggregated.collect() -``` - -**What happens behind the scenes:** -1. Driver creates a DAG with two stages (split by the `reduceByKey` shuffle) -2. Driver requests executors from cluster manager -3. Stage 1 tasks (read, flatMap, map) execute on partitions across executors -4. Data gets shuffled for the `reduceByKey` operation -5. Stage 2 tasks perform the aggregation -6. Results get collected back to the driver - -## Why This Architecture Matters - -Understanding Spark's architecture isn't just academic knowledge - it's the key to working effectively with big data: - -**Fault Tolerance:** The RDD lineage graph means Spark can recompute lost data automatically without manual intervention. - -**Scalability:** The driver/executor model scales horizontally - just add more worker nodes to handle bigger datasets. - -**Efficiency:** Lazy evaluation and DAG optimization mean Spark can optimize entire computation pipelines before executing anything. - -**Flexibility:** The unified stack means you can mix SQL, streaming, and machine learning in the same application without data movement penalties. - -## Conclusion: The Beauty of Distributed Computing - -Spark's architecture represents one of the most elegant solutions to distributed computing that I've encountered. By clearly separating concerns - coordination (driver), resource management (cluster manager), and execution (executors) - Spark creates a system that's both powerful and understandable. - -The magic isn't in any single component, but in how they all work together. The driver's intelligence in creating optimal execution plans, the cluster manager's efficiency in resource allocation, and the executors' reliability in task execution combine to create something greater than the sum of its parts. - -Whether you're processing terabytes of log data, training machine learning models, or running real-time analytics, understanding this architecture will help you reason about performance, debug issues, and design better data processing solutions. - ---- - -*The next time you see a Spark architecture diagram, I hope you'll see what I see now - not a confusing web of boxes and arrows, but an elegant dance of distributed computing components working in perfect harmony. Happy Sparking! 🚀* - - \ No newline at end of file diff --git a/blog/spark-architecture/images/spark.png b/blog/spark-architecture/images/spark.png deleted file mode 100644 index 514daaa0..00000000 Binary files a/blog/spark-architecture/images/spark.png and /dev/null differ diff --git a/blog/spark-architecture/index.md b/blog/spark-architecture/index.md deleted file mode 100644 index 454946c5..00000000 --- a/blog/spark-architecture/index.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: "Spark Architecture Explained" -sidebar_label: Spark Architecture Explanation -authors: [Aditya-Singh-Rathore, sanjay-kv] -tags: [spark, azure, design] -date: 2025-08-18 -hide_table_of_contents: true ---- -Hey there, fellow data enthusiasts! 👋 Add a comment on lines R37 to R39Add diff commentMarkdown input: edit mode selected.WritePreviewAdd a suggestionHeadingBoldItalicQuoteCodeLinkUnordered listNumbered listTask listMentionReferenceSaved repliesAdd FilesPaste, drop, or click to add filesCancelCommentStart a reviewReturn to code - -I remember the first time I encountered a Spark architecture diagram. It looked like a complex web of boxes and arrows that seemed to communicate in some secret distributed computing language. But once I understood what each component actually does and how they work together, everything clicked into place. - -Today, I want to walk you through Spark's architecture in a way that I wish someone had explained it to me back then - focusing on the core components and how this beautiful system actually works under the hood. -### 👤 Research the User - -When you’re designing a new product, it’s important to remember to research your user. This means gathering data about who will be using the product and their needs. Who are they? What do they need? What are their habits and preferences? What are their goals? What are their pain points? What are they looking for in a product? Only by understanding the user can you create a product that meets their needs and exceeds their expectations. If you design a product without understanding the user, it is likely to be unsuccessful. - -Gather data about who will be using the product and their needs. - -- ❓Who are they? -- ❓What are their goals, habits, and pain points? -- ❓What are they looking for in a product? - -To answer these questions, you need to do some research. This involves gathering data about who will be using the product and their needs. You can find this data from surveys, focus groups, interviews, and other forms of market research. Once you have this data, you can start to design a product that meets the needs of your users. - -![img1](./images/spark.png) - -### 🧩 Define the Problem - -One of the most important aspects of good design is understanding the problem that needs to be solved. Too often, people focus on the solution without taking the time to understand the problem. This can lead to misguided efforts and a lot of wasted time and energy. The best way to identify the problem is to ask a lot of questions. Try to get as much information as possible from stakeholders, users, and anyone else who might have a vested interest in the project. Once you have a good understanding of the problem, you can start looking for solutions. - - -### 💡 Ideate Solutions -Generate creative ideas to solve the problem. The first step in coming up with ideas is to understand the problem fully. What are its causes and effects? What are people currently doing to try to solve it? Once you have a good understanding of the problem, you can start brainstorming potential solutions. To generate creative ideas, it can be helpful to think about things from different angles. Try approaching the problem from different perspectives, using different methods or tools, or looking at it from a different time period. Sometimes all it takes is a fresh perspective to come up with a great solution. - -- ✅Think outside the box -- ✅Use different methods and perspectives -- ✅Brainstorm with your team or solo - -Approach problems from multiple angles. Innovation often comes from seeing something in a new light. - - -### 🛠️ Refine the Solution -Select the best idea and make it more specific. - -The best way to improve a solution is to select the best idea and make it more specific. This will help to focus the team on the most important aspects of the problem. This can be done in a number of ways, but the most effective is to break the idea down into smaller chunks that can be easily addressed. Once the smaller chunks have been defined, it becomes easier to see how they fit together and whether or not they are feasible. Making a solution more specific has several benefits. It can help to focus the team on what needs to be done and make sure that everyone is on the same page. - -- ✅Focus on high-impact features -- ✅Define clear goals -- ✅Ensure everyone is aligned - -Refining makes execution manageable and ensures the solution directly addresses the user problem.There are different types of prototypes that you can use, depending on what you want to test with users. These include low-fidelity prototypes, which are sketches or wireframes of the product; high-fidelity prototypes, which are more realistic versions of the product; and paper prototypes, which are sketches. - - -### 🧪 Develop Prototypes -Create a basic version of the solution to test with users. Prototyping is the process of creating a basic or preliminary version of a product or service to test with users. The goal of prototyping is to get feedback from potential users early in the design process so that you can make changes and improvements before you invest too much time and money in the final product. You can use prototypes for different types of products, such as websites, apps, and software. - -### Types of Prototypes: -- ✅**Low-fidelity:** Sketches, wireframes -- ✅**High-fidelity:** Interactive, realistic simulations -- ✅**Paper prototypes:** Simple, hand-drawn flows - -Prototypes help gather feedback early and avoid costly mistakes later in development. - - - -### 📣 Collect Feedback from Users - -Feedback is a crucial part of the design process. We need to collect feedback from users to make sure that the prototype solves their needs. This will help us design a better product. The feedback we collect can be qualitative or quantitative, but it is most often qualitative because it is easier to get responses; can be collected in many different ways, such as through surveys and interviews. -Test your prototype with real users to understand: - -- ✅Does it solve their needs? -- ✅Is the experience smooth and intuitive? - -Gather both **qualitative** and **quantitative** feedback through interviews, usability testing, and surveys. Use that data to iterate and improve. 🔁 - - -### 🚀 Launch the Product - -Launching a product is a tough task. Especially when it comes to public release. You have to make sure that you are ready for any feedback and criticism you might receive. -When launching your product, there are many factors that need to be taken into accounts such as feedback, the market, and the competition. There are many things that can go wrong when releasing your product publicly. However, with careful planning and taking all of these factors into account, a successful launch is possible. - -Incorporate feedback, finalize features, and release your product to the public. - -- ✅Prepare for feedback and iteration -- ✅Know your market and competitors -- ✅Stay user-focused even after launch - -A successful launch comes from ongoing improvement and close attention to your users’ evolving needs. Whether you’re a sole UX designer, part of a team, or working for a large organization, these are certain steps that you need to follow in order to achieve your goals effectively. The seven steps listed above are not easy. They take time, effort, and a strong aptitude for problem-solving. Yet, Executing the above steps correctly will maximize your chances of success, while failing to address key steps along the way could sink your whole project, with the right mentors, direction, and guidance, they can help aspiring UX designers reach their goals almost as fast as they set them. - -### 🧘‍♀️ Takeaway: Build with Users, Not Just for Them - -Whether you're a solo UX designer or working in a large team, these 7 steps are crucial. They require time, effort, and problem-solving skills—but skipping any of them can cost you the success of your product. - -With strong mentorship and direction, aspiring UX designers can move faster and more confidently in their careers. - -## ✅ Final Verdict - -If you’ve made it this far—thank you! 🙌 -I hope this guide helped you better understand how to **streamline your UX design process**. -If you found value in it, please share it with your fellow designers and friends. - -📩 Contact: **sowmiyavenkatesan611@gmail.com** f - -Happy Designing! 🎨 - \ No newline at end of file diff --git a/src/components/mockup/DeveloperMockup.tsx b/src/components/mockup/DeveloperMockup.tsx new file mode 100644 index 00000000..d71b6da4 --- /dev/null +++ b/src/components/mockup/DeveloperMockup.tsx @@ -0,0 +1,209 @@ +import React, { useState } from 'react'; +import { motion } from 'framer-motion'; +import { useColorMode } from '@docusaurus/theme-common'; + +interface MockupItem { + title: string; + image: string; + description: string; +} + +interface DeveloperMockupProps { + items: MockupItem[]; +} + +const DeveloperMockup: React.FC = ({ items }) => { + const [activeIndex, setActiveIndex] = useState(0); + const { colorMode } = useColorMode(); + const isDark = colorMode === 'dark'; + + return ( +
+ {/* Section Header */} +
+ + Live Preview + + + Interactive Project Showcase + + + Explore our featured projects with live previews and detailed insights + +
+ + {/* Mockup Container */} + +
+ {/* Enhanced Sidebar */} +
+
+
+

+ Featured Projects +

+
+ +
+ {items.map((item, index) => ( + setActiveIndex(index)} + className={`relative p-5 rounded-xl cursor-pointer transition-all duration-300 overflow-hidden ${ + activeIndex === index + ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-xl transform scale-105' + : isDark + ? 'bg-gray-700/50 hover:bg-gray-600/70 text-gray-200 border border-gray-600' + : 'bg-white hover:bg-gray-50 text-gray-700 shadow-md border border-gray-200' + }`} + > + {activeIndex === index && ( + + )} + +
+
+

{item.title}

+

+ {item.description} +

+
+
+
+ + {activeIndex === index && ( + + )} + + ))} +
+
+ + {/* Enhanced Main Screen */} +
+
+ {/* Enhanced Browser Header */} +
+
+
+
+
+
+
+ 🔒 + github.com/recodehive/{items[activeIndex]?.title.toLowerCase().replace(/\s+/g, '-')} +
+
+ Live +
+
+ + {/* Enhanced Screenshot Display */} +
+ + {items[activeIndex]?.title} + + {/* Enhanced Overlay */} +
+
+ +
+
+ Active Project +
+

{items[activeIndex]?.title}

+

+ {items[activeIndex]?.description} +

+ + View Project → + + +
+
+ +
+
+
+
+ +
+ ); +}; + +export default DeveloperMockup; \ No newline at end of file diff --git a/src/components/ourProjects.tsx b/src/components/ourProjects.tsx index 57e51a9a..3d6bafb6 100644 --- a/src/components/ourProjects.tsx +++ b/src/components/ourProjects.tsx @@ -95,6 +95,17 @@ const HeadingComponent = ({ ); }; +// Project URLs configuration +const PROJECT_URLS: Record = { + "Awesome GitHub Profile": "https://recodehive.github.io/awesome-github-profiles/", + "Machine Learning Repository": "https://machine-learning-repos.vercel.app/" +}; + +// Helper function to get website URLs +const getWebsiteUrl = (title: string) => { + return PROJECT_URLS[title] || "https://github.com/recodehive"; +}; + // Select Component const SelectComponent = ({ items, @@ -149,28 +160,301 @@ const SelectComponent = ({ ))}
- setIsHovered(true)} - onHoverEnd={() => setIsHovered(false)} - className={`col-span-1 md:col-span-8 p-0 md:p-8 ${ - isDark ? "bg-[#1a1a1a]" : "bg-white" - } transition-colors duration-300`} - > - + {/* Animated Mesh Background */} +
+
+
+
+ + {/* Particle System */} +
+ {[...Array(12)].map((_, i) => ( + + ))} +
+ + {/* Advanced Floating Icons */} + + + + +
+ + + + ⚡ + + + + 🚀 + + + {/* Holographic Main Browser */} + - + initial={{ opacity: 0, rotateY: -20, scale: 0.8, z: -100 }} + animate={{ opacity: 1, rotateY: 0, scale: 1, z: 0 }} + transition={{ duration: 0.8, ease: "easeOut" }} + className="relative z-10 perspective-1000" + > +
+ {/* Holographic Border Effect */} +
+ + {/* Premium Browser Header */} +
+
+ +
+ + +
+ + +
+ +
+ +
+
+ 🔒 + github.com + / + recodehive + / + + {items[activeItem].title.toLowerCase().replace(/\s+/g, '-')} + +
+ + + + LIVE + +
+ + {/* Ultra-Enhanced Screenshot Display */} +
+ + {(items[activeItem].title === "Awesome GitHub Profile" || items[activeItem].title === "Machine Learning Repository") ? ( + /* Auto-scrolling Website Iframe */ + window.open(getWebsiteUrl(items[activeItem].title), '_blank')} + > + + + ) : ( + /* Interactive Screenshot for other projects */ + window.open(getWebsiteUrl(items[activeItem].title), '_blank')} + > + + + {/* Click to Visit Overlay */} +
+ + 🔗 Click to Visit Repository + +
+ + )} + + {/* Dynamic Indicator */} + + {(items[activeItem].title === "Awesome GitHub Profile" || items[activeItem].title === "Machine Learning Repository") ? ( + <> +
+ Auto-scrolling Live Site + + ) : ( + "👆 Hover & Click to Explore" + )} + + + {/* Holographic Overlay */} +
+
+
+ + + +
+
+ + + {/* 3D Floating Background Mockups */} +
+ {items.map((item, index) => { + if (index === activeItem) return null; + const positions = [ + { top: '8%', left: '2%', rotate: '-15deg', scale: '0.25', z: '-50px' }, + { top: '65%', left: '5%', rotate: '12deg', scale: '0.22', z: '-30px' }, + { top: '15%', right: '3%', rotate: '18deg', scale: '0.28', z: '-40px' }, + { bottom: '12%', right: '6%', rotate: '-10deg', scale: '0.20', z: '-60px' } + ]; + const pos = positions[index % positions.length]; + + return ( + + +
+
+
+
+
+
+
+
+ {item.title} +
+
+ + + ); + })} +
+ ); }; diff --git a/src/database/blogs/index.tsx b/src/database/blogs/index.tsx index 3846ea32..8c87fa07 100644 --- a/src/database/blogs/index.tsx +++ b/src/database/blogs/index.tsx @@ -4,6 +4,7 @@ interface Blog { image: string; description: string; slug: string; + authors: string[]; } const blogs: Blog[] = [ @@ -14,6 +15,7 @@ const blogs: Blog[] = [ description: "User experience design can be overwhelming because of the number of factors that influence what a product should look like and how it should function.", slug: "streamline-ux-ui", + authors: ["dharshibalasubramaniyam", "sanjay-kv"], }, { @@ -23,6 +25,7 @@ const blogs: Blog[] = [ description: " Are you passionate about design and dreaming of a career in it? Or maybe you are already in the design space and looking to pivot into UI/UX? ", slug: "ux-ui-design-job", + authors: ["dharshibalasubramaniyam", "sanjay-kv"], }, { id: 3, @@ -31,6 +34,7 @@ const blogs: Blog[] = [ description: "The impact of technology on UX design is undeniable. Automation and artificial intelligence are making it easier to identify user needs and create tailored experiences.", slug: "ux-designers-ai", + authors: ["dharshibalasubramaniyam", "sanjay-kv"], }, { id: 4, @@ -39,14 +43,16 @@ const blogs: Blog[] = [ description: "DeepMind is an auxiliary of Google that centers around man-made brainpower. It utilizes a part of AI called AI", slug: "google-deepmind", + authors: ["dharshibalasubramaniyam", "sanjay-kv"], }, { id: 5, title: "What are backlinks for SEO", image: "/img/blogs/01-seo-image.png", description: - "An SEO backlink is created when one website links to another, and they’re extremely important for SEO. ", + "An SEO backlink is created when one website links to another, and they're extremely important for SEO. ", slug: "google-backlinks", + authors: ["sanjay-kv"], }, { @@ -56,15 +62,9 @@ const blogs: Blog[] = [ description: "The GitHub Copilot Coding Agent is an asynchronous software engineering agent that assists developers by suggesting code snippets", slug: "git-coding-agent", + authors: ["sanjay-kv"], }, - { - id: 6, - title: "Apache Spark Tutorial", - image: "/img/blogs/07-spark-blog-banner.png", - description: - "Apache Spark is an open-source unified analytics engine for large-scale data processing, with built-in modules for streaming, SQL, machine learning, and graph processing.", - slug: "spark-architecture", - }, + ]; -export default blogs; +export default blogs; \ No newline at end of file diff --git a/src/pages/dashboard/giveaway/index.tsx b/src/pages/dashboard/giveaway/index.tsx index be38eb3d..b8f85eeb 100644 --- a/src/pages/dashboard/giveaway/index.tsx +++ b/src/pages/dashboard/giveaway/index.tsx @@ -1,25 +1,471 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import Layout from "@theme/Layout"; import Head from "@docusaurus/Head"; import { motion } from "framer-motion"; import SlotCounter from "react-slot-counter"; import NavbarIcon from "../../../components/navbar/NavbarIcon"; import { useHistory } from "@docusaurus/router"; +import { Home, MessageCircle, Gift, Trophy, Crown, Star, Award, Clock, Users, TrendingUp, Medal } from "lucide-react"; import "../dashboard.css"; +// Giveaway-specific styles +const giveawayStyles = ` +.giveaway-stats-banner { + display: flex; + justify-content: space-between; + gap: 0.75rem; + margin-bottom: 2rem; + padding: 0 1rem; +} + +.stat-item { + flex: 1; + display: flex; + align-items: center; + gap: 0.5rem; + background: var(--ifm-background-color); + border: 1px solid var(--ifm-color-emphasis-200); + border-radius: 8px; + padding: 0.5rem; + transition: all 0.3s ease; + box-shadow: 0 2px 8px var(--ifm-color-emphasis-200); +} + +.stat-item:hover { + transform: translateY(-2px); + box-shadow: 0 4px 16px var(--ifm-color-emphasis-300); +} + +.timer-icon { + background: linear-gradient(135deg, #ff6b6b, #ffa726) !important; +} + +.entries-icon { + background: linear-gradient(135deg, #4ecdc4, #44a08d) !important; +} + +.score-icon { + background: linear-gradient(135deg, #667eea, #764ba2) !important; +} + +.winners-icon { + background: linear-gradient(135deg, #f093fb, #f5576c) !important; +} + +.stat-icon { + width: 28px; + height: 28px; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.9rem; + flex-shrink: 0; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.stat-content { + min-width: 0; +} + +.stat-content h3 { + font-size: 0.65rem; + font-weight: 600; + color: var(--ifm-color-emphasis-700); + margin: 0 0 0.15rem 0; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.stat-value { + font-size: 1.1rem; + font-weight: 800; + color: var(--ifm-color-emphasis-900); + display: flex; + align-items: baseline; + gap: 0.15rem; + margin-bottom: 0.15rem; +} + +.stat-value span { + font-size: 0.6rem; + font-weight: 600; + color: var(--ifm-color-emphasis-600); +} + +.stat-content p { + font-size: 0.55rem; + color: var(--ifm-color-emphasis-500); + margin: 0; +} + +[data-theme='dark'] .stat-item { + background: var(--ifm-color-emphasis-100); + border-color: var(--ifm-color-emphasis-300); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +} + +[data-theme='dark'] .stat-item:hover { + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); +} + +.giveaway-leaderboard-section { + margin: 3rem 0; + padding: 0 1rem; +} + +.giveaway-leaderboard-header { + text-align: center; + margin-bottom: 2rem; +} + +.giveaway-leaderboard-title { + font-size: 2.5rem; + font-weight: 800; + margin-bottom: 0.5rem; + color: var(--ifm-color-emphasis-900); +} + +.giveaway-leaderboard-subtitle { + font-size: 1.1rem; + color: var(--ifm-color-emphasis-700); + margin: 0; +} + +.giveaway-loading { + text-align: center; + padding: 3rem; + color: var(--ifm-color-emphasis-700); +} + +.giveaway-leaderboard-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1.5rem; + max-width: 1200px; + margin: 0 auto; +} + +.giveaway-leaderboard-card { + background: var(--ifm-background-color); + border: 1px solid var(--ifm-color-emphasis-300); + border-radius: 16px; + padding: 1.5rem; + position: relative; + overflow: hidden; + transition: all 0.3s ease; + box-shadow: 0 4px 12px var(--ifm-color-emphasis-200); +} + +.giveaway-leaderboard-card:hover { + box-shadow: 0 8px 25px var(--ifm-color-emphasis-300); + border-color: var(--ifm-color-primary); + transform: translateY(-2px); +} + +.giveaway-leaderboard-card.rank-1 { + background: linear-gradient(135deg, #ffd700, #ffed4e); + border-color: #ffd700; +} + +.giveaway-leaderboard-card.rank-2 { + background: linear-gradient(135deg, #c0c0c0, #e8e8e8); + border-color: #c0c0c0; +} + +.giveaway-leaderboard-card.rank-3 { + background: linear-gradient(135deg, #cd7f32, #daa520); + border-color: #cd7f32; +} + +[data-theme='dark'] .giveaway-leaderboard-card { + background: var(--ifm-color-emphasis-100); + border-color: var(--ifm-color-emphasis-400); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +[data-theme='dark'] .giveaway-leaderboard-card:hover { + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); +} + +[data-theme='dark'] .giveaway-leaderboard-card.rank-1 { + background: linear-gradient(135deg, #b8860b, #daa520); +} + +[data-theme='dark'] .giveaway-leaderboard-card.rank-2 { + background: linear-gradient(135deg, #708090, #a9a9a9); +} + +[data-theme='dark'] .giveaway-leaderboard-card.rank-3 { + background: linear-gradient(135deg, #8b4513, #cd853f); +} + +.giveaway-rank-badge { + position: absolute; + top: 1rem; + right: 1rem; + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + font-size: 0.9rem; + background: var(--ifm-color-primary); + color: var(--ifm-color-primary-contrast-background); +} + +.giveaway-avatar { + position: relative; + width: 80px; + height: 80px; + margin: 0 auto 1rem; +} + +.giveaway-avatar img { + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; + border: 3px solid var(--ifm-color-primary); +} + +.giveaway-badge { + position: absolute; + bottom: -5px; + left: 50%; + transform: translateX(-50%); + background: var(--ifm-color-primary); + color: var(--ifm-color-primary-contrast-background); + padding: 0.25rem 0.5rem; + border-radius: 12px; + font-size: 0.7rem; + font-weight: 600; + white-space: nowrap; +} + +.giveaway-info { + text-align: center; + margin-bottom: 1rem; +} + +.giveaway-name { + font-size: 1.2rem; + font-weight: 700; + margin-bottom: 0.5rem; + color: var(--ifm-color-emphasis-900); +} + +.giveaway-leaderboard-card.rank-1 .giveaway-name, +.giveaway-leaderboard-card.rank-2 .giveaway-name, +.giveaway-leaderboard-card.rank-3 .giveaway-name { + color: var(--ifm-color-emphasis-1000); +} + +.giveaway-stats { + display: flex; + justify-content: space-around; + gap: 1rem; +} + +.giveaway-stat { + text-align: center; +} + +.giveaway-stat .stat-value { + display: block; + font-size: 1.5rem; + font-weight: 700; + color: var(--ifm-color-primary); +} + +.giveaway-leaderboard-card.rank-1 .stat-value, +.giveaway-leaderboard-card.rank-2 .stat-value, +.giveaway-leaderboard-card.rank-3 .stat-value { + color: var(--ifm-color-emphasis-1000); +} + +.giveaway-stat .stat-label { + font-size: 0.8rem; + color: var(--ifm-color-emphasis-600); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.giveaway-leaderboard-card.rank-1 .stat-label, +.giveaway-leaderboard-card.rank-2 .stat-label, +.giveaway-leaderboard-card.rank-3 .stat-label { + color: var(--ifm-color-emphasis-800); +} + +.giveaway-profile-btn { + display: block; + width: 100%; + padding: 0.75rem; + background: var(--ifm-color-primary); + color: var(--ifm-color-primary-contrast-background); + text-decoration: none; + border-radius: 8px; + text-align: center; + font-weight: 600; + transition: all 0.3s ease; +} + +.giveaway-profile-btn:hover { + background: var(--ifm-color-primary-dark); + color: var(--ifm-color-primary-contrast-background); + text-decoration: none; + transform: translateY(-2px); +} + +.giveaway-leaderboard-card.rank-1 .giveaway-profile-btn, +.giveaway-leaderboard-card.rank-2 .giveaway-profile-btn, +.giveaway-leaderboard-card.rank-3 .giveaway-profile-btn { + background: var(--ifm-color-emphasis-800); + color: var(--ifm-color-emphasis-0); +} + +.giveaway-leaderboard-card.rank-1 .giveaway-profile-btn:hover, +.giveaway-leaderboard-card.rank-2 .giveaway-profile-btn:hover, +.giveaway-leaderboard-card.rank-3 .giveaway-profile-btn:hover { + background: var(--ifm-color-emphasis-900); + color: var(--ifm-color-emphasis-0); +} + +@media (max-width: 768px) { + .giveaway-stats-banner { + flex-direction: column; + gap: 0.5rem; + } + + .stat-item { + padding: 0.4rem; + } + + .stat-icon { + width: 24px; + height: 24px; + font-size: 0.8rem; + } + + .stat-value { + font-size: 1rem; + } + + .stat-content h3 { + font-size: 0.6rem; + } + + .stat-content p { + font-size: 0.5rem; + } + + .giveaway-leaderboard-grid { + grid-template-columns: 1fr; + gap: 1rem; + } + + .giveaway-leaderboard-title { + font-size: 2rem; + } +} +`; + +// Inject styles +if (typeof document !== 'undefined') { + const existingStyle = document.getElementById('giveaway-styles'); + if (!existingStyle) { + const styleSheet = document.createElement('style'); + styleSheet.id = 'giveaway-styles'; + styleSheet.textContent = giveawayStyles; + document.head.appendChild(styleSheet); + } +} + +interface GiveawayEntry { + rank: number; + name: string; + avatar: string; + points: number; + contributions: number; + github_url: string; + badge?: string; +} + const GiveawayPage: React.FC = () => { const history = useHistory(); const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false); + const [leaderboard, setLeaderboard] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + // Simulate fetching leaderboard data + const fetchLeaderboard = async () => { + setLoading(true); + // Simulate API delay + await new Promise(resolve => setTimeout(resolve, 1000)); + + const mockData: GiveawayEntry[] = [ + { + rank: 1, + name: "sanjay-kv", + avatar: "https://avatars.githubusercontent.com/u/30715153?v=4", + points: 2500, + contributions: 45, + github_url: "https://github.com/sanjay-kv", + badge: "🏆 Champion" + }, + { + rank: 2, + name: "vansh-codes", + avatar: "https://avatars.githubusercontent.com/u/114163734?v=4", + points: 2100, + contributions: 38, + github_url: "https://github.com/vansh-codes", + badge: "🥈 Runner-up" + }, + { + rank: 3, + name: "Hemu21", + avatar: "https://avatars.githubusercontent.com/u/106808387?v=4", + points: 1850, + contributions: 32, + github_url: "https://github.com/Hemu21", + badge: "🥉 Third Place" + }, + { + rank: 4, + name: "contributor4", + avatar: "https://avatars.githubusercontent.com/u/1?v=4", + points: 1600, + contributions: 28, + github_url: "https://github.com/contributor4" + }, + { + rank: 5, + name: "contributor5", + avatar: "https://avatars.githubusercontent.com/u/2?v=4", + points: 1400, + contributions: 24, + github_url: "https://github.com/contributor5" + } + ]; + + setLeaderboard(mockData); + setLoading(false); + }; + + fetchLeaderboard(); + }, []); const handleTabChange = ( - tab: "home" | "discuss" | "leaderboard" | "contributors" | "giveaway" + tab: "home" | "discuss" | "contributors" | "giveaway" ) => { setIsMobileSidebarOpen(false); if (tab === "discuss") { history.push("/dashboard#discuss"); - } else if (tab === "leaderboard") { - history.push("/dashboard#leaderboard"); } else if (tab === "contributors") { history.push("/dashboard#contributors"); } else if (tab === "home") { @@ -58,7 +504,7 @@ const GiveawayPage: React.FC = () => { ); return ( - + 🎁 RecodeHive Giveaway @@ -97,28 +543,19 @@ const GiveawayPage: React.FC = () => {
  • handleTabChange("home")}> - + Home
  • handleTabChange("discuss")}> - + Discuss
    • -
  • handleTabChange("leaderboard")} - > - - - - Leaderboard -
  • - + Giveaway
    • @@ -127,7 +564,7 @@ const GiveawayPage: React.FC = () => { onClick={() => handleTabChange("contributors")} > - + Contributors @@ -185,26 +622,104 @@ const GiveawayPage: React.FC = () => { + + {/* Giveaway Leaderboard */} + +
    +

    + 🎁 Giveaway Leaderboard +

    +

    + Top contributors competing for amazing prizes! +

    +
    + + {loading ? ( +
    +
    Loading...
    +

    Fetching leaderboard data...

    +
    + ) : ( +
    + {leaderboard.map((entry, index) => ( + +
    + {entry.rank <= 3 ? ( + entry.rank === 1 ? : + entry.rank === 2 ? : + + ) : ( + `#${entry.rank}` + )} +
    + +
    + {entry.name} + {entry.badge && ( +
    {entry.badge}
    + )} +
    + +
    +

    {entry.name}

    +
    +
    + {entry.points} + Points +
    +
    + {entry.contributions} + Contributions +
    +
    +
    + + + View Profile + +     + ))} +
    + )} +     diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index 5ed2dc0d..c60fb34e 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -24,6 +24,7 @@ import { TrendingUp, Home, Trophy, + Users, Gift, Calendar, BarChart3, @@ -90,7 +91,7 @@ const DashboardContent: React.FC = () => { const location = useLocation(); const history = useHistory(); const [activeTab, setActiveTab] = useState< - "home" | "discuss" | "leaderboard" | "giveaway" | "contributors" + "home" | "discuss" | "giveaway" | "contributors" >("home"); // Discussion state management @@ -143,8 +144,6 @@ const DashboardContent: React.FC = () => { // Set active tab based on URL hash if (location.hash === "#discuss") { setActiveTab("discuss"); - } else if (location.hash === "#leaderboard") { - setActiveTab("leaderboard"); } else if (location.hash === "#contributors") { setActiveTab("contributors"); } else if (location.hash === "#giveaway") { @@ -177,13 +176,70 @@ const DashboardContent: React.FC = () => { } }; - // Fetch leaderboard data when leaderboard or contributors tab is active + // Fetch leaderboard data when contributors tab is active or on initial load useEffect(() => { - if (activeTab === "leaderboard" || activeTab === "contributors") { + if (activeTab === "contributors") { fetchLeaderboardData(); } }, [activeTab]); + // Load initial demo data if no data exists + useEffect(() => { + if (leaderboardData.length === 0) { + const initialData: LeaderboardEntry[] = [ + { + rank: 1, + name: "sanjay-kv", + username: "sanjay-kv", + avatar: "https://avatars.githubusercontent.com/u/30715153?v=4", + contributions: 250, + repositories: 25, + score: 2500, + achievements: ["Top Contributor", "Founder", "Maintainer"], + github_url: "https://github.com/sanjay-kv", + streak: 15, + postManTag: false, + web3hack: false, + weeklyContributions: 35, + monthlyContributions: 120, + }, + { + rank: 2, + name: "vansh-codes", + username: "vansh-codes", + avatar: "https://avatars.githubusercontent.com/u/114163734?v=4", + contributions: 180, + repositories: 22, + score: 1800, + achievements: ["Rising Star", "Active Contributor", "Star Contributor"], + github_url: "https://github.com/vansh-codes", + streak: 8, + postManTag: false, + web3hack: false, + weeklyContributions: 25, + monthlyContributions: 85, + }, + { + rank: 3, + name: "Hemu21", + username: "Hemu21", + avatar: "https://avatars.githubusercontent.com/u/106808387?v=4", + contributions: 120, + repositories: 18, + score: 1200, + achievements: ["Power User", "Star Contributor", "Consistent"], + github_url: "https://github.com/Hemu21", + streak: 5, + postManTag: false, + web3hack: false, + weeklyContributions: 18, + monthlyContributions: 60, + }, + ]; + setLeaderboardData(initialData); + } + }, [leaderboardData.length]); + // Discussion handlers const handleDiscussionTabChange = (tab: DiscussionTab) => { setActiveDiscussionTab(tab); @@ -675,7 +731,7 @@ const DashboardContent: React.FC = () => { }; const handleTabChange = ( - tab: "home" | "discuss" | "leaderboard" | "giveaway" | "contributors" + tab: "home" | "discuss" | "giveaway" | "contributors" ) => { setActiveTab(tab); setIsMobileSidebarOpen(false); // Close mobile sidebar @@ -683,9 +739,6 @@ const DashboardContent: React.FC = () => { if (tab === "discuss") { history.push("#discuss"); window.scrollTo(0, 0); - } else if (tab === "leaderboard") { - history.push("#leaderboard"); - window.scrollTo(0, 0); } else if (tab === "giveaway") { history.push("/dashboard/giveaway"); } else if (tab === "contributors") { @@ -777,7 +830,7 @@ const DashboardContent: React.FC = () => { >

    GitHub API Rate Limit Reached

    - We've temporarily reached the GitHub API rate limit. The leaderboard + We've temporarily reached the GitHub API rate limit. The contributors page will automatically refresh when the limit resets.

    {retryTimer && ( @@ -981,20 +1034,7 @@ const DashboardContent: React.FC = () => { Discuss -
    { - handleTabChange("leaderboard"); - setShowDashboardMenu(false); - }} - > - - - - Leaderboard -
    +
    { @@ -1017,7 +1057,7 @@ const DashboardContent: React.FC = () => { }} > - + Contributors
    @@ -1063,17 +1103,7 @@ const DashboardContent: React.FC = () => { Discuss -
  • handleTabChange("leaderboard")} - > - - - - Leaderboard -
    • +
  • handleTabChange("giveaway")} @@ -1090,7 +1120,7 @@ const DashboardContent: React.FC = () => { onClick={() => handleTabChange("contributors")} > - + Contributors
    • @@ -1114,22 +1144,7 @@ const DashboardContent: React.FC = () => { } ${isSidebarCollapsed ? "sidebar-collapsed" : ""}`} onClick={() => isSidebarCollapsed && setIsSidebarCollapsed(false)} > - {activeTab === "leaderboard" ? ( - /* Leaderboard Tab */ - -
    -

    - RecodeHive Leaderboard -

    -

    Coming soon...

    -
    -     - ) : activeTab === "home" ? ( + {activeTab === "home" ? ( // Home tab content
    { >

    - Top Contributors Leaderboard + Top Contributors Board

    Celebrating our most active community members who make @@ -1605,7 +1620,7 @@ const DashboardContent: React.FC = () => { )}

    - Showing cached data below. The leaderboard will + Showing cached data below. The contributors page will automatically refresh when possible.