Add collapsible sections, restructure menu, and refine sidebar layouts
- Wrapped all CV sections and sidebar sections in <details> tags for collapsibility - Added Expand All/Collapse All menu options with CV Sections submenu - Implemented smooth CSS animations for section expansion/collapse using max-height transitions - Fixed menu item alignment issues (removed extra padding) - Added dash between company name and duration in experience section - Moved SAP Technologies and AI-Assisted Development to bottom of right sidebar - Reordered JavaScript Ecosystem above Go Ecosystem in left sidebar - Implemented different layouts for left vs right sidebars: - Left sidebar: title left-aligned, triangle on right - Right sidebar: title right-aligned, triangle on left - Adjusted sidebar spacing for better visual hierarchy when sections are open/closed
This commit is contained in:
juanatsap
+210
-3
@@ -522,7 +522,7 @@ iconify-icon {
|
||||
/* Sidebar - Left column */
|
||||
.cv-sidebar {
|
||||
background: var(--sidebar-gray);
|
||||
padding: 2rem 1.5rem;
|
||||
padding: 4rem 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@@ -530,6 +530,12 @@ iconify-icon {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Add margin when sidebar section is collapsed */
|
||||
.sidebar-section:has(details:not([open])) {
|
||||
margin-bottom: 3rem;
|
||||
margin-top: 0rem;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
font-size: 1.4em;
|
||||
@@ -540,6 +546,96 @@ iconify-icon {
|
||||
color: rgb(51, 51, 51);
|
||||
}
|
||||
|
||||
/* Collapsible Sidebar Section Styles */
|
||||
.sidebar-section details {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sidebar-section details summary ~ * {
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
transition: max-height 0.5s ease-in-out,
|
||||
opacity 0.3s ease-in-out,
|
||||
transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.sidebar-section details[open] summary ~ * {
|
||||
max-height: 1500px;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.sidebar-section summary {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Remove default triangle marker */
|
||||
.sidebar-section summary::-webkit-details-marker,
|
||||
.sidebar-section summary::marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Sidebar title - no special positioning */
|
||||
.sidebar-section summary .sidebar-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Add custom collapse indicator at the far right (left sidebar) */
|
||||
.cv-sidebar-left .sidebar-section summary::after {
|
||||
content: '▶';
|
||||
font-size: 0.8em;
|
||||
color: rgb(100, 100, 100);
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
opacity: 0;
|
||||
margin-left: 15px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Add custom collapse indicator at the far left (right sidebar) */
|
||||
.cv-sidebar-right .sidebar-section summary {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cv-sidebar-right .sidebar-section summary .sidebar-title {
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cv-sidebar-right .sidebar-section summary::after {
|
||||
content: '▶';
|
||||
font-size: 0.8em;
|
||||
color: rgb(100, 100, 100);
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
opacity: 0;
|
||||
margin-right: 15px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Show indicator on hover or when closed */
|
||||
.sidebar-section summary:hover::after,
|
||||
.sidebar-section details:not([open]) summary::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Rotate indicator when open */
|
||||
.sidebar-section details[open] summary::after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* Hover effect on sidebar summary */
|
||||
.sidebar-section summary:hover .sidebar-title {
|
||||
color: var(--accent-blue);
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
font-size: 0.95em;
|
||||
@@ -547,6 +643,11 @@ iconify-icon {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Add breathing space when sidebar section is open */
|
||||
.sidebar-section details[open] .sidebar-content {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
margin-bottom: 0.15rem;
|
||||
color: rgb(0, 0, 0);
|
||||
@@ -672,6 +773,11 @@ iconify-icon {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/* Remove margin when section is collapsed */
|
||||
.cv-section:has(details:not([open])) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
font-size: 1.4em;
|
||||
@@ -682,6 +788,72 @@ iconify-icon {
|
||||
color: rgb(51, 51, 51);
|
||||
}
|
||||
|
||||
/* Collapsible Section Styles */
|
||||
.cv-section details {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cv-section details summary ~ * {
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
transition: max-height 0.5s ease-in-out,
|
||||
opacity 0.3s ease-in-out,
|
||||
transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.cv-section details[open] summary ~ * {
|
||||
max-height: 3000px;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.cv-section summary {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Remove default triangle marker in all browsers */
|
||||
.cv-section summary::-webkit-details-marker,
|
||||
.cv-section summary::marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Add custom collapse indicator after the title */
|
||||
.cv-section summary .section-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.cv-section summary .section-title::after {
|
||||
content: '▼';
|
||||
font-size: 0.8em;
|
||||
color: rgb(100, 100, 100);
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
opacity: 0;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
/* Show indicator on hover or when closed */
|
||||
.cv-section summary:hover .section-title::after,
|
||||
.cv-section details:not([open]) summary .section-title::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Rotate indicator when closed */
|
||||
.cv-section details:not([open]) summary .section-title::after {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
/* Hover effect on summary */
|
||||
.cv-section summary:hover .section-title {
|
||||
color: var(--accent-blue);
|
||||
}
|
||||
|
||||
.summary-text {
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
line-height: 1.5;
|
||||
@@ -780,8 +952,8 @@ iconify-icon {
|
||||
}
|
||||
|
||||
.duration-text {
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
color: #aaa;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.responsibilities {
|
||||
@@ -1884,6 +2056,41 @@ a:focus {
|
||||
color: var(--accent-blue);
|
||||
}
|
||||
|
||||
/* Remove extra padding - all menu items should align consistently */
|
||||
|
||||
/* Submenu styles */
|
||||
.menu-item-submenu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-item.has-submenu {
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.submenu-arrow {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.menu-item-submenu.submenu-open .submenu-arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.submenu-content {
|
||||
display: none;
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.menu-item-submenu.submenu-open .submenu-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.submenu-content .menu-item {
|
||||
padding-left: 3rem;
|
||||
font-size: 0.9rem;
|
||||
border-left-width: 2px;
|
||||
}
|
||||
|
||||
/* Section icons in titles */
|
||||
.section-icon {
|
||||
vertical-align: middle;
|
||||
|
||||
Reference in New Issue
Block a user