
This freelance project involved building a professional **trading education platform** for **Irone Ilagan (Rone Trades)** — a futures trader focused on disciplined, data-driven execution using ICT (Inner Circle Trader) concepts.

The website serves as a **lead generation platform** and **educational hub**, designed to attract aspiring traders, showcase real trading results, and convert visitors into community members.

---

## 🏠 Hero & Introduction

![Rone Trades homepage](/assets/ronetrades-hero.png)

The homepage immediately communicates the value proposition with a bold tagline:  
**"Trade Liquidity. Get Funded. Get Paid."**

Key highlights:  
- **Custom plasma background animation** using WebGL (OGL library)  
- **Embedded video player** showcasing live trading sessions  
- Clear value propositions: Live Trading, Structured Education, Real-time Support  
- **7-day free trial CTA** to drive conversions  

The design is clean, minimal, and professional — focusing on credibility over hype.

---

## 👤 About Section

![About Rone Trades](/assets/ronetrades-about.png)

The about section introduces **Irone Ilagan** and his trading philosophy:  
- Futures trader focused on **disciplined, data-driven execution**  
- Trades live in real market conditions with emphasis on **risk management**  
- Streams live trades on **YouTube** with real-time breakdowns  
- Trades using **Apex Trader Funding** (affiliate partnership)  

This section builds trust by showing authenticity — no fake screenshots, just real trading.

---

## 📚 The Program

![Program features](/assets/ronetrades-program.png)

The education program is structured around **5 core pillars**:

| Feature | Description |
|---------|-------------|
| **Weekly Live Trade Sessions** | Real-time trading with entries, exits, and risk management |
| **Premarket Bias & Analysis** | Daily directional bias and key levels before market open |
| **Post-Trade Review & Breakdown** | Analysis of what went right/wrong with psychology focus |
| **1:1 Coaching Sessions** | Personalized feedback on trades and strategy refinement |
| **Hands-On Live Q&A** | Interactive learning with direct answers during sessions |

This isn't passive education — members are actively involved in the learning process.

---

## 💬 Testimonials & Success Stories

![Member testimonials](/assets/ronetrades-testimonials.jpg)

Real payout screenshots from community members showcase verified results:  
- **TopStep payouts** ($3,000+)  
- **Apex Trader Funding** accounts and payouts  
- **FundingTicks** payouts  
- **Tradovate funded accounts** ($50k+)  

Each testimonial includes the member's name, date, and actual payout amount — building social proof and credibility.

---

## 📧 Newsletter Integration

![Newsletter signup](/assets/ronetrades-newsletter.png)

The newsletter section captures leads through:  
- **Brevo (Sendinblue) API** integration for email marketing  
- Email validation with proper error handling  
- Clean, animated form with GSAP scroll effects  

This turns casual visitors into warm leads for the trading program.

---

## 🛠️ Tech Stack

- **Next.js 16** — Latest React framework with App Router  
- **TailwindCSS v4** — Modern utility-first styling  
- **Framer Motion** — Smooth page animations  
- **GSAP + ScrollTrigger** — Advanced scroll-based animations  
- **OGL (WebGL)** — Custom plasma background effects  
- **Brevo API** — Email newsletter integration  
- **Vercel** — Optimized hosting with edge deployment  

---

## ✨ Notable Features

- **Custom video player** with poster image support  
- **Responsive design** optimized for all screen sizes  
- **Smooth scroll navigation** with GSAP  
- **Animated UI components** (plasma background, hover effects)  
- **Image modal gallery** for testimonial screenshots  
- **SEO optimized** with sitemap generation  
- **Performance focused** — fast load times and smooth animations


A professional website for Irone Ilagan, showcasing his futures trading expertise, live trading sessions, and structured ICT education program.

Rone Trades — Futures Trading Education & Community


**Rewind** is a client-side web application that transforms your Facebook data archive into a beautiful, explorable timeline experience. Built with **privacy-first principles**, all processing happens entirely on your device — nothing is ever uploaded to external servers.

The application allows users to upload their Facebook ZIP archive and view their **Stories, Timeline Posts, Photos, and Videos** in a clean, organized interface that brings back memories in a meaningful way.

---

## 🏠 Upload & Privacy

![Upload Interface](/assets/upload-interface.png)

The landing page emphasizes **privacy and security**:

