Skip to content

Commit

Permalink
Merge pull request #73 from btkcodedev/staging
Browse files Browse the repository at this point in the history 
Add latest changes to main
  • Loading branch information
@btkcodedev
btkcodedev authored Sep 10, 2024
2 parents 73542cd + 93fa6c7 commit a31409c
Show file tree
Hide file tree
Showing 11 changed files with 224 additions and 101 deletions.
10 changes: 7 additions & 3 deletions components/GridItems/Certificate.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { CombinedInterfaces, LanguageItem } from "@/components/Types";
import { CombinedInterfaces } from "@/components/Types";
import { motion } from "framer-motion";

const Certificates = ({ item }: { item: CombinedInterfaces }) => {
const Certificates = ({ item, handleClick }: { item: CombinedInterfaces, handleClick?: () => {} }) => {
return (
<motion.div
className="w-full h-full relative flex items-end"
Expand All @@ -22,7 +22,11 @@ const Certificates = ({ item }: { item: CombinedInterfaces }) => {
className="relative inline-block"
whileHover={{ scale: 1.1 }}
>
<div className="px-2 py-1 text-sm font-medium bg-white rounded-lg dark:bg-neutral-900 cursor-pointer">
{/* TODO: handleclick to redirection */}
<div
className="px-2 py-1 text-sm font-medium bg-white rounded-lg dark:bg-neutral-900 cursor-pointer"
onClick={handleClick}
>
{language.title}
<motion.span
className="absolute top-0 left-0 bg-white rounded-full opacity-50"
Expand Down
49 changes: 16 additions & 33 deletions components/GridItems/Languages.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ import { useState } from "react";
const Languages = ({ item }: { item: CombinedInterfaces }) => {
const [image, setImage] = useState(item.image);
const [gradient, setGradient] = useState(true);

const setTheImage = (imageItem: LanguageItem | string) => {
if (typeof imageItem === "object") {
const title = imageItem.title;
const languageImage = imageItem.languageImage;

if (Object.values(LanguageTitle).includes(title as LanguageTitle)) {
setImage(languageImage);
} else {
Expand All @@ -27,20 +27,14 @@ const Languages = ({ item }: { item: CombinedInterfaces }) => {
const setCode = (language: LanguageItem) => {
let codeText = "";
switch (language.title) {
case LanguageTitle.Typescript:
codeText = LanguageCode.JavascriptHelloWorld;
break;
case LanguageTitle.Django:
codeText = LanguageCode.DjangoHelloWorld;
case LanguageTitle.TyAndPy:
codeText = LanguageCode.TyPy;
break;
case LanguageTitle.Nodejs:
codeText = LanguageCode.NodejsHelloWorld;
case LanguageTitle.Coffee:
codeText = LanguageCode.Cofee;
break;
case LanguageTitle.Python:
codeText = LanguageCode.PythonHelloWorld;
break;
case LanguageTitle.YAML:
codeText = LanguageCode.YAMLHelloWorld;
case LanguageTitle.Github:
codeText = LanguageCode.Github;
break;
case LanguageTitle.JACKIE:
codeText = LanguageCode.JackieHelloWorld;
Expand Down Expand Up @@ -72,33 +66,20 @@ const Languages = ({ item }: { item: CombinedInterfaces }) => {
>
<div className="flex flex-col w-full h-full overflow-hidden rounded-3xl">
{displayText.length > 0 && (
<div className="flex items-center w-full h-full overflow-hidden p-8 justify-center align-center mt-56">
<div className="flex items-start w-full h-full overflow-hidden p-8 justify-start align-center">
<motion.div
className="z-10 bg-white dark:bg-neutral-900 flex items-start p-2 text-sm font-medium text-black dark:text-white h-full rounded-lg w-full"
className="z-10 bg-white dark:bg-neutral-900 flex items-start p-3 text-sm font-medium text-black dark:text-white h-16 rounded-lg w-full"
initial={{ opacity: 0.5 }}
animate={{ opacity: 0.9 }}
style={{ whiteSpace: 'pre' }}
style={{ whiteSpace: "pre" }}
>
<motion.span
className="typing-text"
animate={{
opacity: [0, 1, 1, 1, 0],
transition: {
duration: 2,
times: [0, 0.25, 0.5, 0.75, 1],
repeat: Infinity,
repeatDelay: 1,
},
}}
>
{displayText}
</motion.span>
<motion.span className="typing-text">{displayText}</motion.span>
</motion.div>
</div>
)}
<div className="flex flex-col items-end justify-end w-full h-full overflow-hidden rounded-3xl p-1">
{/* Overlay */}
<div className="absolute inset-0 z-10 bg-gradient-to-b from-transparent via-neutral-950/60 to-neutral-950/90" />
<div className="absolute inset-0 z-10 bg-gradient-to-b from-transparent via-neutral-950/30 to-neutral-950/30" />
{/* Image */}
<Image
className={`z-0 object-cover object-center w-full h-full`}
Expand All @@ -109,7 +90,9 @@ const Languages = ({ item }: { item: CombinedInterfaces }) => {

{/* Content */}
<div className="relative z-20 w-full p-4 space-y-3 md:p-8">
<div className="text-sm font-medium text-white">{item.title}</div>
<div className="text-sm font-medium text-white mb-72">
{item.title}
</div>
<div className="flex flex-wrap items-center gap-3">
{item.languages?.map((language, index) => {
return (
Expand Down
60 changes: 60 additions & 0 deletions components/GridItems/Timeline.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import React from 'react';
import { motion } from 'framer-motion';

interface ExperienceItem {
title: string;
details: string[];
type: 'lor' | 'hackathon' | 'certificate' | string;
}

interface TimelineItemProps {
item: ExperienceItem;
index: number;
}

const TimelineItem: React.FC<TimelineItemProps> = ({ item, index }) => {
const isEven = index % 2 === 0;
return (
<motion.div
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.1 }}
className={`flex ${isEven ? 'justify-start' : 'justify-end'} mb-8`}
>
<div className={`w-5/12 ${isEven ? 'pr-8' : 'pl-8'}`}>
<motion.div
whileHover={{ scale: 1.03 }}
className="bg-gradient-to-br from-purple-600 to-pink-500 p-6 rounded-xl shadow-lg"
>
<h3 className="text-xl font-bold text-white mb-2">{item.title}</h3>
<ul className="space-y-2">
{item.details.map((detail, idx) => (
<li key={idx} className="text-white text-sm bg-black bg-opacity-20 rounded-lg p-2">
{detail}
</li>
))}
</ul>
</motion.div>
</div>
</motion.div>
);
};

interface ImprovedTimelineProps {
experienceItems: ExperienceItem[];
}

const ImprovedTimeline: React.FC<ImprovedTimelineProps> = ({ experienceItems }) => {
return (
<div className="container mx-auto px-4 py-16">
<div className="relative">
<div className="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-purple-500 to-pink-500"></div>
{experienceItems.map((item, index) => (
<TimelineItem key={`${item.title}-${index}`} item={item} index={index} />
))}
</div>
</div>
);
};

export default ImprovedTimeline;
15 changes: 9 additions & 6 deletions components/LeftPanel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,43 +22,46 @@ const LeftPanel = ({ clickedCategory, handleInteraction }: LeftPanelProps) => {
<MiniButton
buttonText={LeftPanelOptions.ABOUT}
category={IconTypes.SEARCH}
href={`#${LeftPanelOptions.ABOUT}`}
href={`#`}
clickedCategory={clickedCategory}
setClicked={setClicked}
clicked={clicked}
/>
<MiniButton
buttonText={LeftPanelOptions.EXPERIENCE}
category={IconTypes.ALBUM}
href={`#${LeftPanelOptions.EXPERIENCE}`}
href={`#`}
clickedCategory={clickedCategory}
setClicked={setClicked}
clicked={clicked}
/>
<MiniButton
buttonText={LeftPanelOptions.ACHIEVEMENTS}
category={IconTypes.MEDAL}
href={`#${LeftPanelOptions.ACHIEVEMENTS}`}
href={`#`}
clickedCategory={clickedCategory}
setClicked={setClicked}
clicked={clicked}
/>
<MiniButton
buttonText={LeftPanelOptions.PROJECTS}
category={IconTypes.PROJECTS}
href={`#${LeftPanelOptions.PROJECTS}`}
href={`#`}
clickedCategory={clickedCategory}
setClicked={setClicked}
clicked={clicked}
/>
</div>

<div
className="hidden mt-6 xl:flex"
className="hidden mt-6 xl:flex cursor-pointer relative group"
onClick={handleInteraction}
onTouchStart={handleInteraction}
>
<Footer/>
<Footer />
<span className="absolute top-full left-1/2 transform -translate-x-1/2 mt-2 px-2 py-1 bg-gray-800 text-white text-sm rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Hidden element... SSSHHHHH...🤫
</span>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit a31409c

Please sign in to comment.