Developer profile

A beautifully designed code window component that displays developer profile information in a realistic code editor interface. Features syntax highlighting, line numbers, window controls, and a dark theme with gradient effects perfect for portfolios and developer showcases.

Preview

coder.js

constcoder={
name:'Nazmul Hossain',
role:'Frontend Developer',
seniority:'Mid-Level',
location:'Bangladesh',
skills:['React', 'Next.js', 'JavaScript', 'TypeScript', 'TailwindCSS', 'CSS', 'Figma', 'GitHub', 'HTML', 'Astro', 'Node.js', 'Express', 'MongoDB', 'Firebase', 'Git'
],
};

UTF-8JavaScriptLn 12, Col 2

Basic Usage

After installation, import and use the component in your React application:

Customization

Modifying Developer Data

You can easily customize the developer information by modifying the coderData object in the component:

Styling Customization

The component uses Tailwind CSS classes for styling. You can customize:

Window Header Colors

Background Gradients

Syntax Highlighting Colors

Component Structure

The CodeProfile component consists of several key parts:

Window Header: Contains the traffic light buttons and file name
Code Content: The main area with syntax-highlighted code
Line Numbers: Optional numbered lines for authenticity
Background Effects: Subtle blur effects for visual appeal
Window Footer: Status bar with file information