Startup Template

A professional website template with contact form functionality.

Technologies Used

Frontend

• HTML5 - Markup language for structuring web content
• CSS3 - Styling and layout with modern features
• Tailwind CSS (^4.1.11) - Utility-first CSS framework
  • Uses @tailwindcss/cli (^4.1.11) for processing styles
  • Implements custom utilities and themes
  • Responsive design with breakpoints
• JavaScript (ES6+) - Client-side scripting and interactivity
  • DOM manipulation and event handling
  • Form validation and AJAX requests
  • Theme switching with localStorage persistence
  • Smooth scrolling and animations
• Web Fonts - Poppins font family from Google Fonts
• Icons - Ionicons and Fluent Icons
• Animations - CSS keyframes and transitions
• Interactive Elements - Lordicon animations and Lottie animations
• Responsive Design - Mobile-first approach with breakpoints

Backend

• PHP (7.4+) - Server-side scripting language
• PHPMailer (^6.9) - Email sending library
  • Supports SMTP authentication
  • HTML email templates
  • Error handling and logging
• vlucas/phpdotenv (^5.6) - Environment variable management
  • Secure configuration storage
  • SMTP settings via environment variables

Build Tools & Dependencies

• Node.js - JavaScript runtime environment
• npm - Package manager for JavaScript dependencies
• Composer - Dependency manager for PHP

Additional Features

• Dark/Light Theme - Dynamic theme switching with localStorage persistence
• Form Validation - Both client-side (JavaScript) and server-side (PHP)
• Accessibility - Semantic HTML and proper labeling
• Performance Optimization - Minified assets and optimized images

Features

• Responsive design
• Contact form with email functionality
• Modern UI/UX
• Portfolio section
• Dark/light theme toggle
• Form validation (client and server-side)
• Environment-based configuration
• Cross-browser compatibility

Installation

1. Clone the repository:

   git clone <repository-url>
   

2. Install PHP dependencies:

   composer install
   

3. Install Node.js dependencies:

   npm install
   

4. Copy the environment file and configure your settings:

   cp .env.example .env
   

   Then edit .env with your SMTP settings.

5. Make sure your web server has PHP 7.4+ installed.

Configuration

Create a .env file with the following variables:

SMTP_HOST=smtp.yourhost.com
SMTP_USERNAME=your_email@domain.com
SMTP_PASSWORD=your_app_password
SMTP_PORT=465
SMTP_SECURE=ssl
CONTACT_EMAIL=contact@yourdomain.com

Usage

• Main page: index.html
• Contact page: contact.html
• Portfolio page: portfolio.html
• Contact form backend: contact.php

File Structure

├── CSS/                 # Stylesheets
│   ├── style.css        # Main styles
│   ├── portfolio.css    # Portfolio specific styles
│   └── premium.css      # Premium component styles
├── JS/                  # JavaScript files
│   ├── script.js        # Main scripts
│   ├── portfolio script.js # Portfolio scripts
│   ├── contact script.js  # Contact form scripts
│   └── premium-ui.js     # Premium UI components
├── images/              # Image assets
├── .env.example         # Environment variables example
├── .gitignore          # Git ignore rules
├── contact.php         # Contact form handler
├── index.html          # Main page
├── contact.html        # Contact page
└── portfolio.html      # Portfolio page

Security

• Never commit .env files to version control
• Validate and sanitize all user inputs
• Use strong passwords for SMTP accounts
• Enable two-factor authentication where possible

License

This project is licensed under the MIT License.