feat: personal sponsor

Author: mmorito

public/img/2025/avatar.png

@@ -0,0 +1,42 @@
+// @flow strict
+import React from 'react'
+
+export type Props = {
+  href: string,
+  src: string,
+  name: string,
+}
+
+const personalSponsorStyle = {
+  margin: '0.5%',
+  textAlign: 'center',
+  display: 'inline-block',
+}
+
+const avatarStyle = {
+  width: '80px',
+  height: '80px',
+  borderRadius: '50%',
+  objectFit: 'cover',
+  border: '2px solid #ddd',
+  cursor: 'pointer',
+  transition: 'transform 0.3s ease',
+}
+
+export function PersonalSponsorAvatar({ name, href, src }: Props) {
+  return (
+    <div style={personalSponsorStyle}>
+      <a href={href} target="_blank" rel="noopener noreferrer">
+        <img
+          src={src || '/img/2025/avatar.png'}
+          alt={`${name} アバター`}
+          style={avatarStyle}
+          onMouseOver={(e) => { e.target.style.transform = 'scale(1.1)' }}
+          onMouseOut={(e) => { e.target.style.transform = 'scale(1)' }}
+          onFocus={(e) => { e.target.style.transform = 'scale(1.1)' }}
+          onBlur={(e) => { e.target.style.transform = 'scale(1)' }}
+        />
+      </a>
+    </div>
+  )
+} 

src/atoms/PersonalSponsorAvatar.js

@@ -4,6 +4,7 @@ import { Cell, Grid, Row } from '@material/react-layout-grid'
 import { Headline2, Headline3 } from '@material/react-typography'
 
 import { SponsorBanner as Banner } from '../../atoms/SponsorBanner'
+import { PersonalSponsorAvatar } from '../../atoms/PersonalSponsorAvatar'
 import type { Props as SponsorProps } from '../../atoms/SponsorBanner'
 import type { Sponsor as Resource } from '../../resources'
 
@@ -17,11 +18,13 @@ export function Sponsors({
   gold,
   silver,
   supporter,
+  personal,
 }: {
   platinum: Resource[],
   gold: Resource[],
   silver: Resource[],
   supporter: Resource[],
+  personal: Resource[],
 }) {
   return (
     <Grid>
@@ -43,7 +46,7 @@ export function Sponsors({
           <Headline3>Platinum</Headline3>
         </Cell>
         {platinum.map(sponsor => (
-          <Cell columns={12} style={style}>
+          <Cell columns={12} style={style} key={sponsor.key}>
             {Banner(toSponsor(sponsor))}
           </Cell>
         ))}
@@ -53,7 +56,7 @@ export function Sponsors({
       </Cell>
       <Row>
         {gold.map(sponsor => (
-          <Cell columns={6} desktopColumns={6} style={style}>
+          <Cell columns={6} desktopColumns={6} style={style} key={sponsor.key}>
             {Banner(toSponsor(sponsor))}
           </Cell>
         ))}
@@ -63,7 +66,7 @@ export function Sponsors({
       </Cell>
       <Row>
         {silver.map(sponsor => (
-          <Cell columns={4} desktopColumns={3} style={style}>
+          <Cell columns={4} desktopColumns={3} style={style} key={sponsor.key}>
             {Banner(toSponsor(sponsor))}
           </Cell>
         ))}
@@ -73,11 +76,30 @@ export function Sponsors({
       </Cell>
       <Row>
         {supporter.map(sponsor => (
-          <Cell columns={4} desktopColumns={3} style={style}>
+          <Cell columns={4} desktopColumns={3} style={style} key={sponsor.key}>
             {Banner(toSponsor(sponsor))}
           </Cell>
         ))}
       </Row>
+      {personal.length > 0 && (
+        <>
+          <Cell>
+            <Headline3>Personal Sponsors</Headline3>
+          </Cell>
+          <Row>
+            <Cell columns={12} style={{ textAlign: 'left', padding: '20px' }}>
+              {personal.map(sponsor => (
+                <PersonalSponsorAvatar
+                  key={sponsor.key}
+                  name={sponsor.name}
+                  href={sponsor.url}
+                  src={sponsor.banner}
+                />
+              ))}
+            </Cell>
+          </Row>
+        </>
+      )}
     </Grid>
   )
 }

src/organisms/2025/Sponsors.js

@@ -66,9 +66,21 @@ export const eventHandler = {
   height: 120,
 }
 
+// 個人スポンサー
+// 森 将記さん
+export const mori_masaki = {
+  name: '森 将記',
+  key: 'mori_masaki',
+  url: 'https://www.facebook.com/masakimori0314',
+  banner: '',
+  height: 80,
+}
+
+
 // スポンサーカテゴリ
 export const platinum: Sponsor[] = [subthread, smarthr]
 export const gold: Sponsor[] = [cybozu, pyconjp2025]
 export const silver: Sponsor[] = [nextvision]
 export const supporter: Sponsor[] = [eventHandler]
-export const sponsors = { platinum, gold, silver, supporter }
+export const personal: Sponsor[] = [mori_masaki]
+export const sponsors = { platinum, gold, silver, supporter, personal }