Work Experience

A clean and dynamic section to showcase professional experiences.

Work Experience

2024-Present

Freelance Designer

Upwork
Maintained 100% job success rate on Upwork, delivering exceptional designs and solutions for 40+ projects. Developed highly effective brand identities and strategies for startups and small businesses based on market research and client feedback.
2020-2024

Creative Art Director

Deveb Digital Agency
As the sole creative art director and designer at Deveb for +3 years, I've designed and developed all the visual assets, including website and mobile UI/UX designs, web animations mockups, and brandings. My skills led to Deveb winning +27 international design awards.

Installation

Follow these steps to install and set up the component in your project.

1

Install dependencies

To use this component, ensure you have React and TailwindCSS installed in your project.

npm install react
2

Add the component to your page

Finally, add the component to your page or application. Customize the props to fit your data.

"use client"

interface WorkExperienceEntry {
    startDate: string
    endDate: string
    title: string
    company: string
    description: string
}

interface WorkExperienceProps {
    experiences: WorkExperienceEntry[]
}

export default function WorkExperience({ experiences }: WorkExperienceProps) {
    return (
        <div>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-black dark:text-white mb-12 md:mb-16">Work Experience</h1>
            <div className="space-y-8">
                {experiences.map((experience, index) => (
                    <div key={index} className="relative group">
                        <div
                            className="relative p-[1px] rounded-3xl transition-all duration-300
                                                    hover:p-[1px] bg-gradient-to-br from-purple-500/30 to-blue-500/30"
                        >
                            <div
                                className="relative grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 p-6 md:p-8 
                                                        rounded-3xl bg-white dark:bg-black"
                            >
                                <div className="space-y-3">
                                    <div className="text-gray-600 dark:text-gray-400 font-medium tracking-wide">
                                        {experience.startDate}-{experience.endDate}
                                    </div>
                                    <h3 className="text-2xl md:text-3xl font-bold text-black dark:text-white">{experience.title}</h3>
                                    <div className="text-gray-600 dark:text-gray-400 text-lg font-medium">{experience.company}</div>
                                </div>
                                <div className="text-gray-500 dark:text-gray-400 leading-relaxed">{experience.description}</div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

Props

NameTypeDefaultDescription
experiences*WorkExperienceEntry[]-An array of work experience entries to display.

Design Credits

Sourav

Design & Development