this is new GothamFolio development, previous one - working but kind of outdated - moved to archive at GothamFolio-v1
A modern, responsive portfolio website built with Laravel 12, Livewire, Volt, and Folio. Features a beautiful design with dark mode support and a fully functional feedback system.
- Modern Tech Stack: Laravel 12 + Livewire + Volt + Folio
- Responsive Design: Mobile-first approach with Tailwind CSS
- Dark Mode Support: Automatic dark/light theme switching
- Interactive Components: Alpine.js for client-side interactivity
- Feedback System: Contact form with database storage and email notifications
- Multi-section Layout: Hero carousel, features, resume, portfolio, galleries, blog, and contacts
- Future Multilingual Support: Planned internationalization features
- Backend: Laravel 12, PHP 8.3+
- Required PHP Extensions:
ext-dom(for HTML parsing in blog posts)ext-libxml(for XML error handling)
- Frontend: Livewire, Volt, Alpine.js, Tailwind CSS 4
- Routing: Laravel Folio for page-based routing
- Database: SQLite (default), supports MySQL/PostgreSQL
- Build Tool: Vite
- Icons: Font Awesome 7
-
Clone the repository
git clone <your-repo-url> cd gothamfolio
-
Install dependencies
composer install npm install
-
Setup environment
cp .env.example .env php artisan key:generate
-
Configure database
# For SQLite (default) touch database/database.sqlite # Or configure MySQL/PostgreSQL in .env
-
Run migrations
php artisan migrate
-
Build assets
npm run build
-
Start development server
php artisan serve
gothamfolio/
โโโ app/
โ โโโ Livewire/ # Livewire Volt components
โ โโโ Mail/ # Email templates and logic
โ โโโ Models/ # Database models
โ โโโ View/Components/ # Blade components
โโโ resources/
โ โโโ views/
โ โ โโโ components/ # Reusable UI components
โ โ โโโ livewire/ # Livewire component views
โ โ โโโ pages/ # Folio pages
โ โโโ css/ # Stylesheets
โ โโโ js/ # JavaScript files
โโโ database/
โโโ migrations/ # Database migrations
โโโ seeders/ # Database seeders
To enable email notifications for feedback:
-
Configure mail settings in
.env:MAIL_MAILER=smtp MAIL_HOST=your-smtp-host MAIL_PORT=587 MAIL_USERNAME=your-email MAIL_PASSWORD=your-password MAIL_FROM_ADDRESS=your-email@example.com MAIL_FROM_NAME="Your Name" MAIL_TO_ADDRESS=admin@example.com
-
Available mail drivers: smtp, mailgun, postmark, ses, resend, log, array
- Hero: Interactive carousel with call-to-action buttons
- Features: Three-column feature highlights
- Resume: Professional experience and skills
- Portfolio: Project showcase with technology tags
- Galleries: Photo/art galleries
- Blog: Blog post previews
- Contacts: Contact information and feedback form
- Database Model:
Feedbackwith soft deletes - Livewire Component:
FeedbackFormwith validation - Email Notification:
FeedbackReceivedmail class - Validation: Comprehensive form validation rules
# Setup project (first time)
composer run setup
# Start development servers
composer run dev
# Build for production
npm run build
# Run tests
composer run test
# Code formatting
./vendor/bin/pintKey environment variables to configure:
APP_NAME="GothamFolio"
APP_URL=http://localhost:8000
DB_CONNECTION=sqlite
# DB_DATABASE=/absolute/path/to/database.sqlite
MAIL_MAILER=log
MAIL_TO_ADDRESS=your-admin-email@example.comThe website is fully responsive with breakpoints:
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
Primary color palette defined in tailwind.config.js:
- Primary: Blue gradient (50-900)
- Custom gradients and glass effects
All components are located in resources/views/components/frontend/ and can be easily modified.
- Multilingual Support: Internationalization (i18n) implementation
- Content Management: Admin panel for content updates
- Blog System: Full-featured blogging capabilities
- Image Optimization: Advanced image handling for galleries
- SEO Optimization: Enhanced search engine optimization
- Fork the project
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
If you have any questions or issues, please open an issue on GitHub or contact through the feedback form on the website.
Built with โค๏ธ using Laravel, Livewire, and Tailwind CSS.