76 lines
2.9 KiB
TypeScript
76 lines
2.9 KiB
TypeScript
import {ImageResponse} from 'next/og';
|
||
|
||
export async function GET() {
|
||
return new ImageResponse(
|
||
(
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
width: '1200px',
|
||
height: '630px',
|
||
background: 'radial-gradient(circle at 20% 20%, #ff8185, transparent 80%),' +
|
||
'radial-gradient(circle at 80% 80%, #ffaa91, transparent 80%)',
|
||
backgroundSize: '100% 100%',
|
||
color: '#333',
|
||
fontFamily: 'Arial, sans-serif',
|
||
padding: '20px',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
top: '20px',
|
||
left: '20px',
|
||
fontSize: '24px',
|
||
fontWeight: 'bold',
|
||
padding: '10px',
|
||
}}
|
||
>
|
||
Dennis Konkol | Portfolio
|
||
</div>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'flex-start',
|
||
justifyContent: 'center',
|
||
textAlign: 'left',
|
||
padding: '20px',
|
||
backgroundColor: 'rgba(182,182,182,0.8)',
|
||
borderRadius: '10px',
|
||
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
|
||
maxWidth: '60%',
|
||
backdropFilter: 'blur(5px)',
|
||
}}
|
||
>
|
||
<h1 style={{fontSize: '48px', margin: '0'}}>Hi, I’m Dennis</h1>
|
||
<h2 style={{fontSize: '32px', margin: '10px 0'}}>Student & Software Engineer</h2>
|
||
<p style={{fontSize: '24px', margin: '10px 0'}}>
|
||
Based in Osnabrück, Germany
|
||
</p>
|
||
<p style={{fontSize: '20px', margin: '10px 0'}}>
|
||
Passionate about technology, coding, and solving real-world problems.
|
||
</p>
|
||
</div>
|
||
<img
|
||
src="https://dki.one/images/me.jpg"
|
||
alt="Image of Dennis"
|
||
style={{
|
||
width: '400px',
|
||
height: '400px',
|
||
borderRadius: '10px',
|
||
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
|
||
objectFit: 'cover',
|
||
}}
|
||
/>
|
||
</div>
|
||
),
|
||
{
|
||
width: 1200,
|
||
height: 630,
|
||
}
|
||
);
|
||
} |