Template Documentation 📚
Introduction 👋
Welcome to the Wholesome Dev Template! This fun, interactive portfolio template is built with Astro and features a playful design with lots of animations and personality. This documentation will help you customize and deploy your own version.
Features ✨
🌓 Dark/Light Mode
Toggle between light and dark themes with automatic OS preference detection
🎨 Theme Customization
Change color schemes, font sizes, and animation speeds
🌐 SEO Optimization
Optimize your site for search engines with built-in SEO settings
📱 Fully Responsive
Looks great on all devices from mobile to desktop
📝 Blog Support
Integrated blog functionality with Markdown support
🎭 Fun Animations
Playful animations that can be customized or disabled
📣 Toast Notifications
Customizable toast notification system
♿ Accessibility
Accessible design with reduced motion options
Getting Started 🚀
1. Prerequisites
- Node.js (v20+)
- npm or yarn
2. Installation
# Navigate to project directory
cd wholesome-dev-template
# Install dependencies
npm install
3. Development
# Start development server
npm run dev
This will start a local development server at http://localhost:3000
4. Building for Production
# Build the project
npm run build
The built files will be in the dist/ directory.
Customization 🔧
Personal Information
Edit the data files in src/data/ to update your:
- Projects
- Skills
- Education
- Work experience
- Testimonials
Adding Blog Posts
Create new markdown files in src/blogs/ with the following frontmatter format:
---
title: "My Awesome Blog Post"
date: "2023-06-15"
description: "A short description of the post"
image: "/blog-images/my-post-image.jpg"
tags: ["javascript", "web development"]
---
Changing Colors & Theme
This template uses Tailwind CSS for styling. You can customize the default colors in:
tailwind.config.cjs
Adding Translations
Expand the translations object in:
src/components/LanguageSwitcher.astro
Deployment 🚢
Netlify
# netlify.toml
[build]
command = "npm run build"
publish = "dist"
Vercel
For Vercel, simply connect your repository and it will automatically detect the Astro project.
Support 🆘
If you have any questions or need help with customization, please feel free to: