diff --git a/README.md b/README.md index 200f4282..9cfba7bb 100644 --- a/README.md +++ b/README.md @@ -1 +1,5 @@ # Portfolio + +Netlify link - https://asako-portfolio.netlify.app/ + +Figma link - https://www.figma.com/design/8rhyek3LxsIZM2rjSBVfee/Portfolio-design?node-id=0-1&t=3RJwp8MXaEhHBVpV-1 \ No newline at end of file diff --git a/index.html b/index.html index 6676fb2d..78ba5d97 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,16 @@ - + + + + - Portfolio + Asako Kanno -
+
+
diff --git a/package.json b/package.json index 48911600..96f2bd44 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 a161d8d3..dec7f993 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 00000000..0037ec6c --- /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 00000000..f2ee699b --- /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 00000000..a82e0973 --- /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 00000000..7295af7a --- /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 00000000..dc3d5d58 --- /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 00000000..8fe808c6 --- /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 00000000..c8ea8cec --- /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 00000000..00c42bd3 --- /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 00000000..f1e8746d --- /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 00000000..9e2a9a8c --- /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 00000000..bd8501b7 --- /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 00000000..72869f77 --- /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 7c426028..6fd15b58 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 00000000..5ee44a2c --- /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 00000000..ce172084 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 00000000..f8b83065 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 00000000..c63744b3 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 00000000..d4c3a36f 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 00000000..2d85d705 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 00000000..c2dd4bfb 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 00000000..eaa8d07d 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 00000000..4a499741 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 00000000..c2dd39ea 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 00000000..68887307 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 00000000..2adffe60 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 00000000..3f91f3b0 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 00000000..95a023ed Binary files /dev/null and b/src/images/weather.png differ diff --git a/src/index.css b/src/index.css index 61010be6..e69de29b 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 00000000..e7ff9b89 --- /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 00000000..b7d41079 --- /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 00000000..3e9eaa6d --- /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 8b0f57b9..03066fb6 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