diff --git a/README.md b/README.md index 200f4282..8acce40d 100644 --- a/README.md +++ b/README.md @@ -1 +1,178 @@ -# Portfolio +# 🏑 Kausar Portfolio + +**Kausar Portfolio** is a modern, interactive portfolio website built during Technigo’s JavaScript Bootcamp (August 2025). The project showcases my skills, projects, blog articles, and tech stack, demonstrating responsive design, dynamic content, and interactive UI components. + +The live project is available on [Netlify](https://kausarshangareeva-portfolio.netlify.app/). + +--- + +## πŸ”— Demo + +Check it out here: [Kausar Portfolio on Netlify](https://kausarshangareeva-portfolio.netlify.app/) + +--- + +## πŸ“Έ Screenshot + +## ![Portfolio Screenshot](public/Image/portfolio-screen.png) + +## πŸš€ Features + +- πŸ‘‹ **Hero Section:** Intro with images and description +- πŸ› οΈ **Tech Section:** List of technologies and skills with interactive tags +- πŸ—οΈ **Featured Projects Section:** Project cards with images, tags, descriptions, and action buttons +- πŸ’» **Skills Section:** Skills and tools displayed in responsive columns +- πŸ“š **Blog Section:** Articles with images, titles, dates, and buttons for reading +- πŸ“± Fully **responsive layout** β€” adapts for desktop, tablet, and mobile +- 🎨 **Interactive UI components:** Buttons, tags, cards, burger menu +- 🌟 **Data-driven content** from JSON files for projects, skills, articles, and tech + +--- + +## 🧰 Tech Stack / What I Built With + +- **React.js** for building modular and reusable components +- **Styled-Components** for styling and media queries +- **JavaScript (ES6+)** for logic, mapping, filtering, and dynamic rendering +- **JSON** files to manage structured data: aboutMe, projectsData, articlesData, skillsData, techData +- **Vite** for fast development and bundling +- **SVG Icons & Lucide** for interactive icons and buttons + +--- + +## 🧠 How It Works + +1. **Hero Section**: Displays greeting text with animated images. +2. **Tech Section**: Shows my tech stack with dynamic tags. +3. **Featured Projects Section**: Projects rendered dynamically with images, descriptions, and action buttons. Layout adapts for even/odd projects. +4. **Skills Section**: Highlights my skills with interactive tags in columns. +5. **Blog Section**: Articles displayed from JSON data, including image, title, description, and publication date. +6. **Footer Section**: Contains contact info, social icons, and avatar. +7. **Responsive Design**: Uses styled-components media queries to adjust layout, images, and typography for different screen sizes. +8. **Dynamic Content**: All sections fetch data from JSON files, making it easy to update or expand. + +--- + +## πŸ“‚ File Structure + +``` +src/ +β”‚ +β”œβ”€β”€ πŸ“‚ data/ +β”‚ β”œβ”€β”€ aboutMe.json +β”‚ β”œβ”€β”€ projectsData.json +β”‚ β”œβ”€β”€ articlesData.json +β”‚ └── skillsData.json +β”‚ └── techData.json +β”‚ +β”œβ”€β”€ πŸ“‚ Assets/ +β”‚ β”œβ”€β”€ Button/ +β”‚ β”‚ β”œβ”€β”€ ButtonIcons/ +β”‚ β”‚ β”œβ”€β”€ Button.jsx +β”‚ β”‚ └── ButtonData.js +β”‚ β”‚ +β”‚ β”œβ”€β”€ Tag/ +β”‚ β”‚ β”œβ”€β”€ TagIcins/ +β”‚ β”‚ β”œβ”€β”€ TagComponents.jsx +β”‚ β”‚ └── TagData.js +β”‚ β”‚ +β”‚ β”œβ”€β”€ Typography +β”‚ β”‚ +β”‚ β”œβ”€β”€ Image/ +β”‚ β”‚ β”œβ”€β”€ ImagBlog/ +β”‚ β”‚ β”œβ”€β”€ ImagHero/ +β”‚ β”‚ └── ImagProject/ +β”‚ β”‚ +β”‚ └── Icon/ +β”‚ β”œβ”€β”€ Icons/ +β”‚ └── IconData.js +| +| +β”œβ”€β”€ πŸ“‚ Styles/ +β”‚ β”‚ +β”‚ └── HeroSection/ +β”‚ β”œβ”€β”€ GlobalStyles.js +β”‚ └── responsive.js +β”‚ +β”œβ”€β”€ πŸ“‚ Sections/ +β”‚ β”‚ +β”‚ β”œβ”€β”€ HeroSection/ +β”‚ β”‚ β”œβ”€β”€ HeroSection.jsx +β”‚ β”‚ β”œβ”€β”€ HeroSection.styles.js +β”‚ β”‚ └── components/ +β”‚ β”‚ β”œβ”€β”€ HeroImages.jsx +β”‚ β”‚ └── HeroDescription.jsx +β”‚ β”‚ +β”‚ β”œβ”€β”€ TechSection/ +β”‚ β”‚ β”œβ”€β”€ TechSection.jsx +β”‚ β”‚ └── components/ +β”‚ β”‚ β”œβ”€β”€ TechColumn.jsx +β”‚ β”‚ β”œβ”€β”€ TechTagList.jsx +β”‚ β”‚ └── TechTagItem.jsx +β”‚ β”‚ +β”‚ β”œβ”€β”€ FeaturedProjectsSection/ +β”‚ β”‚ β”œβ”€β”€ FeaturedProjectsSection.jsx +β”‚ β”‚ └── components/ +β”‚ β”‚ β”œβ”€β”€ ProjectCard.jsx +β”‚ β”‚ β”œβ”€β”€ ProjectImage.jsx +β”‚ β”‚ β”œβ”€β”€ ProjectTags.jsx +β”‚ β”‚ β”œβ”€β”€ ProjectTitle.jsx +β”‚ β”‚ β”œβ”€β”€ ProjectDescription.jsx +β”‚ β”‚ └── ProjectButtons.jsx +β”‚ β”‚ +β”‚ β”œβ”€β”€ SkillsSection/ +β”‚ β”‚ β”œβ”€β”€ SkillsSection.jsx +β”‚ β”‚ └── components/ +β”‚ β”‚ β”œβ”€β”€ SkillsColumn.jsx +β”‚ β”‚ β”œβ”€β”€ SkillsTagList.jsx +β”‚ β”‚ └── SkillsTagItem.jsx +β”‚ β”‚ +β”‚ β”œβ”€β”€ BlogSection/ +β”‚ β”‚ β”œβ”€β”€ BlogSection.jsx +β”‚ β”‚ └── components/ +β”‚ β”‚ β”œβ”€β”€ BlogCard.jsx +β”‚ β”‚ β”œβ”€β”€ BlogImage.jsx +β”‚ β”‚ β”œβ”€β”€ BlogDate.jsx +β”‚ β”‚ β”œβ”€β”€ BlogTitle.jsx +β”‚ β”‚ β”œβ”€β”€ BlogDescription.jsx +β”‚ β”‚ └── BlogButton.jsx +β”‚ β”‚ +β”‚ └── FooterSection/ +β”‚ β”œβ”€β”€ FooterSection.jsx +β”‚ └── components/ +β”‚ β”œβ”€β”€ Avatar.jsx +β”‚ β”œβ”€β”€ FooterContacts.jsx +β”‚ └── FooterIcons.jsx +β”‚ +|── App.jsx +└── main.jsx + +``` + +--- + +## πŸ“ What I Learned + +- Structuring a React project with multiple sections and reusable components +- Creating **responsive layouts** with styled-components and media queries +- Dynamically rendering content from JSON using `.map()` +- Implementing **interactive UI elements** like buttons, tags, and cards +- Handling images and icons for different screen sizes +- Managing props and component state effectively +- Combining frontend design and programming skills to build a full portfolio website + +--- + +## πŸ”œ Next Steps + +- Add filtering and search for projects and blog posts +- Implement dark/light mode toggle +- Add a contact form with email submission +- Optimize images for performance and faster loading +- Expand blog section with categories and pagination + +--- + +## πŸ“„ License + +This project is free to use for educational purposes. diff --git a/desktop.ini b/desktop.ini new file mode 100644 index 00000000..95fc4db9 --- /dev/null +++ b/desktop.ini @@ -0,0 +1,2 @@ +[LocalizedFileNames] +portfolio-screen.png=@portfolio-screen,0 diff --git a/index.html b/index.html index 6676fb2d..cda0040e 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,14 @@ - + - + + + + Portfolio diff --git a/package.json b/package.json index 48911600..25614e90 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,9 @@ }, "dependencies": { "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "sass": "^1.94.2", + "styled-components": "^6.1.19" }, "devDependencies": { "@eslint/js": "^9.21.0", @@ -22,6 +24,7 @@ "eslint-plugin-react-hooks": "^5.1.0", "eslint-plugin-react-refresh": "^0.4.19", "globals": "^15.15.0", - "vite": "^6.2.0" + "vite": "^6.2.0", + "vite-plugin-svgr": "^4.5.0" } } diff --git a/public/Image/ImgBlog/BlogImage-1.jpg b/public/Image/ImgBlog/BlogImage-1.jpg new file mode 100644 index 00000000..09e29b7e Binary files /dev/null and b/public/Image/ImgBlog/BlogImage-1.jpg differ diff --git a/public/Image/ImgHero/FooterLogo.png b/public/Image/ImgHero/FooterLogo.png new file mode 100644 index 00000000..e9e11a97 Binary files /dev/null and b/public/Image/ImgHero/FooterLogo.png differ diff --git a/public/Image/ImgHero/HeroImage1.png b/public/Image/ImgHero/HeroImage1.png new file mode 100644 index 00000000..941927d3 Binary files /dev/null and b/public/Image/ImgHero/HeroImage1.png differ diff --git a/public/Image/ImgHero/HeroImage2.png b/public/Image/ImgHero/HeroImage2.png new file mode 100644 index 00000000..fcc27bc1 Binary files /dev/null and b/public/Image/ImgHero/HeroImage2.png differ diff --git a/public/Image/ImgHero/HeroImage3.png b/public/Image/ImgHero/HeroImage3.png new file mode 100644 index 00000000..48108eb1 Binary files /dev/null and b/public/Image/ImgHero/HeroImage3.png differ diff --git a/public/Image/ImgProjects/Favorite-Dessert-img.png b/public/Image/ImgProjects/Favorite-Dessert-img.png new file mode 100644 index 00000000..43fcf162 Binary files /dev/null and b/public/Image/ImgProjects/Favorite-Dessert-img.png differ diff --git a/public/Image/ImgProjects/Pet-foster-img.png b/public/Image/ImgProjects/Pet-foster-img.png new file mode 100644 index 00000000..cf29c092 Binary files /dev/null and b/public/Image/ImgProjects/Pet-foster-img.png differ diff --git a/public/Image/ImgProjects/Real-Estate.png b/public/Image/ImgProjects/Real-Estate.png new file mode 100644 index 00000000..c7f3436e Binary files /dev/null and b/public/Image/ImgProjects/Real-Estate.png differ diff --git a/public/Image/ImgProjects/Weather-App-img.png b/public/Image/ImgProjects/Weather-App-img.png new file mode 100644 index 00000000..a8ca9288 Binary files /dev/null and b/public/Image/ImgProjects/Weather-App-img.png differ diff --git a/public/Image/portfolio-screen.png b/public/Image/portfolio-screen.png new file mode 100644 index 00000000..37abed1d Binary files /dev/null and b/public/Image/portfolio-screen.png differ diff --git a/public/Kausar-svg.svg b/public/Kausar-svg.svg new file mode 100644 index 00000000..3ad8fc28 --- /dev/null +++ b/public/Kausar-svg.svg @@ -0,0 +1,140 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/pull_request_template.md b/pull_request_template.md deleted file mode 100644 index 4263c7e8..00000000 --- a/pull_request_template.md +++ /dev/null @@ -1 +0,0 @@ -Please include a link to your Figma design and a Netlify link. \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index a161d8d3..2e01cff6 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,8 +1,21 @@ -export const App = () => { +import { GlobalStyles } from "./styles/GlobalStyles"; +import HeroSection from "./Sections/HeroSection/HeroSection"; +import TechSection from "./Sections/TechSection/TechSection"; +import FeaturedProjectsSection from "./Sections/FeaturedProjectsSection/FeaturedProjectsSection"; +import SkillsSection from "./Sections/SkillsSection/SkillsSection"; +import BlogSection from "./Sections/BlogSection/BlogSection"; +import FooterSection from "./Sections/FooterSection/FooterSection"; + +export default function App() { 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.