- **Local Processing Only** — Your files never leave your device
- **ZIP Archive Support** — Direct upload of Facebook's data export
- Clear instructions for exporting Facebook data
- **Fair Warning** — Transparent about processing time (30 minutes to several hours)

The interface guides users through the Facebook export process, ensuring they select the right data (Posts and Stories) for the best experience.

---

## 📸 Stories Experience

![Stories Grid View](/assets/stories.png)

The Stories section recreates the familiar Facebook Stories experience:

- **Grid Layout** with story thumbnails and metadata
- **Date Range Filtering** — Filter stories by specific time periods
- **Story Count Display** — Shows total stories available (e.g., 2498 stories)
- **Media Preview** — Video and photo stories with play indicators
- **Story Details** — Original timestamps and context

Users can relive their Facebook Stories journey, seeing how their content evolved over time.

---

## 📱 Timeline View

![Timeline Interface](/assets/timeline.png)

The Timeline section provides a chronological view of Facebook activity:

- **Date-based Organization** — Posts grouped by dates (e.g., "SUN SEP 14 2025")
- **Rich Media Display** — Photos, videos, and text posts in their original format
- **Filter Options** — All, Photos, Videos for focused browsing
- **User Attribution** — Shows original poster and timestamps
- **Responsive Design** — Works seamlessly across desktop and mobile

This recreates the familiar Facebook timeline experience with enhanced privacy.

---

## 🎨 User Interface

The application features a **modern, dark-themed interface**:

- **Purple Accent Colors** — Consistent branding throughout
- **Card-based Layout** — Clean separation of content
- **Smooth Animations** — Engaging transitions and interactions
- **Mobile Responsive** — Optimized for all screen sizes
- **Accessibility Features** — Proper contrast and navigation

The design focuses on content discovery while maintaining visual hierarchy and ease of use.

---

## 🔒 How to export facebook data

![Instructions](/assets/modal.png)

**Privacy & Processing — As Shown in the Export Guide**:

- **Runs Entirely in Your Browser** — Just like the modal explains, your Facebook ZIP is processed locally and never sent anywhere.
- **No Uploads, No Servers** — There’s no backend involved in any step shown in the guide.
- **Nothing Is Tracked or Stored** — No analytics, no logs, no hidden data collection.

Everything shown in this dialog is designed to help users export the correct data while keeping full ownership and control of their information start to finish. 

---

## 📊 Data Insights

The application processes and displays:

- **Story Archives** — All Facebook Stories with media and timestamps
- **Timeline Posts** — Status updates, photos, videos, and shared content
- **Media Organization** — Automatic categorization of photos and videos
- **Date Filtering** — Explore content by specific time ranges
- **Search Capabilities** — Find specific content within your archive

---

## 🛠️ Tools & Technologies

- **React** — Component-based UI framework
- **Vite** — Fast development and build tool
- **Tailwind CSS** — Utility-first styling framework
- **JavaScript** — Client-side ZIP processing and parsing
- **HTML5 File API** — Secure local file handling
- **CSS Grid & Flexbox** — Responsive layout systems

---

## 🌟 Key Features

**Privacy-First Design** — All processing happens locally, ensuring complete data privacy

**Rich Media Support** — Handle photos, videos, and text content from Facebook archives

**Timeline Recreation** — Familiar Facebook-like interface for easy navigation

**Date Range Filtering** — Explore specific time periods in your social media history

**Responsive Design** — Works seamlessly across desktop, tablet, and mobile devices

**No Dependencies on External Services** — Complete offline functionality after initial load

---

## 🎯 Project Impact

This project addresses growing privacy concerns around social media data while providing users with a meaningful way to explore their digital memories. It demonstrates that powerful data visualization and processing can be achieved entirely client-side, without compromising user privacy.

For developers, it showcases advanced client-side file processing, modern React patterns, and privacy-conscious application architecture.

A privacy-focused web application that lets you explore your Facebook archive data in a beautiful, organized interface without uploading anything to external servers.

Rewind — Facebook Archive Viewer


Exzort Gear is a modern, headless e-commerce platform designed to deliver a premium shopping experience for tech enthusiasts.
Built with cutting-edge web technologies, this project demonstrates the power of **Next.js 16**, **Shopify Storefront API**, and **Server Components** to create a fast, SEO-friendly, and user-centric online store.

The platform features a complete shopping experience from product browsing to order tracking, all while maintaining exceptional performance and developer experience through **TypeScript** and **Tailwind CSS**.

---

