jlucus

jlucus.dev - Developer Portfolio

A Terminal Neon themed portfolio showcasing ventures, projects, and skills with a modern developer aesthetic.

Overview

This is a Next.js 15 portfolio website built with TypeScript, Tailwind CSS 4, and Framer Motion. It features a unique Terminal Neon design system with Electric Cyan primary color, Neon Magenta accents, and immersive terminal-style UI elements.

Tech Stack

Design System

Color Scheme - Terminal Neon

All colors are defined as CSS variables in src/styles/globals.css using RGB values for alpha channel support:

--color-primary: 0 217 255;        /* Electric Cyan #00D9FF */
--color-accent: 255 0 110;         /* Neon Magenta #FF006E */
--color-secondary: 204 255 0;      /* Electric Lime #CCFF00 */
--color-success: 0 255 159;        /* #00FF9F */
--color-warning: 255 184 0;        /* #FFB800 */
--color-error: 255 71 87;          /* #FF4757 */

CSS Variables Philosophy

CRITICAL: This project uses CSS variables exclusively. NEVER use hardcoded CSS values. All colors, spacing, fonts, shadows, and other design tokens are defined as variables in :root and referenced via Tailwind’s theme configuration.

Why?

Typography

Spacing System

All spacing uses CSS variables:

--spacing-xs: 0.25rem;   /* 4px */
--spacing-sm: 0.5rem;    /* 8px */
--spacing-md: 1rem;      /* 16px */
--spacing-lg: 1.5rem;    /* 24px */
--spacing-xl: 2rem;      /* 32px */
--spacing-2xl: 3rem;     /* 48px */
--spacing-3xl: 4rem;     /* 64px */

Neon Effects

Custom neon glow shadows for that cyberpunk aesthetic:

--shadow-neon-primary: 0 0 5px rgb(var(--color-primary)), 0 0 20px rgb(var(--color-primary));
--shadow-neon-primary-lg: 0 0 10px rgb(var(--color-primary)), 0 0 40px rgb(var(--color-primary));

Project Structure

jlucus2/
├── src/
│   ├── app/
│   │   ├── layout.tsx          # Root layout with fonts & metadata
│   │   ├── page.tsx            # Homepage with all sections
│   │   └── globals.css         # CSS variables & Tailwind directives
│   ├── components/
│   │   ├── layout/
│   │   │   ├── header.tsx      # Navigation header
│   │   │   └── footer.tsx      # Site footer
│   │   ├── sections/
│   │   │   ├── hero-terminal.tsx      # Hero with terminal UI
│   │   │   ├── ventures-section.tsx   # Ventures showcase
│   │   │   ├── portfolio-section.tsx  # Projects portfolio
│   │   │   ├── skill-tree.tsx         # Skills display
│   │   │   ├── contact-section.tsx    # Contact form
│   │   │   └── animated-grid.tsx      # Background grid
│   │   └── ui/
│   │       ├── button.tsx            # Button component with Slot support
│   │       └── command-palette.tsx   # Command palette UI
│   ├── data/
│   │   ├── ventures.ts         # Ventures data
│   │   ├── projects.ts         # Projects data
│   │   └── skills.ts           # Skills data
│   ├── lib/
│   │   ├── utils.ts            # Utility functions (cn, debounce, etc.)
│   │   └── constants.ts        # Site constants & config
│   └── styles/
│       └── globals.css         # Global styles & CSS variables
├── public/                     # Static assets
├── package.json                # Dependencies
├── tsconfig.json               # TypeScript config
├── tailwind.config.ts          # Tailwind configuration
├── postcss.config.js           # PostCSS with Tailwind plugin
└── next.config.js              # Next.js configuration

Key Features

1. Hero Terminal Section

2. Ventures Section

3. Portfolio Section

4. Skills Section

5. Contact Section

Development

Prerequisites

Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

Development Server

The site runs at http://localhost:3000 in development mode with hot module replacement.

Configuration

Site Constants

Edit src/lib/constants.ts to update:

Data Management

Update content in src/data/:

Styling

Modify design tokens in src/styles/globals.css:

Components

Button Component

Supports both button and anchor elements via asChild prop:

// As button
<Button variant="default" size="lg">
  Click Me
</Button>

// As link (using asChild with Slot)
<Button variant="outline" size="sm" asChild>
  <a href="/link">Visit</a>
</Button>

Variants: default, destructive, outline, secondary, ghost, link Sizes: default, sm, lg, icon Props: loading, asChild, disabled

Utility Functions

Located in src/lib/utils.ts:

import { cn, debounce, throttle, lerp, copyToClipboard } from '@/lib/utils'

// Class names merging
cn('class1', 'class2', { conditional: true })

// Debounce function calls
const debouncedFn = debounce(() => {}, 300)

// Linear interpolation for animations
const value = lerp(start, end, progress)

Responsive Design

The site is fully responsive with breakpoints:

Terminal Aesthetic Layouts

Animations

Powered by Framer Motion:

Accessibility

Performance Optimizations

Browser Support

Deployment

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Other Platforms

# Build
npm run build

# The output is in .next/ folder
# Deploy .next/ to your hosting provider

Environment Variables

Create .env.local for local development:

# Add any API keys or secrets here
NEXT_PUBLIC_SITE_URL=https://jlucus.dev

Known Issues

Future Enhancements

See PROJECT_ROADMAP.md for planned features and improvements.

Contributing

This is a personal portfolio, but suggestions and bug reports are welcome!

License

MIT License - feel free to use this as inspiration for your own portfolio.

Contact

Built with by jlucus using Claude Code

This site is open source. Improve this page.