BranchesTags

Repository files navigation

Altus 4 Marketing Website

A modern, responsive marketing website for Altus 4 - an AI-enhanced MySQL full-text search engine. Built with Vue.js 3, TypeScript, and Tailwind CSS.

Features

  • Modern Design: Clean, professional design with gradient backgrounds and smooth animations
  • Responsive: Mobile-first design that works on all devices
  • Performance Optimized: Fast loading with optimized assets and smooth scrolling
  • SEO Friendly: Comprehensive meta tags and semantic HTML structure
  • Accessible: Built with accessibility best practices
  • Documentation: Integrated VitePress documentation with automatic sync to separate repository

Tech Stack

  • Framework: Vue.js 3 (Composition API)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Components: Custom UI components inspired by Shadcn-Vue
  • Icons: Lucide Vue Next
  • Build Tool: Vite
  • Documentation: VitePress

Sections

  1. Hero Section: Value proposition with clear CTA buttons
  2. Features Section: Showcase of key capabilities (AI, Performance, Security)
  3. Technical Specifications: Architecture overview and tech stack details
  4. Project Status: Current metrics, completion status, and roadmap
  5. Call to Action: Community engagement and quick start links
  6. Footer: Contact information, resources, and tech stack

Quick Start

Prerequisites

  • Node.js 18+
  • npm or yarn

Installation

  1. Clone the repository:
git clone <repository-url>cd altus4-website
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open your browser and visit http://localhost:5173

Build for Production

npm run build

The build artifacts will be stored in the dist/ directory.

Preview Production Build

npm run preview

Customization

Colors

