Fix founder section: name to Vadym Samoilenko, avatar placeholder, interactive hover effects
- Fix name from Danylo to Vadym Samoilenko - Remove broken photo file, add gradient avatar with initials as placeholder - Add whileHover animations to differentiator cards, values, industry badges, founder card - Glass cards lift on hover with orange glow - Founder card glow/shadow on hover Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko
parent
af26ccd2b7
commit
a7b8738262
3 changed files with 66 additions and 28 deletions
|
|
@ -1,16 +0,0 @@
|
|||
|
||||
<html><head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<title>413 Request Entity Too Large</title>
|
||||
</head>
|
||||
<body text=#000000 bgcolor=#ffffff>
|
||||
<h1>Error: Request Entity Too Large</h1>
|
||||
<h2>Your client issued a request that was too large.
|
||||
</h2>
|
||||
<h2><script>
|
||||
(function() { var c=function(a,d,b){a=a+"=deleted; path="+d;b!=null&&(a+="; domain="+b);document.cookie=a+"; expires=Thu, 01 Jan 1970 00:00:00 GMT"};var g=function(a){var d=e,b=location.hostname;c(d,a,null);c(d,a,b);for(var f=0;;){f=b.indexOf(".",f+1);if(f<0)break;c(d,a,b.substring(f+1))}};var h;if(unescape(encodeURI(document.cookie)).length>4E3){for(var k=document.cookie.split(";"),l=[],m=0;m<k.length;m++){var n=k[m].match(/^\s*([^=]+)/);n&&l.push(n[1])}for(var p=0;p<l.length;p++){var e=l[p];g("/");for(var q=location.pathname,r=0;;){r=q.indexOf("/",r+1);if(r<0)break;var t=q.substring(0,r);g(t);g(t+"/")}q.charAt(q.length-1)!="/"&&(g(q),g(q+"/"))}h=!0}else h=!1;
|
||||
h&&setTimeout(function(){if(history.replaceState){var a=location.href;history.replaceState(null,"","/");location.replace(a)}},1E3); })();
|
||||
|
||||
</script>
|
||||
</h2>
|
||||
</body></html>
|
||||
|
|
@ -65,11 +65,13 @@
|
|||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
transition: border-color 0.3s;
|
||||
transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.about-glass-card:hover {
|
||||
border-color: var(--orange-100);
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
box-shadow: 0 4px 30px rgba(255, 91, 4, 0.08);
|
||||
}
|
||||
|
||||
.about-card-icon {
|
||||
|
|
@ -113,6 +115,13 @@
|
|||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
transition: background 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.about-value-item:hover {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
box-shadow: 0 4px 20px rgba(255, 91, 4, 0.06);
|
||||
}
|
||||
|
||||
.about-value-item h3 {
|
||||
|
|
@ -133,7 +142,7 @@
|
|||
.about-founder-card {
|
||||
display: flex;
|
||||
gap: 2.5rem;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
|
|
@ -142,18 +151,54 @@
|
|||
border-left: 3px solid var(--orange-100);
|
||||
border-radius: 16px;
|
||||
padding: 2.5rem;
|
||||
transition: box-shadow 0.4s, border-color 0.4s;
|
||||
}
|
||||
|
||||
.about-founder-photo {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.about-founder-avatar {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--orange-100), var(--yellow-100));
|
||||
border: 3px solid rgba(255, 91, 4, 0.3);
|
||||
box-shadow: 0 0 30px rgba(255, 91, 4, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.about-founder-avatar span {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
letter-spacing: 0.05em;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.about-founder-avatar:hover {
|
||||
border-color: var(--orange-100);
|
||||
box-shadow: 0 0 50px rgba(255, 91, 4, 0.25);
|
||||
}
|
||||
|
||||
/* When real photo is available, swap avatar with this: */
|
||||
.about-founder-img {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 3px solid rgba(255, 255, 255, 0.15);
|
||||
object-position: top;
|
||||
border: 3px solid rgba(255, 91, 4, 0.3);
|
||||
box-shadow: 0 0 30px rgba(255, 91, 4, 0.12);
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.about-founder-img:hover {
|
||||
border-color: var(--orange-100);
|
||||
box-shadow: 0 0 40px rgba(255, 91, 4, 0.2);
|
||||
}
|
||||
|
||||
.about-founder-info h3 {
|
||||
|
|
|
|||
|
|
@ -145,8 +145,9 @@ const AboutPage = () => {
|
|||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-80px' }}
|
||||
transition={{ duration: 0.5, delay: i * 0.1 }}
|
||||
whileHover={{ y: -6, borderColor: 'rgba(255, 91, 4, 0.6)', transition: { duration: 0.25 } }}
|
||||
>
|
||||
<div className="about-card-icon">{d.icon}</div>
|
||||
<motion.div className="about-card-icon" whileHover={{ scale: 1.2, rotate: 5 }}>{d.icon}</motion.div>
|
||||
<h3>{d.title}</h3>
|
||||
<p>{d.desc}</p>
|
||||
</motion.div>
|
||||
|
|
@ -168,6 +169,7 @@ const AboutPage = () => {
|
|||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-60px' }}
|
||||
transition={{ duration: 0.4, delay: i * 0.08 }}
|
||||
whileHover={{ scale: 1.05, borderColor: 'rgba(255, 91, 4, 0.4)', transition: { duration: 0.2 } }}
|
||||
>
|
||||
<h3>{v.name}</h3>
|
||||
<p>{v.desc}</p>
|
||||
|
|
@ -181,12 +183,18 @@ const AboutPage = () => {
|
|||
<section className="about-section">
|
||||
<div className="container">
|
||||
<motion.h2 className="section-title" {...fadeUp}>Meet the Founder</motion.h2>
|
||||
<motion.div className="about-founder-card" {...fadeUp}>
|
||||
<div className="about-founder-photo">
|
||||
<img src="/founder-danylo.jpeg" alt="Danylo — CEO & Founder of AImpress" className="about-founder-img" />
|
||||
</div>
|
||||
<motion.div
|
||||
className="about-founder-card"
|
||||
{...fadeUp}
|
||||
whileHover={{ borderColor: 'rgba(255, 91, 4, 0.4)', boxShadow: '0 8px 40px rgba(255, 91, 4, 0.1)', transition: { duration: 0.3 } }}
|
||||
>
|
||||
<motion.div className="about-founder-photo" whileHover={{ scale: 1.05 }} transition={{ duration: 0.3 }}>
|
||||
<div className="about-founder-avatar">
|
||||
<span>VS</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
<div className="about-founder-info">
|
||||
<h3>Danylo</h3>
|
||||
<h3>Vadym Samoilenko</h3>
|
||||
<span className="about-founder-role">CEO & Founder of AImpress Ltd</span>
|
||||
<ul className="about-founder-details">
|
||||
<li>
|
||||
|
|
@ -224,6 +232,7 @@ const AboutPage = () => {
|
|||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: i * 0.06 }}
|
||||
whileHover={{ scale: 1.1, borderColor: 'rgba(255, 91, 4, 0.6)', color: '#fff', transition: { duration: 0.2 } }}
|
||||
>
|
||||
{ind}
|
||||
</motion.span>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue