Skip to content

Commit 70d2350

Browse files
author
DidierRLopes
committed
improve homepage
1 parent 7fc1178 commit 70d2350

File tree

1 file changed

+72
-72
lines changed

1 file changed

+72
-72
lines changed

‎src/pages/index.js‎

Lines changed: 72 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export default function Home() {
6666
<main>
6767
<div className="mx-auto mt-16 flex max-w-[880px] flex-col px-3 text-center md:mt-16">
6868
<h1 className="_h1 !mb-2 font-bold">Who am I?</h1>
69-
<div className="_subtitle text-lg">
69+
<div className="text-xl">
7070
Co-founder & CEO at{' '}
7171
<a target="_blank" rel="noreferrer" href="https://openbb.co/">
7272
OpenBB
@@ -77,41 +77,41 @@ export default function Home() {
7777
<Carousel showThumbs={false} showStatus={false}>
7878
<div>
7979
<img
80-
className="rounded-3xl max-w-[220px]"
80+
className="rounded-xl max-w-[220px]"
8181
src="img/me_timegpt.webp"
8282
alt="Time-GPT event from Nixtla"
8383
/>
8484
</div>
8585
<div>
8686
<img
87-
className="rounded-3xl max-w-[220px]"
87+
className="rounded-xl max-w-[220px]"
8888
src="img/tattoo.webp"
8989
alt="OpenBB Tattoo"
9090
/>
9191
</div>
9292
<div>
9393
<img
94-
className="rounded-3xl max-w-[220px]"
94+
className="rounded-xl max-w-[220px]"
9595
src="img/bridge_sticker.webp"
96-
alt="OpenBB bridget sticker"
96+
alt="OpenBB bridge sticker"
9797
/>
9898
</div>
9999
</Carousel>
100100
</div>
101101
) : (
102102
<div className="flex items-center content-center mx-auto align-center justify-center flex-wrap mt-4 gap-8 mb-4">
103103
<img
104-
className="rounded-3xl max-h-[300px] mx-auto"
104+
className="rounded-xl max-h-[300px] mx-auto"
105105
src="img/tattoo.webp"
106106
alt="OpenBB Tattoo"
107107
/>
108108
<img
109-
className="rounded-3xl max-h-[300px] mx-auto"
109+
className="rounded-xl max-h-[300px] mx-auto"
110110
src="img/me_timegpt.webp"
111111
alt="Time-GPT event from Nixtla"
112112
/>
113113
<img
114-
className="rounded-3xl max-h-[300px] mx-auto"
114+
className="rounded-xl max-h-[300px] mx-auto"
115115
src="img/bridge_sticker.webp"
116116
alt="OpenBB bridget sticker"
117117
/>
@@ -121,37 +121,13 @@ export default function Home() {
121121
You can reach me on <a href="https://twitter.com/didier_lopes" target="_blank" rel="noreferrer">X</a> and <a href="https://www.linkedin.com/in/didier-lopes/" target="_blank" rel="noreferrer">LinkedIn</a>, where I post frequently.
122122
</p>
123123
</div>
124-
<div className="mt-16 max-w-[880px] mx-auto px-4">
125-
{ExecutionEnvironment.canUseDOM && (
126-
<iframe
127-
src={
128-
document.documentElement.getAttribute('data-theme') !== 'dark'
129-
? 'https://embeds.beehiiv.com/57f8fb43-3409-4d9a-9979-66489741be0c'
130-
: 'https://embeds.beehiiv.com/8a4b3599-3ce0-40ad-8586-910fd9a20ee4'
131-
}
132-
data-test-id="beehiiv-embed"
133-
width="100%"
134-
height={isDesktop ? "200" : "250"}
135-
frameBorder="0"
136-
scrolling="no"
137-
title="Didier newsletter"
138-
style={{
139-
maxWidth: '100%',
140-
overflow: 'hidden',
141-
display: 'block',
142-
margin: '0 auto'
143-
}}
144-
/>
145-
)}
146-
</div>
147124
<div className="mx-auto mt-16 max-w-[880px] px-4">
148-
<h2 className="text-3xl font-bold mb-6 text-center">What I believe in</h2>
125+
<h2 className="text-3xl font-bold mb-2 text-center">What I believe in</h2>
149126
<p className="text-xl text-center mb-2 md:mb-8">
150127
Building an open-source legacy, one commit at a time.
151128
</p>
152129
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 md:mb-8">
153130
<div className="relative rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105">
154-
{isDesktop ? (<h3 className="text-lg font-semibold px-4">GitHub Stats</h3>) : null}
155131
<iframe
156132
src="https://github-stats-alpha.vercel.app/api?username=DidierRLopes&cc=000&tc=fff&ic=fff&bc=fff"
157133
width="100%"
@@ -168,7 +144,6 @@ export default function Home() {
168144
/>
169145
</div>
170146
<div className="relative rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hidden md:block">
171-
<h3 className="text-lg font-semibold px-4">Contribution Graph</h3>
172147
<iframe
173148
src="https://ssr-contributions-svg.vercel.app/_/DidierRLopes?chart=3dbar&format=svg&theme=blue"
174149
width="100%"
@@ -191,61 +166,86 @@ export default function Home() {
191166
</div>
192167
<div className="mx-auto mt-16 flex max-w-[880px] flex-col px-3 text-center mb-16">
193168
<h1 className="_h1 !mb-2 font-bold">Latest posts.</h1>
169+
<p className="text-xl text-center mb-2 md:mb-8">
170+
I write so I can think and communicate better.
171+
</p>
194172
{isDesktop ? (
195173
<>
196174
{allPosts && allPosts.length > 0 && (
197175
<BlogHistory posts={allPosts} />
198176
)}
199-
<div className="flex items-start content-center mx-auto align-center justify-center mt-8 gap-8 mb-4 flex-row">
200-
{postsHighlight.map((post) => (
201-
<div
202-
key={post.id}
203-
className="mx-2 max-w-[250px] flex flex-col items-center"
204-
style={{ height: '100%' }}
205-
>
206-
<a
207-
href={`${post.id}`}
208-
className="flex flex-col items-center h-full"
177+
<div className="relative mt-8 mb-4 overflow-hidden">
178+
<div className="flex animate-scroll gap-8">
179+
{postsHighlight.concat(postsHighlight).map((post, index) => (
180+
<div
181+
key={`${post.id}-${index}`}
182+
className="flex-shrink-0 w-[250px]"
209183
>
210-
<img
211-
className="rounded-3xl object-cover mb-2 text-center justify-center align-center mx-auto"
212-
src={post.content_html.match(/<img.*?src="(.*?)"/)[1]}
213-
alt={post.title}
214-
style={{
215-
flex: '1 0 auto',
216-
width: '220px',
217-
height: '150px',
218-
objectFit: 'cover',
219-
}}
220-
/>
221-
<p className="text-left text-sm w-full mt-auto">
222-
{post.title}
223-
</p>
224-
</a>
225-
</div>
226-
))}
184+
<a
185+
href={`${post.id}`}
186+
className="group block h-full transition-transform duration-300 hover:scale-105"
187+
>
188+
<div className="overflow-hidden rounded-xl mb-3">
189+
<img
190+
className="w-full h-[180px] object-cover transition-transform duration-300 group-hover:scale-110"
191+
src={post.content_html.match(/<img.*?src="(.*?)"/)[1]}
192+
alt={post.title}
193+
/>
194+
</div>
195+
<h3 className="text-left text-sm font-semibold group-hover:text-blue-500 transition-colors duration-300">
196+
{post.title}
197+
</h3>
198+
</a>
199+
</div>
200+
))}
201+
</div>
227202
</div>
228203
</>
229204
) : (
230-
<div className="flex items-center content-center mx-auto align-center justify-center mt-8 gap-4 mb-4 flex-col">
205+
<div className="flex flex-col items-center mt-8 gap-6 mb-4">
231206
{postsHighlight.map((post) => (
232-
<div key={post.id} className="my-2">
233-
<a href={`${post.id}`}>
234-
<img
235-
className="rounded-3xl w-[220px] h-[160px] object-cover mb-2 mx-auto"
236-
src={post.content_html.match(/<img.*?src="(.*?)"/)[1]}
237-
alt={post.title}
238-
/>
239-
<p className="text-center text-sm w-[240px] mx-auto">
207+
<div key={post.id} className="w-full max-w-[300px]">
208+
<a href={`${post.id}`} className="group block">
209+
<div className="overflow-hidden rounded-xl mb-3">
210+
<img
211+
className="w-full h-[200px] object-cover transition-transform duration-300 group-hover:scale-110"
212+
src={post.content_html.match(/<img.*?src="(.*?)"/)[1]}
213+
alt={post.title}
214+
/>
215+
</div>
216+
<h3 className="text-center text-sm font-semibold group-hover:text-blue-500 transition-colors duration-300">
240217
{post.title}
241-
</p>
218+
</h3>
242219
</a>
243220
</div>
244221
))}
245222
</div>
246223
)}
247224
</div>
248-
225+
226+
<div className="mt-16 max-w-[880px] mx-auto px-4">
227+
{ExecutionEnvironment.canUseDOM && (
228+
<iframe
229+
src={
230+
document.documentElement.getAttribute('data-theme') !== 'dark'
231+
? 'https://embeds.beehiiv.com/57f8fb43-3409-4d9a-9979-66489741be0c'
232+
: 'https://embeds.beehiiv.com/8a4b3599-3ce0-40ad-8586-910fd9a20ee4'
233+
}
234+
data-test-id="beehiiv-embed"
235+
width="100%"
236+
height={isDesktop ? "200" : "250"}
237+
frameBorder="0"
238+
scrolling="no"
239+
title="Didier newsletter"
240+
style={{
241+
maxWidth: '100%',
242+
overflow: 'hidden',
243+
display: 'block',
244+
margin: '0 auto'
245+
}}
246+
/>
247+
)}
248+
</div>
249249
<div className="mx-auto mt-16 flex flex-col px-3 text-center md:max-w-[880px]">
250250
<h1 className="_h1 !mb-2 font-bold">Outside work?</h1>
251251
<span className="_subtitle">

0 commit comments

Comments
 (0)