mahdium/portfolio
1
0
Fork 0
mirror of https://github.com/mmahdium/portfolio.git synced 2026-08-17 05:24:30 +03:30
Code Issues Packages Projects Releases Wiki Activity

feat(blog): enhance content styling and add new blog post with sharing capabilities

Browse Source 
- Refine blog typography with optimized font sizes and line heights for better readability
- Adjust heading margins and sizes (h1-h4) for improved visual hierarchy
- Implement custom bullet styling with primary color indicators for lists
- Add highlighted key phrases styling with left border accent for emphasized content
- Create new BlogShare component for social sharing functionality
- Add Callout and PullQuote content components for enhanced blog formatting
- Introduce resume-button.css for improved button styling
- Update blog post template with slug-based routing support
- Add new blog post "Career Change: From Huawei to Frontend" in English and Persian
- Enhance portfolio components (Hero, Skills, AIStack, etc.) with refined styling
- Improve RTL language support with better spacing and alignment for Persian content
- Add blog hero image asset (big-career-change.webp)
- Update i18n translations for new blog content and UI improvements
- Optimize code block and inline code styling with CSS variables for consistency
- Refine blockquote styling with better contrast and spacing
This commit is contained in:
mahdiarghyani
2025-12-13 18:05:39 +03:30
parent eb6a4adef3
commit 13031465e3
21 changed files with 1339 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/css/resume-button.css
+82
View File
@@ -0,0 +1,82 @@
/* Resume Button with Dynamic Gradient */
.resume-gradient-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.875rem 1.75rem;
font-size: 1.125rem;
font-weight: 700;
color: white;
border-radius: 9999px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
/* Dynamic gradient using theme colors */
background: linear-gradient(
135deg,
var(--ui-color-primary-600) 0%,
var(--ui-color-primary-500) 50%,
color-mix(in srgb, var(--ui-color-primary-500) 80%, #ec4899 20%) 100%
);
/* Glow effect */
box-shadow:
0 0 30px color-mix(in srgb, var(--ui-color-primary-500) 40%, transparent),
0 10px 25px color-mix(in srgb, var(--ui-color-primary-600) 30%, transparent),
0 4px 12px rgba(0, 0, 0, 0.15);
}
.resume-gradient-button:hover {
transform: scale(1.05);
box-shadow:
0 0 40px color-mix(in srgb, var(--ui-color-primary-500) 60%, transparent),
0 0 60px color-mix(in srgb, var(--ui-color-primary-400) 40%, transparent),
0 15px 35px color-mix(in srgb, var(--ui-color-primary-600) 40%, transparent),
0 6px 20px rgba(0, 0, 0, 0.2);
}
/* Shine effect on hover */
.resume-gradient-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.5s ease;
}
.resume-gradient-button:hover::before {
left: 100%;
}
/* Dark mode adjustments */
.dark .resume-gradient-button {
background: linear-gradient(
135deg,
var(--ui-color-primary-500) 0%,
var(--ui-color-primary-600) 50%,
color-mix(in srgb, var(--ui-color-primary-600) 80%, #ec4899 20%) 100%
);
box-shadow:
0 0 35px color-mix(in srgb, var(--ui-color-primary-400) 50%, transparent),
0 10px 30px color-mix(in srgb, var(--ui-color-primary-500) 40%, transparent),
0 4px 12px rgba(0, 0, 0, 0.3);
}
.dark .resume-gradient-button:hover {
box-shadow:
0 0 50px color-mix(in srgb, var(--ui-color-primary-400) 70%, transparent),
0 0 80px color-mix(in srgb, var(--ui-color-primary-300) 50%, transparent),
0 15px 40px color-mix(in srgb, var(--ui-color-primary-500) 50%, transparent),
0 6px 20px rgba(0, 0, 0, 0.4);
}