risherry

Risherry began as a customizable personal website and portfolio build using Bootstrap, Handlebars and JQuery frameworks. It also incorporates Sass, Font Awesome and Google Fonts.

Quick Start

If you want to customize locally the sources you will need Node.js and npm.

The build system uses Grunt with plugins like watch, sass, and cssmin. The plugins are installed and managed via npm.

npm install

Install all dependencies.

npm run build

Build all themes by compiling SCSS to CSS and minifying the output.

npm run sass

Compile SCSS files to CSS only.

npm run cssmin

Minify CSS files only.

npm run watch

Launch the watch task that monitors file changes and automatically compiles and minifies the CSS sources.

You should run the build tasks on the src/sass files and commit the results in the dist folder.

Customizing

Content

The content it's easily customizable since it reads the data from JSON.

risherry/
├── src/
    ├── data/
    │   ├── config.json
    │   ├── content.json
    ├── js/
    └── sass/

Themes

By default, there are default available themes.

Each of these themes have a custom.scss and a variables.scss file, that contain the theme's definition. New themes can be created and used.

risherry/
├── src/
    ├── data/
    ├── js/
    └── sass/
        ├── skin/
        ├── style.scss
        └── themes/
            └── default/
                ├── custom.scss
                └── variables.scss

Testing

Test your changes using a local web server. Depending on your configuration there might be changes between the master and the ghpages branches.

Content Separation Documentation

This project has been transformed to separate content from presentation, following the pattern from the React example in the example/ folder.

Overview

The content is now stored in structured data files and rendered dynamically by JavaScript, making it easier to:

• Update content without touching HTML
• Maintain consistency across the site
• Add new content items programmatically
• Potentially support multiple languages or themes

File Structure

src/js/
├── content.js    # All content data (site config, case studies, talks)
└── app.js        # Main application logic for rendering content

dist/js/
└── app.js        # Bundled JavaScript (generated by Grunt)

Content Structure

Site Configuration (siteConfig)

Contains global site information:

• Name, title, subtitle, motto
• Contact information
• Statistics (years experience, team size, etc.)
• Tags for filtering/highlighting
• Social media links

Case Studies (caseStudies)

Array of case study objects with:

• Title, description, period
• Icon and styling class
• Highlights (key metrics/achievements)
• Skills/tags
• URL for detailed view

Talks (talks)

Array of talk objects with:

• Title, venue, year
• YouTube video ID
• Event information

How to Update Content

Adding a New Case Study

1. Open src/js/content.js
2. Add a new object to the caseStudies array:

{
  slug: "new-project",
  title: "New Project Name",
  description: "Description of the project...",
  period: "2023-2024 • 1 Year",
  icon: "code", // Material Icons name
  iconClass: "new-project", // CSS class for styling
  url: "case-studies/new-project.html",
  highlights: [
    { title: "Metric 1", value: "Value 1" },
    { title: "Metric 2", value: "Value 2" }
  ],
  skills: [
    { name: "Skill 1", type: "design" },
    { name: "Skill 2", type: "strategy" }
  ]
}

Adding a New Talk

1. Add a new object to the talks array:

{
  id: "talk-4",
  title: "New Talk Title",
  venue: "Conference Name • Location",
  youtubeId: "YOUTUBE_VIDEO_ID"
}

Updating Site Information

Modify the siteConfig object to update:

• Personal information
• Statistics
• Social media links
• Contact details

Development Workflow

1. Edit content: Modify src/js/content.js
2. Build: Run npm run build or grunt to bundle JavaScript
3. Test: Open index.html in a browser

For development with auto-rebuild:

grunt watch

Benefits of This Approach

1. Separation of Concerns: Content and presentation are clearly separated
2. Maintainability: Easy to update content without touching HTML
3. Consistency: Structured data ensures consistent formatting
4. Scalability: Easy to add new content items
5. Reusability: Content can be used in different contexts (e.g., API endpoints)
6. Internationalization Ready: Structure supports multiple languages

Comparison with React Example

This implementation follows the same pattern as the React example:

• Content stored in structured data files
• Components/functions for rendering different content types
• Dynamic content population
• Separation of data from presentation logic

The main difference is using vanilla JavaScript instead of React components, making it compatible with the existing HTML/CSS structure.

Future Enhancements

Potential improvements:

• Content management system integration
• API endpoints for dynamic content loading
• Multi-language support
• Content versioning
• Admin interface for content editing