personal website
nekomimi.pet
1import { SocialLink } from "../SocialLink";
2import { personalInfo, socialLinks } from "../../data/portfolio";
3import { useSystemTheme } from "../../hooks/useSystemTheme";
4import { BlueskyProfile } from "atproto-ui";
5import { type AtProtoStyles } from "atproto-ui";
6
7interface ConnectProps {
8 sectionRef: (el: HTMLElement | null) => void;
9}
10
11export function Connect({ sectionRef }: ConnectProps) {
12 const isLightMode = useSystemTheme();
13
14 return (
15 <section
16 id="connect"
17 ref={sectionRef}
18 className="py-20 sm:py-32 opacity-0"
19 style={
20 isLightMode
21 ? {
22 backgroundColor: "#e2e2e2",
23 color: "oklch(0.2 0.02 255)",
24 }
25 : {}
26 }
27 >
28 <div className="max-w-4xl mx-auto px-6 sm:px-8 lg:px-16">
29 <div className="grid lg:grid-cols-2 gap-12 sm:gap-16">
30 <div className="space-y-6 sm:space-y-8">
31 <h2 className="text-3xl sm:text-4xl font-light">
32 Let's Connect
33 </h2>
34
35 <div className="space-y-6">
36 <p
37 className="text-lg sm:text-xl leading-relaxed"
38 style={
39 isLightMode
40 ? {
41 color: "oklch(0.48 0.015 255)",
42 }
43 : {}
44 }
45 >
46 Always interested in new opportunities,
47 collaborations, and conversations about technology
48 and design.
49 </p>
50
51 <div className="space-y-4">
52 <a
53 href={`mailto:${personalInfo.contact.email}`}
54 className="group flex items-center gap-3 transition-colors duration-300"
55 style={
56 isLightMode
57 ? {
58 color: "oklch(0.2 0.02 255)",
59 }
60 : {}
61 }
62 onMouseEnter={(e) => {
63 if (isLightMode) {
64 e.currentTarget.style.color =
65 "oklch(0.48 0.015 255)";
66 }
67 }}
68 onMouseLeave={(e) => {
69 if (isLightMode) {
70 e.currentTarget.style.color =
71 "oklch(0.2 0.02 255)";
72 }
73 }}
74 >
75 <span className="text-base sm:text-lg">
76 {personalInfo.contact.email}
77 </span>
78 <svg
79 className="w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-300"
80 fill="none"
81 stroke="currentColor"
82 viewBox="0 0 24 24"
83 >
84 <path
85 strokeLinecap="round"
86 strokeLinejoin="round"
87 strokeWidth={2}
88 d="M17 8l4 4m0 0l-4 4m4-4H3"
89 />
90 </svg>
91 </a>
92 </div>
93 </div>
94 </div>
95
96 <div className="space-y-6 sm:space-y-8">
97 <div
98 className="text-sm font-mono"
99 style={
100 isLightMode
101 ? {
102 color: "oklch(0.48 0.015 255)",
103 }
104 : {}
105 }
106 >
107 ELSEWHERE
108 </div>
109
110 <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
111 {socialLinks.map((social) => (
112 <SocialLink key={social.name} {...social} />
113 ))}
114 </div>
115 </div>
116 </div>
117 <div style={{
118 '--atproto-color-bg': isLightMode ? '#f2f2f2' : '#1f1f1f',
119 } as AtProtoStyles }
120 className="pt-8 grid lg:grid-cols-2 gap-12 sm:gap-4"
121 >
122 <BlueskyProfile did="nekomimi.pet" />
123 <BlueskyProfile did="art.nekomimi.pet" />
124 <p className="text-sm sm:text-base">
125 ^ This is <a className="text-cyan-600" href="https://tangled.org/@nekomimi.pet/atproto-ui" target="_blank" rel="noopener noreferrer">atproto-ui</a> btw. :)
126 </p>
127 </div>
128 </div>
129 </section>
130 );
131}