## 🛍️ Product Catalog & Search

The heart of any e-commerce platform is its product discovery system. Exzort Gear implements:

- **Dynamic Product Pages** with variant selection (size, color, etc.)
- **Real-time Search** with debounced input (400ms delay for optimal UX)
- **Collection Browsing** organized by categories
- **Server-Side Rendering** for optimal SEO and performance

### Intelligent Search Implementation

```typescript
// Debounced search with smart navigation
useEffect(() => {
  if (!isSearchOpen) return;

  const timer = setTimeout(() => {
    const currentQuery = searchParams.get('q') || '';
    const newQuery = searchQuery.trim();
    
    if (newQuery !== currentQuery) {
      if (!isSearchPage) {
        router.push(`/search${newQuery ? `?q=${encodeURIComponent(newQuery)}` : ''}`);
      } else {
        const url = new URL(window.location.href);
        if (newQuery) {
          url.searchParams.set('q', newQuery);
        } else {
          url.searchParams.delete('q');
        }
        window.history.replaceState({}, '', url.toString());
        router.replace(url.pathname + url.search);
      }
    }
  }, 400);

  return () => clearTimeout(timer);
}, [searchQuery, router, isSearchOpen, isSearchPage, searchParams]);
```

The search system automatically updates results as users type, with no need to press Enter, creating a seamless discovery experience.

---

## 🛒 Smart Shopping Cart

![Shopping Cart Interface](/assets/cart-review.png)

The shopping cart is built with modern state management principles:

- **LocalStorage Persistence** — Cart items survive page refreshes
- **Real-time Updates** — Instant quantity adjustments
- **Price Calculations** — Dynamic subtotal, tax (10%), and total display
- **Responsive Design** — Optimized for all device sizes

```typescript
export const useCart = () => {
  const [cart, setCart] = useState<Cart>({
    items: [],
    total: 0,
    itemCount: 0,
    currency: 'USD'
  });

  // Load cart from localStorage on mount
  useEffect(() => {
    const savedCart = localStorage.getItem(CART_STORAGE_KEY);
    if (savedCart) {
      setCart(JSON.parse(savedCart));
    }
  }, []);

  // Persist cart to localStorage on changes
  useEffect(() => {
    localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(cart));
  }, [cart]);
};
```

---

## 💳 Seamless Checkout Experience

![Checkout Flow](/assets/checkout-preview.png)

The checkout process is designed for conversion with:

- **Multi-step Form Validation** — Contact, Shipping, and Payment sections
- **Demo Payment Mode** — No real transactions for development/demo purposes
- **Order Confirmation** — Instant feedback with order numbers
- **Email Integration** via Resend API for order notifications

### Demo-Safe Payment Processing

```typescript
const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();
  setIsProcessing(true);

  // Simulate payment processing
  await new Promise(resolve => setTimeout(resolve, 2000));

  // Create order with tracking number
  const orderNumber = generateOrderNumber();
  const trackingNumber = generateTrackingNumber();
  
  const order: Order = {
    id: crypto.randomUUID(),
    orderNumber,
    date: new Date().toISOString(),
    status: 'processing',
    customer: { email, firstName, lastName },
    shippingAddress: { address, city, postalCode, country },
    items: cart.items.map(item => ({ ...item })),
    total: cart.total * 1.1,
    trackingNumber,
  };

  saveOrder(order);
  clearCart();
  router.push(`/checkout/success?orderNumber=${orderNumber}`);
};
```

A prominent **Demo Notice** ensures users understand no real payments are processed, making it safe for testing and demonstrations.

---

## 📦 Order Tracking System

![Order Tracking Dashboard](/assets/orders-preview.png)

One of the standout features is the comprehensive **Order Management System**:

### Order Status Timeline
- 🟡 **Pending** — Order placed, awaiting processing
- 🔵 **Processing** — Order is being prepared
- 🟣 **Shipped** — Order dispatched with tracking number
- 🟢 **Delivered** — Order successfully delivered
- 🔴 **Cancelled** — Order was cancelled

### Key Features

- **Email-based Search** — Find all orders by customer email
- **Order Details Page** — Complete view with timeline, items, and shipping info
- **Tracking Numbers** — Auto-generated for each order
- **LocalStorage Persistence** — Orders saved in browser for demo purposes
- **Copy to Clipboard** — Quick copy for order numbers and tracking IDs

