Rayan Karim Checa

Rayan Karim Checa — Personal Portfolio

A modern, responsive portfolio website built with Next.js 14, featuring a 3D animated hero, smooth scroll animations, and a dark theme.

Live Site: rayancheca.vercel.app (deploy to Vercel to go live)

---

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Animation: Framer Motion
• 3D Graphics: React Three Fiber + Three.js
• Icons: Lucide React + Custom SVG
• Contact Form: EmailJS
• Deployment: Vercel

---

Features

• 3D animated particle background (React Three Fiber)
• Typewriter effect for dynamic role cycling
• Cursor spotlight effect that follows mouse
• Smooth scroll animations on all sections
• Project filtering by category (Systems, Security, iOS, Web)
• Live GitHub stats (stars, last updated)
• Working contact form via EmailJS
• Fully responsive (mobile-first)
• Dark theme with accent colors

---

Quick Start

# Clone the repo
git clone https://github.com/rayancheca/rayancheca.github.io.git
cd rayancheca.github.io

# Install dependencies
npm install

# Start development server
npm run dev

# Open http://localhost:3000

---

Deployment

Option 1: Vercel (Recommended)

1. Go to vercel.com
2. Click “Import Project”
3. Select the GitHub repo rayancheca/rayancheca.github.io
4. Vercel auto-detects Next.js — just click “Deploy”
5. Done! Your site is live.

Option 2: Vercel CLI

npm install -g vercel
vercel login
vercel --prod

---

Configuration

EmailJS Setup (Contact Form)

1. Create an account at emailjs.com (free tier: 200 emails/month)
2. Add an email service (Gmail, Outlook, etc.)
3. Create an email template with these variables:
   • from_name — sender’s name
   • from_email — sender’s email
   • message — the message content
4. Copy .env.local.example to .env.local
5. Fill in your credentials:

NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key

The form works in demo mode without credentials — it simulates success.

---

Updating Content

Projects

Edit src/lib/projects.ts to add, remove, or modify projects.

{
  id: 'project-id',
  name: 'Project Name',
  description: 'Short description',
  longDescription: 'Detailed description (optional)',
  tech: ['Go', 'React', 'Docker'],
  category: 'systems', // systems | security | ios | web
  github: 'https://github.com/rayancheca/project-name',
  live: 'https://live-demo-url.com', // optional
  featured: true, // shows "Featured" badge
}

About Section

Edit src/components/About.tsx to update bio, interests, or education.

Skills

Edit src/components/Skills.tsx to update skill categories and levels.

Experience

Edit src/components/Experience.tsx to add work experience or education entries.

---

Project Structure

src/
├── app/
│   ├── layout.tsx      # Root layout, fonts, metadata
│   ├── page.tsx        # Home page
│   └── globals.css     # Global styles
├── components/
│   ├── Hero.tsx        # Hero section with 3D background
│   ├── About.tsx       # Bio, education, interests
│   ├── Skills.tsx      # Skills with progress bars
│   ├── Projects.tsx    # Project filter + grid
│   ├── ProjectCard.tsx # Individual project card
│   ├── Experience.tsx  # Timeline
│   ├── Contact.tsx     # Contact form
│   └── ...
├── hooks/
│   ├── useTypewriter.ts    # Typewriter animation
│   └── useGitHubStats.ts   # Fetch repo stats
├── lib/
│   ├── projects.ts     # Project data
│   └── emailjs.ts      # EmailJS config
└── types/
    └── index.ts        # TypeScript types

---

Development

# Start dev server
npm run dev

# Type check
npm run lint

# Build for production
npm run build

# Start production server
npm start

---

License

MIT

---

Built by Rayan Karim Checa with Claude Code