update about-me

package.json

@@ -26,6 +26,7 @@
     "@iconify-json/logos": "^1.1.37",
     "@mdx-js/react": "^1.6.22",
     "asciinema-player": "^3.4.0",
+    "axios": "^1.7.7",
     "clsx": "^1.2.1",
     "grapheme-splitter": "^1.0.4",
     "hast-util-is-element": "1.1.0",
@@ -37,6 +38,7 @@
     "raw-loader": "^4.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-simple-maps": "^3.0.0",
     "react-type-animation": "^3.2.0",
     "rehype-katex": "5",
     "remark-math": "3",

src/components/BentoLayout/BentoContainer.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import './BentoLayout.css';
+
+interface BentoItemProps {
+  rows?: string;
+  columns?: string;
+  content: React.ReactNode; // 接受卡片内容
+}
+
+interface BentoContainerProps {
+  variant: 'variant-1' | 'variant-2' | 'variant-3';
+  items: BentoItemProps[]; // 每个 item 包含样式和内容
+}
+
+const BentoContainer: React.FC<BentoContainerProps> = ({ variant, items }) => {
+  return (
+    <div className={`bento__container ${variant}`}>
+      {items.map((item, index) => (
+        <div
+          key={index}
+          className="bento__item"
+          style={{
+            '--rows': item.rows || 'span 1',
+            '--columns': item.columns || 'span 1',
+          } as React.CSSProperties}
+        >
+          {item.content} {/* 渲染卡片的内容 */}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default BentoContainer;

src/components/BentoLayout/BentoLayout.css

@@ -0,0 +1,52 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.bento {
+    min-block-size: 100vh;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1ch;
+    padding: 3rem;
+}
+
+.bento__container {
+    display: grid;
+    grid-template-rows: 3fr 1fr 1fr 2fr 1fr;
+    gap: 1ch;
+    min-height: inherit;
+    flex: 2 0 320px;
+}
+
+.bento__container.variant-1 {
+    --bg: #DDEEF8;
+    grid-template-columns: 3fr 1fr 2fr;
+}
+
+.bento__container.variant-2 {
+    --bg: #DDEEF8;
+    grid-template-columns: 2fr 3fr 1fr 2fr;
+}
+
+.bento__container.variant-3 {
+    --bg: #DDEEF8;
+    grid-template-columns: 1fr 1fr;
+}
+
+.bento__item {
+    height: 100%;
+    width: 100%;
+    grid-column: var(--columns, span 1);
+    grid-row: var(--rows, span 1);
+    background-color: var(--bg);
+    border-radius: 10px;
+    /* padding: 1rem; */
+    align-items: center;
+    align-content: center;
+}
+
+[data-theme='dark'] .bento__item {
+    background-color: #53627f;
+}

src/components/BentoLayout/index.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import BentoContainer from './BentoContainer';
+import wwj from '@site/static/img/wwj-scenery.jpeg'
+import MapChart from './map';
+import Timeline from './timeline'
+import coffeecup from '@site/static/img/coffee-cup.png'
+
+const BentoLayout: React.FC = () => {
+  return (
+    <main className="bento">
+      {/* Variant 1 */}
+      <BentoContainer
+        variant="variant-1"
+        items={[
+          {
+            rows: 'span 2',
+            columns: '1 / -1',
+            content: <div style={{ position: 'relative', alignContent: 'center', padding: '1rem' }}><h1>Hi there!</h1><h1>I'm Wenjie Wei.</h1><h3>A PhD student in biology.</h3><img
+              src={coffeecup}
+              alt="Profile"
+              style={{
+                position: 'absolute',
+                top: '-120px',   /* Moves the image slightly above the div */
+                right: '-40px', /* Moves the image to the right, slightly outside the div */
+                width: '200px', /* Adjust the image size */
+                height: 'auto'
+              }}
+            /></div>
+          },
+          // {
+          //   rows: 'span 1',
+          //   columns: '1 / -1',
+          //   content: <div style={{ alignContent: 'center', padding: '1rem' }}><h4>I was born in 1999 in Shaoxing, China</h4></div>
+          // },
+          {
+            rows: 'span 3',
+            columns: '1 / -1',
+            content: <div style={{ alignContent: 'center', padding: '1rem' }}><h4>I am currently in Hangzhou. You can fly to me like this👇🏻</h4><MapChart /></div>
+          },
+          // {
+          //   columns: '1 / -1',
+          //   content: <div><h3>card</h3><h3>card</h3></div>
+          // },
+          // {
+          //   columns: '1 / -1',
+          //   rows: 'span 2',
+          //   content: <div><h3>Card 5</h3></div>
+          // },
+          // {
+          //   content: <div><h3>Card 6</h3></div>
+          // },
+        ]}
+      />
+
+      {/* Variant 2 */}
+      <BentoContainer
+        variant="variant-2"
+        items={[
+          {
+            rows: 'span 1',
+            columns: '1 / -1',
+            content: <div style={{ alignContent: 'center', padding: '1rem' }}><h3>I enjoy contributing to the bioinformatics community.</h3><img src="https://github-readme-stats.vercel.app/api?username=wjwei-handsome&include_all_commits=true&theme=swift&show_icons=true" alt="github_stats" style={{ borderRadius: '10px', height: '100%' }} /> </div>
+          },
+          // {
+          //   columns: 'span 2',
+          //   content: <div><h3>Card B</h3></div>
+          // },
+          {
+            rows: 'span 4',
+            columns: '1 / -1',
+            content: <img src={wwj} alt="Card C" style={{ borderRadius: '10px', height: '100%' }} />
+          },
+          // {
+          //   rows: 'span 4',
+          //   columns: '1 / -1',
+          //   content: <div><h3>Card D</h3></div>
+          // },
+          // {
+          //   rows: 'span 1',
+          //   columns: '1 / -1',
+          //   content: <div><h3>Card E</h3></div>
+          // },
+          // {
+          //   columns: '1 / -1',
+          //   rows: 'span 2',
+          //   content: <div><h3>Card F</h3></div>
+          // },
+        ]}
+      />
+
+      {/* Variant 3 */}
+      <BentoContainer
+        variant="variant-3"
+        items={[
+          {
+            rows: 'span 1',
+            columns: '1 / -1',
+            content: <div style={{ alignContent: 'center', padding: '1rem' }}><h3>I'm still learning these languages</h3><img src="https://github-readme-stats.vercel.app/api/top-langs/?username=wjwei-handsome&layout=compact&theme=swift" alt="Card 2" style={{ borderRadius: '10px', height: '100%', alignContent: 'center' }} /></div>
+          },
+          // {
+          //   rows: 'span 3',
+          //   content: <div><h3>Card Y</h3></div>
+          // },
+          {
+            rows: 'span 4',
+            columns: '1 / -1',
+            content: <div><Timeline /></div>
+          },
+          // {
+          //   columns: '1 / -1',
+          //   content: <div><h3>Card W</h3><button>Click Here</button></div>
+          // },
+          // {
+          //   columns: '1 / -1',
+          //   content: <div><h3>Card V</h3></div>
+          // },
+        ]}
+      />
+    </main >
+  );
+};
+
+export default BentoLayout;

src/components/BentoLayout/map.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { ComposableMap, Geographies, Geography, Graticule, Line } from "react-simple-maps"
+
+const geoUrl =
+    "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json"
+
+export default function MapChart() {
+    const [ip, setIp] = useState('');
+    const [location, setLocation] = useState({ latitude: 0, longitude: 0 });
+
+    useEffect(() => {
+        // Fetch the IP address
+        const fetchIp = async () => {
+            try {
+                const response = await axios.get('https://api.ipify.org?format=json');
+                setIp(response.data.ip);
+                console.log(response.data);
+            } catch (error) {
+                console.error('Error fetching the IP address:', error);
+            }
+        };
+
+        fetchIp();
+    }, []);
+
+    useEffect(() => {
+        // Fetch the location
+        const fetchLocation = async () => {
+            try {
+                const response = await axios.get(`http://ip-api.com/json/${ip}?fields=lat,lon`);
+                setLocation({ latitude: response.data.lat, longitude: response.data.lon });
+                console.log(response.data);
+            } catch (error) {
+                console.error('Error fetching the location:', error);
+            }
+        };
+
+        if (ip) {
+            fetchLocation();
+        }
+    }, [ip]);
+
+    return (
+        <ComposableMap projection="geoAzimuthalEqualArea" projectionConfig={{
+            scale: 200,
+            rotate: [-90, -30, 0],
+            center: [0, 0]
+        }}>
+            <Graticule stroke="#DDD" />
+            <Geographies geography={geoUrl}>
+                {({ geographies }) =>
+                    geographies.map((geo) => (
+                        <Geography key={geo.rsmKey} geography={geo} fill="#FFFFFF"
+                            stroke="#000000" />
+                    ))
+                }
+            </Geographies>
+            <Line
+                to={[120.153576, 30.287459]}
+                from={[location.latitude, location.longitude]}
+                stroke="#FF5533"
+                strokeWidth={4}
+                strokeLinecap="round"
+            />
+        </ComposableMap>
+    )
+}

src/components/BentoLayout/timeline.css

@@ -0,0 +1,44 @@
+.timeline-item {
+    display: flex;
+    align-items: center;
+    /* Aligns the year and content along the vertical center */
+    margin: 3cqb 0;
+    position: relative;
+}
+
+.timeline-year {
+    font-size: 18px;
+    font-weight: bold;
+    margin-right: 40px;
+    width: 80px;
+    text-align: right;
+    flex-shrink: 0;
+}
+
+.timeline-content {
+    width: 200px;
+    /* Fixed width for content */
+    height: 100%;
+    /* Fixed height for content */
+    padding: 10px 20px;
+    background: #f4f4f9;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    word-wrap: break-word;
+    /* Break long words into new lines */
+    white-space: normal;
+    /* Allow text to wrap to the next line */
+    overflow: hidden;
+    /* Prevent overflow outside the box */
+}
+
+.timeline {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}

src/components/BentoLayout/timeline.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import './timeline.css'; // Importing CSS for styling
+
+const Timeline = () => {
+    const events = [
+        { year: '2017', title: 'HZAU', subtitle: 'Plant Science and Technology' },
+        { year: '2021', title: 'HAZU', subtitle: 'Crop Genetics and Breeding (Maize)' },
+        { year: '2024', title: 'Westlake University', subtitle: 'Human Genomics/Genetics' },
+    ];
+    return (
+        <div className="timeline">
+            {events.map((event, index) => (
+                <div className="timeline-item" key={index}>
+                    <div className="timeline-year">{event.year}</div>
+                    <div className="timeline-content">
+                        <h4>{event.title}</h4>
+                        <p>{event.subtitle}</p>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default Timeline;