init commit
This commit is contained in:
David Melendez
233
resources/views/profile/show.blade.php
Normal file
233
resources/views/profile/show.blade.php
Normal file
@@ -0,0 +1,233 @@
|
||||
{{--
|
||||
User Profile - Professional Bootstrap Design
|
||||
Professional Profile Management Page
|
||||
|
||||
@author David Valera Melendez <david@valera-melendez.de>
|
||||
@created 2025-08-09
|
||||
@location Made in Germany 🇩🇪
|
||||
--}}
|
||||
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'My Profile - Professional Resume Builder')
|
||||
@section('page_class', 'profile-page')
|
||||
|
||||
@section('content')
|
||||
<div class="profile-container">
|
||||
<!-- Profile Header Section -->
|
||||
<section class="profile-header">
|
||||
<div class="card profile-header-card">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="profile-avatar-container">
|
||||
@if($user->avatar)
|
||||
<img src="{{ Storage::url($user->avatar) }}" alt="{{ $user->name }}" class="profile-avatar">
|
||||
@else
|
||||
<div class="profile-avatar-placeholder">
|
||||
<i class="bi bi-person-circle"></i>
|
||||
</div>
|
||||
@endif
|
||||
<div class="avatar-edit-badge">
|
||||
<a href="{{ route('profile.edit') }}" class="btn-edit-avatar" title="Edit Avatar">
|
||||
<i class="bi bi-camera"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h1 class="profile-name">{{ $user->name }}</h1>
|
||||
<p class="profile-email">{{ $user->email }}</p>
|
||||
@if($user->phone)
|
||||
<p class="profile-phone">
|
||||
<i class="bi bi-telephone"></i>
|
||||
{{ $user->phone }}
|
||||
</p>
|
||||
@endif
|
||||
<div class="profile-actions">
|
||||
<a href="{{ route('profile.edit') }}" class="btn primary-cta">
|
||||
<i class="bi bi-pencil-square"></i>
|
||||
Edit Profile
|
||||
</a>
|
||||
<a href="{{ route('account.settings') }}" class="btn secondary-cta">
|
||||
<i class="bi bi-gear"></i>
|
||||
Account Settings
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Profile Information Section -->
|
||||
<section class="profile-info">
|
||||
<div class="row g-4">
|
||||
<!-- Personal Information Card -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card info-card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-person"></i>
|
||||
Personal Information
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="info-list">
|
||||
<div class="info-item">
|
||||
<label class="info-label">Full Name</label>
|
||||
<span class="info-value">{{ $user->name }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<label class="info-label">Email Address</label>
|
||||
<span class="info-value">{{ $user->email }}</span>
|
||||
</div>
|
||||
@if($user->phone)
|
||||
<div class="info-item">
|
||||
<label class="info-label">Phone Number</label>
|
||||
<span class="info-value">{{ $user->phone }}</span>
|
||||
</div>
|
||||
@endif
|
||||
<div class="info-item">
|
||||
<label class="info-label">Member Since</label>
|
||||
<span class="info-value">{{ $user->created_at->format('F j, Y') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Account Status Card -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card info-card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-shield-check"></i>
|
||||
Account Status
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="status-list">
|
||||
<div class="status-item">
|
||||
<div class="status-indicator verified">
|
||||
<i class="bi bi-check-circle-fill"></i>
|
||||
</div>
|
||||
<div class="status-content">
|
||||
<span class="status-title">Email Verified</span>
|
||||
<span class="status-description">Your email address is verified</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="status-indicator active">
|
||||
<i class="bi bi-circle-fill"></i>
|
||||
</div>
|
||||
<div class="status-content">
|
||||
<span class="status-title">Account Active</span>
|
||||
<span class="status-description">Your account is in good standing</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="status-indicator">
|
||||
<i class="bi bi-clock"></i>
|
||||
</div>
|
||||
<div class="status-content">
|
||||
<span class="status-title">Last Login</span>
|
||||
<span class="status-description">{{ $user->updated_at->diffForHumans() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Biography Section -->
|
||||
@if($user->bio)
|
||||
<section class="profile-bio">
|
||||
<div class="card bio-card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-journal-text"></i>
|
||||
About Me
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="bio-text">{{ $user->bio }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
|
||||
<!-- Recent Activity Section -->
|
||||
<section class="profile-activity">
|
||||
<div class="card activity-card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-activity"></i>
|
||||
Recent Activity
|
||||
</h5>
|
||||
<a href="{{ route('resume-builder.index') }}" class="btn btn-outline-primary btn-sm">
|
||||
View All Resumes
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@if($user->resumes && $user->resumes->count() > 0)
|
||||
<div class="activity-list">
|
||||
@foreach($user->resumes->take(5) as $resume)
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon">
|
||||
<i class="bi bi-file-earmark-text"></i>
|
||||
</div>
|
||||
<div class="activity-content">
|
||||
<span class="activity-title">{{ $resume->title ?? 'Untitled Resume' }}</span>
|
||||
<span class="activity-description">
|
||||
Updated {{ $resume->updated_at->diffForHumans() }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="activity-actions">
|
||||
<a href="{{ route('resume-builder.edit', $resume) }}" class="btn btn-sm btn-outline-primary">
|
||||
Edit
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">
|
||||
<i class="bi bi-file-earmark-plus"></i>
|
||||
</div>
|
||||
<h6 class="empty-title">No Resumes Yet</h6>
|
||||
<p class="empty-description">Start building your professional resume today</p>
|
||||
<a href="{{ route('resume-builder.create') }}" class="btn primary-cta">
|
||||
<i class="bi bi-plus-circle"></i>
|
||||
Create Your First Resume
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add smooth animations
|
||||
const cards = document.querySelectorAll('.card');
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-fade-in');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
cards.forEach(card => {
|
||||
observer.observe(card);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
Reference in New Issue
Block a user