The website uses a custom color palette defined in tailwind.config.js. Main colors:

  • Primary: Blue (#3b82f6) for buttons and accents
  • Secondary: Gray scale for text and backgrounds

Components

All UI components are located in src/components/ui/ and can be easily customized:

  • Button.vue: Customizable button component with variants
  • Card.vue: Container component for content sections
  • CardHeader.vue & CardContent.vue: Card sub-components

Content

To update the content:

  1. Hero Section: Edit src/components/HeroSection.vue
  2. Features: Modify src/components/FeaturesSection.vue
  3. Tech Specs: Update src/components/TechSpecsSection.vue
  4. Project Status: Change metrics in src/components/ProjectStatusSection.vue
  5. CTA: Customize links in src/components/CallToActionSection.vue
  6. Footer: Update contact info in src/components/FooterSection.vue

Documentation

This project includes comprehensive VitePress documentation that automatically syncs to a separate repository.

Documentation Site

Live Documentation: https://altus4.github.io/docs

Documentation Sync

The docs/ directory is automatically synchronized to the altus4/docs repository:

  • Automatic: Triggered on push to main or develop branches
  • Manual: Use npm run docs:sync for manual synchronization
  • GitHub Pages: Auto-deployment to documentation site

Working with Documentation

# Start documentation development server
npm run docs:dev
# Build documentation
npm run docs:build
# Preview built documentation
npm run docs:preview
# Sync documentation to separate repository
npm run docs:sync
# Force sync with custom message
npm run docs:sync:force

Documentation Setup

For initial setup of the documentation sync system, see DOCS_SYNC_SETUP.md.

Configuration

Vite Configuration

The project uses Vite with Vue plugin and path aliases configured in vite.config.ts.

TypeScript

TypeScript configuration is split into:

  • tsconfig.json: Base configuration
  • tsconfig.app.json: App-specific settings with path mappings
  • tsconfig.node.json: Node.js environment settings

Tailwind CSS

Tailwind is configured in tailwind.config.js with:

  • Custom color palette
  • Inter font family
  • Typography plugin
  • Custom utility classes

Performance

  • Lighthouse Score: 90+ (Performance, Accessibility, Best Practices, SEO)
  • Bundle Size: Optimized with Vite's tree shaking
  • Loading Speed: Lazy loading and optimized images

Deployment

Netlify

  1. Build the project: npm run build
  2. Deploy the dist/ folder to Netlify
  3. Configure custom domain: altus4.thavarshan.com

Vercel

  1. Connect your GitHub repository to Vercel
  2. Vercel will automatically detect it as a Vue.js project
  3. Configure domain settings

GitHub Pages

  1. Add deployment workflow in .github/workflows/deploy.yml
  2. Configure GitHub Pages to use the workflow
  3. Update base URL in vite.config.ts if needed

License

This project is licensed under the MIT License.

Author

Jerome (Thavarshan) Thayananthajothy

Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Made with ❤️ for the Altus 4 project by Jerome Thayananthajothy

About

🌐 Official marketing website for Altus 4 | Modern Vue.js landing page with case studies, features showcase, and getting started guides

altus4.thavarshan.com

Topics

altus4case-studiesdeveloper-toolsgithub-pageslanding-pagemarketingmarketing-websitemysql-searchsingle-page-applicationvuejs

Resources

Readme
MIT license
Activity
Custom properties

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Altus 4 Marketing Website
A modern, responsive marketing website for Altus 4 - an AI-enhanced MySQL full-text search engine. Built with Vue.js 3, TypeScript, and Tailwind CSS.
Features
  • Modern Design: Clean, professional design with gradient backgrounds and smooth animations
  • Responsive: Mobile-first design that works on all devices
  • Performance Optimized: Fast loading with optimized assets and smooth scrolling
  • SEO Friendly: Comprehensive meta tags and semantic HTML structure
  • Accessible: Built with accessibility best practices
  • Documentation: Integrated VitePress documentation with automatic sync to separate repository
Tech Stack
  • Framework: Vue.js 3 (Composition API)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Components: Custom UI components inspired by Shadcn-Vue
  • Icons: Lucide Vue Next
  • Build Tool: Vite
  • Documentation: VitePress
Sections
  1. Hero Section: Value proposition with clear CTA buttons
  2. Features Section: Showcase of key capabilities (AI, Performance, Security)
  3. Technical Specifications: Architecture overview and tech stack details
  4. Project Status: Current metrics, completion status, and roadmap
  5. Call to Action: Community engagement and quick start links
  6. Footer: Contact information, resources, and tech stack
Quick Start
Prerequisites
  • Node.js 18+
  • npm or yarn
Installation
  1. Clone the repository:
git clone <repository-url>cd altus4-website
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open your browser and visit http://localhost:5173
Build for Production
npm run build
The build artifacts will be stored in the dist/ directory.
Preview Production Build
npm run preview
Customization
Colors
The website uses a custom color palette defined in tailwind.config.js. Main colors:
  • Primary: Blue (#3b82f6) for buttons and accents
  • Secondary: Gray scale for text and backgrounds
Components
All UI components are located in src/components/ui/ and can be easily customized:
  • Button.vue: Customizable button component with variants
  • Card.vue: Container component for content sections
  • CardHeader.vue & CardContent.vue: Card sub-components
Content
To update the content:
  1. Hero Section: Edit src/components/HeroSection.vue
  2. Features: Modify src/components/FeaturesSection.vue
  3. Tech Specs: Update src/components/TechSpecsSection.vue
  4. Project Status: Change metrics in src/components/ProjectStatusSection.vue
  5. CTA: Customize links in src/components/CallToActionSection.vue
  6. Footer: Update contact info in src/components/FooterSection.vue
Documentation
This project includes comprehensive VitePress documentation that automatically syncs to a separate repository.
Documentation Site
Live Documentation: https://altus4.github.io/docs
Documentation Sync
The docs/ directory is automatically synchronized to the altus4/docs repository:
  • Automatic: Triggered on push to main or develop branches
  • Manual: Use npm run docs:sync for manual synchronization
  • GitHub Pages: Auto-deployment to documentation site
Working with Documentation
# Start documentation development server
npm run docs:dev
# Build documentation
npm run docs:build
# Preview built documentation
npm run docs:preview
# Sync documentation to separate repository
npm run docs:sync
# Force sync with custom message
npm run docs:sync:force
Documentation Setup
For initial setup of the documentation sync system, see DOCS_SYNC_SETUP.md.
Configuration
Vite Configuration
The project uses Vite with Vue plugin and path aliases configured in vite.config.ts.
TypeScript
TypeScript configuration is split into:
  • tsconfig.json: Base configuration
  • tsconfig.app.json: App-specific settings with path mappings
  • tsconfig.node.json: Node.js environment settings
Tailwind CSS
Tailwind is configured in tailwind.config.js with:
  • Custom color palette
  • Inter font family
  • Typography plugin
  • Custom utility classes
Performance
  • Lighthouse Score: 90+ (Performance, Accessibility, Best Practices, SEO)
  • Bundle Size: Optimized with Vite's tree shaking
  • Loading Speed: Lazy loading and optimized images
Deployment
Netlify
  1. Build the project: npm run build
  2. Deploy the dist/ folder to Netlify
  3. Configure custom domain: altus4.thavarshan.com
Vercel
  1. Connect your GitHub repository to Vercel
  2. Vercel will automatically detect it as a Vue.js project
  3. Configure domain settings
GitHub Pages
  1. Add deployment workflow in .github/workflows/deploy.yml
  2. Configure GitHub Pages to use the workflow
  3. Update base URL in vite.config.ts if needed
License
This project is licensed under the MIT License.
Author
Jerome (Thavarshan) Thayananthajothy
Contributing
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
Made with ❤️ for the Altus 4 project by Jerome Thayananthajothy
About
🌐 Official marketing website for Altus 4 | Modern Vue.js landing page with case studies, features showcase, and getting started guides
altus4.thavarshan.com
Topics
altus4case-studiesdeveloper-toolsgithub-pageslanding-pagemarketingmarketing-websitemysql-searchsingle-page-applicationvuejs
Resources
Readme
MIT license
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Altus 4 Marketing Website
A modern, responsive marketing website for Altus 4 - an AI-enhanced MySQL full-text search engine. Built with Vue.js 3, TypeScript, and Tailwind CSS.
Features
  • Modern Design: Clean, professional design with gradient backgrounds and smooth animations
  • Responsive: Mobile-first design that works on all devices
  • Performance Optimized: Fast loading with optimized assets and smooth scrolling
  • SEO Friendly: Comprehensive meta tags and semantic HTML structure
  • Accessible: Built with accessibility best practices
  • Documentation: Integrated VitePress documentation with automatic sync to separate repository
Tech Stack
  • Framework: Vue.js 3 (Composition API)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Components: Custom UI components inspired by Shadcn-Vue
  • Icons: Lucide Vue Next
  • Build Tool: Vite
  • Documentation: VitePress
Sections
  1. Hero Section: Value proposition with clear CTA buttons
  2. Features Section: Showcase of key capabilities (AI, Performance, Security)
  3. Technical Specifications: Architecture overview and tech stack details
  4. Project Status: Current metrics, completion status, and roadmap
  5. Call to Action: Community engagement and quick start links
  6. Footer: Contact information, resources, and tech stack
Quick Start
Prerequisites
  • Node.js 18+
  • npm or yarn
Installation
  1. Clone the repository:
git clone <repository-url>cd altus4-website
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open your browser and visit http://localhost:5173
Build for Production
npm run build
The build artifacts will be stored in the dist/ directory.
Preview Production Build
npm run preview
Customization
Colors
The website uses a custom color palette defined in tailwind.config.js. Main colors:
  • Primary: Blue (#3b82f6) for buttons and accents
  • Secondary: Gray scale for text and backgrounds
Components
All UI components are located in src/components/ui/ and can be easily customized:
  • Button.vue: Customizable button component with variants
  • Card.vue: Container component for content sections
  • CardHeader.vue & CardContent.vue: Card sub-components
Content
To update the content:
  1. Hero Section: Edit src/components/HeroSection.vue
  2. Features: Modify src/components/FeaturesSection.vue
  3. Tech Specs: Update src/components/TechSpecsSection.vue
  4. Project Status: Change metrics in src/components/ProjectStatusSection.vue
  5. CTA: Customize links in src/components/CallToActionSection.vue
  6. Footer: Update contact info in src/components/FooterSection.vue
Documentation
This project includes comprehensive VitePress documentation that automatically syncs to a separate repository.
Documentation Site
Live Documentation: https://altus4.github.io/docs
Documentation Sync
The docs/ directory is automatically synchronized to the altus4/docs repository:
  • Automatic: Triggered on push to main or develop branches
  • Manual: Use npm run docs:sync for manual synchronization
  • GitHub Pages: Auto-deployment to documentation site
Working with Documentation
# Start documentation development server
npm run docs:dev
# Build documentation
npm run docs:build
# Preview built documentation
npm run docs:preview
# Sync documentation to separate repository
npm run docs:sync
# Force sync with custom message
npm run docs:sync:force
Documentation Setup
For initial setup of the documentation sync system, see DOCS_SYNC_SETUP.md.
Configuration
Vite Configuration
The project uses Vite with Vue plugin and path aliases configured in vite.config.ts.
TypeScript
TypeScript configuration is split into:
  • tsconfig.json: Base configuration
  • tsconfig.app.json: App-specific settings with path mappings
  • tsconfig.node.json: Node.js environment settings
Tailwind CSS
Tailwind is configured in tailwind.config.js with:
  • Custom color palette
  • Inter font family
  • Typography plugin
  • Custom utility classes
Performance
  • Lighthouse Score: 90+ (Performance, Accessibility, Best Practices, SEO)
  • Bundle Size: Optimized with Vite's tree shaking
  • Loading Speed: Lazy loading and optimized images
Deployment
Netlify
  1. Build the project: npm run build
  2. Deploy the dist/ folder to Netlify
  3. Configure custom domain: altus4.thavarshan.com
Vercel
  1. Connect your GitHub repository to Vercel
  2. Vercel will automatically detect it as a Vue.js project
  3. Configure domain settings
GitHub Pages
  1. Add deployment workflow in .github/workflows/deploy.yml
  2. Configure GitHub Pages to use the workflow
  3. Update base URL in vite.config.ts if needed
License
This project is licensed under the MIT License.
Author
Jerome (Thavarshan) Thayananthajothy
Contributing
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
Made with ❤️ for the Altus 4 project by Jerome Thayananthajothy
About
🌐 Official marketing website for Altus 4 | Modern Vue.js landing page with case studies, features showcase, and getting started guides
altus4.thavarshan.com
Topics
altus4case-studiesdeveloper-toolsgithub-pageslanding-pagemarketingmarketing-websitemysql-searchsingle-page-applicationvuejs
Resources
Readme
MIT license
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Altus 4 Marketing Website
A modern, responsive marketing website for Altus 4 - an AI-enhanced MySQL full-text search engine. Built with Vue.js 3, TypeScript, and Tailwind CSS.
Features
  • Modern Design: Clean, professional design with gradient backgrounds and smooth animations
  • Responsive: Mobile-first design that works on all devices
  • Performance Optimized: Fast loading with optimized assets and smooth scrolling
  • SEO Friendly: Comprehensive meta tags and semantic HTML structure
  • Accessible: Built with accessibility best practices
  • Documentation: Integrated VitePress documentation with automatic sync to separate repository
Tech Stack
  • Framework: Vue.js 3 (Composition API)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Components: Custom UI components inspired by Shadcn-Vue
  • Icons: Lucide Vue Next
  • Build Tool: Vite
  • Documentation: VitePress
Sections
  1. Hero Section: Value proposition with clear CTA buttons
  2. Features Section: Showcase of key capabilities (AI, Performance, Security)
  3. Technical Specifications: Architecture overview and tech stack details
  4. Project Status: Current metrics, completion status, and roadmap
  5. Call to Action: Community engagement and quick start links
  6. Footer: Contact information, resources, and tech stack
Quick Start
Prerequisites
  • Node.js 18+
  • npm or yarn
Installation
  1. Clone the repository:
git clone <repository-url>cd altus4-website
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open your browser and visit http://localhost:5173
Build for Production
npm run build
The build artifacts will be stored in the dist/ directory.
Preview Production Build
npm run preview
Customization
Colors
The website uses a custom color palette defined in tailwind.config.js. Main colors:
  • Primary: Blue (#3b82f6) for buttons and accents
  • Secondary: Gray scale for text and backgrounds
Components
All UI components are located in src/components/ui/ and can be easily customized:
  • Button.vue: Customizable button component with variants
  • Card.vue: Container component for content sections
  • CardHeader.vue & CardContent.vue: Card sub-components
Content
To update the content:
  1. Hero Section: Edit src/components/HeroSection.vue
  2. Features: Modify src/components/FeaturesSection.vue
  3. Tech Specs: Update src/components/TechSpecsSection.vue
  4. Project Status: Change metrics in src/components/ProjectStatusSection.vue
  5. CTA: Customize links in src/components/CallToActionSection.vue
  6. Footer: Update contact info in src/components/FooterSection.vue
Documentation
This project includes comprehensive VitePress documentation that automatically syncs to a separate repository.
Documentation Site
Live Documentation: https://altus4.github.io/docs
Documentation Sync
The docs/ directory is automatically synchronized to the altus4/docs repository:
  • Automatic: Triggered on push to main or develop branches
  • Manual: Use npm run docs:sync for manual synchronization
  • GitHub Pages: Auto-deployment to documentation site
Working with Documentation
# Start documentation development server
npm run docs:dev
# Build documentation
npm run docs:build
# Preview built documentation
npm run docs:preview
# Sync documentation to separate repository
npm run docs:sync
# Force sync with custom message
npm run docs:sync:force
Documentation Setup
For initial setup of the documentation sync system, see DOCS_SYNC_SETUP.md.
Configuration
Vite Configuration
The project uses Vite with Vue plugin and path aliases configured in vite.config.ts.
TypeScript
TypeScript configuration is split into:
  • tsconfig.json: Base configuration
  • tsconfig.app.json: App-specific settings with path mappings
  • tsconfig.node.json: Node.js environment settings
Tailwind CSS
Tailwind is configured in tailwind.config.js with:
  • Custom color palette
  • Inter font family
  • Typography plugin
  • Custom utility classes
Performance
  • Lighthouse Score: 90+ (Performance, Accessibility, Best Practices, SEO)
  • Bundle Size: Optimized with Vite's tree shaking
  • Loading Speed: Lazy loading and optimized images
Deployment
Netlify
  1. Build the project: npm run build
  2. Deploy the dist/ folder to Netlify
  3. Configure custom domain: altus4.thavarshan.com
Vercel
  1. Connect your GitHub repository to Vercel
  2. Vercel will automatically detect it as a Vue.js project
  3. Configure domain settings
GitHub Pages
  1. Add deployment workflow in .github/workflows/deploy.yml
  2. Configure GitHub Pages to use the workflow
  3. Update base URL in vite.config.ts if needed
License
This project is licensed under the MIT License.
Author
Jerome (Thavarshan) Thayananthajothy
Contributing
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
Made with ❤️ for the Altus 4 project by Jerome Thayananthajothy
About
🌐 Official marketing website for Altus 4 | Modern Vue.js landing page with case studies, features showcase, and getting started guides
altus4.thavarshan.com
Topics
altus4case-studiesdeveloper-toolsgithub-pageslanding-pagemarketingmarketing-websitemysql-searchsingle-page-applicationvuejs
Resources
Readme
MIT license
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Altus 4 Marketing Website
A modern, responsive marketing website for Altus 4 - an AI-enhanced MySQL full-text search engine. Built with Vue.js 3, TypeScript, and Tailwind CSS.
Features
  • Modern Design: Clean, professional design with gradient backgrounds and smooth animations
  • Responsive: Mobile-first design that works on all devices
  • Performance Optimized: Fast loading with optimized assets and smooth scrolling
  • SEO Friendly: Comprehensive meta tags and semantic HTML structure
  • Accessible: Built with accessibility best practices
  • Documentation: Integrated VitePress documentation with automatic sync to separate repository
Tech Stack
  • Framework: Vue.js 3 (Composition API)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Components: Custom UI components inspired by Shadcn-Vue
  • Icons: Lucide Vue Next
  • Build Tool: Vite
  • Documentation: VitePress
Sections
  1. Hero Section: Value proposition with clear CTA buttons
  2. Features Section: Showcase of key capabilities (AI, Performance, Security)
  3. Technical Specifications: Architecture overview and tech stack details
  4. Project Status: Current metrics, completion status, and roadmap
  5. Call to Action: Community engagement and quick start links
  6. Footer: Contact information, resources, and tech stack
Quick Start
Prerequisites
  • Node.js 18+
  • npm or yarn
Installation
  1. Clone the repository:
git clone <repository-url>cd altus4-website
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open your browser and visit http://localhost:5173
Build for Production
npm run build
The build artifacts will be stored in the dist/ directory.
Preview Production Build
npm run preview
Customization
Colors
The website uses a custom color palette defined in tailwind.config.js. Main colors:
  • Primary: Blue (#3b82f6) for buttons and accents
  • Secondary: Gray scale for text and backgrounds
Components
All UI components are located in src/components/ui/ and can be easily customized:
  • Button.vue: Customizable button component with variants
  • Card.vue: Container component for content sections
  • CardHeader.vue & CardContent.vue: Card sub-components
Content
To update the content:
  1. Hero Section: Edit src/components/HeroSection.vue
  2. Features: Modify src/components/FeaturesSection.vue
  3. Tech Specs: Update src/components/TechSpecsSection.vue
  4. Project Status: Change metrics in src/components/ProjectStatusSection.vue
  5. CTA: Customize links in src/components/CallToActionSection.vue
  6. Footer: Update contact info in src/components/FooterSection.vue
Documentation
This project includes comprehensive VitePress documentation that automatically syncs to a separate repository.
Documentation Site
Live Documentation: https://altus4.github.io/docs
Documentation Sync
The docs/ directory is automatically synchronized to the altus4/docs repository:
  • Automatic: Triggered on push to main or develop branches
  • Manual: Use npm run docs:sync for manual synchronization
  • GitHub Pages: Auto-deployment to documentation site
Working with Documentation
# Start documentation development server
npm run docs:dev
# Build documentation
npm run docs:build
# Preview built documentation
npm run docs:preview
# Sync documentation to separate repository
npm run docs:sync
# Force sync with custom message
npm run docs:sync:force
Documentation Setup
For initial setup of the documentation sync system, see DOCS_SYNC_SETUP.md.
Configuration
Vite Configuration
The project uses Vite with Vue plugin and path aliases configured in vite.config.ts.
TypeScript
TypeScript configuration is split into:
  • tsconfig.json: Base configuration
  • tsconfig.app.json: App-specific settings with path mappings
  • tsconfig.node.json: Node.js environment settings
Tailwind CSS
Tailwind is configured in tailwind.config.js with:
  • Custom color palette
  • Inter font family
  • Typography plugin
  • Custom utility classes
Performance
  • Lighthouse Score: 90+ (Performance, Accessibility, Best Practices, SEO)
  • Bundle Size: Optimized with Vite's tree shaking
  • Loading Speed: Lazy loading and optimized images
Deployment
Netlify
  1. Build the project: npm run build
  2. Deploy the dist/ folder to Netlify
  3. Configure custom domain: altus4.thavarshan.com
Vercel
  1. Connect your GitHub repository to Vercel
  2. Vercel will automatically detect it as a Vue.js project
  3. Configure domain settings
GitHub Pages
  1. Add deployment workflow in .github/workflows/deploy.yml
  2. Configure GitHub Pages to use the workflow
  3. Update base URL in vite.config.ts if needed
License
This project is licensed under the MIT License.
Author
Jerome (Thavarshan) Thayananthajothy
Contributing
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
Made with ❤️ for the Altus 4 project by Jerome Thayananthajothy
About
🌐 Official marketing website for Altus 4 | Modern Vue.js landing page with case studies, features showcase, and getting started guides
altus4.thavarshan.com
Topics
altus4case-studiesdeveloper-toolsgithub-pageslanding-pagemarketingmarketing-websitemysql-searchsingle-page-applicationvuejs
Resources
Readme
MIT license
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Altus 4 Marketing Website
A modern, responsive marketing website for Altus 4 - an AI-enhanced MySQL full-text search engine. Built with Vue.js 3, TypeScript, and Tailwind CSS.
Features
  • Modern Design: Clean, professional design with gradient backgrounds and smooth animations
  • Responsive: Mobile-first design that works on all devices
  • Performance Optimized: Fast loading with optimized assets and smooth scrolling
  • SEO Friendly: Comprehensive meta tags and semantic HTML structure
  • Accessible: Built with accessibility best practices
  • Documentation: Integrated VitePress documentation with automatic sync to separate repository
Tech Stack
  • Framework: Vue.js 3 (Composition API)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Components: Custom UI components inspired by Shadcn-Vue
  • Icons: Lucide Vue Next
  • Build Tool: Vite
  • Documentation: VitePress
Sections
  1. Hero Section: Value proposition with clear CTA buttons
  2. Features Section: Showcase of key capabilities (AI, Performance, Security)
  3. Technical Specifications: Architecture overview and tech stack details
  4. Project Status: Current metrics, completion status, and roadmap
  5. Call to Action: Community engagement and quick start links
  6. Footer: Contact information, resources, and tech stack
Quick Start
Prerequisites
  • Node.js 18+
  • npm or yarn
Installation
  1. Clone the repository:
git clone <repository-url>cd altus4-website
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open your browser and visit http://localhost:5173
Build for Production
npm run build
The build artifacts will be stored in the dist/ directory.
Preview Production Build
npm run preview
Customization
Colors
The website uses a custom color palette defined in tailwind.config.js. Main colors:
  • Primary: Blue (#3b82f6) for buttons and accents
  • Secondary: Gray scale for text and backgrounds
Components
All UI components are located in src/components/ui/ and can be easily customized:
  • Button.vue: Customizable button component with variants
  • Card.vue: Container component for content sections
  • CardHeader.vue & CardContent.vue: Card sub-components
Content
To update the content:
  1. Hero Section: Edit src/components/HeroSection.vue
  2. Features: Modify src/components/FeaturesSection.vue
  3. Tech Specs: Update src/components/TechSpecsSection.vue
  4. Project Status: Change metrics in src/components/ProjectStatusSection.vue
  5. CTA: Customize links in src/components/CallToActionSection.vue
  6. Footer: Update contact info in src/components/FooterSection.vue
Documentation
This project includes comprehensive VitePress documentation that automatically syncs to a separate repository.
Documentation Site
Live Documentation: https://altus4.github.io/docs
Documentation Sync
The docs/ directory is automatically synchronized to the altus4/docs repository:
  • Automatic: Triggered on push to main or develop branches
  • Manual: Use npm run docs:sync for manual synchronization
  • GitHub Pages: Auto-deployment to documentation site
Working with Documentation
# Start documentation development server
npm run docs:dev
# Build documentation
npm run docs:build
# Preview built documentation
npm run docs:preview
# Sync documentation to separate repository
npm run docs:sync
# Force sync with custom message
npm run docs:sync:force
Documentation Setup
For initial setup of the documentation sync system, see DOCS_SYNC_SETUP.md.
Configuration
Vite Configuration
The project uses Vite with Vue plugin and path aliases configured in vite.config.ts.
TypeScript
TypeScript configuration is split into:
  • tsconfig.json: Base configuration
  • tsconfig.app.json: App-specific settings with path mappings
  • tsconfig.node.json: Node.js environment settings
Tailwind CSS
Tailwind is configured in tailwind.config.js with:
  • Custom color palette
  • Inter font family
  • Typography plugin
  • Custom utility classes
Performance
  • Lighthouse Score: 90+ (Performance, Accessibility, Best Practices, SEO)
  • Bundle Size: Optimized with Vite's tree shaking
  • Loading Speed: Lazy loading and optimized images
Deployment
Netlify
  1. Build the project: npm run build
  2. Deploy the dist/ folder to Netlify
  3. Configure custom domain: altus4.thavarshan.com
Vercel
  1. Connect your GitHub repository to Vercel
  2. Vercel will automatically detect it as a Vue.js project
  3. Configure domain settings
GitHub Pages
  1. Add deployment workflow in .github/workflows/deploy.yml
  2. Configure GitHub Pages to use the workflow
  3. Update base URL in vite.config.ts if needed
License
This project is licensed under the MIT License.
Author
Jerome (Thavarshan) Thayananthajothy
Contributing
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
Made with ❤️ for the Altus 4 project by Jerome Thayananthajothy
About
🌐 Official marketing website for Altus 4 | Modern Vue.js landing page with case studies, features showcase, and getting started guides
altus4.thavarshan.com
Topics
altus4case-studiesdeveloper-toolsgithub-pageslanding-pagemarketingmarketing-websitemysql-searchsingle-page-applicationvuejs
Resources
Readme
MIT license
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Altus 4 Marketing Website
A modern, responsive marketing website for Altus 4 - an AI-enhanced MySQL full-text search engine. Built with Vue.js 3, TypeScript, and Tailwind CSS.
Features
  • Modern Design: Clean, professional design with gradient backgrounds and smooth animations
  • Responsive: Mobile-first design that works on all devices
  • Performance Optimized: Fast loading with optimized assets and smooth scrolling
  • SEO Friendly: Comprehensive meta tags and semantic HTML structure
  • Accessible: Built with accessibility best practices
  • Documentation: Integrated VitePress documentation with automatic sync to separate repository
Tech Stack
  • Framework: Vue.js 3 (Composition API)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Components: Custom UI components inspired by Shadcn-Vue
  • Icons: Lucide Vue Next
  • Build Tool: Vite
  • Documentation: VitePress
Sections
  1. Hero Section: Value proposition with clear CTA buttons
  2. Features Section: Showcase of key capabilities (AI, Performance, Security)
  3. Technical Specifications: Architecture overview and tech stack details
  4. Project Status: Current metrics, completion status, and roadmap
  5. Call to Action: Community engagement and quick start links
  6. Footer: Contact information, resources, and tech stack
Quick Start
Prerequisites
  • Node.js 18+
  • npm or yarn
Installation
  1. Clone the repository:
git clone <repository-url>cd altus4-website
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open your browser and visit http://localhost:5173
Build for Production
npm run build
The build artifacts will be stored in the dist/ directory.
Preview Production Build
npm run preview
Customization
Colors
The website uses a custom color palette defined in tailwind.config.js. Main colors:
  • Primary: Blue (#3b82f6) for buttons and accents
  • Secondary: Gray scale for text and backgrounds
Components
All UI components are located in src/components/ui/ and can be easily customized:
  • Button.vue: Customizable button component with variants
  • Card.vue: Container component for content sections
  • CardHeader.vue & CardContent.vue: Card sub-components
Content
To update the content:
  1. Hero Section: Edit src/components/HeroSection.vue
  2. Features: Modify src/components/FeaturesSection.vue
  3. Tech Specs: Update src/components/TechSpecsSection.vue
  4. Project Status: Change metrics in src/components/ProjectStatusSection.vue
  5. CTA: Customize links in src/components/CallToActionSection.vue
  6. Footer: Update contact info in src/components/FooterSection.vue
Documentation
This project includes comprehensive VitePress documentation that automatically syncs to a separate repository.
Documentation Site
Live Documentation: https://altus4.github.io/docs
Documentation Sync
The docs/ directory is automatically synchronized to the altus4/docs repository:
  • Automatic: Triggered on push to main or develop branches
  • Manual: Use npm run docs:sync for manual synchronization
  • GitHub Pages: Auto-deployment to documentation site
Working with Documentation
# Start documentation development server
npm run docs:dev
# Build documentation
npm run docs:build
# Preview built documentation
npm run docs:preview
# Sync documentation to separate repository
npm run docs:sync
# Force sync with custom message
npm run docs:sync:force
Documentation Setup
For initial setup of the documentation sync system, see DOCS_SYNC_SETUP.md.
Configuration
Vite Configuration
The project uses Vite with Vue plugin and path aliases configured in vite.config.ts.
TypeScript
TypeScript configuration is split into:
  • tsconfig.json: Base configuration
  • tsconfig.app.json: App-specific settings with path mappings
  • tsconfig.node.json: Node.js environment settings
Tailwind CSS
Tailwind is configured in tailwind.config.js with:
  • Custom color palette
  • Inter font family
  • Typography plugin
  • Custom utility classes
Performance
  • Lighthouse Score: 90+ (Performance, Accessibility, Best Practices, SEO)
  • Bundle Size: Optimized with Vite's tree shaking
  • Loading Speed: Lazy loading and optimized images
Deployment
Netlify
  1. Build the project: npm run build
  2. Deploy the dist/ folder to Netlify
  3. Configure custom domain: altus4.thavarshan.com
Vercel
  1. Connect your GitHub repository to Vercel
  2. Vercel will automatically detect it as a Vue.js project
  3. Configure domain settings
GitHub Pages
  1. Add deployment workflow in .github/workflows/deploy.yml
  2. Configure GitHub Pages to use the workflow
  3. Update base URL in vite.config.ts if needed
License
This project is licensed under the MIT License.
Author
Jerome (Thavarshan) Thayananthajothy
Contributing
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
Made with ❤️ for the Altus 4 project by Jerome Thayananthajothy
About
🌐 Official marketing website for Altus 4 | Modern Vue.js landing page with case studies, features showcase, and getting started guides
altus4.thavarshan.com
Topics
altus4case-studiesdeveloper-toolsgithub-pageslanding-pagemarketingmarketing-websitemysql-searchsingle-page-applicationvuejs
Resources
Readme
MIT license
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
Altus 4 Marketing Website
A modern, responsive marketing website for Altus 4 - an AI-enhanced MySQL full-text search engine. Built with Vue.js 3, TypeScript, and Tailwind CSS.
Features
  • Modern Design: Clean, professional design with gradient backgrounds and smooth animations
  • Responsive: Mobile-first design that works on all devices
  • Performance Optimized: Fast loading with optimized assets and smooth scrolling
  • SEO Friendly: Comprehensive meta tags and semantic HTML structure
  • Accessible: Built with accessibility best practices
  • Documentation: Integrated VitePress documentation with automatic sync to separate repository
Tech Stack
  • Framework: Vue.js 3 (Composition API)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Components: Custom UI components inspired by Shadcn-Vue
  • Icons: Lucide Vue Next
  • Build Tool: Vite
  • Documentation: VitePress
Sections
  1. Hero Section: Value proposition with clear CTA buttons
  2. Features Section: Showcase of key capabilities (AI, Performance, Security)
  3. Technical Specifications: Architecture overview and tech stack details
  4. Project Status: Current metrics, completion status, and roadmap
  5. Call to Action: Community engagement and quick start links
  6. Footer: Contact information, resources, and tech stack
Quick Start
Prerequisites
  • Node.js 18+
  • npm or yarn
Installation
  1. Clone the repository:
git clone <repository-url>cd altus4-website
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open your browser and visit http://localhost:5173
Build for Production
npm run build
The build artifacts will be stored in the dist/ directory.
Preview Production Build
npm run preview
Customization
Colors
The website uses a custom color palette defined in tailwind.config.js. Main colors:
  • Primary: Blue (#3b82f6) for buttons and accents
  • Secondary: Gray scale for text and backgrounds
Components
All UI components are located in src/components/ui/ and can be easily customized:
  • Button.vue: Customizable button component with variants
  • Card.vue: Container component for content sections
  • CardHeader.vue & CardContent.vue: Card sub-components
Content
To update the content:
  1. Hero Section: Edit src/components/HeroSection.vue
  2. Features: Modify src/components/FeaturesSection.vue
  3. Tech Specs: Update src/components/TechSpecsSection.vue
  4. Project Status: Change metrics in src/components/ProjectStatusSection.vue
  5. CTA: Customize links in src/components/CallToActionSection.vue
  6. Footer: Update contact info in src/components/FooterSection.vue
Documentation
This project includes comprehensive VitePress documentation that automatically syncs to a separate repository.
Documentation Site
Live Documentation: https://altus4.github.io/docs
Documentation Sync
The docs/ directory is automatically synchronized to the altus4/docs repository:
  • Automatic: Triggered on push to main or develop branches
  • Manual: Use npm run docs:sync for manual synchronization
  • GitHub Pages: Auto-deployment to documentation site
Working with Documentation
# Start documentation development server
npm run docs:dev
# Build documentation
npm run docs:build
# Preview built documentation
npm run docs:preview
# Sync documentation to separate repository
npm run docs:sync
# Force sync with custom message
npm run docs:sync:force
Documentation Setup
For initial setup of the documentation sync system, see DOCS_SYNC_SETUP.md.
Configuration
Vite Configuration
The project uses Vite with Vue plugin and path aliases configured in vite.config.ts.
TypeScript
TypeScript configuration is split into:
  • tsconfig.json: Base configuration
  • tsconfig.app.json: App-specific settings with path mappings
  • tsconfig.node.json: Node.js environment settings
Tailwind CSS
Tailwind is configured in tailwind.config.js with:
  • Custom color palette
  • Inter font family
  • Typography plugin
  • Custom utility classes
Performance
  • Lighthouse Score: 90+ (Performance, Accessibility, Best Practices, SEO)
  • Bundle Size: Optimized with Vite's tree shaking
  • Loading Speed: Lazy loading and optimized images
Deployment
Netlify
  1. Build the project: npm run build
  2. Deploy the dist/ folder to Netlify
  3. Configure custom domain: altus4.thavarshan.com
Vercel
  1. Connect your GitHub repository to Vercel
  2. Vercel will automatically detect it as a Vue.js project
  3. Configure domain settings
GitHub Pages
  1. Add deployment workflow in .github/workflows/deploy.yml
  2. Configure GitHub Pages to use the workflow
  3. Update base URL in vite.config.ts if needed
License
This project is licensed under the MIT License.
Author
Jerome (Thavarshan) Thayananthajothy
Contributing
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
Made with ❤️ for the Altus 4 project by Jerome Thayananthajothy
About
🌐 Official marketing website for Altus 4 | Modern Vue.js landing page with case studies, features showcase, and getting started guides
altus4.thavarshan.com
Topics
altus4case-studiesdeveloper-toolsgithub-pageslanding-pagemarketingmarketing-websitemysql-searchsingle-page-applicationvuejs
Resources
Readme
MIT license
Activity
Custom properties
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Contributors
Languages