diff --git a/README.md b/README.md index 200f42824..bf9b513c9 100644 --- a/README.md +++ b/README.md @@ -1 +1,51 @@ -# Portfolio +# Portfolio Project + +This is a personal portfolio website built as a school project at [Technigo](https://www.technigo.io/). The project showcases my skills, projects, and journey as a developer, utilizing modern web technologies to create an engaging and responsive user experience. + +## Tech Stack + +This project is built with the following technologies: + +* **[React](https://react.dev/)**: JavaScript library for building user interfaces. +* **[Vite](https://vitejs.dev/)**: Next-generation frontend tooling for fast development and building. +* **[Styled Components](https://styled-components.com/)**: Visual primitives for the component age, allowing for CSS-in-JS. +* **[AOS (Animate On Scroll)](https://michalsnik.github.io/aos/)**: Library to animate elements as you scroll down the page. +* **[Swiper](https://swiperjs.com/)**: Modern mobile touch slider for the project showcase. + +## Features + +The portfolio consists of several key sections: + +* **Hero**: Introduction and welcome message. +* **Skills**: Overview of my technical skills and competencies. +* **Projects**: Showcase of my recent work, dynamically loaded from data files. +* **Tech**: Specific technologies I work with. +* **Journey**: A timeline or description of my professional and educational background. +* **Contact**: Information on how to get in touch. + +## Setup & Installation + +To run this project locally, follow these steps: + +1. **Clone the repository:** + ```bash + git clone + cd js-project-portfolio + ``` + +2. **Install dependencies:** + ```bash + npm install + ``` + +3. **Run the development server:** + ```bash + npm run dev + ``` + +4. **Open in your browser:** + The application will typically be available at `http://localhost:5173`. + +## View it Live + +[View Deployed Site](https://asako-portfolio.netlify.app/) \ No newline at end of file diff --git a/index.html b/index.html index 6676fb2d9..78ba5d971 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,16 @@ - + + + + - Portfolio + Asako Kanno -
+
+
diff --git a/package.json b/package.json index 48911600c..96f2bd448 100644 --- a/package.json +++ b/package.json @@ -10,14 +10,19 @@ "preview": "vite preview" }, "dependencies": { + "@splidejs/splide": "^4.1.4", + "aos": "^2.3.4", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "styled-components": "^6.1.19", + "swiper": "^12.0.3" }, "devDependencies": { "@eslint/js": "^9.21.0", "@types/react": "^19.0.10", "@types/react-dom": "^19.0.4", - "@vitejs/plugin-react": "^4.3.4", + "@vitejs/plugin-react": "^4.7.0", + "babel-plugin-styled-components": "^2.1.4", "eslint": "^9.21.0", "eslint-plugin-react-hooks": "^5.1.0", "eslint-plugin-react-refresh": "^0.4.19", diff --git a/src/App.jsx b/src/App.jsx index a161d8d37..dec7f993b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,8 +1,44 @@ +import { useEffect } from "react" +import AOS from "aos" +import "aos/dist/aos.css" + +import { GlobalStyle } from "./styles/globalStyles"; +import { Projects } from "./components/Sections/projects"; +import { Contact } from "./components/Sections/contact"; +import { Hero } from "./components/Sections/hero"; +import { Journey } from "./components/Sections/journey"; +import { Skills } from "./components/Sections/skills"; +import { Tech } from "./components/Sections/tech"; + export const App = () => { + + useEffect(() => { + AOS.init({ + duration: 2000 , + once: false, + easing: "ease-out-cubic", + offset: 200 + }) + }, []) + + return ( <> -

Portfolio

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, laborum! Maxime animi nostrum facilis distinctio neque labore consectetur beatae eum ipsum excepturi voluptatum, dicta repellendus incidunt fugiat, consequatur rem aperiam.

+ + + + + + + + + + + + + + + ) -} +} \ No newline at end of file diff --git a/src/components/Sections/contact.jsx b/src/components/Sections/contact.jsx new file mode 100644 index 000000000..0037ec6c6 --- /dev/null +++ b/src/components/Sections/contact.jsx @@ -0,0 +1,81 @@ +import styled, { keyframes } from "styled-components" +import profileImage from "../../images/hello4.png" +import { Icon, IconRow } from "../common/icons" +import { iconLinks } from "../../data/iconLinks.json" +import { Heading2, Paragraph } from "../common/typography" + + +export const Contact = () => { + return ( + + + Asako Kanno profile picture + + + Let's talk + Asako Kanno + asako.k1317@outlook.com + + {iconLinks.map((icon) => ( + + ))} + + + + ) +} + +// Styled component below + +const ContactContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: space-around; + margin: 64px 0; + + img { + width: 500px; + height: auto; + } + + @media (max-width: 1440px) { + flex-direction: column; + } +` + +const ImageContainer = styled.div` + @media (max-width: 1440px) { + display: flex; + justify-content: center; + } +` + +const ContactInfo = styled.div` + padding-top: 20px; + + @media (max-width: 1440px) { + text-align: center; + } +` + +const wobble = keyframes` + 0% { transform: scale(1) rotate(0deg); } + 25% { transform: scale(1.03) rotate(2deg); } + 50% { transform: scale(1.03) rotate(-2deg); } + 75% { transform: scale(1.03) rotate(1deg); } + 100% { transform: scale(1) rotate(0deg); } +` + +const AnimatedHeading = styled(Heading2)` + animation: ${wobble} 2s ease-in-out infinite; + display: inline-block; + transform-origin: center; +` \ No newline at end of file diff --git a/src/components/Sections/hero.jsx b/src/components/Sections/hero.jsx new file mode 100644 index 000000000..f2ee699b1 --- /dev/null +++ b/src/components/Sections/hero.jsx @@ -0,0 +1,107 @@ +import styled, { keyframes } from "styled-components" +import ProfileImg from "../../images/profile4.png" +import { Icon } from "../common/icons" +import { iconLinks } from "../../data/iconLinks.json" +import { Heading1, Heading3, Paragraph } from "../common/typography" +import { IconRow } from "../common/icons" + +export const Hero = () => { + return ( + + Asako Kanno - Frontend Developer + +
+ Hi, I'm Asako! + + Frontend
Developer + + Creating friendly experiences for everyday life.

+ I like building web experiences that feel clear, warm, and supportive.

+ I care about usability and thoughtful design, and I believe technology should simply help people feel at ease in their daily lives. + + + {iconLinks.map((icon) => ( + + ))} + +
+ + Asako Kanno profile image + + + ) +} + +// Styled component below + +const VisuallyHiddenH1 = styled.h1` + position: absolute; + left: -9999px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +` + +const HeroSection = styled.div` + display: flex; + justify-content: space-around; + padding: 128px 128px 0 128px; + + // fade-in animation + opacity: 0; + transform: translateY(24px); + animation: fadeInHero 1.8s ease-out forwards; + + @keyframes fadeInHero { + from { + opacity: 0; + transform: translateY(24px) + } + to { + opacity: 1; + transform: translateY(0) + } + } + + img { + width: 500px; + height: auto; + } + + @media (max-width: 1440px) { + flex-direction: column; + padding: 64px 24px 0; + + img { + justify-content: center; + } + } +` + +const ImageContainer = styled.div` + @media (max-width: 1440px) { + display: flex; + justify-content: center; + } +` + +const breathe = keyframes` + 0% { transform: scale(1); } + 50% { transform: scale(1.03); } + 100% { transform: scale(1); } +` +const AnimatedHeading1 = styled(Heading1)` + animation: ${breathe} 3s ease-in-out infinite; +` \ No newline at end of file diff --git a/src/components/Sections/journey.jsx b/src/components/Sections/journey.jsx new file mode 100644 index 000000000..a82e0973e --- /dev/null +++ b/src/components/Sections/journey.jsx @@ -0,0 +1,42 @@ +import styled from "styled-components"; +import journey from "../../data/journey.json" +import img1 from "../../images/img1.png" +import img2 from "../../images/img2.png" +import img3 from "../../images/img3.png" +import { JourneyCard } from "../common/cards"; +import { Heading2 } from "../common/typography"; +import { Carousel } from "../../styles/carousel" + + +export const Journey = () => { + return ( + <> + + My Journey + + ( + + )} + /> + + + ) +} + +// Styled component below + +const JourneySection = styled.div` + margin: 64px 0; +` + +const imageMap = { + img1, + img2, + img3 +} \ No newline at end of file diff --git a/src/components/Sections/projects.jsx b/src/components/Sections/projects.jsx new file mode 100644 index 000000000..7295af7aa --- /dev/null +++ b/src/components/Sections/projects.jsx @@ -0,0 +1,47 @@ +import styled from "styled-components" + +import projects from "../../data/projects.json" +import { ProjectCard } from "../common/cards" +import { Heading2 } from "../common/typography" +import { Carousel } from "../../styles/carousel" +import business from "../../images/business.png" +import recipe from "../../images/recipe.png" +import weather from "../../images/weather.png" +import accessibility from "../../images/accessibility.png" + +export const Projects = () => { + return ( + <> + + Featured Projects + + ( + + )} + /> + + + ) +} + +const imgMap = { + business, + recipe, + weather, + accessibility +} + +const ProjectContainer = styled.div` + width: 100%; + + @media (max-width: 1440px) { + margin: 0; + padding: 0; + } +` \ No newline at end of file diff --git a/src/components/Sections/skills.jsx b/src/components/Sections/skills.jsx new file mode 100644 index 000000000..dc3d5d58d --- /dev/null +++ b/src/components/Sections/skills.jsx @@ -0,0 +1,76 @@ +import styled from "styled-components" +import skills from "../../data/skills.json" +import { Heading2, Heading3 } from "../common/typography" +import { StyledUl } from "../../styles/theme" + +export const Skills = () => { + return ( + + Skills + + {skills.skills.map((category) => { + return ( + + {category.title} + + {category.skills.map((skill) => { + return ( +
  • + {skill} +
    • + ) + })} +     +     + ) + })} +     +     + ) +} + +// Styled component below + +const SkillsSection = styled.div` + margin: 64px 0; +` + +const MySkills = styled.div` + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + gap: 30px; + width: 100%; + max-width: 900px; + margin: 0 auto; + + @media (max-width: 1440px) { + flex-direction: column; + align-items: center; + } +` + +const SkillColumn = styled.div` + text-align: center; + width: 180px; + padding-right: 30px; + + &:not(:last-child) { + border-right: 2px solid #1d5c5a; + } + + @media (max-width: 1440px) { + &:not(:last-child) { + border-right: none; + border-bottom: 2px solid #1d5c5a; + padding-bottom: 20px; + margin-bottom: 20px; + } + } +` \ No newline at end of file diff --git a/src/components/Sections/tech.jsx b/src/components/Sections/tech.jsx new file mode 100644 index 000000000..8fe808c6e --- /dev/null +++ b/src/components/Sections/tech.jsx @@ -0,0 +1,24 @@ +import styled from "styled-components" +import { Heading2, Paragraph } from "../common/typography" + +export const Tech = () => { + return ( + + Tech + + HTML, CSS, JavaScript, React, Node.js, Mongo DB,
    + Web Accessibility, APIs, mob-programming,
    + pair-programming, GitHub. +     +     + ) +} + +// Styled component below + +const TechSkills = styled.div` + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +` \ No newline at end of file diff --git a/src/components/common/button.jsx b/src/components/common/button.jsx new file mode 100644 index 000000000..c8ea8cec2 --- /dev/null +++ b/src/components/common/button.jsx @@ -0,0 +1,60 @@ +import styled from "styled-components" + +export const Button = ({ href, children,variant,ariaLabel }) => { + return ( + + {children} + + ) +} + +// Styled component below + +const StyledButton = styled.a` + padding: 10px 16px; + margin-top: 10px; + border: 2px solid #1d5c5a; + border-radius: 12px; + text-decoration: none; + cursor: pointer; + display:inline-block; + text-align: center; + + background-color: ${(props) => + props.variant === "live" + ? "#1d5c5a" + : "#fff"} ; + + color: ${(props) => + props.variant === "live" + ? "#fff" + : "#1d5c5a"} ; + + width: ${(props) => + props.variant === "live" && props.variant === "demo" + ? "192px" + : "400px"} ; + + &:hover { + background-color: ${(props) => + props.variant === "live" ? "#fff" : "#1d5c5a"}; + color: ${(props) => + props.variant === "live" ? "#1d5c5a" : "#fff"}; + transition: 0.2s ease; + } + + &:focus-visible { + outline: 3px solid #000; + outline-offset: 4px; + + } + + @media (max-width: 744px) { + width: 300px; + } +` \ No newline at end of file diff --git a/src/components/common/cards.jsx b/src/components/common/cards.jsx new file mode 100644 index 000000000..00c42bd34 --- /dev/null +++ b/src/components/common/cards.jsx @@ -0,0 +1,142 @@ +import styled from "styled-components" +import { Button } from "./button" +import { Heading3, Heading4, Paragraph } from "./typography" + +export const ProjectCard = ({ image, title, description, netlify, github, index }) => { + return ( + + + project image + {title} + {description} + + + + + + + + ) +} + +export const JourneyCard = ({ image, date, title, text, link, index }) => { + return ( + + + + {date} + {title} + {text} + + + + + + ) +} + +// Styled Component bellow + +const Card = styled.div` + width: 400px; + height: 625px; + flex-shrink: 0; + background-color: #fff; + display: flex; + flex-direction: column; + justify-content: space-between; + + @media (max-width: 744px) { + width: 300px; + height: 555px; + gap: 16px; + + ${Paragraph} { + display: none; + } + } + + &:hover { + transform: translateY(-9px) scale(1.08); + } + + @media (max-width: 1440px) { + .project-card:hover { + transform: none; + } + } + + img { + width: 400px; + height:300px; + object-fit: cover; + margin-bottom: 20px; + } + + @media (max-width: 744px) { + img { + width: 300px; + } + } + + &.project-card img { + filter: blur(5px); + transition: filter 0.6s ease; + } + + &.project-card:hover img { + filter: blur(0); + } +` +const Content = styled.div` + flex: 1; +` + +const ProjectLinks = styled.div` + display:flex; + justify-content: space-between; + gap: 16px; + + @media (max-width: 1440px) { + display: flex; + flex-direction: column; + gap: 2px; + } +` + +const ButtonWrapper = styled.div` + margin-top: auto; +` \ No newline at end of file diff --git a/src/components/common/icons.jsx b/src/components/common/icons.jsx new file mode 100644 index 000000000..f1e8746d3 --- /dev/null +++ b/src/components/common/icons.jsx @@ -0,0 +1,43 @@ +import styled from "styled-components" +import githubIcon from "../../images/github.png" +import linkedinIcon from "../../images/linkedin.png" + +export const Icon = ({ name, size= 28, href }) => { + const icons = { + github: githubIcon, + linkedin: linkedinIcon, + } + + const labels = { + github: "Open Github profile", + linkedin: "Open Linkedin profile", + } + + const selectedIcon = icons[name] + const label = labels[name] + + return ( + + {`${name} + + ) +} + +export const IconRow = styled.div` + display:flex; + gap: 18px; + margin-top: 30px; + + @media (max-width: 1440px) { + display: flex; + justify-content: center; + } +` \ No newline at end of file diff --git a/src/components/common/typography.jsx b/src/components/common/typography.jsx new file mode 100644 index 000000000..9e2a9a8cd --- /dev/null +++ b/src/components/common/typography.jsx @@ -0,0 +1,54 @@ +import styled from "styled-components" + +export const Heading1 = styled.h1` + font-size: 100px; + font-weight: 500; + line-height: 1; + margin-bottom: 32px; + + @media (max-width: 1440px) { + font-size: 80px; + } + + @media (max-width: 744px) { + font-size: 60px; + } +` + +export const Heading2 = styled.h2` + font-size: 80px; + font-weight: 500; + text-align: center; + margin: 64px 0; + + @media (max-width: 1440px) { + font-size: 60px; + } + + @media (max-width: 744px) { + font-size: 40px; + } +` + +export const Heading3 = styled.h3` + font-size: 30px; + font-weight: 400; + + @media (max-width: 1440px) { + font-size: 24px; + } +` + +export const Heading4 = styled.h4` + font-size: 20px; +` + +export const Paragraph = styled.p` + font-size: 18px; + font-weight: 300; + line-height: 1.8; + + @media (max-width: 1440px) { + font-size: 16px; + } +` \ No newline at end of file diff --git a/src/data/iconLinks.json b/src/data/iconLinks.json new file mode 100644 index 000000000..bd8501b7e --- /dev/null +++ b/src/data/iconLinks.json @@ -0,0 +1,12 @@ +{ + "iconLinks": [ + { + "name": "github", + "href": "https://github.com/Appilistus" + }, + { + "name": "linkedin", + "href": "https://www.linkedin.com/in/asako-kanno/" + } + ] +} \ No newline at end of file diff --git a/src/data/journey.json b/src/data/journey.json new file mode 100644 index 000000000..72869f77e --- /dev/null +++ b/src/data/journey.json @@ -0,0 +1,25 @@ +{ + "journey": [ + { + "image":"img1", + "date": "September 10th", + "title": "My Boot camp Beginning", + "text": "Starting Technigo’s bootcamp was my first real step into coding. Even as a complete beginner, I learned to stay curious and face challenges. Those early errors and small wins taught me persistence and built my confidence.", + "link": "link" + }, + { + "image": "img2", + "date": "September 25th", + "title": "Learning by Building a Recipe App", + "text": "Building my recipe app taught me more than any tutorial. Debugging issues like data not saving helped me understand structure and logic. Creating something real showed me that learning happens through practice.", + "link": "link" + }, + { + "image": "img3", + "date": "November 11th", + "title": "Growing Through the Process", + "text": "My coding journey taught me that progress comes in many sizes. Some days are big wins, others small steps—but both matter. Each challenge in the bootcamp has helped me grow into a developing developer.", + "link": "link" + } + ] +} \ No newline at end of file diff --git a/src/data/projects.json b/src/data/projects.json index 7c4260285..6fd15b58b 100644 --- a/src/data/projects.json +++ b/src/data/projects.json @@ -1,19 +1,34 @@ { "projects": [ { - "name": "Business site", - "image": "https://images.unsplash.com/photo-1557008075-7f2c5efa4cfd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2497&q=80", + "title": "Business site", + "image": "business", + "description":"A responsive website introducing an AI learning platform designed for children. The design emphasizes clarity, warmth, and curiosity, creating a trustworthy experience for parents and educators. The layout adapts seamlessly across devices to maintain accessibility and engagement.", "tags": [ "HTML5", "CSS3", "JavaScript" ], - "netlify": "link", - "github": "link" + "netlify": "https://ai-compass-business-site.netlify.app/", + "github": "https://github.com/Appilistus/js-project-business-site" }, { - "name": "Weather app", - "image": "https://images.unsplash.com/photo-1520792532857-293bd046307a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2370&q=80", + "title": "Recipe app", + "image": "recipe", + "description": "An interactive recipe platform that displays data from a public API with search, filter, and sorting functions. Built with a clean and friendly interface to inspire users to find quick, everyday recipes. Focused on intuitive interaction and consistent data structure to enhance usability.", + "tags": [ + "HTML5", + "CSS3", + "JavaScript", + "APIs" + ], + "netlify": "https://js-project-recipe-library-site.netlify.app/", + "github": "https://github.com/Appilistus/js-project-recipe-library" + }, + { + "title": "Weather app", + "image": "weather", + "description": "A minimalist weather application displaying live data and a five-day forecast via an external API. The layout prioritizes readability and balance, offering weather insights at a glance. Designed with responsive structure and straightforward UI components for clarity.", "tags": [ "HTML5", "CSS3", @@ -21,6 +36,18 @@ "TypeScript", "APIs" ], + "netlify": "https://poodles3-weather-app.netlify.app/", + "github": "https://github.com/Appilistus/js-project-weather-app" + }, + { + "title": "Web Accessibility app", + "image": "accessibility", + "description": "A group project dedicated to promoting accessibility and inclusive web experiences. The site follows WCAG principles with attention to contrast, keyboard navigation, and semantic HTML. Highlights the importance of thoughtful design that serves every user equally.", + "tags": [ + "HTML5", + "CSS3", + "JavaScript" + ], "netlify": "link", "github": "link" } diff --git a/src/data/skills.json b/src/data/skills.json new file mode 100644 index 000000000..5ee44a2c8 --- /dev/null +++ b/src/data/skills.json @@ -0,0 +1,48 @@ +{ + "skills": [ + { + "title": "Code", + "skills": [ + "HTML5", + "CSS3", + "JavaScript", + "TypeScript", + "Node.js", + "React", + "github" + ] + }, + { + "title": "Toolebox", + "skills": [ + "Postman", + "Adobe Photoshop", + "Adobe Illustrator", + "Figma", + "Canva", + "Slack", + "Notion" + ] + }, + { + "title": "AI Tools", + "skills": [ + "Chat GPT", + "Gemini", + "Cursor", + "Codex", + "GitHub copilot" + ] + }, + { + "title": "More", + "skills": [ + "Agile methodology", + "Web Accessibility", + "Responsive Design", + "Communication", + "Problem solving" + ] + } + ] +} \ No newline at end of file diff --git a/src/images/accessibility.png b/src/images/accessibility.png new file mode 100644 index 000000000..ce172084c Binary files /dev/null and b/src/images/accessibility.png differ diff --git a/src/images/business.png b/src/images/business.png new file mode 100644 index 000000000..f8b83065c Binary files /dev/null and b/src/images/business.png differ diff --git a/src/images/favicon.ico b/src/images/favicon.ico new file mode 100644 index 000000000..c63744b3c Binary files /dev/null and b/src/images/favicon.ico differ diff --git a/src/images/github.png b/src/images/github.png new file mode 100644 index 000000000..d4c3a36fe Binary files /dev/null and b/src/images/github.png differ diff --git a/src/images/hello3.png b/src/images/hello3.png new file mode 100644 index 000000000..2d85d7054 Binary files /dev/null and b/src/images/hello3.png differ diff --git a/src/images/hello4.png b/src/images/hello4.png new file mode 100644 index 000000000..c2dd4bfbc Binary files /dev/null and b/src/images/hello4.png differ diff --git a/src/images/img1.png b/src/images/img1.png new file mode 100644 index 000000000..eaa8d07de Binary files /dev/null and b/src/images/img1.png differ diff --git a/src/images/img2.png b/src/images/img2.png new file mode 100644 index 000000000..4a499741b Binary files /dev/null and b/src/images/img2.png differ diff --git a/src/images/img3.png b/src/images/img3.png new file mode 100644 index 000000000..c2dd39ea3 Binary files /dev/null and b/src/images/img3.png differ diff --git a/src/images/linkedin.png b/src/images/linkedin.png new file mode 100644 index 000000000..688873076 Binary files /dev/null and b/src/images/linkedin.png differ diff --git a/src/images/profile4.png b/src/images/profile4.png new file mode 100644 index 000000000..2adffe60b Binary files /dev/null and b/src/images/profile4.png differ diff --git a/src/images/recipe.png b/src/images/recipe.png new file mode 100644 index 000000000..3f91f3b01 Binary files /dev/null and b/src/images/recipe.png differ diff --git a/src/images/weather.png b/src/images/weather.png new file mode 100644 index 000000000..95a023ed7 Binary files /dev/null and b/src/images/weather.png differ diff --git a/src/index.css b/src/index.css index 61010be6a..e69de29bb 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +0,0 @@ -body { - background: pink; - color: hotpink; -} \ No newline at end of file diff --git a/src/styles/carousel.jsx b/src/styles/carousel.jsx new file mode 100644 index 000000000..e7ff9b895 --- /dev/null +++ b/src/styles/carousel.jsx @@ -0,0 +1,74 @@ +import styled from "styled-components" +import { Swiper, SwiperSlide } from "swiper/react" +import "swiper/css" +import "swiper/css/scrollbar" +import { Scrollbar, Mousewheel } from "swiper/modules" + +export const Carousel = ({ data, renderItem, index }) => { + return ( + + + {data.map((item, index) => ( + + {renderItem(item, index)} + + ))} + + + ) +} + +// Styled component below + +const CarouselWrapper = styled.div` + margin-top: 60px; + padding: 0 40px; + + @media (max-width: 1440px) { + margin: 0; + padding: 0; + } + + .swiper { + padding-bottom: 64px; + } + + .swiper-scrollbar { + position: relative; + bottom: -20px; + background-color: #e5e5e5; + border-radius: 20px; + height: 18px; + width: 80%; + margin: 70px auto 0; + } + + .swiper-scrollbar-drag { + background-color: #1d5c5a; + border-radius: 20px; + height: 18px; + } + + .slide { + width: 400px; + } + + @media (max-width: 744px) { + .slide { + width: 300px !important; + } + } +` \ No newline at end of file diff --git a/src/styles/globalStyles.jsx b/src/styles/globalStyles.jsx new file mode 100644 index 000000000..b7d41079d --- /dev/null +++ b/src/styles/globalStyles.jsx @@ -0,0 +1,15 @@ +import { createGlobalStyle } from "styled-components" + +export const GlobalStyle = createGlobalStyle` + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + background-color: #fafafa; + color:#1a1a1a; + font-family: "Poppins", sans-serif; + } +` \ No newline at end of file diff --git a/src/styles/theme.js b/src/styles/theme.js new file mode 100644 index 000000000..3e9eaa6d5 --- /dev/null +++ b/src/styles/theme.js @@ -0,0 +1,6 @@ +import styled from "styled-components" + +export const StyledUl = styled.ul` + list-style: none; + padding: 0; +` \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index 8b0f57b91..03066fb6f 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,5 +3,11 @@ import react from '@vitejs/plugin-react' // https://vite.dev/config/ export default defineConfig({ - plugins: [react()], -}) + plugins: [ + react({ + babel: { + plugins: [['babel-plugin-styled-components', { displayName: true }]] + } + }) + ] +}) \ No newline at end of file