```typescript
export const saveOrder = (order: Order): void => {
  if (typeof window === 'undefined') return;
  
  const orders = getOrders();
  orders.push(order);
  localStorage.setItem(ORDERS_STORAGE_KEY, JSON.stringify(orders));
};

export const generateOrderNumber = (): string => {
  const timestamp = Date.now().toString(36).toUpperCase();
  const random = Math.random().toString(36).substring(2, 6).toUpperCase();
  return `ORD-${timestamp}-${random}`;
};
```

---

## 📧 Contact Form with Email Integration

![Contact Page](/assets/contact-preview.png)

The contact form uses **Resend API** for direct email delivery:

- **No Email Client Required** — Emails sent directly from the form
- **Professional Templates** — HTML-formatted emails with contact details
- **Success/Error Feedback** — Clear user feedback on submission status
- **Reply-to Address** — Automatically set to sender's email

### API Route Implementation

```typescript
import { Resend } from 'resend';
import { NextResponse } from 'next/server';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(request: Request) {
  const { name, email, company, message } = await request.json();

  const data = await resend.emails.send({
    from: 'Contact Form <onboarding@resend.dev>',
    to: ['quibelkenneth@gmail.com'],
    subject: `Contact from ${name} - ${company}`,
    replyTo: email,
    html: `
      <div style="font-family: Arial, sans-serif;">
        <h2>New Contact Form Submission</h2>
        <p><strong>Name:</strong> ${name}</p>
        <p><strong>Email:</strong> ${email}</p>
        <p><strong>Company:</strong> ${company}</p>
        <p><strong>Message:</strong></p>
        <p>${message}</p>
      </div>
    `,
  });

  return NextResponse.json({ success: true, data });
}
```

---

## 🎨 Modern UI/UX Design

The entire platform is built with a **minimalist, dark-mode-first** design philosophy:

- **Responsive Grid Layouts** — Adapts from mobile to 4K displays
- **Smooth Animations** — Fade-in effects and transitions throughout
- **Hover States** — Interactive feedback on all clickable elements
- **Accessibility** — Proper ARIA labels and keyboard navigation
- **Dark Mode Support** — Seamless light/dark theme switching

```css
/* Tailwind CSS utility patterns used throughout */
.hover-lift {
  @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}
```

---

## 🛠️ Tools & Technologies

**Frontend Framework**
- **Next.js 16** — Latest React framework with App Router and Server Components
- **React 19** — Cutting-edge React features
- **TypeScript** — Full type safety across the codebase

**Styling & UI**
- **Tailwind CSS v4** — Utility-first CSS framework
- **Lucide React** — Beautiful, consistent icon set
- **Custom Animations** — Smooth transitions and interactions

**E-Commerce Backend**
- **Shopify Storefront API** — Headless commerce integration
- **GraphQL** — Efficient data fetching
- **Resend API** — Transactional email service

**State & Data**
- **React Hooks** — Custom hooks for cart and state management
- **LocalStorage API** — Client-side persistence for cart and orders
- **Context API** — Global state management for cart

**Deployment & Infrastructure**
- **Vercel** — Edge deployment and CDN
- **Git** — Version control
- **Environment Variables** — Secure API key management

---

## 🚀 Performance Optimizations

- **Server Components** — Reduced JavaScript bundle size
- **Image Optimization** — Next.js Image component with lazy loading
- **Code Splitting** — Automatic route-based splitting
- **Edge Runtime** — Fast response times globally
- **Static Generation** — Pre-rendered pages where possible
- **Debounced Search** — Prevents unnecessary API calls

---

## 🌟 Key Impact

Exzort Gear showcases how modern web technologies can create an e-commerce experience that rivals major platforms while maintaining clean code, excellent performance, and developer-friendly architecture.

By leveraging **Next.js Server Components**, **Shopify's headless API**, and thoughtful UX design, this project demonstrates:

- **Full-stack TypeScript** development
- **Headless e-commerce** architecture
- **Production-ready** features (search, cart, checkout, orders)
- **Scalable** state management patterns
- **Modern** design principles

The platform is built to be easily extended with features like user authentication, wishlists, product reviews, and advanced filtering—making it a solid foundation for any e-commerce venture.

---

## 📱 Live Demo

