Skip to content

Commit 436f983

Browse files
danribesdanribes
committed
feat: Transform unique profile section with dark theme and health economics imagery
🎨 Dark Theme Design: - Changed background to dark gradient (#1a1d29 to #2d1b3d) - Enhanced contrast with white text and glowing effects - Added sophisticated border and shadow effects 🔬 Health Economics Background Patterns: - Mathematical formulas (Σ P(x), λ = 0.05, ICER) - Statistical symbols and probability curves - Markov chain diagram visualization - Grid pattern overlay suggesting data/analytics - All patterns subtly integrated at low opacity ⭕ Steady Professional Circles: - REMOVED floating animation for professional appearance - Increased circle size to 150px for better visibility - Added icons: 📊 (Health), ⚙️ (Engineer), 🔗 (Blockchain) - Distinct gradient colors for each discipline: * Purple gradient for Health Economist * Blue gradient for Engineer * Green gradient for Blockchain - Enhanced hover effects with glow and scale - Inset highlights for 3D depth effect ✨ Visual Enhancements: - Text shadows for better readability on dark background - Glowing borders that respond to hover - Layered box shadows for depth - SVG patterns for mathematical/statistical themes - Professional appearance suitable for LinkedIn
1 parent 1db365f commit 436f983

2 files changed

Lines changed: 155 additions & 30 deletions

File tree

‎css/style.css‎

Lines changed: 142 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -684,74 +684,189 @@ ul {
684684

685685
.unique-profile {
686686
margin-top: 3rem;
687-
padding: 2.5rem;
688-
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
689-
border-radius: var(--radius-lg);
690-
border: 2px solid rgba(102, 126, 234, 0.1);
687+
padding: 3rem;
688+
background: linear-gradient(135deg, #1a1d29 0%, #2d1b3d 100%);
689+
border-radius: var(--radius-xl);
690+
border: 2px solid rgba(102, 126, 234, 0.3);
691691
transition: all var(--transition-normal);
692+
position: relative;
693+
overflow: hidden;
694+
}
695+
696+
/* Background Pattern with Health Economics Elements */
697+
.profile-background-pattern {
698+
position: absolute;
699+
top: 0;
700+
left: 0;
701+
right: 0;
702+
bottom: 0;
703+
opacity: 0.08;
704+
background-image:
705+
/* Mathematical formulas pattern */
706+
url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='10' y='30' font-family='monospace' font-size='14' fill='%23ffffff'%3EΣ P(x)%3C/text%3E%3Ctext x='10' y='60' font-family='monospace' font-size='12' fill='%23ffffff'%3Eλ = 0.05%3C/text%3E%3Ctext x='10' y='80' font-family='monospace' font-size='12' fill='%23ffffff'%3EICER%3C/text%3E%3C/svg%3E"),
707+
/* Grid pattern */
708+
linear-gradient(rgba(102, 126, 234, 0.1) 1px, transparent 1px),
709+
linear-gradient(90deg, rgba(102, 126, 234, 0.1) 1px, transparent 1px);
710+
background-size: 200px 200px, 40px 40px, 40px 40px;
711+
background-position: 0 0, 0 0, 0 0;
712+
pointer-events: none;
713+
}
714+
715+
/* Statistical symbols overlay */
716+
.unique-profile::before {
717+
content: '';
718+
position: absolute;
719+
top: 20px;
720+
right: 20px;
721+
width: 120px;
722+
height: 120px;
723+
background: url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23667eea' stroke-width='2' opacity='0.15'%3E%3Ccircle cx='60' cy='60' r='50'/%3E%3Cpath d='M30,60 Q45,30 60,60 T90,60' stroke='%2310b981'/%3E%3Cline x1='30' y1='80' x2='90' y2='40' stroke='%23f59e0b'/%3E%3C/g%3E%3C/svg%3E");
724+
background-size: contain;
725+
background-repeat: no-repeat;
726+
}
727+
728+
/* Markov chain diagram */
729+
.unique-profile::after {
730+
content: '';
731+
position: absolute;
732+
bottom: 20px;
733+
left: 20px;
734+
width: 100px;
735+
height: 100px;
736+
background: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23667eea' stroke-width='1.5' opacity='0.12'%3E%3Ccircle cx='25' cy='50' r='15' fill='%231a1d29' stroke='%2310b981'/%3E%3Ccircle cx='75' cy='50' r='15' fill='%231a1d29' stroke='%23667eea'/%3E%3Cpath d='M40,50 L60,50' stroke='%23f59e0b' marker-end='url(%23arrow)'/%3E%3Cpath d='M75,35 Q85,25 75,15 Q65,25 75,35' stroke='%2310b981'/%3E%3C/g%3E%3C/svg%3E");
737+
background-size: contain;
738+
background-repeat: no-repeat;
692739
}
693740

694741
.unique-profile:hover {
695742
transform: translateY(-5px);
696-
box-shadow: var(--shadow-colored);
697-
border-color: rgba(102, 126, 234, 0.3);
743+
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.4);
744+
border-color: rgba(102, 126, 234, 0.5);
698745
}
699746

700747
.unique-profile h3 {
701-
margin-bottom: 2rem;
748+
margin-bottom: 2.5rem;
702749
text-align: center;
750+
color: #ffffff;
751+
position: relative;
752+
z-index: 1;
753+
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
703754
}
704755

705756
.profile-circles {
706757
display: flex;
707758
justify-content: space-around;
708-
margin: 2rem 0;
759+
margin: 3rem 0;
760+
position: relative;
761+
z-index: 1;
762+
}
763+
764+
.circle-item {
765+
position: relative;
709766
}
710767

711768
.circle {
712-
width: 130px;
713-
height: 130px;
769+
width: 150px;
770+
height: 150px;
714771
border-radius: 50%;
715-
background: var(--gradient-primary);
772+
background: linear-gradient(135deg, #2d1b3d 0%, #1a1d29 100%);
716773
color: white;
717774
display: flex;
775+
flex-direction: column;
718776
align-items: center;
719777
justify-content: center;
720778
text-align: center;
721779
font-weight: 600;
722780
font-size: 0.875rem;
723781
padding: 1rem;
724-
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
782+
box-shadow:
783+
0 10px 40px rgba(0, 0, 0, 0.4),
784+
inset 0 1px 0 rgba(255, 255, 255, 0.1),
785+
0 0 0 1px rgba(102, 126, 234, 0.3);
725786
transition: all var(--transition-normal);
726-
animation: float 6s infinite ease-in-out;
787+
border: 2px solid rgba(102, 126, 234, 0.4);
788+
position: relative;
789+
/* NO ANIMATION - steady circles */
727790
}
728791

729-
.circle:nth-child(1) {
730-
background: var(--gradient-primary);
731-
animation-delay: 0s;
792+
.circle-icon {
793+
font-size: 2.5rem;
794+
margin-bottom: 0.5rem;
795+
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
732796
}
733797

734-
.circle:nth-child(2) {
735-
background: var(--gradient-accent);
736-
animation-delay: 2s;
798+
.circle-text {
799+
font-size: 0.9rem;
800+
line-height: 1.3;
737801
}
738802

739-
.circle:nth-child(3) {
740-
background: var(--gradient-success);
741-
animation-delay: 4s;
803+
/* Individual circle colors - steady, no animation */
804+
.circle-health {
805+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
806+
border-color: #667eea;
807+
box-shadow:
808+
0 10px 40px rgba(102, 126, 234, 0.5),
809+
inset 0 1px 0 rgba(255, 255, 255, 0.2),
810+
0 0 0 1px rgba(102, 126, 234, 0.5);
811+
}
812+
813+
.circle-engineer {
814+
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
815+
border-color: #4facfe;
816+
box-shadow:
817+
0 10px 40px rgba(79, 172, 254, 0.5),
818+
inset 0 1px 0 rgba(255, 255, 255, 0.2),
819+
0 0 0 1px rgba(79, 172, 254, 0.5);
820+
}
821+
822+
.circle-blockchain {
823+
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
824+
border-color: #43e97b;
825+
box-shadow:
826+
0 10px 40px rgba(67, 233, 123, 0.5),
827+
inset 0 1px 0 rgba(255, 255, 255, 0.2),
828+
0 0 0 1px rgba(67, 233, 123, 0.5);
742829
}
743830

744831
.circle:hover {
745-
transform: scale(1.15) rotate(5deg);
746-
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
832+
transform: scale(1.1);
833+
box-shadow:
834+
0 20px 60px rgba(102, 126, 234, 0.6),
835+
inset 0 1px 0 rgba(255, 255, 255, 0.3),
836+
0 0 0 2px rgba(255, 255, 255, 0.3);
837+
}
838+
839+
.circle-health:hover {
840+
box-shadow:
841+
0 20px 60px rgba(102, 126, 234, 0.8),
842+
inset 0 1px 0 rgba(255, 255, 255, 0.3),
843+
0 0 0 2px rgba(102, 126, 234, 0.8);
844+
}
845+
846+
.circle-engineer:hover {
847+
box-shadow:
848+
0 20px 60px rgba(79, 172, 254, 0.8),
849+
inset 0 1px 0 rgba(255, 255, 255, 0.3),
850+
0 0 0 2px rgba(79, 172, 254, 0.8);
851+
}
852+
853+
.circle-blockchain:hover {
854+
box-shadow:
855+
0 20px 60px rgba(67, 233, 123, 0.8),
856+
inset 0 1px 0 rgba(255, 255, 255, 0.3),
857+
0 0 0 2px rgba(67, 233, 123, 0.8);
747858
}
748859

749860
.profile-note {
750861
text-align: center;
751862
font-style: italic;
752-
color: var(--text-secondary);
753-
font-size: 0.9rem;
754-
margin-top: 2rem;
863+
color: rgba(255, 255, 255, 0.8);
864+
font-size: 1rem;
865+
margin-top: 2.5rem;
866+
position: relative;
867+
z-index: 1;
868+
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
869+
line-height: 1.6;
755870
}
756871

757872
.about-highlights {

‎index.html‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,16 +105,26 @@ <h2 class="section-title">Professional Summary</h2>
105105
and innovative healthcare solutions delivery.
106106
</p>
107107
<div class="unique-profile">
108+
<div class="profile-background-pattern"></div>
108109
<h3>Unique Professional Profile</h3>
109110
<div class="profile-circles">
110111
<div class="circle-item">
111-
<div class="circle">Health<br>Economist</div>
112+
<div class="circle circle-health">
113+
<div class="circle-icon">📊</div>
114+
<div class="circle-text">Health<br>Economist</div>
115+
</div>
112116
</div>
113117
<div class="circle-item">
114-
<div class="circle">Agricultural<br>Engineer</div>
118+
<div class="circle circle-engineer">
119+
<div class="circle-icon">⚙️</div>
120+
<div class="circle-text">Agricultural<br>Engineer</div>
121+
</div>
115122
</div>
116123
<div class="circle-item">
117-
<div class="circle">Blockchain<br>Developer</div>
124+
<div class="circle circle-blockchain">
125+
<div class="circle-icon">🔗</div>
126+
<div class="circle-text">Blockchain<br>Developer</div>
127+
</div>
118128
</div>
119129
</div>
120130
<p class="profile-note">

0 commit comments

Comments
 (0)