A modern, interactive portfolio website built with YOCaml static site generator, showcasing creative frontend engineering work with smooth animations and user-centered designs.
- Interactive Portfolio - Dynamic content with GSAP animations
- Responsive Design - Mobile-first approach with clean typography
- Modern Tech Stack - OCaml, YOCaml, GSAP, and vanilla JavaScript
- Fast Performance - Static site generation for optimal loading
- Component System - Modular JavaScript components
- Smooth Animations - GSAP-powered scroll effects and transitions
- Static Site Generator: YOCaml
- Language: OCaml 5.3.0
- Build System: Dune 3.0
- Animations: GSAP 3.12.2
- Styling: Custom CSS with modern features
- JavaScript: Vanilla ES6+ with component architecture
okhuomon/
βββ templates/
β βββ main.html # Main template file
βββ bin/
β βββ blog.ml # Build script
β βββ dune # Build configuration
βββ css/
β βββ style.css # Main stylesheet
β βββ animations.css # Animation styles
β βββ folder-hover.css # Interactive elements
βββ js/
β βββ component-loader.js # Component system
β βββ folder-component.js # Folder gallery
β βββ location-time.js # Time widget
βββ images/ # Static assets
βββ dune-project # Project configuration
βββ okhuomon.opam # Package dependencies
βββ README.md # This file
- OCaml 5.3.0+ - Install OCaml
- opam - OCaml package manager
- dune - Build system
-
Clone the repository
git clone https://github.com/six-shot/yocaml-site.git cd okhuomon -
Install dependencies
opam install . --deps-only -
Build the project
dune exec bin/blog.exe -
Start development server
dune exec bin/blog.exe server
The site will be available at http://localhost:8000
# Build the static site
dune exec bin/blog.exe
# Build and watch for changes
dune exec bin/blog.exe servertemplates/main.html- Edit this file to modify the website contentcss/- Custom stylesheets for animations and layoutjs/- JavaScript components and functionalityimages/- Static assets (images, icons, etc.)
- Content: Edit
templates/main.htmlfor all website content - Styling: Modify CSS files in
css/directory - Functionality: Update JavaScript files in
js/directory - Assets: Add images to
images/directory
- Smooth Scrolling - Lenis-powered smooth scroll experience
- GSAP Animations - Professional-grade animations and transitions
- Responsive Navigation - Mobile-friendly hamburger menu
- Dynamic Content - Interactive project showcase with hover effects
- Static Generation - Pre-built HTML for fast loading
- Optimized Assets - Minified CSS and JavaScript
- Modern CSS - Flexbox, Grid, and CSS custom properties
- Progressive Enhancement - Works without JavaScript
yocaml- Static site generator frameworkyocaml_unix- Unix system integrationyocaml_yaml- YAML file processingyocaml_markdown- Markdown supportyocaml_jingoo- Template enginehilite- Syntax highlighting
- GSAP 3.12.2 - Animation library
- Lenis - Smooth scrolling
- ScrollTrigger - Scroll-based animations
-
Build the site
dune exec bin/blog.exe -
Deploy
_www/contents to GitHub Pages
-
Build the project
dune exec bin/blog.exe -
Upload
_www/folder to your web server
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- YOCaml - Excellent static site generator framework
- GSAP - Powerful animation library
- OCaml Community - For the amazing ecosystem
- Outreachy - For the opportunity to contribute to open source
six-shot - okhuomonajayi.com
Project Link: https://github.com/six-shot/okhuomon
Built with β€οΈ using OCaml and YOCaml