personal website
nekomimi.pet
1import type { RefObject } from "react"
2import { CurrentlyPlaying, LastPlayed, type AtProtoStyles } from "atproto-ui"
3import { personalInfo, currentRole, skills } from "../../data/portfolio"
4
5interface HeaderProps {
6 sectionRef: (el: HTMLElement | null) => void
7}
8
9export function Header({ sectionRef }: HeaderProps) {
10 const scrollToWork = () => {
11 document.getElementById('work')?.scrollIntoView({ behavior: 'smooth' })
12 }
13
14 return (
15 <header id="intro" ref={sectionRef} className="min-h-screen flex items-center opacity-0 relative">
16 {/* Background Image - Full Width */}
17 <div
18 className="absolute top-0 bottom-0 left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] w-screen z-0"
19 style={{
20 backgroundImage: 'url(https://cdn.donmai.us/original/31/2f/__kazusa_blue_archive_drawn_by_astelia__312fc11a21c5d4ce06dc3aa8bfbb7221.jpg)',
21 backgroundSize: 'cover',
22 backgroundPosition: 'center',
23 backgroundRepeat: 'no-repeat',
24 }}
25 >
26 {/* Overlay for better text readability */}
27 <div className="absolute inset-0 bg-background/70"></div>
28 </div>
29
30 <div className="grid lg:grid-cols-5 gap-12 sm:gap-16 w-full relative z-10 items-center">
31 <div className="lg:col-span-3 space-y-6 sm:space-y-8">
32 <div className="space-y-3 sm:space-y-2">
33 <div className="text-sm text-gray-300 font-mono tracking-wider">PORTFOLIO / 2025</div>
34 <h1 className="text-md sm:text-md lg:text-4xl font-light tracking-tight text-cyan-400">
35 {personalInfo.name.first}
36 <br />
37 <span className=" text-gray-400">{personalInfo.name.last}</span>
38 </h1>
39 </div>
40
41 <div className="space-y-6 max-w-md ">
42 <p className="text-lg sm:text-xl text-stone-200 leading-relaxed">
43 {personalInfo.description.map((part, i) => {
44 if (part.url) {
45 return (
46 <a
47 key={i}
48 href={part.url}
49 target="_blank"
50 rel="noopener noreferrer"
51 className="text-cyan-400/70 hover:text-cyan-300 font-medium transition-colors duration-300 underline decoration-cyan-400/30 hover:decoration-cyan-300/50"
52 >
53 {part.text}
54 </a>
55 )
56 }
57
58 if (part.bold) {
59 return (
60 <span key={i} className="text-white font-medium">
61 {part.text}
62 </span>
63 )
64 }
65
66 return part.text
67 })}
68 </p>
69
70
71 <div className="space-y-4">
72 <div className="flex items-center gap-2 text-sm text-gray-300">
73 <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
74 {personalInfo.availability.status}
75 </div>
76 <div className="flex items-center gap-4">
77 <a
78 href={`mailto:${personalInfo.contact.email}`}
79 className="glass glass-hover px-6 py-3 rounded-lg transition-all duration-300 inline-flex items-center justify-center gap-2 text-sm text-gray-300 hover:text-white flex-1"
80 >
81 <svg
82 className="w-4 h-4"
83 fill="none"
84 stroke="currentColor"
85 viewBox="0 0 24 24"
86 strokeWidth={2}
87 >
88 <path
89 strokeLinecap="round"
90 strokeLinejoin="round"
91 d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
92 />
93 </svg>
94 Email me
95 </a>
96 <a
97 href="https://nekomimi.leaflet.pub"
98 target="_blank"
99 rel="noopener noreferrer"
100 className="glass glass-hover px-6 py-3 rounded-lg transition-all duration-300 inline-flex items-center justify-center gap-2 text-sm text-gray-300 hover:text-white flex-1"
101 >
102 <svg
103 className="w-4 h-4"
104 fill="none"
105 stroke="currentColor"
106 viewBox="0 0 24 24"
107 strokeWidth={2}
108 >
109 <path
110 strokeLinecap="round"
111 strokeLinejoin="round"
112 d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
113 />
114 </svg>
115 Read my blog
116 </a>
117 </div>
118 </div>
119 </div>
120 </div>
121
122 <div className="hidden lg:flex lg:col-span-2 flex-col justify-end space-y-6 sm:space-y-8 mt-8 lg:mt-0">
123 <div className="space-y-4">
124 <p className="text-sm text-gray-300 font-mono">IM LISTENING TO:</p>
125 <div className="glass rounded-2xl" style={{
126 '--atproto-color-bg': 'transparent',
127 '--atproto-color-border': 'transparent',
128 '--atproto-color-bg-elevated': 'rgba(255, 255, 255, 0.20)',
129 '--atproto-color-text': 'white',
130 '--atproto-color-text-secondary': 'rgba(255, 255, 255, 0.80)',
131 } as AtProtoStyles }>
132 <CurrentlyPlaying did="nekomimi.pet"/>
133 </div>
134 </div>
135 </div>
136 </div>
137
138 {/* Image Source Link */}
139 <a
140 href="https://danbooru.donmai.us/posts/9959832"
141 target="_blank"
142 rel="noopener noreferrer"
143 className="absolute bottom-8 right-8 glass glass-hover p-2 rounded-lg transition-all duration-300 z-20 text-xs dark:text-gray-400 text-gray-600 hover:dark:text-gray-200 hover:text-gray-800"
144 aria-label="View image source"
145 >
146 <svg
147 className="w-4 h-4 inline-block mr-1"
148 fill="none"
149 stroke="currentColor"
150 viewBox="0 0 24 24"
151 strokeWidth={2}
152 >
153 <path
154 strokeLinecap="round"
155 strokeLinejoin="round"
156 d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
157 />
158 </svg>
159 Source
160 </a>
161
162 {/* Scroll Down Arrow */}
163 <button
164 onClick={scrollToWork}
165 className="absolute bottom-8 left-1/2 -translate-x-1/2 glass glass-hover p-3 rounded-full animate-bounce-slow transition-all duration-300 z-20"
166 aria-label="Scroll to work section"
167 >
168 <svg
169 className="w-5 h-5 text-gray-300"
170 fill="none"
171 stroke="currentColor"
172 viewBox="0 0 24 24"
173 strokeWidth={2}
174 >
175 <path
176 strokeLinecap="round"
177 strokeLinejoin="round"
178 d="M19 14l-7 7m0 0l-7-7m7 7V3"
179 />
180 </svg>
181 </button>
182 </header>
183 )
184}