jlucus

Quickstart Guide

Get jlucus.dev up and running in under 5 minutes!

Prerequisites

• Node.js 18.0 or later
• npm or yarn
• Git

Installation

1. Clone the Repository

git clone https://github.com/4eckd/jlucus2.git
cd jlucus2/jlucus2

2. Install Dependencies

npm install

3. Set Up Environment

cp .env.example .env.local

Edit .env.local with your configuration (optional for local dev).

4. Run Development Server

npm run dev

Open http://localhost:3000 in your browser.

Quick Commands

# Development
npm run dev          # Start dev server (http://localhost:3000)

# Building
npm run build        # Production build
npm run build:clean  # Clean build (removes cache first)
npm run start        # Start production server

# Maintenance
npm run clean        # Remove .next, out, cache
npm run clean:all    # Remove .next, out, node_modules
npm run lint         # Run ESLint

Project Structure

jlucus2/
├── src/
│   ├── app/              # Next.js App Router
│   │   ├── layout.tsx    # Root layout
│   │   ├── page.tsx      # Homepage
│   │   └── globals.css   # CSS variables
│   ├── components/
│   │   ├── layout/       # Header, Footer
│   │   ├── sections/     # Hero, Portfolio, Skills, etc.
│   │   └── ui/           # Reusable components
│   ├── data/             # Static content
│   ├── lib/              # Utilities
│   └── styles/           # Global styles
├── public/               # Static assets
└── docs/                 # Documentation

Customization

1. Update Site Info

Edit src/lib/constants.ts:

export const SITE = {
  title: 'Your Name',
  description: 'Your description',
  url: 'https://yoursite.com'
};

2. Modify Colors

Edit src/app/globals.css:

:root {
  --color-primary: 0 217 255;    /* Electric Cyan */
  --color-accent: 255 0 110;     /* Neon Magenta */
  --color-secondary: 204 255 0;  /* Electric Lime */
}

3. Update Content

• Ventures: src/data/ventures.ts
• Projects: src/data/projects.ts
• Skills: src/data/skills.ts

4. Add ASCII Art

Check docs/ascii-art-samples.md for terminal-themed banners.

Common Tasks

Adding a New Section

1. Create component in src/components/sections/:

   export function MySection() {
     return <section>Content</section>;
   }
   

2. Import in src/app/page.tsx:

   import { MySection } from '@/components/sections/my-section';
   

3. Add to page:

   <MySection />
   

Using CSS Variables

Always use CSS variables, never hard-code:

// ❌ Wrong
<div style=>

// ✅ Correct
<div className="text-primary">

For JavaScript/Canvas:

import { getCSSColor } from '@/lib/css-variables';
const color = getCSSColor('primary'); // "0 217 255"

Deployment

Deploy to Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Deploy to Other Platforms

# Build
npm run build

# Deploy the .next folder

Troubleshooting

Build Fails

# Clear cache and rebuild
npm run clean
npm install
npm run build

Port Already in Use

# Use different port
npm run dev -- -p 3001

Permission Errors (Windows)

If rimraf fails, close any running processes and try:

npm run clean:all

Next Steps

1. Read Full Docs: Check CLAUDE.md for detailed documentation
2. Customize: Update content in src/data/
3. Deploy: Push to production via Vercel
4. Contribute: See CONTRIBUTING.md

Resources

• Next.js Documentation
• Tailwind CSS
• Framer Motion
• Project Roadmap

Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: [email protected]

---

Ready? Run npm run dev and start building! 🚀

This site is open source. Improve this page.