🚀 Welcome to the Future
Crafting Modern Personal Portfolio
Experience seamless trading, real-time analytics, and secure transactions with our cutting-edge cryptocurrency platform.
Experience seamless trading, real-time analytics, and secure transactions with our cutting-edge cryptocurrency platform.
Preview our pages and access documentation
Folior is a modern, responsive portfolio template built with HTML, Tailwind CSS, and JavaScript. It features a clean, professional design with smooth animations and transitions. The template is fully responsive and works perfectly on all device sizes, from mobile phones to large desktop screens.
Clean and professional layout with attention to detail
Looks great on all devices and screen sizes
Optimized for speed and smooth animations
folior/
├── documentation/
│ ├── css/
│ │ ├── app.css
│ │ └── button.css
│ └── index.html
├── images/
│ ├── logos/
│ │ ├── html.svg
│ │ ├── css.svg
│ │ ├── javascript.svg
│ │ └── ...
│ └── ...
├── js/
│ └── app.js
├── css/
│ ├── input.css
│ └── output.css
├── index.html
├── index-dark.html
├── index2.html
├── index2-dark.html
├── index3.html
├── index3-dark.html
└── README.mdDocumentation website files and assets
All image assets including logos and other media
JavaScript files including main application logic
CSS source files and compiled output
| Version | Date | Changes |
|---|---|---|
| 1.5.0 | 19-08-2025 |
|
| 1.0.0 | 30-06-2025 |
|
Make sure you have Node.js and npm installed on your system. You can download them from nodejs.org.
Install Tailwind CSS and its peer dependencies via npm:
npm install tailwindcss @tailwindcss/cliImport Tailwind in your CSS file:
@import "tailwindcss";Run the CLI tool to scan your template files for classes and build your CSS:
npx tailwindcss -i ./css/input.css -o ./css/output.css --watchAdd the compiled CSS file to the <head> of your HTML:
<link href="/style/output.css" rel="stylesheet">Here are the key dependencies and their versions used in this project:
| Package | Version | Description |
|---|---|---|
@tailwindcss/cli |
^4.1.11 | Utility First FrameWork |
Customize the template by modifying the following files and directories:
index.html - Main homepage
index-dark.html - Main homepage (dark)
index2.html - Alternative homepage layout
index2-dark.html - Alternative homepage layout (dark)
index3.html - Dark mode homepage variant
index3-dark.html - Dark mode homepage variant (dark)
style/input.css - Main CSS file with Tailwind directives
style/output.css - Compiled CSS (don't edit directly)
js/app.js - Main JavaScript file with all animations and functionality
Customize your theme colors by editing the CSS variables in style/input.css:
/* Primary Color Palette */
--color-primary: #20938A; /* Main brand color */
--color-primary-light: #20938A26; /* 15% opacity */
--color-primary-dark: #19766F; /* Darker shade */
--color-primary-hover: #26B0A6; /* Hover state */
--color-primary-border: #20938A80; /* 50% opacity for borders *//* Dark Theme Variables */
--color-dark-bg-primary: #0F172A; /* Main background */
--color-dark-bg-secondary: #1E293B; /* Secondary background */
--color-dark-text-primary: #F8FAFC; /* Main text */
--color-dark-text-secondary: #CBD5E1; /* Secondary text */
--color-dark-border: #334155; /* Border color *//* Light Theme Variables */
--color-light-bg-primary: #FFFFFF; /* Main background */
--color-light-bg-secondary: #F8FAFC; /* Secondary background */
--color-light-text-primary: #0F172A; /* Main text */
--color-light-text-secondary: #334155;/* Secondary text */
--color-light-border: #E2E8F0; /* Border color */The template uses Outfit as the primary font, loaded from Google Fonts.
/* In style/input.css */
@import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');
/* Apply font to body */
body {
font-family: var(--font-outfit);
}input.css, rebuild your CSS using the Tailwind CLI:
npx tailwindcss -i ./style/input.css -o ./style/output.css --watchWe offer 6 months of support for any questions or issues you may encounter.
HTML 5
CSS 3
JavaScript
Tailwind CSS
GSAP
Responsive
Google Fonts
Icons
Modern Design
Easy Customizable
Clean Code
Well Documented
24/7 Support
Fast Loading
Copyright © Folior. All Rights Reserved. Crafted with ❤