A modern, responsive, and highly customizable React portfolio template built with Tailwind CSS and Framer Motion. Showcase your work with stunning animations and a clean, professional design.
Preview our pages and access documentation
Folior is a modern, responsive portfolio template built with React, Tailwind CSS. 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/
folior-react/
├── public/
├── src/
│ ├── assets/
│ │ └── images/
│ ├── components/
│ │ ├── common-section/
│ │ │ ├── Services.jsx
│ │ │ ├── Portfolio.jsx
│ │ │ ├── Skills.jsx
│ │ │ └── Review.jsx
│ │ ├── home/
│ │ └── ui/
│ ├── data/
│ │ └── mock-data.json
│ ├── pages/
│ │ ├── NotFound.jsx
│ │ └── UnderMaintence.jsx
│ ├── router/
│ │ └── RoutesPath.jsx
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── package.json
└── README.mdReusable React components including common sections and UI elements
Page components including 404 and Maintenance pages
Static assets including images and other media files
Application routing configuration and navigation logic
| Version | Date | Changes | 1.0.0 | 19-08-2025 |
|
|---|
npm installnpm run devHere are the key dependencies and their versions used in this project:
| Package | Version | Description |
|---|---|---|
@tailwindcss/vite |
^4.1.11 | Vite plugin for Tailwind CSS |
framer-motion |
^12.23.12 | Production-ready animation library for React |
react |
^19.1.1 | JavaScript library for building user interfaces |
react-dom |
^19.1.1 | React package for working with the DOM |
react-router-dom |
^7.8.0 | Routing for React applications |
remixicon |
^4.6.0 | Open source icon library |
swiper |
^11.2.10 | Modern mobile touch slider |
tailwindcss |
^4.1.11 | Utility-first CSS framework |
Customize the template by modifying the following files and directories:
src/App.jsx - Root component with
main layout
src/main.jsx - Application entry
point
src/index.css - Global styles
src/components/ - Reusable
components
src/pages/ - Page components
src/router/ - Routing configuration
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);
}We offer 6 months of support for any questions or issues you may encounter.
React js
Tailwind CSS
Framer Motion
CSS 3
JavaScript
Responsive
Google Fonts
Icons
Modern Design
Easy Customizable
Clean Code
Well Documented
24/7 Support
Fast Loading
Copyright © Folior. All Rights Reserved. Crafted with ❤