@bluesialia/jsonresume-theme-bluetime

v0.4.2

Published

7 months ago

A modern, clean TypeScript-based theme for JSON Resume with responsive design and professional styling

0High
0Medium
0Low

bluesialia

jsonresume theme resume cv bluetime typescript html responsive professional career portfolio

JSONResume Theme Bluetime

A TypeScript-based theme for JSON Resume called Bluetime.

Installation

Node.js/NPM

npm install @bluesialia/jsonresume-theme-bluetime

Browser/CDN

For vanilla JavaScript usage in browsers, you can use the theme directly from a CDN:

<script type="module">
  import { render } from "https://cdn.jsdelivr.net/npm/@bluesialia/jsonresume-theme-bluetime/dist/index.js";
</script>

Usage

Browser Usage (ES Modules)

<!DOCTYPE html>
<html>
<head>
    <title>My Resume</title>
</head>
<body>
    <div id="resume-container"></div>
    
    <script type="module">
        // Import the render function directly using ES modules
        import { render } from "https://cdn.jsdelivr.net/npm/@bluesialia/jsonresume-theme-bluetime/dist/index.js";
        
        // Your JSON Resume data
        const resumeData = {
            basics: {
                name: "John Doe",
                label: "Software Developer",
                email: "[email protected]",
                phone: "(123) 456-7890",
                url: "https://johndoe.dev",
                summary: "Passionate software developer with 5+ years of experience.",
                location: {
                    city: "San Francisco",
                    region: "CA"
                }
            },
            work: [
                {
                    name: "Tech Corp",
                    position: "Senior Software Developer",
                    startDate: "2021-03",
                    summary: "Led development of web applications using React and Node.js"
                }
            ]
            // ... more resume data
        };

        // Render the resume using the imported render function
        const htmlResume = render(resumeData);
        document.getElementById('resume-container').innerHTML = htmlResume;
    </script>
</body>
</html>

Node.js Usage (ES Modules)

import { render } from '@bluesialia/jsonresume-theme-bluetime';

// Your JSON Resume data
const resumeData = {
  basics: {
    name: "John Doe",
    label: "Software Developer",
    email: "[email protected]",
    phone: "(123) 456-7890",
    url: "https://johndoe.dev",
    summary: "Passionate software developer with 5+ years of experience.",
    location: {
      city: "San Francisco",
      region: "CA"
    }
  },
  work: [
    {
      name: "Tech Corp",
      position: "Senior Software Developer",
      startDate: "2021-03",
      summary: "Led development of web applications using React and Node.js"
    }
  ],
  // ... more resume data
};

// Generate HTML
const htmlResume = render(resumeData);

// Save to file
const fs = require('fs');
fs.writeFileSync('resume.html', htmlResume);

ES Modules Usage Notes

When using the theme:

Browser: Use <script type="module"> and import { render }
Node.js: Works with native ES modules (import statements)
The minified version is recommended for production: index.min.js
All styles are embedded in the generated HTML
No additional CSS files are needed
Compatible with modern browsers supporting ES modules (ES2020+)
Uses native ES2020 modules format

CDN URLs

https://cdn.jsdelivr.net/npm/@bluesialia/jsonresume-theme-bluetime/dist/index.js
https://cdn.jsdelivr.net/npm/@bluesialia/jsonresume-theme-bluetime/dist/index.min.js

Browser Compatibility

Modern browsers (Chrome 61+, Firefox 60+, Safari 11+, Edge 16+)
Node.js 14.8+ with ES modules support
Browsers must support ES modules (<script type="module">)

JSON Resume Schema

This theme supports the complete JSON Resume Schema. The schema includes:

basics: Personal information, contact details, and summary
work: Work experience and achievements
volunteer: Volunteer experience
education: Educational background
awards: Awards and recognitions
certificates: Professional certifications
publications: Published works
skills: Technical and professional skills
languages: Language proficiencies
interests: Personal interests and hobbies
references: Professional references
projects: Personal and professional projects

Theme Customization

The generated HTML includes embedded CSS that you can customize. The theme uses a clean design with:

Blue accent colors (#3498db)
Professional typography
Responsive layout
Clean section separators
Skill tags for easy scanning

Development

Prerequisites

Node.js 16 or higher
npm or yarn

Building from Source

# Clone the repository
git clone https://github.com/BlueSialia/jsonresume-theme-bluetime.git
cd jsonresume-theme-bluetime

# Install dependencies
npm install

# Build the project
npm run build

# Watch for changes during development
npm run dev

Project Structure

src/
├── index.ts      # Main render function with ES modules exports
├── types.ts      # TypeScript interfaces for JSON Resume schema
dist/
├── index.js      # ES2020 modules output
├── index.min.js  # Minified ES modules version
├── index.d.ts    # TypeScript declarations
└── types.d.ts    # Type definitions

Scripts

Build Scripts

npm run build: Clean, compile TypeScript, and create minified version
npm run compile: Compile TypeScript to ES2020 modules
npm run minify: Create minified ES modules version
npm run clean: Remove dist directory

Development Scripts

npm run dev: Watch mode for development (recompiles on file changes)
npm run lint: Type-check without compilation

Testing Scripts

npm test: Run comprehensive Jest test suite with build
npm run test:watch: Run tests in watch mode for development
npm run test:coverage: Run tests with coverage report

Utility Scripts

npm run size: Show compiled and minified file sizes
npm run prepublishOnly: Automatically runs before publishing

Testing

This project includes a comprehensive test suite built with Jest and TypeScript. We maintain high test coverage to ensure reliability and catch regressions.

Test Coverage

93.61% statement coverage
85.37% branch coverage
100% function coverage
96.29% line coverage

Running Tests

# Run all tests
npm test

# Run tests in watch mode during development
npm run test:watch

# Generate coverage report
npm run test:coverage

# Run the original legacy test
npm run test:legacy

What's Tested

The test suite covers:

Render Function: All paths through the main render function
HTML Security: XSS prevention and HTML escaping
All Resume Sections: Basics, work, education, skills, projects, etc.
Date Handling: Various date formats and edge cases
Contact Information: Email, phone, URL formatting with proper links
Social Profiles: Multiple networks with Font Awesome icons
Error Handling: Missing fields, malformed data, edge cases
Performance: Rendering speed benchmarks
Accessibility: Semantic HTML and proper link attributes

For detailed testing information, see TESTING.md.

Contributing

Contributions are welcome! Please feel free to:

Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Submit a pull request

License

MIT License. See LICENSE for details.

Support

If you encounter any issues or have questions:

Check the GitHub Issues
Create a new issue with a detailed description
Include sample resume data if reporting rendering issues

JSON Resume - The open source initiative to create a JSON-based standard for resumes
JSON Resume Schema - Complete schema documentation
Other JSON Resume Themes - Browse more themes

Made with ❤️ by BlueSialia