feat: refactor experience and education
This commit is contained in:
Alvalen
parent
9304e282bd
commit
6262383f7d
3 changed files with 117 additions and 77 deletions
105
app/about/(experience)/experience.jsx
Normal file
105
app/about/(experience)/experience.jsx
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
export default function Experience() {
|
||||
return (
|
||||
<section className="grid gap-8 md:gap-12">
|
||||
<div className="relative after:absolute after:inset-y-2 after:w-1 after:bg-gray-700 after:left-[-4px] md:after:left-1 lg:after:left-2 xl:after:left-3 grid gap-8 md:gap-12 pl-6 md:pl-8">
|
||||
<div className="grid gap-4 relative">
|
||||
<div className="aspect-square w-5 bg-black rounded-full absolute left-0 translate-x-[-29.5px] z-10" />
|
||||
<div className="font-medium text-lg">2023 - Present</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-xl text-black">
|
||||
PT Hafdzamedia Teknologi Aplikasi
|
||||
</h3>
|
||||
<h4 className=" font-light text-md mb-4">
|
||||
Fullstack Web Developer | Part-time
|
||||
</h4>
|
||||
<p className="text-justify">
|
||||
Responsible for building and maintaining scalable
|
||||
web applications using the latest technologies.
|
||||
Collaborated with cross-functional teams to deliver
|
||||
high-quality solutions that meet business
|
||||
requirements.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2 mt-4 text-sm">
|
||||
<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
|
||||
React
|
||||
</div>
|
||||
<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
|
||||
Next.js
|
||||
</div>
|
||||
<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
|
||||
Laravel
|
||||
</div>
|
||||
<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
|
||||
MySql
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 relative">
|
||||
<div className="aspect-square w-5 bg-black rounded-full absolute left-0 translate-x-[-29.5px] z-10" />
|
||||
<div className="font-medium text-lg">2024 - Present</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-xl text-black">
|
||||
Outlier
|
||||
</h3>
|
||||
<h4 className=" font-light text-md mb-4">
|
||||
AI Trainer | Freelance
|
||||
</h4>
|
||||
<p className="text-justify">
|
||||
Crafted and refined chatbot prompts using prompt
|
||||
engineering and RLHF techniques to improve the AI
|
||||
responses in English and Indonesian, leading to more
|
||||
accurate and contextually relevant interactions.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mt-4 text-sm">
|
||||
<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
|
||||
Generative AI
|
||||
</div>
|
||||
<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
|
||||
Prompt Engineering
|
||||
</div>
|
||||
<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
|
||||
Problem Solving
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 relative">
|
||||
<div className="aspect-square w-5 bg-black rounded-full absolute left-0 translate-x-[-29.5px] z-10" />
|
||||
<div className="font-medium text-lg">2023 - Present</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-xl text-black">
|
||||
Self-Employed
|
||||
</h3>
|
||||
<h4 className=" font-light text-md mb-4">
|
||||
Web Developer | Freelance
|
||||
</h4>
|
||||
<p className="text-justify">
|
||||
Specialized in crafting innovative solutions using
|
||||
Laravel and Next.js, enhancing client satisfaction
|
||||
and project efficiency. Contributed expertise in
|
||||
both frontend and backend development during
|
||||
collaborative team projects, leading to successful
|
||||
project completions
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2 mt-4 text-sm">
|
||||
<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
|
||||
React
|
||||
</div>
|
||||
<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
|
||||
Next.js
|
||||
</div>
|
||||
<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
|
||||
Laravel
|
||||
</div>
|
||||
<div className="bg-gray-300 text-black px-2 py-1 rounded-2xl">
|
||||
MySql
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -87,24 +87,7 @@ function CodepenIcon(props) {
|
|||
</svg>
|
||||
);
|
||||
}
|
||||
function AwardIcon(props) {
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round">
|
||||
<path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" />
|
||||
<circle cx="12" cy="8" r="6" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function BarChartIcon(props) {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import Quote from "./(quote)/quote.jsx";
|
|||
import Skills from "./(skills)/skills.jsx";
|
||||
import Tools from "./(skills)/tools.jsx";
|
||||
import Stack from "./(skills)/stack.jsx";
|
||||
import Experience from "./(experience)/experience.jsx";
|
||||
|
||||
// images
|
||||
import Me1 from "@/public/img/me1.jpg";
|
||||
|
|
@ -303,6 +304,8 @@ export default function Page() {
|
|||
|
||||
type: "spring",
|
||||
}}></motion.div>
|
||||
|
||||
{/* experience */}
|
||||
<motion.h1
|
||||
className="text-3xl font-bold mt-3"
|
||||
initial={{
|
||||
|
|
@ -318,11 +321,12 @@ export default function Page() {
|
|||
|
||||
type: "spring",
|
||||
}}>
|
||||
Education & Experience
|
||||
Experience
|
||||
</motion.h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-screen mx-auto container gap-10 p-10 grid grid-cols-1 md:grid-cols-2 my-10 ">
|
||||
|
||||
<div className="w-screen mx-auto container gap-10 p-10 grid grid-cols-1 my-10 ">
|
||||
<motion.div
|
||||
className="flex justify-center items-start flex-col mb-5 "
|
||||
initial={{
|
||||
|
|
@ -338,59 +342,7 @@ export default function Page() {
|
|||
|
||||
type: "spring",
|
||||
}}>
|
||||
<h2 className="text-2xl font-bold mb-3">
|
||||
Education | Universitas Negeri Malang
|
||||
</h2>
|
||||
<h3 className="text-md font-medium mb-3 text-gray-500">
|
||||
Teknik Informatika | 2022 - Now
|
||||
</h3>
|
||||
<p className="pl-3 text-gray-500 relative text-justify">
|
||||
<span className="before:border-s-2 before:absolute before:left-0 before:top-0 before:h-full before:border-gray-400 before:block before:w-2 before:content-'' "></span>
|
||||
I’m currently in my third semester at
|
||||
Universitas Negeri Malang, majoring in Informatics
|
||||
Engineering. This journey has been nothing short of
|
||||
exhilarating, filled with countless opportunities to
|
||||
learn and grow. With a steadfast dedication to my
|
||||
studies, I’ve achieved a commendable GPA of
|
||||
3.93. Throughout my academic journey, I’ve
|
||||
delved into various facets of computer science,
|
||||
honing my skills in web development, programming,
|
||||
and problem-solving.
|
||||
</p>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
className="flex justify-center items-start flex-col mb-5 "
|
||||
initial={{
|
||||
opacity: 0,
|
||||
x: 200,
|
||||
}}
|
||||
whileInView={{
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
}}
|
||||
transition={{
|
||||
delay: 0.5,
|
||||
|
||||
type: "spring",
|
||||
}}>
|
||||
<h2 className="text-2xl font-bold mb-3">
|
||||
Experience | Freelance Web Developer
|
||||
</h2>
|
||||
<h3 className="text-md font-medium mb-3 text-gray-500">
|
||||
Fullstack Web Developer | 2023 - Now
|
||||
</h3>
|
||||
<p className="pl-3 text-gray-500 relative text-justify">
|
||||
<span className="before:border-s-2 before:absolute before:left-0 before:top-0 before:h-full before:border-gray-400 before:block before:w-2 before:content-'' "></span>
|
||||
My experience extends across various technologies,
|
||||
with a primary focus on Next.js and Laravel.
|
||||
I’ve successfully completed three projects
|
||||
using Next.js and Laravel. What sets me apart is my
|
||||
ability to adapt to different project requirements.
|
||||
Whether working collaboratively as part of a team or
|
||||
independently, I ensure that each project I
|
||||
undertake meets high-quality standards and fulfills
|
||||
the unique needs of clients.
|
||||
</p>
|
||||
<Experience />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue