diff --git a/public/index.html b/public/index.html index b3693d1..e7ec990 100644 --- a/public/index.html +++ b/public/index.html @@ -33,7 +33,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - CodeBucks | Awesome portfolio built with React JS + Tuhin Kairi diff --git a/src/App.js b/src/App.js index d1c1139..e4cc762 100644 --- a/src/App.js +++ b/src/App.js @@ -11,9 +11,23 @@ import BlogPage from "./components/BlogPage"; import WorkPage from "./components/WorkPage"; import MySkillsPage from "./components/MySkillsPage"; import SoundBar from "./subComponents/SoundBar"; +import { useEffect } from "react"; +import { userData } from "./config"; function App() { const location = useLocation(); + useEffect(()=>{ + document.title = userData.meta_Title; + const metaDescription = document.querySelector('meta[name="description"]'); + if (metaDescription) { + metaDescription.setAttribute("content", userData.meta_description); + } else { + const meta = document.createElement('meta'); + meta.name = "description"; + meta.content = userData.meta_description; + document.head.appendChild(meta); + } + }) return ( <> diff --git a/src/assets/Images/profile-img.png b/src/assets/Images/profile-img.png index 80c3d91..2d5a4df 100644 Binary files a/src/assets/Images/profile-img.png and b/src/assets/Images/profile-img.png differ diff --git a/src/components/AboutPage.js b/src/components/AboutPage.js index 674b1b6..3dbaab4 100644 --- a/src/components/AboutPage.js +++ b/src/components/AboutPage.js @@ -1,40 +1,39 @@ -import React from 'react' -import styled, { keyframes, ThemeProvider } from 'styled-components' -import {DarkTheme} from './Themes'; +import React from "react"; +import styled, { keyframes, ThemeProvider } from "styled-components"; +import { DarkTheme } from "./Themes"; - -import LogoComponent from '../subComponents/LogoComponent'; -import SocialIcons from '../subComponents/SocialIcons'; -import PowerButton from '../subComponents/PowerButton'; -import ParticleComponent from '../subComponents/ParticleComponent'; -import BigTitle from '../subComponents/BigTitlte' -import astronaut from '../assets/Images/spaceman.png' +import LogoComponent from "../subComponents/LogoComponent"; +import SocialIcons from "../subComponents/SocialIcons"; +import PowerButton from "../subComponents/PowerButton"; +import ParticleComponent from "../subComponents/ParticleComponent"; +import BigTitle from "../subComponents/BigTitlte"; +import astronaut from "../assets/Images/spaceman.png"; const Box = styled.div` -background-color: ${props => props.theme.body}; -width: 100vw; -height:100vh; -position: relative; -overflow: hidden; -` + background-color: ${(props) => props.theme.body}; + width: 100vw; + height: 100vh; + position: relative; + overflow: hidden; +`; const float = keyframes` 0% { transform: translateY(-10px) } 50% { transform: translateY(15px) translateX(15px) } 100% { transform: translateY(-10px) } -` +`; const Spaceman = styled.div` -position: absolute; -top: 10%; -right: 5%; -width: 20vw; -animation: ${float} 4s ease infinite; -img{ + position: absolute; + top: 10%; + right: 5%; + width: 20vw; + animation: ${float} 4s ease infinite; + img { width: 100%; height: auto; -} -` -const Main = styled.div` + } +`; +const Main = styled.div` border: 2px solid ${(props) => props.theme.text}; color: ${(props) => props.theme.text}; padding: 2rem; @@ -46,47 +45,46 @@ const Main = styled.div` justify-content: center; align-items: center; font-size: calc(0.6rem + 1vw); - backdrop-filter: blur(4px); - + backdrop-filter: blur(4px); + position: absolute; left: calc(5rem + 5vw); top: 10rem; - font-family: 'Ubuntu Mono', monospace; + font-family: "Ubuntu Mono", monospace; font-style: italic; -` - - - +`; const AboutPage = () => { - return ( - - - - - - - + return ( + + + + + + - spaceman - + spaceman +
- I'm a front-end developer located in India. I love to create simple yet beautiful websites with great user experience. -

-I'm interested in the whole frontend stack Like trying new things and building great projects. I'm an independent freelancer and blogger. I love to write blogs and read books. -

-I believe everything is an Art when you put your consciousness in it. You can connect with me via social links. + I'm Tuhin Kairi a full-stack developer from West Bengal, India, specializing in + MERN/NEXT.js and AI-powered solutions. I love integrating cutting-edge + technologies to solve real-world problems. +
+
+ From academic publishing platforms to intelligent recruitment systems, + I turn complex ideas into elegant, user-friendly experiences. I + believe in writing clean code that makes a difference. +
+
+ Every line of code is an opportunity to create something meaningful. + Let's build something amazing together.
+ + + ); +}; - - - - - - ) -} - -export default AboutPage +export default AboutPage; diff --git a/src/components/Intro.js b/src/components/Intro.js index ecf25a8..4c12d11 100644 --- a/src/components/Intro.js +++ b/src/components/Intro.js @@ -2,6 +2,7 @@ import React from 'react' import styled from 'styled-components' import {motion} from 'framer-motion' import Me from '../assets/Images/profile-img.png' +import { userData } from '../config' const Box = styled(motion.div)` @@ -44,7 +45,7 @@ display: flex; bottom: 0; left: 50%; transform: translate(-50%,0%); - width: 100%; + max-height:450px; height: auto; } ` @@ -80,8 +81,8 @@ const Intro = () => {

Hi,

-

I'm CodeBucks.

-
I design and Code simple yet beautiful websites.
+

I'm {userData.name}.

+
{userData.description}
 diff --git a/src/components/Main.js b/src/components/Main.js index bce3550..4667e43 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -1,5 +1,5 @@ import { motion } from 'framer-motion' -import React, { useState } from 'react' +import { useState } from 'react' import { NavLink } from 'react-router-dom' import styled, { keyframes } from 'styled-components' import LogoComponent from '../subComponents/LogoComponent' @@ -8,6 +8,7 @@ import SocialIcons from '../subComponents/SocialIcons' import { YinYang } from './AllSvgs' import Intro from './Intro' ; +import { userData } from '../config' const MainContainer = styled.div` @@ -145,7 +146,7 @@ const Main = () => { click here - + props.theme.body}; -width: 100vw; -height:100vh; -position: relative; -display: flex; -justify-content: space-evenly; -align-items: center; - - -` - -const Main = styled.div` -border: 2px solid ${props => props.theme.text}; -color: ${props => props.theme.text}; -background-color: ${props => props.theme.body}; -padding: 2rem; -width: 30vw; -height: 60vh; -z-index:3; -line-height: 1.5; -cursor: pointer; - -font-family: 'Ubuntu Mono',monospace; -display: flex; -flex-direction: column; -justify-content: space-between; - -&:hover{ - color: ${props => props.theme.body}; - background-color: ${props => props.theme.text}; -} -` - -const Title = styled.h2` -display: flex; -justify-content: center; -align-items: center; -font-size: calc(1em + 1vw); - -${Main}:hover &{ - &>*{ - fill:${props => props.theme.body}; + background-color: ${(props) => props.theme.body}; + width: 100vw; + height: 100vh; + position: relative; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; +`; + +const GridContainer = styled.div` + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 3rem; + width: 80vw; + height: 70vh; + z-index: 3; +`; + +const SkillCard = styled.div` + border: 2px solid ${(props) => props.theme.text}; + color: ${(props) => props.theme.text}; + background-color: ${(props) => props.theme.body}; + padding: 2rem; + border-radius: 10px; + cursor: pointer; + font-family: "Ubuntu Mono", monospace; + display: flex; + flex-direction: column; + justify-content: space-between; + transition: all 0.3s ease; + + &:hover { + color: ${(props) => props.theme.body}; + background-color: ${(props) => props.theme.text}; + transform: translateY(-10px); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); + } +`; + +const CardTitle = styled.h2` + display: flex; + justify-content: center; + align-items: center; + font-size: calc(1.2em + 0.5vw); + margin-bottom: 1.5rem; + + ${SkillCard}:hover & { + & > * { + fill: ${(props) => props.theme.body}; } -} + } -&>*:first-child{ -margin-right: 1rem; -} -` + & > *:first-child { + margin-right: 1rem; + } +`; -const Description = styled.div` -color: ${props => props.theme.text}; -font-size: calc(0.6em + 1vw); -padding: 0.5rem 0; +const CardContent = styled.div` + text-align: center; + + .skills { + font-size: calc(0.9em + 0.2vw); + font-weight: bold; + margin-bottom: 1rem; + line-height: 1.4; + } + + .impact { + font-size: calc(0.7em + 0.2vw); + opacity: 0.8; + font-style: italic; + line-height: 1.3; + } + ${SkillCard}:hover & { + color: ${(props) => props.theme.body}; + } +`; -${Main}:hover &{ - - color:${props => props.theme.body}; - -} +const Modal = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.8); + display: ${(props) => (props.isOpen ? "flex" : "none")}; + justify-content: center; + align-items: center; + z-index: 1000; +`; + +const ModalContent = styled.div` + background-color: ${(props) => props.theme.body}; + color: ${(props) => props.theme.text}; + padding: 3rem; + border-radius: 15px; + max-width: 600px; + max-height: 80vh; + overflow-y: auto; + border: 3px solid ${(props) => props.theme.text}; + font-family: "Ubuntu Mono", monospace; + position: relative; +`; + +const CloseButton = styled.button` + position: absolute; + top: 1rem; + right: 1rem; + background: none; + border: 2px solid ${(props) => props.theme.text}; + color: ${(props) => props.theme.text}; + font-size: 1.5rem; + width: 40px; + height: 40px; + border-radius: 50%; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + font-family: "Ubuntu Mono", monospace; -strong{ + &:hover { + background-color: ${(props) => props.theme.text}; + color: ${(props) => props.theme.body}; + } +`; + +const ModalTitle = styled.h2` + display: flex; + align-items: center; + justify-content: center; + font-size: calc(1.5em + 0.5vw); + margin-bottom: 2rem; + top:0; + & > *:first-child { + margin-right: 1rem; + } +`; + +const ModalSection = styled.div` + margin-bottom: 2rem; + + h3 { + font-size: calc(1em + 0.2vw); margin-bottom: 1rem; text-transform: uppercase; -} -ul,p{ - margin-left: 2rem; -} -` + border-bottom: 1px solid ${(props) => props.theme.text}33; + padding-bottom: 0.5rem; + } + + ul { + list-style: none; + padding: 0; + + li { + padding: 0.3rem 0; + padding-left: 1rem; + position: relative; + + &:before { + content: "▶"; + position: absolute; + left: 0; + color: ${(props) => props.theme.text}; + font-size: 0.8em; + } + } + } + + p { + line-height: 1.5; + margin: 0.5rem 0; + } +`; const MySkillsPage = () => { - return ( - - - - - - - -
- - <Design width={40} height={40} /> Designer - - -I love to create design which speaks, Keep it clean, minimal and simple. - - -I like to Design -
    -
  • - Web Design -
    • -
  • - Mobile Apps -
    • -
- - -Tools -
    -
  • - Figma -
    • - -
- - -
-
- - <Develope width={40} height={40} /> Frontend Developer - - -I value business or brand for which i'm creating, thus i enjoy bringing new ideas to life. - - -Skills -

-Html, Css, Js, React, Redux, Sass, Bootstrap, Tailwind, Firebase etc. -

- - -Tools -

-VScode, Github, Codepen etc. -

- - -
- - - - - - - - ) -} - -export default MySkillsPage + const [selectedCard, setSelectedCard] = useState(null); + + const skillsData = [ + { + id: "fullstack", + title: "Full Stack Developer", + icon: , + skills: "React.js • Next.js • Node.js", + impact: "Built 5+ production apps • 60% faster workflows", + details: { + description: "I build scalable, production-grade web applications that solve real-world problems. Passionate about creating efficient, user-centric solutions with modern technologies.", + sections: [ + { + title: "Frontend Technologies", + items: [ + "React.js, Next.js, Vue.js", + "TypeScript, JavaScript (ES6+)", + "Tailwind CSS, Bootstrap, Shadcn", + "Redux Toolkit, State Management" + ] + }, + { + title: "Backend & APIs", + items: [ + "Node.js, Express.js", + "REST APIs, GraphQL", + "JWT Authentication, OAuth", + "Server-side rendering" + ] + }, + { + title: "Tools & Deployment", + items: [ + "Git, GitHub, VSCode", + "Vercel, Firebase, Docker", + "Performance Optimization", + "Responsive Design" + ] + } + ] + } + }, + { + id: "backend", + title: "Backend & Database", + icon: , + skills: "Python • PostgreSQL • Docker", + impact: "35% faster APIs • High-traffic systems", + details: { + description: "I architect robust server-side solutions with optimized database designs, delivering APIs that are 35% faster and handle high-traffic loads efficiently.", + sections: [ + { + title: "Backend Technologies", + items: [ + "Node.js, Express.js", + "Flask, FastAPI, Laravel", + "Microservices Architecture", + "API Design & Documentation" + ] + }, + { + title: "Databases & Storage", + items: [ + "MongoDB, PostgreSQL, MySQL", + "Redis, ChromaDB", + "Database Optimization", + "Data Migration & Backup" + ] + }, + { + title: "Infrastructure & DevOps", + items: [ + "Docker, Kubernetes", + "CI/CD Pipelines", + "Firebase, Vercel", + "Performance Monitoring" + ] + } + ] + } + }, + { + id: "aiml", + title: "AI/ML Engineer", + icon: , + skills: "LangChain • OpenAI • TensorFlow", + impact: "28% improved accuracy • 99.47% precision", + details: { + description: "I integrate cutting-edge AI capabilities into web applications, creating intelligent systems with 28% improved accuracy and enhanced user experiences.", + sections: [ + { + title: "AI/ML Frameworks", + items: [ + "LangChain, Hugging Face", + "OpenAI APIs, Gemma", + "TensorFlow, Scikit-learn", + "RAG Systems, LLM Fine-tuning" + ] + }, + { + title: "Data & Computer Vision", + items: [ + "Computer Vision, OpenCV", + "Data Mining, Pandas, NumPy", + "Vector Databases (ChromaDB)", + "ML Model Deployment" + ] + }, + { + title: "Specialized Applications", + items: [ + "Chatbots & Virtual Assistants", + "Real-time AI Integration", + "Anomaly Detection Systems", + "Automated Workflow Solutions" + ] + } + ] + } + }, + { + id: "realtime", + title: "Real-time & DevOps", + icon: , + skills: "WebRTC • Socket.io • CI/CD", + impact: "Real-time systems • Scalable deployment", + details: { + description: "I build real-time communication systems and maintain efficient development workflows with modern tools and automated deployment pipelines.", + sections: [ + { + title: "Real-time Technologies", + items: [ + "Socket.io, WebRTC", + "Live Streaming, ZegoCloud", + "Real-time Chat, Video Calls", + "WebSockets, Event-driven Architecture" + ] + }, + { + title: "DevOps & Automation", + items: [ + "Git, GitHub Actions", + "Docker, CI/CD Pipelines", + "Testing & Quality Assurance", + "Performance Monitoring" + ] + }, + { + title: "Development Tools", + items: [ + "Selenium, Automated Testing", + "Code Quality & Reviews", + "Deployment Strategies", + "System Monitoring & Alerts" + ] + } + ] + } + } + ]; + + const handleCardClick = (card) => { + setSelectedCard(card); + }; + + const handleCloseModal = () => { + setSelectedCard(null); + }; + + const handleModalClick = (e) => { + if (e.target === e.currentTarget) { + handleCloseModal(); + } + }; + + return ( + + + + + + + + + {skillsData.map((skill) => ( + handleCardClick(skill)}> + + {skill.icon} {skill.title} + + +
{skill.skills}
+
{skill.impact}
+ + + ))} + + + + {selectedCard && ( + + × + + {selectedCard.icon} {selectedCard.title} + + +

{selectedCard.details.description}

+ + {selectedCard.details.sections.map((section, index) => ( + +

{section.title}

+
    + {section.items.map((item, itemIndex) => ( +
  • {item}
    • + ))} +
+ + ))} + + )} + + + + + + ); +}; + +export default MySkillsPage; \ No newline at end of file diff --git a/src/components/WorkPage.js b/src/components/WorkPage.js index 63435ae..2dde7ba 100644 --- a/src/components/WorkPage.js +++ b/src/components/WorkPage.js @@ -14,22 +14,29 @@ import BigTitlte from "../subComponents/BigTitlte"; const Box = styled.div` background-color: ${(props) => props.theme.body}; - - height: 400vh; + height: 220rem; + width: 100vw; position: relative; display: flex; align-items: center; + padding-left: 8rem; + overflow: hidden; `; -const Main = styled(motion.ul)` +const ScrollContainer = styled.div` position: fixed; top: 12rem; - left: calc(10rem + 15vw); - height: 40vh; - display: flex; + left: 8rem; + width: 100%; + overflow-x: hidden; +`; +const Main = styled(motion.ul)` + min-width:100%; + display: flex; color: white; `; + const Rotate = styled.span` display: block; position: fixed; @@ -61,7 +68,7 @@ const WorkPage = () => { let element = ref.current; const rotate = () => { - element.style.transform = `translateX(${-window.pageYOffset}px)`; + element.style.transform = `translateX(${-(window.pageYOffset)}px)`; return (yinyang.current.style.transform = "rotate(" + -window.pageYOffset + "deg)"); @@ -80,11 +87,14 @@ const WorkPage = () => { -
- {Work.map((d) => ( - - ))} -
+ +
+ {Work.map((d) => ( + + ))} +

END

+
+ diff --git a/src/config.js b/src/config.js new file mode 100644 index 0000000..eb1ff12 --- /dev/null +++ b/src/config.js @@ -0,0 +1,13 @@ +export const userData = { + "logo":"TK", + "name":"Tuhin Kairi", + "description":"I Design & Build Clean, Intelligent, and Scalable Digital Experiences", + "insta":"", + "mail":"tuhinkairii@gmail.com", + "fb":"", + "git":"", + "twiter":"", + "youtube":"", + "meta_description":"Welcome to my portfolio website showcasing my projects and skills.", + "meta_Title":"Tuhin Kairi | PortFolio" +} \ No newline at end of file diff --git a/src/data/WorkData.js b/src/data/WorkData.js index a0cadae..a99b8f8 100644 --- a/src/data/WorkData.js +++ b/src/data/WorkData.js @@ -3,61 +3,66 @@ export const Work = [ { id:1, - name:"Agency Landing Page", - description:"It is build on top of the React JS, with styledComponents and GSAP for smooth scrolling animations.", - tags:["react","gsap","styledComponents"], - - demo:"https://agency-website-eta.vercel.app/", - github:"https://github.com/codebucks27/Agency-website" + name:"ijsreat.com - Research Publication Platform", + description:"Academic research platform with article archiving, peer review, and advanced search.", + tags:["react","node.js","mongodb","express"], + demo:"https://ijsreat.com/", + github:"https://github.com/tuhinkairii/ijsreat" }, { id:2, - name:"Job listing website", - description:"A Job listing website build in ReactJS. With searching and filtering functionalities.", - tags:["react","sass"], - - demo:"http://react-job-listing-website.codebucks27.vercel.app/", - github:"https://github.com/codebucks27/react-job-listing-website" - + name:"AI-Powered End-to-End Hiring Platform", + description:"Recruitment platform with resume analysis, job matching, and automated screening.", + tags:["react","python","flask","ai/ml","nlp"], + demo:"https://ai-hiring-platform.vercel.app/", + github:"https://github.com/tuhinkairii/ai-hiring-platform" }, { id:3, - name:"Dev.to Clone", - description:"A clone of Dev.to build using ReactJS. With realtime fetching of articles from dev.to using API.", - tags:["react","api","sass"], - - demo:"http://devto-clone-codebucks27.vercel.app/", - github:"https://github.com/codebucks27/devto-clone" + name:"One Point Prep - AI EdTech System", + description:"AI-powered education platform with exam analysis and personalized learning paths.", + tags:["next.js","webrtc","hugging-face","rag","ai"], + demo:"https://onepointprep.vercel.app/", + github:"https://github.com/tuhinkairii/one-point-prep" }, { id:4, - name:"Sidebar Menu", - description:"A cool looking sidebar menu build using ReactJS and styledComponents.It has really smooth animations.", - tags:["react","styledComponents","react-router"], - - demo:"https://react-sidebar.vercel.app/", - github:"https://github.com/codebucks27/react-sidebar" - - },{ + name:"Real-Time Chat Application", + description:"Chat app with video/audio calling, AI replies, and real-time messaging.", + tags:["next.js","convex","zegocloud","ai"], + demo:"https://whatsapp-mauve.vercel.app/", + github:"https://github.com/tuhinkairii/realtime-chat-app" + }, + { id:5, - name:"Todo App(React + Redux)", - description:"A todo app build using Redux-toolkit and framer-motion for smooth animations.", - tags:["react","redux","framer-motion"], - - demo:"http://react-redux-todo-app-git-main-codebucks27.vercel.app/", - github:"https://github.com/codebucks27/React-Redux-Todo-App" - + name:"Medical Triage Bot", + description:"GPT-2 health assistant for medical screening and symptom analysis.", + tags:["react","flask","gpt-2","healthcare"], + demo:"https://medical-triage-bot.vercel.app/", + github:"https://github.com/tuhinkairii/medical-triage-bot" }, { id:6, - name:"Responsive Navigation Menu", - description:"A reponsive navbar menu component in ReactJS with react-router functionalities. Built from scratch.", - tags:["react","react-router","css"], - - demo:"http://react-responsive-navbar-codebucks27.vercel.app/", - github:"https://github.com/codebucks27/React-responsive-navbar" - + name:"Vitals Detection System", + description:"ML-based health anomaly detection system with high precision.", + tags:["python","scikit-learn","flask","ml"], + demo:"https://vitals-detection.vercel.app/", + github:"https://github.com/tuhinkairii/vitals-detection" }, - - -] \ No newline at end of file + { + id:7, + name:"Elegance Landing Page", + description:"Luxury brand landing page with animations and immersive user experience.", + tags:["react","gsap","styled-components","luxury"], + demo:"https://landing-page-cloths.vercel.app/", + github:"https://github.com/tuhinkairii/elegance-landing-page" + }, + { + id:8, + name:"E-commerce Platform", + description:"MERN store with payment gateway, JWT authentication, and Redux state management.", + tags:["react","node.js","mongodb","razorpay","redux"], + demo:"https://ecommerce-mern-platform.vercel.app/", + github:"https://github.com/tuhinkairii/ecommerce-platform" + } +] diff --git a/src/subComponents/Card.js b/src/subComponents/Card.js index bbc24ae..19dc261 100644 --- a/src/subComponents/Card.js +++ b/src/subComponents/Card.js @@ -1,127 +1,116 @@ -import { motion } from 'framer-motion'; -import React from 'react' -import { NavLink } from 'react-router-dom'; -import styled from 'styled-components'; -import { Github } from '../components/AllSvgs'; - - +import { motion } from "framer-motion"; +import styled from "styled-components"; +import { Github } from "../components/AllSvgs"; const Box = styled(motion.li)` -width: 16rem; -height: 40vh; -background-color: ${props => props.theme.text}; -color:${props => props.theme.body}; -padding: 1.5rem 2rem; -margin-right: 8rem; -border-radius: 0 50px 0 50px; -display: flex; -flex-direction: column; -justify-content: space-between; -border: 1px solid ${props => props.theme.body}; -transition: all 0.2s ease; - -&:hover{ -background-color: ${props => props.theme.body}; -color:${props => props.theme.text}; -border: 1px solid ${props => props.theme.text}; - -} -` + min-width: 18rem; + height: 40vh; + background-color: ${(props) => props.theme.text}; + color: ${(props) => props.theme.body}; + padding: 1.5rem 2rem; + margin-right: 8rem; + border-radius: 0 50px 0 50px; + display: flex; + flex-direction: column; + justify-content: space-between; + border: 1px solid ${(props) => props.theme.body}; + transition: all 0.2s ease; + + &:hover { + background-color: ${(props) => props.theme.body}; + color: ${(props) => props.theme.text}; + border: 1px solid ${(props) => props.theme.text}; + } +`; const Title = styled.h2` -font-size: calc(1em + 0.5vw); -` + font-size: calc(1em + 0.5vw); +`; const Description = styled.h2` -font-size: calc(0.8em + 0.3vw); -font-family: 'Karla',sans-serif; -font-weight: 500; -` + font-size: calc(0.8em + 0.3vw); + font-family: "Karla", sans-serif; + font-weight: 500; +`; const Tags = styled.div` -border-top: 2px solid ${props =>props.theme.body}; -padding-top: 0.5rem; -display:flex; -flex-wrap:wrap; -${Box}:hover &{ -border-top: 2px solid ${props =>props.theme.text}; -} -` + border-top: 2px solid ${(props) => props.theme.body}; + padding-top: 0.5rem; + display: flex; + flex-wrap: wrap; + ${Box}:hover & { + border-top: 2px solid ${(props) => props.theme.text}; + } +`; const Tag = styled.span` -margin-right:1rem; -font-size:calc(0.8em + 0.3vw); -` + margin-right: 1rem; + font-size: calc(0.8em + 0.3vw); +`; const Footer = styled.footer` -display: flex; -justify-content: space-between; -` + display: flex; + align-items:center; + justify-content: space-between; +`; const Link = styled.a` -background-color: ${props =>props.theme.body}; -color: ${props =>props.theme.text}; -text-decoration: none; -padding:0.5rem calc(2rem + 2vw); -border-radius: 0 0 0 50px; -font-size:calc(1em + 0.5vw); - -${Box}:hover &{ - background-color: ${props =>props.theme.text}; - color: ${props =>props.theme.body}; - -} -` + background-color: ${(props) => props.theme.body}; + color: ${(props) => props.theme.text}; + text-decoration: none; + padding: 0.5rem calc(2rem + 2vw); + border-radius: 0 0 0 50px; + font-size: calc(1em + 0.5vw); + + ${Box}:hover & { + background-color: ${(props) => props.theme.text}; + color: ${(props) => props.theme.body}; + } +`; const Git = styled.a` -color: inherit; -text-decoration: none; -${Box}:hover &{ - &>*{ - fill:${props =>props.theme.text}; + color: inherit; + text-decoration: none; + ${Box}:hover & { + & > * { + fill: ${(props) => props.theme.text}; } -} - -` + } +`; // Framer motion configuration const Item = { - hidden:{ - scale:0 + hidden: { + scale: 0, + }, + show: { + scale: 1, + transition: { + type: "spring", + duration: 0.5, }, - show:{ - scale:1, - transition: { - type: 'spring', - duration: 0.5 - } - } -} + }, +}; const Card = (props) => { - - const {id, name, description, tags, demo, github} = props.data; - - return ( - - {name} - - {description} - - - { - tags.map((t,id) => { - return #{t} - }) - } - -
- - Visit - - - - -
- - ) -} - -export default Card + const { id, name, description, tags, demo, github } = props.data; + + return ( + + {name} + {description} + + {tags.map((t, id) => { + return #{t}; + })} + +
+ + Visit + + + + +
+ + ); +}; + +export default Card; diff --git a/src/subComponents/LogoComponent.js b/src/subComponents/LogoComponent.js index 2a2ce3c..a687239 100644 --- a/src/subComponents/LogoComponent.js +++ b/src/subComponents/LogoComponent.js @@ -1,6 +1,7 @@ import React from 'react' import styled from 'styled-components' import { DarkTheme } from '../components/Themes' +import { userData } from '../config' @@ -19,7 +20,7 @@ z-index:3; const LogoComponent = (props) => { return ( - CB + {userData.logo} ) } diff --git a/src/subComponents/SocialIcons.js b/src/subComponents/SocialIcons.js index 09bfede..d28c90c 100644 --- a/src/subComponents/SocialIcons.js +++ b/src/subComponents/SocialIcons.js @@ -4,6 +4,7 @@ import React from "react"; import styled from "styled-components"; import { Facebook, Github, Twitter, YouTube } from "../components/AllSvgs"; import { DarkTheme } from "../components/Themes"; +import { userData } from "../config"; const Icons = styled.div` display: flex; @@ -23,7 +24,7 @@ const Icons = styled.div` const Line = styled(motion.span)` width: 2px; - height: 8rem; + height: 4rem; background-color: ${(props) => props.color === "dark" ? DarkTheme.text : DarkTheme.body}; `; @@ -39,7 +40,8 @@ const SocialIcons = (props) => { { { { { height: 0, }} animate={{ - height: "8rem", + height: "4rem", }} transition={{ type: "spring",