+ + + + + + + - ) + ); } diff --git a/src/Sections/BlogSection/BlogSection.jsx b/src/Sections/BlogSection/BlogSection.jsx new file mode 100644 index 00000000..407edb9d --- /dev/null +++ b/src/Sections/BlogSection/BlogSection.jsx @@ -0,0 +1,34 @@ +import { BlogCard } from "./components/BlogCard"; +import { SectionTitle } from "../../assets/Typography"; +import articlesData from "../../data/articlesData.json"; +import styled from "styled-components"; +import { respond } from "../../styles/responsive"; + +const SectionStyle = styled.section` + padding: 0 16px; +`; + +const SectionDiv = styled.div` + display: flex; + flex-direction: column; + gap: 120px; + max-width: 1000px; + margin: 0 auto; + + ${respond("tab-port")} { + gap: 100px; + } +`; + +export default function BlogSection() { + return ( + + + My words + {articlesData.articles.map((article, index) => ( + + ))} + + + ); +} diff --git a/src/Sections/BlogSection/components/BlogButtons.jsx b/src/Sections/BlogSection/components/BlogButtons.jsx new file mode 100644 index 00000000..60c19eb8 --- /dev/null +++ b/src/Sections/BlogSection/components/BlogButtons.jsx @@ -0,0 +1,17 @@ +import { BlackButton } from "../../../assets/Button/Button"; +import styled from "styled-components"; + +const ButtonBox = styled.div` + display: flex; + flex-direction: column; + gap: 8px; +`; + +export default function BlogButtons({ button }) { + return ( + + {button && + button.map((btn) => )} + + ); +} diff --git a/src/Sections/BlogSection/components/BlogCard.jsx b/src/Sections/BlogSection/components/BlogCard.jsx new file mode 100644 index 00000000..c94547a7 --- /dev/null +++ b/src/Sections/BlogSection/components/BlogCard.jsx @@ -0,0 +1,38 @@ +import BlogImage from "./BlogImage"; +import BlogTitle from "./BlogTitle"; +import BlogDescription from "./BlogDescription"; +import BlogDate from "./BlogDate"; +import BlogButtons from "./BlogButtons"; +import styled from "styled-components"; +import { respond } from "../../../styles/responsive"; + +const DivStyle = styled.div` + display: flex; + align-items: center; + gap: 120px; + + ${respond("tab-port")} { + flex-direction: column; + gap: 50px; + } +`; + +const DivBox = styled.div` + display: flex; + flex-direction: column; + gap: 30px; +`; + +export function BlogCard({ data }) { + return ( + + + + + + + + + + ); +} diff --git a/src/Sections/BlogSection/components/BlogDate.jsx b/src/Sections/BlogSection/components/BlogDate.jsx new file mode 100644 index 00000000..8a6b8316 --- /dev/null +++ b/src/Sections/BlogSection/components/BlogDate.jsx @@ -0,0 +1,21 @@ +import styled from "styled-components"; + +const DateStyle = styled.span` + display: inline-block; + width: fit-content; + padding: 6px 13px; + font-weight: bold; + font-size: 18px; + background: rgba(255, 255, 255, 0.39); + border-radius: 10px; + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.014); + backdrop-filter: blur(10.8px); + -webkit-backdrop-filter: blur(10.8px); + border: 1px solid rgba(255, 255, 255, 1); + color: #000; + border: 2px solid #000; +`; + +export default function BlogDate({ date }) { + return {date}; +} diff --git a/src/Sections/BlogSection/components/BlogDescription.jsx b/src/Sections/BlogSection/components/BlogDescription.jsx new file mode 100644 index 00000000..b8a4ef41 --- /dev/null +++ b/src/Sections/BlogSection/components/BlogDescription.jsx @@ -0,0 +1,5 @@ +import { Paragraph } from "../../../assets/Typography"; + +export default function BlogDescription({ desc }) { + return {desc}; +} diff --git a/src/Sections/BlogSection/components/BlogImage.jsx b/src/Sections/BlogSection/components/BlogImage.jsx new file mode 100644 index 00000000..e36ce879 --- /dev/null +++ b/src/Sections/BlogSection/components/BlogImage.jsx @@ -0,0 +1,18 @@ +import styled from "styled-components"; +import { respond } from "../../../styles/responsive"; + +const ImgStyle = styled.img` + width: 400px; + height: 400px; + border-radius: 20px; + object-fit: cover; + + ${respond("tab-port")} { + width: 100%; + max-width: 800px; + height: 400px; + } +`; +export default function BlogImage({ src, alt }) { + return ; +} diff --git a/src/Sections/BlogSection/components/BlogTitle.jsx b/src/Sections/BlogSection/components/BlogTitle.jsx new file mode 100644 index 00000000..e749c08b --- /dev/null +++ b/src/Sections/BlogSection/components/BlogTitle.jsx @@ -0,0 +1,5 @@ +import { TitleH3 } from "../../../assets/Typography"; + +export default function BlogTitle({ title }) { + return {title}; +} diff --git a/src/Sections/FeaturedProjectsSection/FeaturedProjectsSection.jsx b/src/Sections/FeaturedProjectsSection/FeaturedProjectsSection.jsx new file mode 100644 index 00000000..0248f060 --- /dev/null +++ b/src/Sections/FeaturedProjectsSection/FeaturedProjectsSection.jsx @@ -0,0 +1,34 @@ +import ProjectCard from "./components/ProjectCard"; +import projectData from "../../data/projectsData.json"; +import { SectionTitle } from "../../assets/Typography"; +import styled from "styled-components"; +import { respond } from "../../styles/responsive"; + +const SectionStyle = styled.section` + padding: 0 16px; +`; + +const SectionDiv = styled.div` + display: flex; + flex-direction: column; + gap: 120px; + max-width: 1000px; + margin: 0 auto; + + ${respond("tab-port")} { + gap: 100px; + } +`; + +export default function FeaturedProjectsSection() { + return ( + + + Featured Projects + {projectData.projects.map((project, index) => ( + + ))} + + + ); +} diff --git a/src/Sections/FeaturedProjectsSection/components/ProjectButtons.jsx b/src/Sections/FeaturedProjectsSection/components/ProjectButtons.jsx new file mode 100644 index 00000000..89094226 --- /dev/null +++ b/src/Sections/FeaturedProjectsSection/components/ProjectButtons.jsx @@ -0,0 +1,17 @@ +import { BlackButton } from "../../../assets/Button/Button"; +import styled from "styled-components"; + +const ButtonBox = styled.div` + display: flex; + flex-direction: column; + gap: 8px; +`; + +export default function ProjectButtons({ button }) { + return ( + + {button && + button.map((btn) => )} + + ); +} diff --git a/src/Sections/FeaturedProjectsSection/components/ProjectCard.jsx b/src/Sections/FeaturedProjectsSection/components/ProjectCard.jsx new file mode 100644 index 00000000..11ee130c --- /dev/null +++ b/src/Sections/FeaturedProjectsSection/components/ProjectCard.jsx @@ -0,0 +1,71 @@ +import ProjectImage from "./ProjectImage"; +import ProjectTitle from "./ProjectTitle"; +import ProjectDescription from "./ProjectDescription"; +import ProjectTags from "./ProjectTags"; +import ProjectButtons from "./ProjectButtons"; +import styled from "styled-components"; +import { respond } from "../../../styles/responsive"; + +const DivStyle = styled.div` + display: flex; + align-items: center; + gap: 120px; + + ${respond("tab-port")} { + flex-direction: column; + gap: 50px; + align-items: flex-start; + } +`; + +export const ProjectImageWrapper = styled.div` + width: 100%; + + ${respond("tab-port")} { + order: 0; + } +`; + +const DivBox = styled.div` + display: flex; + flex-direction: column; + gap: 30px; + + ${respond("tab-port")} { + order: 1; + } +`; + +export default function ProjectCard({ project, index }) { + const isEven = index % 2 === 0; + + return ( + + {isEven ? ( + <> + + + + + + + + + + + ) : ( + <> + + + + + + + + + + + )} + + ); +} diff --git a/src/Sections/FeaturedProjectsSection/components/ProjectDescription.jsx b/src/Sections/FeaturedProjectsSection/components/ProjectDescription.jsx new file mode 100644 index 00000000..514036cc --- /dev/null +++ b/src/Sections/FeaturedProjectsSection/components/ProjectDescription.jsx @@ -0,0 +1,5 @@ +import { Paragraph } from "../../../assets/Typography"; + +export default function ProjectDescription({ description }) { + return {description}; +} diff --git a/src/Sections/FeaturedProjectsSection/components/ProjectImage.jsx b/src/Sections/FeaturedProjectsSection/components/ProjectImage.jsx new file mode 100644 index 00000000..7991ac0b --- /dev/null +++ b/src/Sections/FeaturedProjectsSection/components/ProjectImage.jsx @@ -0,0 +1,19 @@ +import styled from "styled-components"; +import { respond } from "../../../styles/responsive"; + +const ImgStyle = styled.img` + width: 400px; + height: 400px; + border-radius: 20px; + object-fit: cover; + + ${respond("tab-port")} { + width: 100%; + max-width: 800px; + height: 400px; + } +`; + +export default function ProjectImage({ src, alt }) { + return ; +} diff --git a/src/Sections/FeaturedProjectsSection/components/ProjectTags.jsx b/src/Sections/FeaturedProjectsSection/components/ProjectTags.jsx new file mode 100644 index 00000000..6587e9b3 --- /dev/null +++ b/src/Sections/FeaturedProjectsSection/components/ProjectTags.jsx @@ -0,0 +1,11 @@ +import { Tag } from "../../../assets/Tag/TagComponent"; + +export default function ProjectTags({ tags }) { + return ( +
+ {tags.map((tag) => ( + + ))} +
+ ); +} diff --git a/src/Sections/FeaturedProjectsSection/components/ProjectTitle.jsx b/src/Sections/FeaturedProjectsSection/components/ProjectTitle.jsx new file mode 100644 index 00000000..0f8755c5 --- /dev/null +++ b/src/Sections/FeaturedProjectsSection/components/ProjectTitle.jsx @@ -0,0 +1,10 @@ +import { TitleH3 } from "../../../assets/Typography"; + +export default function ProjectTitle({ title1, title2 }) { + return ( + + {title1}
+ {title2} + + ); +} diff --git a/src/Sections/FooterSection/FooterSection.jsx b/src/Sections/FooterSection/FooterSection.jsx new file mode 100644 index 00000000..3cd8eded --- /dev/null +++ b/src/Sections/FooterSection/FooterSection.jsx @@ -0,0 +1,38 @@ +import { SectionTitle } from "../../assets/Typography"; +import { Avatar } from "./components/Avatar"; +import { Contacts } from "./components/FooterContacts"; +import { FooterIconList } from "./components/FooterIcons"; +import meData from "../../data/aboutMe.json"; +import styled from "styled-components"; + +const SectionStyle = styled.section` + background-color: #000000; + margin: 100px 0 0 0; + padding: 80px 16px; + display: flex; + flex-direction: column; + gap: 120px; +`; + +const SectionDiv = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; + max-width: 1000px; + justify-content: space-between; + margin: 0 auto; +`; + +export default function FooterSection() { + return ( + + + + Lets Talk + + + + + ); +} diff --git a/src/Sections/FooterSection/components/Avatar.jsx b/src/Sections/FooterSection/components/Avatar.jsx new file mode 100644 index 00000000..6e372ca4 --- /dev/null +++ b/src/Sections/FooterSection/components/Avatar.jsx @@ -0,0 +1,9 @@ +import styled from "styled-components"; + +const Logo = styled.img` + width: 160px; +`; + +export function Avatar({ data }) { + return ; +} diff --git a/src/Sections/FooterSection/components/FooterContacts.jsx b/src/Sections/FooterSection/components/FooterContacts.jsx new file mode 100644 index 00000000..b0e87e17 --- /dev/null +++ b/src/Sections/FooterSection/components/FooterContacts.jsx @@ -0,0 +1,22 @@ +import styled from "styled-components"; +import { TitleH5 } from "../../../assets/Typography"; + +const DivStyle = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + font-size: 25px; + font-weight: 600; + color: #fff; +`; + +export function Contacts({ data }) { + return ( + + {data.fullname} + {data.number} + {data.mail} + + ); +} diff --git a/src/Sections/FooterSection/components/FooterIcons.jsx b/src/Sections/FooterSection/components/FooterIcons.jsx new file mode 100644 index 00000000..ff31e0bb --- /dev/null +++ b/src/Sections/FooterSection/components/FooterIcons.jsx @@ -0,0 +1,28 @@ +import { FooterIcons } from "../../../assets/Icon/IconData"; +import styled from "styled-components"; + +const DivStyle = styled.div` + display: flex; + align-items: center; + gap: 10px; +`; + +export function FooterIconList() { + return ( + + {FooterIcons && + FooterIcons.map((item, i) => ( + + + + ))} + + ); +} diff --git a/src/Sections/HeroSection/HeroSection.jsx b/src/Sections/HeroSection/HeroSection.jsx new file mode 100644 index 00000000..891a1442 --- /dev/null +++ b/src/Sections/HeroSection/HeroSection.jsx @@ -0,0 +1,64 @@ +import { SectionTitle } from "../../assets/Typography"; +import { HeroDescription } from "./components/HeroDescription"; +import { HeroImages } from "./components/HeroImages"; +import { TitleH1 } from "../../assets/Typography"; +import meData from "../../data/aboutMe.json"; +import styled from "styled-components"; +import { respond } from "../../styles/responsive"; + +const SectionStyle = styled.section``; + +const SectionDiv = styled.div` + padding: 0 16px; + display: flex; + flex-direction: column; + gap: 70px; + max-width: 1000px; + margin: 0 auto; +`; + +const FlexDiv = styled.div` + display: flex; + justify-content: center; + align-items: center; + margin: 30px 16px 0 16px; + + ${respond("f-phone")} { + margin: -30px 16px 0 16px; + } +`; + +export default function HeroSection({ data }) { + return ( + + πŸ‘‹πŸ» Hi there, I’m + + Kausar + + + {meData.img.map((el, index) => { + let design; + + switch (index) { + case 0: + design = "left"; + break; + case 1: + design = "center"; + break; + case 2: + design = "right"; + break; + default: + design = "default"; + } + + return ; + })} + + + + + + ); +} diff --git a/src/Sections/HeroSection/components/HeroDescription.jsx b/src/Sections/HeroSection/components/HeroDescription.jsx new file mode 100644 index 00000000..4544ce1d --- /dev/null +++ b/src/Sections/HeroSection/components/HeroDescription.jsx @@ -0,0 +1,11 @@ +import { TitleH3 } from "../../../assets/Typography"; +import { Paragraph } from "../../../assets/Typography"; + +export function HeroDescription({ data }) { + return ( + <> + {data.proffession} + {data.desc} + + ); +} diff --git a/src/Sections/HeroSection/components/HeroImages.jsx b/src/Sections/HeroSection/components/HeroImages.jsx new file mode 100644 index 00000000..af9facd6 --- /dev/null +++ b/src/Sections/HeroSection/components/HeroImages.jsx @@ -0,0 +1,61 @@ +import styled, { css } from "styled-components"; +import { respond } from "../../../styles/responsive"; + +const ImgStyle = styled.img` + border-radius: 20px; + flex: 1 1 300px; + max-width: 300px; + height: auto; + transform: rotate(${(props) => props.angle}deg); + + ${respond("tab-port")} { + width: 100%; + max-width: 200px; + } + + ${respond("s-phone")} { + width: 90%; + } + + ${respond("m-phone")} { + max-width: 180px; + } + + ${respond("f-phone")} { + max-width: 150px; + } + + ${respond("xs-phone")} { + max-width: 130px; + } + + ${(props) => + props.design === "left" && + css` + transform: rotate(-8deg); + margin-right: -60px; + `} + + ${(props) => + props.design === "center" && + css` + transform: translateY(-50px); + z-index: 1000; + + ${respond("f-phone")} { + transform: translateY(70px); + margin-bottom: 30px; + } + `} + + ${(props) => + props.design === "right" && + css` + transform: rotate(8deg); + margin-left: -60px; + `} +`; + +export function HeroImages({ data, angle, design }) { + return ; +} diff --git a/src/Sections/SkillsSection/SkillsSection.jsx b/src/Sections/SkillsSection/SkillsSection.jsx new file mode 100644 index 00000000..8dcf0037 --- /dev/null +++ b/src/Sections/SkillsSection/SkillsSection.jsx @@ -0,0 +1,40 @@ +import { SectionTitle } from "../../assets/Typography"; +import { SkillsColumn } from "./components/SkillsColumn"; +import skillsData from "../../data/skillsData.json"; +import styled from "styled-components"; +import { respond } from "../../styles/responsive"; + +const SectionStyle = styled.section` + background-color: #000000; + margin: 100px 0; + padding: 80px 16px; + display: flex; + flex-direction: column; + gap: 120px; +`; + +const SectionDiv = styled.div` + display: flex; + align-items: flex-start; + gap: 30px; + max-width: 1000px; + justify-content: space-between; + margin: 0 auto; + + ${respond("tab-port")} { + flex-direction: column; + } +`; + +export default function SkillsSection() { + return ( + + Skills + + {Object.values(skillsData.skills).map((skill, index) => ( + + ))} + + + ); +} diff --git a/src/Sections/SkillsSection/components/SkillsColumn.jsx b/src/Sections/SkillsSection/components/SkillsColumn.jsx new file mode 100644 index 00000000..8e77ab66 --- /dev/null +++ b/src/Sections/SkillsSection/components/SkillsColumn.jsx @@ -0,0 +1,13 @@ +import { SkillsTagItem } from "./SkillsTagItem"; +import { SkillsTagList } from "./SkillsTagList"; + +export function SkillsColumn({ tag }) { + if (!tag) return null; + + return ( +
+ + +
+ ); +} diff --git a/src/Sections/SkillsSection/components/SkillsTagItem.jsx b/src/Sections/SkillsSection/components/SkillsTagItem.jsx new file mode 100644 index 00000000..6e2b536b --- /dev/null +++ b/src/Sections/SkillsSection/components/SkillsTagItem.jsx @@ -0,0 +1,5 @@ +import { TitleH4 } from "../../../assets/Typography"; + +export function SkillsTagItem({ title }) { + return {title}; +} diff --git a/src/Sections/SkillsSection/components/SkillsTagList.jsx b/src/Sections/SkillsSection/components/SkillsTagList.jsx new file mode 100644 index 00000000..37da9c11 --- /dev/null +++ b/src/Sections/SkillsSection/components/SkillsTagList.jsx @@ -0,0 +1,20 @@ +import styled from "styled-components"; +import { Tag } from "../../../assets/Tag/TagComponent"; + +const DivFlex = styled.span` + display: flex; + flex-wrap: wrap; + gap: 10px; +`; + +export function SkillsTagList({ tags }) { + if (!tags) return console.log("something wrong"); + + return ( + + {tags.map((tag) => ( + + ))} + + ); +} diff --git a/src/Sections/TechSection/TechSection.jsx b/src/Sections/TechSection/TechSection.jsx new file mode 100644 index 00000000..b6cb8dd1 --- /dev/null +++ b/src/Sections/TechSection/TechSection.jsx @@ -0,0 +1,40 @@ +import { SectionTitle } from "../../assets/Typography"; +import { TechColumn } from "./components/TechColumn"; +import techData from "../../data/techData.json"; +import styled from "styled-components"; +import { respond } from "../../styles/responsive"; + +const SectionStyle = styled.section` + background-color: #000000; + margin: 100px 0; + padding: 80px 16px; + display: flex; + flex-direction: column; + gap: 120px; +`; + +const SectionDiv = styled.div` + display: flex; + align-items: flex-start; + gap: 30px; + max-width: 1000px; + justify-content: space-between; + margin: 0 auto; + + ${respond("tab-port")} { + flex-direction: column; + } +`; + +export default function TechSection() { + return ( + + Tech + + {Object.values(techData.tech).map((tech, index) => ( + + ))} + + + ); +} diff --git a/src/Sections/TechSection/components/TechColumn.jsx b/src/Sections/TechSection/components/TechColumn.jsx new file mode 100644 index 00000000..3eb65332 --- /dev/null +++ b/src/Sections/TechSection/components/TechColumn.jsx @@ -0,0 +1,13 @@ +import { TechTagItem } from "./TechTagItem"; +import { TechTagList } from "./TechTagList"; + +export function TechColumn({ tag }) { + if (!tag) return null; + + return ( +
+ + +
+ ); +} diff --git a/src/Sections/TechSection/components/TechTagItem.jsx b/src/Sections/TechSection/components/TechTagItem.jsx new file mode 100644 index 00000000..ecb32389 --- /dev/null +++ b/src/Sections/TechSection/components/TechTagItem.jsx @@ -0,0 +1,5 @@ +import { TitleH4 } from "../../../assets/Typography"; + +export function TechTagItem({ title }) { + return {title}; +} diff --git a/src/Sections/TechSection/components/TechTagList.jsx b/src/Sections/TechSection/components/TechTagList.jsx new file mode 100644 index 00000000..6d325f9b --- /dev/null +++ b/src/Sections/TechSection/components/TechTagList.jsx @@ -0,0 +1,20 @@ +import styled from "styled-components"; +import { Tag } from "../../../assets/Tag/TagComponent"; + +const DivFlex = styled.div` + display: flex; + flex-wrap: wrap; + gap: 10px; +`; + +export function TechTagList({ tags }) { + if (!tags) return console.log("something wrong"); + + return ( + + {tags.map((tag) => ( + + ))} + + ); +} diff --git a/src/assets/Button/Button.jsx b/src/assets/Button/Button.jsx new file mode 100644 index 00000000..26cc96b0 --- /dev/null +++ b/src/assets/Button/Button.jsx @@ -0,0 +1,35 @@ +import styled from "styled-components"; +import { buttonData } from "./ButtonData.js"; + +const BlackButtonStyle = styled.a` + display: flex; + align-items: center; + gap: 10px; + background-color: #000; + color: #fff; + font-size: 18px; + font-weight: 500; + max-width: 300px; + padding: 15px 25px; + border-radius: 16px; + cursor: pointer; + text-decoration: none; + transition: all 0.3s ease; + + &:hover { + background-color: #333; + } +`; + +export function BlackButton({ type, href }) { + const data = buttonData[type]; + if (!data) return null; + const Icon = data.icon; + + return ( + + {Icon && } + {data.name} + + ); +} diff --git a/src/assets/Button/ButtonData.js b/src/assets/Button/ButtonData.js new file mode 100644 index 00000000..529cb01a --- /dev/null +++ b/src/assets/Button/ButtonData.js @@ -0,0 +1,9 @@ +import GithubIcon from "./ButtonIcons/GitHub.svg?react"; +import VsCodeIcon from "./ButtonIcons/VSCode.svg?react"; +import LinkedInIcon from "./ButtonIcons/LinkedIn.svg?react"; + +export const buttonData = { + viewcode: { name: "View Code", icon: GithubIcon }, + livedemo: { name: "Live Demo", icon: VsCodeIcon }, + readarticlelinkedin: { name: "Read article in LinkedIn", icon: LinkedInIcon }, +}; diff --git a/src/assets/Button/ButtonIcons/GitHub.svg b/src/assets/Button/ButtonIcons/GitHub.svg new file mode 100644 index 00000000..b6f763b8 --- /dev/null +++ b/src/assets/Button/ButtonIcons/GitHub.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/assets/Button/ButtonIcons/LinkedIn.svg b/src/assets/Button/ButtonIcons/LinkedIn.svg new file mode 100644 index 00000000..7f0410cc --- /dev/null +++ b/src/assets/Button/ButtonIcons/LinkedIn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Button/ButtonIcons/VSCode.svg b/src/assets/Button/ButtonIcons/VSCode.svg new file mode 100644 index 00000000..b9a5693a --- /dev/null +++ b/src/assets/Button/ButtonIcons/VSCode.svg @@ -0,0 +1 @@ + diff --git a/src/assets/Icon/IconData.js b/src/assets/Icon/IconData.js new file mode 100644 index 00000000..8837955e --- /dev/null +++ b/src/assets/Icon/IconData.js @@ -0,0 +1,27 @@ +import GithubIcon from "./Icons/GitHub.svg?react"; +import BehanceIcon from "./Icons/Behance.svg?react"; +import StackOverflowIcon from "./Icons/StackOverflow.svg?react"; +import LinkedInIcon from "./Icons/LinkedIn.svg?react"; + +export const FooterIcons = [ + { + link: "https://github.com/KausarShangareeva", + icon: GithubIcon, + label: "GitHub profile", + }, + { + link: "https://www.behance.net/kausyarshangar", + icon: BehanceIcon, + label: "Behance profile", + }, + { + link: "https://stackoverflow.com/users/31966777/kausar-shangareev", + icon: StackOverflowIcon, + label: "StackOverflow profile", + }, + { + link: "https://www.linkedin.com/in/kausar-shangareeva-312a8b27a/", + icon: LinkedInIcon, + label: "LinkedIn profile", + }, +]; diff --git a/src/assets/Icon/Icons/Behance.svg b/src/assets/Icon/Icons/Behance.svg new file mode 100644 index 00000000..ce89aaeb --- /dev/null +++ b/src/assets/Icon/Icons/Behance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Icon/Icons/Facebook.svg b/src/assets/Icon/Icons/Facebook.svg new file mode 100644 index 00000000..3ee62eb0 --- /dev/null +++ b/src/assets/Icon/Icons/Facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Icon/Icons/GitHub.svg b/src/assets/Icon/Icons/GitHub.svg new file mode 100644 index 00000000..b6f763b8 --- /dev/null +++ b/src/assets/Icon/Icons/GitHub.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/assets/Icon/Icons/LinkedIn.svg b/src/assets/Icon/Icons/LinkedIn.svg new file mode 100644 index 00000000..7f0410cc --- /dev/null +++ b/src/assets/Icon/Icons/LinkedIn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Icon/Icons/Slack.svg b/src/assets/Icon/Icons/Slack.svg new file mode 100644 index 00000000..7339449e --- /dev/null +++ b/src/assets/Icon/Icons/Slack.svg @@ -0,0 +1 @@ + diff --git a/src/assets/Icon/Icons/StackOverflow.svg b/src/assets/Icon/Icons/StackOverflow.svg new file mode 100644 index 00000000..eabf7bcd --- /dev/null +++ b/src/assets/Icon/Icons/StackOverflow.svg @@ -0,0 +1 @@ + diff --git a/src/assets/Tag/TagComponent.jsx b/src/assets/Tag/TagComponent.jsx new file mode 100644 index 00000000..dc74c5f9 --- /dev/null +++ b/src/assets/Tag/TagComponent.jsx @@ -0,0 +1,39 @@ +import styled from "styled-components"; +import { tagsData } from "./TagData.js"; + +const TagStyle = styled.span` + display: inline-flex; + align-items: center; + gap: 5px; + padding: 6px 13px; + font-weight: bold; + font-size: 18px; + background: white; + border-radius: 10px; + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(10.8px); + -webkit-backdrop-filter: blur(10.8px); + border: 1px solid white; + color: #000; + cursor: pointer; + transition: all 0.5s; + border: 2px solid transparent; + + &:hover { + border-color: ${(props) => props.$color || "#000"}; + } +`; + +export function Tag({ tagName }) { + const tag = tagsData[tagName]; + const displayName = tag ? tag.name : tagName; + const color = tag ? tag.color : "#eee"; + const Icon = tag?.icon; + + return ( + + {Icon && } + {displayName} + + ); +} diff --git a/src/assets/Tag/TagData.js b/src/assets/Tag/TagData.js new file mode 100644 index 00000000..b3f34535 --- /dev/null +++ b/src/assets/Tag/TagData.js @@ -0,0 +1,65 @@ +import HtmlIcon from "./TagIcons/HTML5.svg?react"; +import CssIcon from "./TagIcons/CSS3.svg?react"; +import JsIcon from "./TagIcons/JavaScript.svg?react"; +import FigmaIcon from "./TagIcons/Figma.svg?react"; +import GitIcon from "./TagIcons/Git.svg?react"; +import GithubIcon from "./TagIcons/GitHub.svg?react"; +import NextjsIcon from "./TagIcons/Next.js.svg?react"; +import NodejsIcon from "./TagIcons/Node.js.svg?react"; +import ReactIcon from "./TagIcons/React.svg?react"; +import SassIcon from "./TagIcons/Sass.svg?react"; +import SlackIcon from "./TagIcons/Slack.svg?react"; +import TailwindIcon from "./TagIcons/Tailwind.svg?react"; +import TypescriptIcon from "./TagIcons/TypeScript.svg?react"; +import VsCodeIcon from "./TagIcons/VSCode.svg?react"; +import ViteIcon from "./TagIcons/Vite.js.svg?react"; +import VueIcon from "./TagIcons/Vue.js.svg?react"; +import AdobePhotoshop from "./TagIcons/AdobePhotoshop.svg?react"; +import AdobeIllustrator from "./TagIcons/AdobeIllustrator.svg?react"; +import AdobePremierePro from "./TagIcons/AdobePremierePro.svg?react"; +import AdobeAE from "./TagIcons/AdobeAE.svg?react"; +import AdobeXD from "./TagIcons/AdobeXD.svg?react"; + +export const tagsData = { + html: { name: "HTML5", color: "#ff5628ff", icon: HtmlIcon }, + css: { name: "CSS", color: "#0095ffff", icon: CssIcon }, + javascript: { name: "JavaScript", color: "#ffe600ff", icon: JsIcon }, + figma: { name: "Figma", color: "#dd35ffff", icon: FigmaIcon }, + git: { name: "Git", color: "#ff2600ff", icon: GitIcon }, + github: { name: "GitHub", color: "#ffffffff", icon: GithubIcon }, + nextjs: { name: "Next.js", color: "#ffffffff", icon: NextjsIcon }, + nodejs: { name: "Node.js", color: "#2cd42cff", icon: NodejsIcon }, + reactjs: { name: "React.js", color: "#61DAFB", icon: ReactIcon }, + sass: { name: "Sass", color: "#CC6699", icon: SassIcon }, + slack: { name: "Slack", color: "#d819dbff", icon: SlackIcon }, + tailwind: { name: "Tailwind", color: "#38B2AC", icon: TailwindIcon }, + typescript: { name: "TypeScript", color: "#3178C6", icon: TypescriptIcon }, + vscode: { name: "VSCode", color: "#007ACC", icon: VsCodeIcon }, + vite: { name: "Vite", color: "#646CFF", icon: ViteIcon }, + vue: { name: "Vue", color: "#42B883", icon: VueIcon }, + adobephotoshop: { + name: "Adobe Photoshop", + color: "#58a0ffff", + icon: AdobePhotoshop, + }, + adobeillustrator: { + name: "Adobe Illustrator", + color: "#ffaa00ff", + icon: AdobeIllustrator, + }, + adobepremierepro: { + name: "Adobe Premiere Pro", + color: "#a200ffff", + icon: AdobePremierePro, + }, + adobeae: { + name: "Adobe After Effects", + color: "#9999FF", + icon: AdobeAE, + }, + adobexd: { + name: "Adobe XD", + color: "#FF61F6", + icon: AdobeXD, + }, +}; diff --git a/src/assets/Tag/TagIcons/AdobeAE.svg b/src/assets/Tag/TagIcons/AdobeAE.svg new file mode 100644 index 00000000..7380ebac --- /dev/null +++ b/src/assets/Tag/TagIcons/AdobeAE.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Tag/TagIcons/AdobeIllustrator.svg b/src/assets/Tag/TagIcons/AdobeIllustrator.svg new file mode 100644 index 00000000..f9625576 --- /dev/null +++ b/src/assets/Tag/TagIcons/AdobeIllustrator.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Tag/TagIcons/AdobePhotoshop.svg b/src/assets/Tag/TagIcons/AdobePhotoshop.svg new file mode 100644 index 00000000..8c55211c --- /dev/null +++ b/src/assets/Tag/TagIcons/AdobePhotoshop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Tag/TagIcons/AdobePremierePro.svg b/src/assets/Tag/TagIcons/AdobePremierePro.svg new file mode 100644 index 00000000..65e8af83 --- /dev/null +++ b/src/assets/Tag/TagIcons/AdobePremierePro.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Tag/TagIcons/AdobeXD.svg b/src/assets/Tag/TagIcons/AdobeXD.svg new file mode 100644 index 00000000..060ef59c --- /dev/null +++ b/src/assets/Tag/TagIcons/AdobeXD.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Tag/TagIcons/CSS3.svg b/src/assets/Tag/TagIcons/CSS3.svg new file mode 100644 index 00000000..ff5b6ce6 --- /dev/null +++ b/src/assets/Tag/TagIcons/CSS3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Tag/TagIcons/Figma.svg b/src/assets/Tag/TagIcons/Figma.svg new file mode 100644 index 00000000..b3edc6d4 --- /dev/null +++ b/src/assets/Tag/TagIcons/Figma.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Tag/TagIcons/Git.svg b/src/assets/Tag/TagIcons/Git.svg new file mode 100644 index 00000000..93f25f92 --- /dev/null +++ b/src/assets/Tag/TagIcons/Git.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Tag/TagIcons/GitHub.svg b/src/assets/Tag/TagIcons/GitHub.svg new file mode 100644 index 00000000..4eca0628 --- /dev/null +++ b/src/assets/Tag/TagIcons/GitHub.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Tag/TagIcons/HTML5.svg b/src/assets/Tag/TagIcons/HTML5.svg new file mode 100644 index 00000000..c2dda3a4 --- /dev/null +++ b/src/assets/Tag/TagIcons/HTML5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Tag/TagIcons/JavaScript.svg b/src/assets/Tag/TagIcons/JavaScript.svg new file mode 100644 index 00000000..7975261b --- /dev/null +++ b/src/assets/Tag/TagIcons/JavaScript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Tag/TagIcons/Next.js.svg b/src/assets/Tag/TagIcons/Next.js.svg new file mode 100644 index 00000000..e73e3cd1 --- /dev/null +++ b/src/assets/Tag/TagIcons/Next.js.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Tag/TagIcons/Node.js.svg b/src/assets/Tag/TagIcons/Node.js.svg new file mode 100644 index 00000000..d1db89d8 --- /dev/null +++ b/src/assets/Tag/TagIcons/Node.js.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Tag/TagIcons/React.svg b/src/assets/Tag/TagIcons/React.svg new file mode 100644 index 00000000..9af92b9d --- /dev/null +++ b/src/assets/Tag/TagIcons/React.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Tag/TagIcons/Sass.svg b/src/assets/Tag/TagIcons/Sass.svg new file mode 100644 index 00000000..4ca44ff6 --- /dev/null +++ b/src/assets/Tag/TagIcons/Sass.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Tag/TagIcons/Slack.svg b/src/assets/Tag/TagIcons/Slack.svg new file mode 100644 index 00000000..7339449e --- /dev/null +++ b/src/assets/Tag/TagIcons/Slack.svg @@ -0,0 +1 @@ + diff --git a/src/assets/Tag/TagIcons/Tailwind.svg b/src/assets/Tag/TagIcons/Tailwind.svg new file mode 100644 index 00000000..83a13ff4 --- /dev/null +++ b/src/assets/Tag/TagIcons/Tailwind.svg @@ -0,0 +1 @@ + diff --git a/src/assets/Tag/TagIcons/TypeScript.svg b/src/assets/Tag/TagIcons/TypeScript.svg new file mode 100644 index 00000000..e1db5f19 --- /dev/null +++ b/src/assets/Tag/TagIcons/TypeScript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Tag/TagIcons/VSCode.svg b/src/assets/Tag/TagIcons/VSCode.svg new file mode 100644 index 00000000..b9a5693a --- /dev/null +++ b/src/assets/Tag/TagIcons/VSCode.svg @@ -0,0 +1 @@ + diff --git a/src/assets/Tag/TagIcons/Vite.js.svg b/src/assets/Tag/TagIcons/Vite.js.svg new file mode 100644 index 00000000..45ac612f --- /dev/null +++ b/src/assets/Tag/TagIcons/Vite.js.svg @@ -0,0 +1 @@ + diff --git a/src/assets/Tag/TagIcons/Vue.js.svg b/src/assets/Tag/TagIcons/Vue.js.svg new file mode 100644 index 00000000..27afad0c --- /dev/null +++ b/src/assets/Tag/TagIcons/Vue.js.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/Typography.jsx b/src/assets/Typography.jsx new file mode 100644 index 00000000..1a173120 --- /dev/null +++ b/src/assets/Typography.jsx @@ -0,0 +1,128 @@ +import styled from "styled-components"; +import { respond } from "../styles/responsive"; + +////////////////////////////// +// H1 - Main Page Title +// Desktop - 30px +// Tablet - 24px +////////////////////////////// +const H1 = styled.h1` + font-size: 30px; + font-weight: 600; + text-align: center; + margin: 120px 0 20px 0; + + ${respond("tab-port")} { + font-size: 24px; + margin: 100px 0 20px 0; + } + + ${respond("s-phone")} { + margin: 50px 0 20px 0; + } +`; + +export function TitleH1({ children, ...props }) { + return

