105 lines
5.9 KiB
JavaScript
105 lines
5.9 KiB
JavaScript
import React from "react";
|
||
import Image from "next/image";
|
||
import { timelineData } from "@/data/experiences";
|
||
export default function About9() {
|
||
return (
|
||
<section className="wrapper !bg-[#ffffff]">
|
||
<div className="container py-[6rem] xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]">
|
||
<div className="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] items-center xl:!mt-[8rem] lg:!mt-[8rem] !mb-[6rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
|
||
<div className="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mx-auto !mt-[50px]">
|
||
<div className="img-mask mask-3 xxl:!px-5">
|
||
<Image
|
||
srcSet="/assets/img/avatars/avatar@2x.jpg 2x"
|
||
alt="image"
|
||
src="/assets/img/avatars/avatar.jpg"
|
||
width={560}
|
||
height={525}
|
||
/>
|
||
</div>
|
||
</div>
|
||
{/*/column */}
|
||
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[50px]">
|
||
<h2 className="!text-[calc(1.345rem_+_1.14vw)] font-semibold !leading-[1.2] xl:!text-[2.2rem] !mb-3">
|
||
More about me
|
||
</h2>
|
||
<p className="lead !text-[1.2rem] font-medium !leading-[1.65]">
|
||
👋 Hello! I'm Camille, a multidisciplinary product designer 🧸
|
||
based in New York City 🚕. I’m very passionate about the work 💌
|
||
that I do.
|
||
</p>
|
||
<p>
|
||
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
|
||
eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus
|
||
commodo, tortor mauris condimentum nibh ut fermentum massa justo
|
||
sit amet risus.
|
||
</p>
|
||
<p>
|
||
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
|
||
vestibulum. Aenean lacinia bibendum nulla sed consectetur.
|
||
</p>
|
||
<a
|
||
href="#"
|
||
className="btn btn-navy !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f] focus:shadow-[rgba(82,92,108,1)] active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] btn-icon btn-icon-end !mt-2"
|
||
>
|
||
Learn More
|
||
<i className="uil uil-arrow-up-right !ml-[.3rem] before:content-['\e950']" />
|
||
</a>
|
||
</div>
|
||
{/*/column */}
|
||
</div>
|
||
{/* /.row */}
|
||
<div className="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px]">
|
||
<div className="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mx-auto !mt-[50px]">
|
||
<h2 className="!text-[calc(1.345rem_+_1.14vw)] font-semibold !leading-[1.2] xl:!text-[2.2rem] !mb-3">
|
||
My experiences
|
||
</h2>
|
||
<p className="lead !text-[1.2rem] !font-regular !leading-[1.6] xxl:!pr-8">
|
||
I've had the pleasure to work with companies 🏢 across a variety
|
||
of industries 🏛️ I'm always interested in new ✨ and exciting
|
||
adventures 🧨
|
||
</p>
|
||
<a
|
||
href="#"
|
||
className="btn btn-navy !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f] focus:shadow-[rgba(82,92,108,1)] active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] btn-icon btn-icon-end !mt-2"
|
||
>
|
||
Download Resume
|
||
<i className="uil uil-arrow-up-right !ml-[.3rem] before:content-['\e950']" />
|
||
</a>
|
||
</div>
|
||
{/*/column */}
|
||
<div className="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[50px]">
|
||
<ul className="timeline xl:table lg:table md:table !w-full !m-0 !p-0 !list-none">
|
||
{timelineData.map((entry, index) => (
|
||
<li
|
||
key={index}
|
||
className="relative !pl-8 xl:table-row xl:p-0 lg:table-row lg:p-0 md:table-row md:p-0"
|
||
>
|
||
<div className="timeline-info meta uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !text-[0.7rem] whitespace-nowrap !mb-2 xl:text-right xl:table-cell xl:align-top xl:!pr-6 lg:text-right lg:table-cell lg:align-top lg:!pr-6 md:text-right md:table-cell md:align-top md:!pr-6">
|
||
{entry.date}
|
||
</div>
|
||
<div
|
||
className={`timeline-marker absolute w-[0.6rem] !text-[#1fc76f] left-0 inset-y-0 xl:relative xl:table-cell xl:align-top lg:relative lg:table-cell lg:align-top md:relative md:table-cell md:align-top before:w-[0.55rem] before:h-[0.55rem] before:content-[''] before:block before:absolute before:rounded-[100%] before:left-0 before:top-[0.2rem] before:bg-[#1fc76f] ${
|
||
entry.hasBottomLine
|
||
? "after:w-px after:content-[''] after:block after:absolute after:left-1 after:top-4 after:bottom-0 after:bg-[rgba(164,174,198,.2)]"
|
||
: ""
|
||
}`}
|
||
/>
|
||
<div className="table-cell align-top pb-8 xl:!pl-6 lg:!pl-6 md:!pl-6">
|
||
<h3 className="timeline-title xl:!mt-[-0.25rem] lg:!mt-[-0.25rem] md:!mt-[-0.25rem]">
|
||
{entry.title}
|
||
</h3>
|
||
<p className="!m-0">{entry.description}</p>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
{/*/column */}
|
||
</div>
|
||
{/* /.row */}
|
||
</div>
|
||
{/* /.container */}
|
||
</section>
|
||
);
|
||
}
|