Experience the platform: [exzort-gear.vercel.app](https://exzort-gear.vercel.app)

**Demo Features Available:**
- Browse real Shopify products
- Add items to cart
- Complete checkout flow (no real payment)
- Track demo orders
- Search products in real-time
- Submit contact form

---

## 👨‍💻 Developer Experience

The codebase prioritizes maintainability and developer experience:

```typescript
// Type-safe product interface
interface Product {
  id: string;
  title: string;
  handle: string;
  availableForSale: boolean;
  priceRange: {
    minVariantPrice: {
      amount: number;
      currencyCode: string;
    };
  };
  images: Array<{
    url: string;
    altText?: string;
  }>;
}

// Custom hook pattern for reusable logic
const { cart, addToCart, removeFromCart, updateQuantity, clearCart } = useCart();
```

Clean separation of concerns, reusable components, and comprehensive TypeScript types make the codebase a joy to work with and extend.


A high-performance headless e-commerce platform built with Next.js 16 and Shopify Storefront API, featuring real-time search, order tracking, and seamless checkout experience.

Exzort Gear — Modern E-Commerce Platform


This project is a **full-stack scoring system** built for **Mister & Miss Linggo ng Kabataan 2025**.  
It’s designed to be reliable in a **live event** setting: **admins** control the competition flow, **judges** enter scores on separate devices, and results update in **real time** for the admin dashboard and final reports.

Below I’ll walk through the main pages and explain what each part does, why it matters, and the technical choices behind them.

## Login Page

![Login Page Screenshot](/assets/login.png)

The **Admin Dashboard** is the event control center. Admins manage contestants and judges, control rounds, monitor scoring progress, and finalize results.

## Key features showcased

- **Email & password** fields  
- Password **visibility toggle** (eye icon)  
- **Role-based redirect** after successful sign-in  

## Why this matters
Securing access and clearly separating **roles** prevents unauthorized actions (e.g., a judge accessing admin controls). The UX elements (eye icon, loading, friendly errors) improve usability during a **high-pressure event**.

## Admin Dashboard

![Admin Dashboard](/assets/admin.png)

The **Admin Dashboard** is the event control center. Admins manage **contestants** and **judges**, control rounds, monitor scoring progress, and finalize results.

## Core capabilities
• **Contestant Management** — create / edit / delete contestants, upload photo (Cloudinary), set contestant number and metadata.  

• **Judge Management** — create judge accounts, reset passwords, see online status.  

• **Round Control** — lock/unlock segments (Production, Sportswear, Q&A, Formal). Unlocking a round immediately notifies judges and makes the scoring UI visible to them.  

• **Live Score Monitor** — live average and weighted totals for each contestant, submission status per judge (✓/✗).  

• **Top 5 & Finalization** — the system auto-ranks contestants after rounds and can mark the Top 5 for the final judging stage.  

• **Export** — PDF/Excel export of raw scores and final tallies.  

## Why this matters
Centralized control with **live visibility** is essential for transparency and fairness. Admins can monitor who submitted scores and intervene if corrections are needed.

![Contestant CRUD](/assets/contestant.png)

Contestant creation includes an **image uploader (Cloudinary)**. Images are stored there and the returned URL saved in **MongoDB**. The form validates inputs and shows previews so the admin can confirm before saving.

## Judge Panel
![Judge](/assets/judge.jpg)

## Purpose
The **Judge Panel** is intentionally minimal and focused: judges see only the currently unlocked round and the list of contestants assigned. The scoring form includes each **criterion** and auto-calculates the **weighted score live** (so judges see the impact of their inputs before submitting).

### Judging flow (example)

Production Number — criteria:  
• **Synchronization & Energy** — 1–10 (10% weight)  
• **Stage Presence & Confidence** — 1–10 (10% weight)  
• **Showmanship** — 1–10 (5% weight)  

Total for the round = **25% of final score**.

### Once a judge submits:
- The score is persisted to **MongoDB**.  
- An **Ably (realtime)** event is broadcast so the admin dashboard updates instantly.  
- The judge’s submission becomes **locked** (admin can re-open if edits are allowed).  

## Top 5 Final Round
![Top 5](/assets/top5.jpg)

### Final round specifics
• Only **Top 5 contestants** are displayed.  
• Criteria are scored 1–10 (**Poise, Walk, Eye contact, Facial expression, X-factor**).  
• Scores are tallied in **real time** and reflect immediately on the admin live ranking.  

## Technical summary (why these tools)
• **Next.js (App Router)** — fast, server/client rendering, easy API routes.  
• **MongoDB** — flexible document model for contestants, judges, rounds, and scores.  
• **NextAuth (Credentials)** — role-based authentication (admin, judge).  
• **Ably** — real-time pub/sub to broadcast round lock/unlock and score updates.  
• **Cloudinary** — secure image upload and optimized delivery for contestant photos.  
• **pdfmake (or jsPDF) & xlsx** — generate printable PDF and Excel reports.  

### Data model (high level)
```python
users (judges, admins) — { email, name, passwordHash, role }
contestants — { name, number, barangay, photoUrl, ... }
rounds — { name, weights, isLocked }
scores — { judgeId, contestantId, roundId, criteria: {..}, totalScore }


A Next.js + MongoDB real-time scoring system built for Mister & Miss Linggo ng Kabataan 2025 — admin controls, judge panels, live tallying, and printable reports.

MM LNK 2025 — Real-time Pageant Scoring System


This project was developed during my internship at the **Center for Culture and Arts Development – Bohol (CCAD)**.  
The goal was to create a modern website where **cultural identity, programs, events, and news** can be shared with the Boholano community in an organized and sustainable way.

The system is powered by **Next.js, MongoDB, NextAuth, and Cloudinary** — giving CCAD admins an easy-to-use CMS while presenting the public with a clean and accessible interface.

---

## 🏠 Home Page

![CCAD's Mission and Vision](/assets/vision.jpg)

The homepage highlights **Vision, Mission, and Mandates**, ensuring that the public understands CCAD’s foundation and advocacy at first glance.  

It also dynamically displays:

- **News and Events** (auto-synced from the admin dashboard)  
- **Programs and Initiatives** (organized by year and category)  
- **CCAD Logo & Identity** for cultural branding  

This makes the site not only informational but also aligned with CCAD’s cultural identity.

---

## 📢 News & Events

![CCAD's News and Updates](/assets/news.jpg)

The News and Events sections ensure the **community stays updated**:  
- **News articles** with titles, dates, and rich content  
- **Upcoming and past events** with descriptions, images, and schedules  
- Stored images are uploaded to **Cloudinary** for optimized delivery  

This allows CCAD to showcase cultural activities such as **Sandugo Festival workshops, assemblies, and local performances.**

---

## 🎭 Programs

![CCAD's Program](/assets/programs.jpg)

Programs are categorized into:  
- **Artistic Development Programs**  
- **Culture & Development Programs**  
- **Cultural Heritage Programs**  
- **Culture & Governance**  

Each program contains **year-based archives** (e.g., 2023, 2024, 2025), with details such as event descriptions, images, and outcomes.  
When a program is opened, visitors can see event details, gallery images, and background about its cultural significance.

---

## 🏛️ BACH Council Section

![BACH council](/assets/bach.jpg)

The **Bohol Arts and Cultural Heritage (BACH) Council** section introduces the **organizational structure, officers, and duties**.  

It provides:  
- Profiles of board members and section heads  
- Council mandates and objectives  
- Duties and functions that guide heritage preservation and arts development  

This creates transparency and strengthens cultural governance.

---

## ⚙️ Admin Dashboard

![CCAD's Admin](/assets/adminccad.png)

Admins manage all content with ease through the **CCAD Admin Panel**, which includes:  
- Banner Management  
- News Management  
- Events Management  
- Programs Management  
- BACH Council Management  
- "What is CCAD" content management  

Built with **NextAuth authentication**, the system ensures only authorized staff can log in and manage cultural content.

---

## 🛠️ Tools & Technologies

- **Next.js** — frontend & backend framework  
- **MongoDB** — content storage & program archives  
- **NextAuth** — secure authentication for admins  
- **Cloudinary** — optimized image hosting & delivery  
-- **Vercel** - for deployment
---

## 🌟 Key Impact

This project gave CCAD a **centralized, professional platform** to promote Bohol’s culture and arts.  
For me, it was a chance to apply **full-stack development skills** during my internship and deliver a system that has real-world cultural impact.



A dynamic content management system for the Center for Culture and Arts Development – Bohol (CCAD), built during my internship.

CCAD — Cultural & Arts Development Website


VineBot is an chatbot agent developed to serve the **Blessed Vineyard Ministry**.
The goal was to create an accessible, digital spiritual companion that can answer questions regarding the ministry's vision, worship practices, and biblical teachings in real-time.

The core intelligence is powered by a **Fine-Tuned Mistral 7B model** integrated with **Retrieval-Augmented Generation (RAG)**. This ensures that the bot doesn't just generate generic text, but provides accurate, context-aware answers based on specific ministry documents and scriptures.

The dataset used is the Ministry Manual of **Blessed Vineyard Ministry**.

---

## 🤖 Intelligent Chat Interface
![Chatbot Dashboard ](/assets/chatbotDashboard.png)


The user interface is designed for focus and clarity, featuring a modern dark-themed design.
Upon logging in, users are greeted with **suggested prompts** to help them get started, such as:

- "What is the vision of the ministry?"
- "What is the product ministry?"
- "How to do the activities and events?"

The system also features **Chat History Management**, allowing users to **Rename** or **Delete** previous conversations, ensuring a personalized and organized experience.

---

## 🧠 RAG-Powered Responses

```python
import faiss
DATA_DIR = os.path.join(os.path.dirname(__file__), "data")
INDEX_PATH = os.path.join(DATA_DIR, "******.index")
DOCS_PATH  = os.path.join(DATA_DIR, "******.pkl")

DATA_DIR = os.path.join(os.path.dirname(__file__), "data")
INDEX_PATH = os.path.join(DATA_DIR, "******.index")
DOCS_PATH  = os.path.join(DATA_DIR, "******.pkl")

embedder = SentenceTransformer('all-MiniLM-L6-v2')  

index = faiss.read_index(INDEX_PATH)

with open(DOCS_PATH, "rb") as f:
    docs = pickle.load(f)


def retrieve_context(query: str, top_k: int = 3) -> str:
    q_vec = embedder.encode([query]).astype(np.float32)
    D, I = index.search(q_vec, top_k)
    chunks = [docs[i] for i in I[0] if 0 <= i < len(docs)]
    return "\n".join(chunks) if chunks else "No relevant context found."

bnb_config = BitsAndBytesConfig(
    load_in_8bit=True,
    llm_int8_enable_fp32_cpu_offload=True
)
```

Unlike standard chatbots, VineBot utilizes **RAG (Retrieval-Augmented Generation)**.
When a user asks a theological or organizational question, the system:
1.  **Retrieves** relevant context from the ministry's knowledge base.
2.  **Generates** a coherent, spiritually grounded response using the **Mistral 7B** model.

This ensures that answers—like the definition of the ministry's vision shown above—are consistent with the church's specific doctrines and values.

---

## 🔐 Secure Authentication

![Login Screen](/assets/login2.png)

Security and identity management are handled via a robust authentication system.
Users can access the platform using:
- **Google OAuth Integration** for one-click sign-in.
- Standard email/password credentials.
- A secure "Sign Up" flow for new community members.

The quoting of **Ephesians 4:12** on the login screen sets the tone for the application, reminding users of the tool's purpose: *"To equip his people for works of service."*

---

## 👥 Admin & User Management

![Admin Dashboard](/assets/adminDashboard.png)

Administrators have full control over the platform through a dedicated **Admin Dashboard**.
Key features include:

- **User Overview:** View all registered users, their roles (Admin/User), and account status.
- **CRUD Operations:** Admins can **Add**, **Edit**, or **Delete** users as needed.
- **Role Assignment:** Manage permissions to ensure only authorized personnel have admin access.

![Edit User Modal](/assets/editUser.png)

The interface allows for quick updates to user details, ensuring the community database remains accurate and up-to-date.

---

## ⭐ Feedback & Ratings System

![User Ratings Admin View](/assets/adminRatings.png)

To ensure the AI provides high-quality responses, a **Feedback Loop** is integrated directly into the chat.
After receiving an answer, users can rate their experience (1-5 stars) and provide text feedback.

Admins can monitor these ratings via the dashboard to:
- Identify areas where the AI needs re-training.
- Review user satisfaction.
- Ensure the bot remains helpful and accurate.

---

## 🛠️ Tools & Technologies

- **Mistral 7B** — The core Large Language Model (LLM), fine-tuned for better instruction following.
- **RAG (Retrieval-Augmented Generation)** — For connecting the AI to specific ministry data.
- **Python/Django** — Backend server for handling requests and user management.
- **Neon Serverless Postgres** — Database.
- **Tailwind CSS** — For the responsive, dark-mode UI.

---

## 🌟 Key Impact

VineBot represents the intersection of **Faith and Technology**.
By implementing advanced AI techniques like **RAG**, this project moves beyond simple automation to create a tool that genuinely understands and serves the specific needs of the ministry, making spiritual guidance accessible 24/7.

A specialized AI chatbot built with a fine-tuned Mistral 7B model and RAG architecture to provide biblical guidance and ministry information.

VineBot — Ministry AI Assistant


This freelance project involved building a professional **portfolio and community hub** for **Nicole (Icarus)** — a Computer Engineering student, crypto trader, and founder of **Icarus Falls**.  

The website serves as both a **personal brand platform** and a **gateway to her trading community**, designed to attract new members, showcase achievements, and provide access to educational resources.

---

## 🏠 Landing & About

![Icarus homepage](/assets/icarus2.jpg)

The homepage introduces Icarus with her **background, story, and crypto journey** since 2019.  
Key highlights:  
- Introduction of **Icarus Falls (founded 2022)**  
- Experience as a **funded trader**  
- Advocacy for **blockchain education for Filipinos**  
- A section showing **partnered firms and platforms**  

This sets credibility and creates trust for new visitors.

---


## 🔒 Fuyu Lab (VIP Section)

![Fuyu](/assets/fuyu.png)

Fuyu Lab is a **VIP trading community under Icarus Falls**, exclusively for members who register via **OKX and BingX referral links**.  

Features include:  
- **Live Mentorship Sessions**  
- **15–25 Trading Signals per month** (Crypto, Forex, Indices)  
- **Weekly Outlooks & Market Analysis**  
- **Exclusive Campaigns & Giveaways** (with BingX & OKX)  
- **1-on-1 Mentorship** (donation-based, supporting Angat Buhay NGO)  
- **Merchandise & Community Perks**  

This section turns the website into a **conversion funnel**, guiding casual visitors toward becoming active, engaged VIP members.


## 🛠️ Tech Stack

- **Next.js** — frontend framework for performance & SEO  
- **TailwindCSS** — fast, responsive styling  
- **Static & Dynamic Content Integration** — for community updates & testimonials  
- **Vercel** — optimized hosting with smooth delivery  



A portfolio website for Nicole (Icarus), showcasing her crypto journey, community, and educational initiatives.

0xIcarus — Crypto Community & Trading Hub


**Teamdir** is a **social networking platform** built specifically for **Valorant players**.  
It allows gamers to create accounts, post updates, follow others, and connect to form teams.  

The platform is powered by **Next.js** for frontend + backend integration, **MongoDB with Prisma ORM** for robust data handling, and **Vercel** for seamless deployment.

🔗 **Live Demo:** [teamdir.vercel.app](https://teamdir.vercel.app/)  
**Test Account:** `demo@gmail.com` / `demo567`

---

## 🏠 Home Feed

![Teamdir Homepage](/assets/teamdirhome.jpg)

The **Home page** serves as the community feed, where users can:  
- Post updates (thoughts, team invites, or Valorant-related content)  
- Interact with others via likes and comments  
- Scroll through recent posts from fellow players  

This creates a **familiar social experience** tailored for the Valorant community.

---

![Profile](/assets/profile.jpg)
## 👤 Profile & Social Features

Users can:  
- Create an account and customize their profile  
- Follow/unfollow other players  
- View suggested users in the **“Who to Follow”** sidebar  

This makes networking and **finding teammates** easy and engaging.

---

![Notifications](/assets/notif.jpg)
## 🔔 Notifications

The **notification system** keeps users updated on:  
- New followers  
- Likes and comments on their posts  
- Relevant updates within the community  

This ensures players **stay connected and engaged**.

---

## 🛠️ Tech Stack

- **Next.js** — frontend + backend in one framework  
- **Prisma ORM** — database queries with type safety  
- **MongoDB** — NoSQL storage for users, posts, and interactions  
- **TailwindCSS** — styling for a clean, responsive UI  
- **Vercel** — fast deployment and hosting  

---

## 🎯 Impact

**Teamdir** provides Valorant enthusiasts with a **dedicated social hub** — something general platforms like Twitter or Facebook don’t fully offer.  

It helps players:  
- Build their **gaming identity**  
- Connect with others for **scrims and ranked play**  
- Stay active in a **like-minded gaming community**  

For me, this project was an opportunity to **combine social networking concepts** with **gaming culture**, using a modern full-stack setup (Next.js, Prisma, MongoDB).

---



A Next.js + MongoDB social hub for Valorant players to connect, form teams, and share updates. Built with Prisma ORM and deployed on Vercel.

My Projects