{children}

; +} + +////////////////////////////// +// H2 - Section Title +// Desktop - 60px +// Tablet - 30px +////////////////////////////// +const TitleStyle = styled.h2` + font-size: 60px; + text-align: center; + color: ${(props) => (props.bgColor === "#000" ? "#fff" : "#000")}; + + ${respond("tab-port")} { + font-size: 30px; + } +`; + +export function SectionTitle({ children, ...props }) { + return {children}; +} + +////////////////////////////// +// H3 - Subsection Title +// Desktop - 30px +// Tablet - 24px +// Mobile - 30px +////////////////////////////// +const H3 = styled.h3` + font-size: 30px; + text-align: ${(props) => (props.align === "Left" ? "left" : "center")}; + + ${respond("tab-port")} { + font-size: 24px; + } + + ${respond("s-phone")} { + font-size: 20px; + } +`; + +export function TitleH3({ children, ...props }) { + return

{children}

; +} + +////////////////////////////// +// H4 - Small Highlight Title +// Desktop - 25px +// Tablet - 20px +////////////////////////////// +const H5 = styled.h5` + font-size: 25px; + font-weight: 500; + + ${respond("tab-port")} { + font-size: 20px; + } +`; + +export function TitleH4({ children, ...props }) { + return

{children}

; +} + +////////////////////////////// +// H5 - Highlight Small Box +// Desktop - 20px +// Tablet - 18px +////////////////////////////// +const H4 = styled.h4` + color: white; + font-size: 20px; + font-weight: 500; + margin-bottom: 20px; + padding: 8px 10px; + border: 1.5px solid white; + border-radius: 10px; + + ${respond("tab-port")} { + font-size: 18px; + } +`; + +export function TitleH5({ children, ...props }) { + return
{children}
; +} + +////////////////////////////// +// P - Paragraph +// Desktop - 18px +// Tablet - 16px +////////////////////////////// +const P = styled.p` + font-size: 18px; + line-height: 1.5; + + ${respond("tab-port")} { + font-size: 16px; + } +`; + +export function Paragraph({ children, ...props }) { + return

