64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
import { COLORS, INTERESTS } from '../constants'
|
|
|
|
const Interests = () => {
|
|
return (
|
|
<div className="p-4 max-w-4xl mx-auto">
|
|
<h1
|
|
className={`text-4xl text-center py-2 mb-8 ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} font-medium font-mono tracking-wide`}
|
|
>
|
|
Interests & Hobbies
|
|
</h1>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
{INTERESTS.map((interest, index) => (
|
|
<div
|
|
key={index}
|
|
className={`group p-6 rounded-lg border-2 border-gray-300 dark:border-gray-700 hover:shadow-lg transition-all duration-300 ${
|
|
interest.subInterests ? 'md:col-span-2' : ''
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<div
|
|
className={`${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY} group-hover:text-sky-600 dark:group-hover:text-sky-500 transition-colors duration-200`}
|
|
>
|
|
{interest.icon}
|
|
</div>
|
|
<h2 className={`text-2xl ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}>
|
|
{interest.title}
|
|
</h2>
|
|
</div>
|
|
|
|
<p className={`${COLORS.TEXT} ${COLORS.DARK_TEXT} leading-7`}>{interest.description}</p>
|
|
|
|
{interest.subInterests && (
|
|
<div className="mt-4 grid gap-4 md:grid-cols-3">
|
|
{interest.subInterests.map((subInterest, subIndex) => (
|
|
<div key={subIndex} className="p-4 bg-orange-100 dark:bg-gray-800 rounded-lg">
|
|
<h3
|
|
className={`text-lg font-semibold mb-2 ${COLORS.PRIMARY} ${COLORS.DARK_PRIMARY}`}
|
|
>
|
|
{subInterest.name}
|
|
</h3>
|
|
<p className={`${COLORS.TEXT} ${COLORS.DARK_TEXT} text-sm leading-6`}>
|
|
{subInterest.details}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className={`mt-8 text-center ${COLORS.TEXT} ${COLORS.DARK_TEXT}`}>
|
|
<p className="text-lg">
|
|
These interests not only provide a creative outlet and personal enjoyment but also
|
|
complement my professional growth in technology and engineering.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Interests
|