Hamza Iqbal's CV Website
A modern, responsive CV/portfolio website built with Rust and Dioxus. This project showcases a clean and professional design, using Tailwind CSS for styling and hmziq-dioxus-free-icons for custom icon components.
Features
- Responsive Design: Optimized for desktop, tablet, and mobile viewing
- Light/Dark Mode: Auto-detects system preference with smooth theme transitions
- Print-Friendly: Special layout optimizations for PDF export and printing
- SEO Optimized: Structured metadata for better search engine visibility
- Component-Based Architecture: Modular components for maintainability
- Static Site Generation: Fast loading, SEO-friendly static HTML output
Project Structure
cv/
├── components/ # UI components
│ ├── download.rs # PDF download section
│ ├── experience.rs # Work experience timeline
│ ├── footer.rs # Site footer with social links
│ ├── header.rs # Profile header section
│ ├── project.rs # Project showcases
│ ├── skills.rs # Skills section
│ ├── spacer.rs # Layout spacing component
│ └── mod.rs # Component exports
├── screens/ # Page layouts
│ ├── home.rs # Main CV page
│ └── mod.rs # Screen exports
├── scripts/ # Utility scripts
│ ├── chrome_capture.rs # PDF/JPEG generation script
│ ├── stripper.rs # HTML/CSS optimization tool
│ └── stripper.legacy # Legacy HTML cleanup tool
├── router.rs # URL routing
├── metadata.rs # SEO metadata
├── main.rs # Application entry point
├── public/ # Static assets
└── assets/ # Compiled assets
Utility Scripts
This project includes several utility scripts in the scripts/ directory:
chrome_capture.rs
A headless Chrome automation script that generates PDF and JPEG versions of the CV in both light and dark themes.
- Automatically starts a local server when needed
- Captures high-quality PDF files optimized for printing
- Generates JPEG screenshots of the entire page
- Supports different environments (local, dev, prod)
stripper.rs
An optimization tool that prepares the generated HTML for production by:
- Removing unnecessary hydration data and scripts
- Cleaning up Dioxus-specific attributes
- Minifying the final HTML output
- Finding and optimizing CSS assets
stripper.legacy
A legacy version of the HTML cleanup tool that uses regex patterns to remove specific tags from the generated HTML output.
Technology Stack
- Rust: Fast and reliable systems programming language
- Dioxus: React-inspired UI library for Rust
- Tailwind CSS: Utility-first CSS framework
- hmziq-dioxus-free-icons: Icon component library
- Static Site Generation: Pre-rendered HTML for better performance
Deployment
This project uses GitHub Actions for automated deployment. The deployment pipeline builds the site, optimizes the output, generates PDF/JPEG versions of the CV, and deploys to multiple platforms.
Deployment Infrastructure
- GitHub Pages: Primary hosting for the static site
- Cloudflare Pages: Secondary deployment location for enhanced performance
- GitHub Actions: CI/CD pipeline automation
Deployment Workflow
The deployment process is managed through several GitHub Actions workflows:
-
Deploy (
deploy.yml): Main deployment workflow that:- Builds the site with Dioxus and Tailwind CSS
- Downloads the latest utility binaries (stripper and chrome_capture)
- Optimizes HTML output with the stripper tool
- Generates PDF and JPEG versions of the CV
- Deploys to both GitHub Pages and Cloudflare Pages
- Uploads PDF/JPEG artifacts for download
-
Build Tools: Separate workflows that build and release the utility scripts:
build-stripper.yml: Builds the HTML optimization tool for multiple platformsbuild-chrome-capture.yml: Builds the PDF/JPEG generation tool for multiple platforms
Running Deployments Manually
You can trigger a manual deployment through the GitHub Actions interface by selecting the "Deploy Rust CV to Pages" workflow and clicking "Run workflow".
Getting Started
Prerequisites
- Rust toolchain (1.65+)
- Dioxus CLI
Installation
-
Clone the repository:
git clone https://github.com/hmziqrs/cv.git cd cv -
Install Dioxus CLI:
cargo install dioxus-cli -
Install Tailwind dependencies:
npm install
Development
Run the Tailwind CSS watcher:
npm run tailwind
Start the development server:
dx serve
Building for Production
Build static site:
dx build --platform web --release --ssg
Hosting
To locally host the static site:
-
Install simple-http-server:
cargo install simple-http-server -
Serve the built files:
simple-http-server target/dx/cv/release/web/public -i
2.a Serve the built files (windows):
simple-http-server.exe --ip 127.0.0.1 .\target\dx\cv\release\web\public -i
Customization
- Edit content in component files to update CV information
- Modify styles in
input.cssand component classes for design changes - Add new sections by creating components and adding them to the main layout
License
This project is available as open source under the terms of the MIT License (opens in new tab).
Author
Hamza Iqbal - Portfolio (opens in new tab) - GitHub (opens in new tab)