{children}

; +} diff --git a/src/data/aboutMe.json b/src/data/aboutMe.json new file mode 100644 index 00000000..7b09005e --- /dev/null +++ b/src/data/aboutMe.json @@ -0,0 +1,29 @@ +{ + "name": "Kausar", + "fullname": "Kausar Shangareeva", + "proffession": "JavaScript Frontent Developer with a Background in Freelance Web Design", + "desc": "I create digital experiences that are both visually appealing and highly functional. I’ve spent six years working as a freelance web designer across different countries, building projects from scratch and developing my skills independently. To bring my designs to life in code, I expanded into development and am now training as a full-stack developer at Technigo, focusing on JavaScript, React, and Node.js. I also continue learning through Udemy, with certificates available on my LinkedIn. I code with a strong focus on user-friendly interfaces and thoughtful UX, enjoy collaborative work, and look for opportunities to combine my design background with real-world development projects.", + "number": "+46 72 022 46 62", + "mail": "kausyarsh@mail.com", + "img": [ + { + "id": "Left", + "src": "/Image/ImgHero/HeroImage1.png", + "alt": "It's Kausar's image left" + }, + { + "id": "Middle", + "src": "/Image/ImgHero/HeroImage2.png", + "alt": "It's Kausar's image in the middle" + }, + { + "id": "Right", + "src": "/Image/ImgHero/HeroImage3.png", + "alt": "It's Kausar's image right" + } + ], + "imgFooter": { + "src": "/Image/ImgHero/FooterLogo.png", + "alt": "It's Kausar's logo" + } +} diff --git a/src/data/articlesData.json b/src/data/articlesData.json new file mode 100644 index 00000000..064e21bf --- /dev/null +++ b/src/data/articlesData.json @@ -0,0 +1,18 @@ +{ + "articles": [ + { + "id": 1, + "title": "My First Steps in IT 😎", + "imgtitle": "Image of Weather App project", + "imgSrc": "/Image/ImgBlog/BlogImage-1.jpg", + "desc": " In August 2025, I took a big step towards my dream and started the JavaScript Bootcamp at Technigo. It was the beginning of an exciting adventure into the world of web and app development. Every line of code I wrote, every project I built, brought me closer to becoming a professional programmer. Learning new technologies, solving challenges, and creating functional websites and applications has been incredibly rewarding. Today, I can proudly say that my dream of turning my passion into a career has finally come true.", + "date": "August 30th 2025", + "button": [ + { + "name": "readarticlelinkedin", + "link": "https://www.linkedin.com/posts/kausar-shangareeva-312a8b27a_im-happy-to-share-that-ive-started-my-program-activity-7395015054946992128-S5-E?utm_source=share&utm_medium=member_desktop&rcm=ACoAAEQlq_4B_nwHHuRYPVQBypfkzrrkfUpVYas" + } + ] + } + ] +} diff --git a/src/data/projects.json b/src/data/projects.json deleted file mode 100644 index 7c426028..00000000 --- a/src/data/projects.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "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", - "tags": [ - "HTML5", - "CSS3", - "JavaScript" - ], - "netlify": "link", - "github": "link" - }, - { - "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", - "tags": [ - "HTML5", - "CSS3", - "JavaScript", - "TypeScript", - "APIs" - ], - "netlify": "link", - "github": "link" - } - ] -} \ No newline at end of file diff --git a/src/data/projectsData.json b/src/data/projectsData.json new file mode 100644 index 00000000..25e288dc --- /dev/null +++ b/src/data/projectsData.json @@ -0,0 +1,61 @@ +{ + "projects": [ + { + "id": 1, + "title1": "🏒 Real Estate", + "title2": "", + "imgtitle": "Image of Weather App project", + "imgSrc": "/Image/ImgProjects/Real-Estate.png", + "description": "A modern real estate web app that lets users explore and filter properties across Dubai. Built with HTML, CSS, and JavaScript, it features a responsive design, interactive UI elements, and clean property cards to help users easily navigate the market. Welcome to Dian Real Estate β€” a simple and stylish way to discover Dubai properties.", + "tags": ["html", "sass", "javascript"], + "button": [ + { + "name": "livedemo", + "link": "https://dian-eng.netlify.app/" + }, + { + "name": "viewcode", + "link": "https://github.com/KausarShangareeva/js-project-business-site" + } + ] + }, + { + "id": 2, + "title1": "🐢 Pet foster", + "title2": "(Team Accessibility project)", + "imgtitle": "Image of Pet-foster project", + "imgSrc": "/Image/ImgProjects/Pet-foster-img.png", + "description": "An accessibility-focused website for exploring adoptable dogs. Designed with UX and Web Accessibility in mind, the site includes keyboard navigation, ARIA roles, accessible forms, and proper color contrast to ensure a friendly experience for all users. Built with HTML, CSS, JavaScript, and responsive layout.", + "tags": ["figma", "git", "javascript", "typescript"], + "button": [ + { + "name": "livedemo", + "link": "https://pet-foster.netlify.app/cards.html" + }, + { + "name": "viewcode", + "link": "https://github.com/KausarShangareeva/js-project-accessibility" + } + ] + }, + { + "id": 3, + "title1": "🍰 Favorite Dessert", + "title2": "(API Project)", + "imgtitle": "Image of Favorite-Dessert project", + "imgSrc": "/Image/ImgProjects/Favorite-Dessert-img.png", + "description": "A dessert recipe application where users can search, filter, and sort recipes by cuisine (Italy, Asia, Middle East) or popularity. Users can like their favorite desserts and view them later in the Favorites section. Built with HTML, CSS, JavaScript, and integrated with a dessert recipe API. Fully responsive and user-friendly.", + "tags": ["html", "sass", "javascript"], + "button": [ + { + "name": "livedemo", + "link": "https://favorate-dessert.netlify.app/" + }, + { + "name": "viewcode", + "link": "https://github.com/KausarShangareeva/js-project-recipe-library" + } + ] + } + ] +} diff --git a/src/data/skillsData.json b/src/data/skillsData.json new file mode 100644 index 00000000..386571f5 --- /dev/null +++ b/src/data/skillsData.json @@ -0,0 +1,26 @@ +{ + "skills": { + "code": { + "tagitem": "Code", + "taglist": ["html", "css", "javascript", "reactjs", "github"] + }, + "toolbox": { + "tagitem": "Toolbox", + "taglist": ["adobephotoshop", "adobeillustrator", "figma", "slack"] + }, + "upcoming": { + "tagitem": "Upcoming", + "taglist": ["nodejs"] + }, + "more": { + "tagitem": "More", + "taglist": [ + "branding", + "strategy", + "process design", + "concept development", + "agile methodology" + ] + } + } +} diff --git a/src/data/techData.json b/src/data/techData.json new file mode 100644 index 00000000..10579bd0 --- /dev/null +++ b/src/data/techData.json @@ -0,0 +1,31 @@ +{ + "tech": [ + { + "tagitem": "Frontend", + "taglist": [ + "html", + "css", + "javascript", + "reactjs", + "Flexbox", + "ES6", + "React Hook" + ] + }, + { + "tagitem": "Backend", + "taglist": ["nodejs", "MongoDB", "APIs"] + }, + { + "tagitem": "UI / UX", + "taglist": [ + "figma", + "Web Accessibility", + "User-Friendly Interfaces", + "Mobile Programming", + "Pair Programming", + "github" + ] + } + ] +} diff --git a/src/desktop.ini b/src/desktop.ini new file mode 100644 index 00000000..95fc4db9 --- /dev/null +++ b/src/desktop.ini @@ -0,0 +1,2 @@ +[LocalizedFileNames] +portfolio-screen.png=@portfolio-screen,0 diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 61010be6..00000000 --- a/src/index.css +++ /dev/null @@ -1,4 +0,0 @@ -body { - background: pink; - color: hotpink; -} \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index ed109d76..f21ade15 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,12 +1,10 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import App from "./App"; +// import "./index.css"; -import { App } from './App.jsx' - -import './index.css' - -createRoot(document.getElementById('root')).render( +createRoot(document.getElementById("root")).render( - , -) + +); diff --git a/src/styles/GlobalStyles.js b/src/styles/GlobalStyles.js new file mode 100644 index 00000000..3f81bb95 --- /dev/null +++ b/src/styles/GlobalStyles.js @@ -0,0 +1,27 @@ +import { createGlobalStyle } from "styled-components"; + +export const GlobalStyles = createGlobalStyle` + +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); + + + *, *::after, *::before { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + html, body { + font-family: "Montserrat", sans-serif; + background-color: FFFFFF; + color: #323232ff; + font-size: 16px; + + } + + a { + text-decoration: none; + color: inherit; + } + +`; diff --git a/src/styles/responsive.js b/src/styles/responsive.js new file mode 100644 index 00000000..46009c7e --- /dev/null +++ b/src/styles/responsive.js @@ -0,0 +1,19 @@ +export const breakpoints = { + "xs-phone": "20em", // 320px + "f-phone": "28.125em", // 450px + "m-phone": "32.5em", // 520px + "s-phone": "37.5em", // 600px + "tab-port": "56.25em", // 900px + "tab-land": "75em", // 1200px + "big-desktop": "112.5em", // 1800px +}; + +export const respond = (breakpoint, type = "max") => { + const value = breakpoints[breakpoint]; + if (!value) return ""; + + if (type === "max") return `@media only screen and (max-width: ${value})`; + if (type === "min") return `@media only screen and (min-width: ${value})`; + + return ""; +}; diff --git a/vite.config.js b/vite.config.js index 8b0f57b9..e49d1d08 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,7 +1,7 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; +import svgr from "vite-plugin-svgr"; -// https://vite.dev/config/ export default defineConfig({ - plugins: [react()], -}) + plugins: [react(), svgr()], +});