Skip to content

Commit

Permalink
finished
Browse files Browse the repository at this point in the history
  • Loading branch information
@EiThwe
EiThwe committed Jul 17, 2023
1 parent 54c7677 commit af3154f
Show file tree
Hide file tree
Showing 6 changed files with 107 additions and 29 deletions.
3 changes: 2 additions & 1 deletion src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@ import React from "react";
import Layout from "./components/Layout";
import OtherKnowledge from "./components/OtherKnowledge";
import Portfolio from "./components/Portfolio";
import Services from "./components/Services";

const App = () => {
return (
<Layout>
<OtherKnowledge />
<Portfolio />
<OtherKnowledge />
<Services />
</Layout>
);
};
Expand Down
19 changes: 12 additions & 7 deletions src/components/OtherKnowledge.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,24 @@ const OtherKnowledge = () => {
<hr className="w-8 mb-10" />
<div className="grid grid-cols-3 gap-10">
{otherKnowledgeData.map(({ Icon, title }, i) => (
<div className="flex flex-col justify-center items-center" key={i}>
<Icon size={50} className="" strokeWidth={0.8} />
<p className="text-sm text-[#7c7c7c]">{title}</p>
<div
className="flex flex-col justify-center items-center gap-3"
key={i}
>
<Icon size={50} className="" strokeWidth={1.5} />
<div className="">
<p className="text-sm text-white whitespace-nowrap">{title}</p>
</div>
</div>
))}
<div className="flex flex-col justify-center items-center tracking-tight">
<img
height="80"
width="80"
className="-translate-y-[10px]"
height="70"
width="70"
className="-translate-y-[0px]"
src="https://cdn.simpleicons.org/daisyui/white"
/>
<p className="-translate-y-4 text-sm text-[#7c7c7c] tracking-tight">
<p className="-translate-y-1 px-3 text-sm text-white tracking-tight ">
Daisy Ui
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Portfolio.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { projectCardData } from "../utils/projectCardData";

const Portfolio = () => {
return (
<section className="w-full min-h-full flex justify-center items-center">
<section className="portfolio w-full min-h-full flex justify-center items-center">
<div className="w-full h-full text-white ">
<h6 className="uppercase text-[9px] font-bold tracking-[1.4px] mb-5">
Portfolio
Expand Down
18 changes: 9 additions & 9 deletions src/components/ProjectCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import React, { useEffect, useRef, useState } from "react";
import { BsBoxArrowUpRight } from "react-icons/bs";
import { Link } from "react-router-dom";


const ProjectCard = ({ image, title, link, tools }) => {
const ref = useRef();

Expand All @@ -19,7 +18,7 @@ const ProjectCard = ({ image, title, link, tools }) => {
<div
onMouseOver={() => setHover(true)}
onMouseLeave={() => setHover(false)}
className=" project-card w-full h-[270px] bg-black backdrop-blur-[3px] bg-opacity-5 rounded-xl shadow-inner
className=" project-card w-full h-[250px] bg-black backdrop-blur-[3px] bg-opacity-5 rounded-xl shadow-inner
shadow-[#6b6b6b] border border-gray-500 border-opacity-20 flex justify-center items-center overflow-hidden z-[100]"
>
{/* loading section */}
Expand All @@ -46,10 +45,8 @@ const ProjectCard = ({ image, title, link, tools }) => {
className={`hidden-container bg-black backdrop-blur-[3px] bg-opacity-5 shadow-inner
shadow-[#474242] rounded-b-xl border-gray-500 border-opacity-20 absolute bottom-0 w-full px-2 py-5 transition-all ease-linear duration-300`}
style={{
transform: hover
? " translateY(0px)"
: `translateY(55px)`,
// ${ref.current?.clientHeight}
transform: hover ? " translateY(0px)" : `translateY(55px)`,
// ${ref.current?.clientHeight}
}}
>
{/* text */}
Expand All @@ -59,13 +56,15 @@ const ProjectCard = ({ image, title, link, tools }) => {
</div>

{/* tools */}
<div className={`flex justify-between items-center mb-2 px-2 w-full`} ref={ref}>
<div
className={`flex justify-between items-center mb-2 px-2 w-full`}
ref={ref}
>
<div className=" flex flex-wrap w-[70%] gap-1 ">
{tools.map(({ title }, i) => (
// <Icon size={20} strokeWidth={1.2} />
<Badge
size="xs"

key={i}
classNames={{ inner: "text-[#f6f6f6] lowercase" }}
className="backdrop-blur-[3px] bg-opacity-10 pt-0 bg-primary drop-shadow-lg border-2
Expand All @@ -85,7 +84,8 @@ const ProjectCard = ({ image, title, link, tools }) => {
hover ? "opacity-100 " : "opacity-0"
} transition-all ease-in-out duration-300 text-xs flex justify-between items-center text-white gap-2`}
>
<span className=" text-[16px] ">Demo</span> <BsBoxArrowUpRight className=" animate-pulse" />
<span className=" text-[16px] ">Demo</span>
<BsBoxArrowUpRight className=" animate-pulse" />
</Link>
</div>
</div>
Expand Down
73 changes: 73 additions & 0 deletions src/components/Services.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import { Accordion, ChevronIcon } from "@mantine/core";
import React from "react";
import { ChevronDown, EaseInControlPoint } from "tabler-icons-react";

const Services = () => {
return (
<section className="services w-full min-h-full flex justify-center items-center">
<div className="w-full h-full text-white ">
<h6 className="uppercase text-[9px] font-bold tracking-[1.4px] mb-5">
Services
</h6>
<h3 className="ml-2 text-[37px] tracking-tighter mb-5">
What I can do.
</h3>
<hr className="w-8 mb-5" />
<p className="mb-10 text-[#7c7c7c] tracking-tighter">
I create custom web and web app designs for different types of
businesses. My goal is to make attractive interfaces that meet client
requirements and help their businesses thrive.
</p>
<div className="w-full flex flex-col gap-10">
<Accordion
chevron={
<ChevronDown size="1.5rem" strokeWidth={1} color="#7c7c7c" />
}
classNames={{
label: " text-[25px] text-white font-thin",
control: "p-0 hover:bg-transparent",
chevron: "text-white w-auto ",
content: "px-0 pb-10 text-[#7c7c7c] text-[22px] font-thin",
}}
>
<Accordion.Item value="customization">
<Accordion.Control>Customization</Accordion.Control>
<Accordion.Panel>
As a junior React developer, I am skilled in customizing web
designs by creating components, styling with CSS, and
implementing interactivity using frontend development tools.
</Accordion.Panel>
</Accordion.Item>

<Accordion.Item value="responsive-designs">
<Accordion.Control>Responsive Designs</Accordion.Control>
<Accordion.Panel>
I'm proficient in creating responsive web designs that adapt
well to different devices, showcasing my frontend development
skills.
</Accordion.Panel>
</Accordion.Item>

<Accordion.Item value="enhanced-usability">
<Accordion.Control>Enhanced Usability</Accordion.Control>
<Accordion.Panel>
My backend knowledge adds practical and functional designs to
projects, improving real-world usability in development.
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item value="maintenance">
<Accordion.Control>Maintenance</Accordion.Control>
<Accordion.Panel>
I can provide continuous maintenance, ensuring smooth updates
and incorporating advanced features as the software progresses
from one version to another.
</Accordion.Panel>
</Accordion.Item>
</Accordion>
</div>
</div>
</section>
);
};

export default Services;
21 changes: 10 additions & 11 deletions src/utils/projectCardData.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,52 +9,51 @@ import {
} from "tabler-icons-react";

export const projectCardData = [

{
image: "https://i.postimg.cc/9FjRc5F3/Screenshot-2023-07-13-192052.png",
image: "https://i.postimg.cc/k5sw-BzZn/Screenshot-2023-07-15-232411.png",
link: "https://the-cappa-luxury-hotel-green.vercel.app/",
title: "The Cappa Luxury Hotel",
tools: [
{
Icon: BrandReact,
title:"React"
title: "React",
},

{
Icon: BrandTailwind,
title:"Tailwind"
title: "Tailwind",
},
{
Icon: BrandFramer,
title:"Framer Motion"
title: "Framer Motion",
},

{
Icon: BrandNpm,
title:"Npm Libraries"
title: "Npm Libraries",
},
],
},
{
image: "https://i.postimg.cc/fTK4kmZz/Screenshot-2023-07-13-191424.png",
image: "https://i.postimg.cc/MHLTNkw0/Screenshot-2023-07-17-222459.png",
link: "https://nexus-contacts.vercel.app/",
title: "Nexus Contact App",
tools: [
{
Icon: BrandReact,
title:"React"
title: "React",
},
{
Icon: BrandRedux,
title:"Redux"
title: "Redux",
},
{
Icon: BrandTailwind,
title:"Tailwind"
title: "Tailwind",
},
{
Icon: BrandNpm,
title:"Npm Libraries"
title: "Npm Libraries",
},
],
},
Expand Down

0 comments on commit af3154f

Please sign in to comment.