diff --git a/README.md b/README.md index 200f4282..084ee608 100644 --- a/README.md +++ b/README.md @@ -1 +1,19 @@ # Portfolio +Personal Portfolio – React & Styled Components + +This is my personal portfolio website built with React, Styled Components. +It showcases my projects, skills, and background as a frontend developer. + +Hero Section +-Displays my name, photo, intro text, and personal tagline. + +Projects Section +-Renders each project from a data file +-Shows an image, description, tags, and links to GitHub + Live demo +-Mobile-friendly layout that flips image + text for alternating projects + +Skills & Tech Section +-Lists my technical skills and tools, grouped into categories for clarity. + +Footer +-Includes contact details and social icons. diff --git a/index.html b/index.html index 6676fb2d..aba0478c 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,15 @@ + + + + + Portfolio
- + \ No newline at end of file diff --git a/package.json b/package.json index 48911600..99177289 100644 --- a/package.json +++ b/package.json @@ -10,18 +10,23 @@ "preview": "vite preview" }, "dependencies": { + "lucide-react": "^0.554.0", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "styled-components": "^6.1.19" }, "devDependencies": { "@eslint/js": "^9.21.0", "@types/react": "^19.0.10", "@types/react-dom": "^19.0.4", "@vitejs/plugin-react": "^4.3.4", + "autoprefixer": "^10.4.22", "eslint": "^9.21.0", "eslint-plugin-react-hooks": "^5.1.0", "eslint-plugin-react-refresh": "^0.4.19", "globals": "^15.15.0", + "postcss": "^8.5.6", + "tailwindcss": "^4.1.17", "vite": "^6.2.0" } } diff --git a/public/Alice.jpg b/public/Alice.jpg new file mode 100644 index 00000000..32aa6877 Binary files /dev/null and b/public/Alice.jpg differ diff --git a/public/my-words.jpg b/public/my-words.jpg new file mode 100644 index 00000000..37b08ef9 Binary files /dev/null and b/public/my-words.jpg differ diff --git a/public/recipe-app.png b/public/recipe-app.png new file mode 100644 index 00000000..de617191 Binary files /dev/null and b/public/recipe-app.png differ diff --git a/public/weather-app.png b/public/weather-app.png new file mode 100644 index 00000000..0aa99bf9 Binary files /dev/null and b/public/weather-app.png differ diff --git a/src/App.jsx b/src/App.jsx index a161d8d3..cbd40213 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,8 +1,31 @@ -export const App = () => { +import React from 'react'; +import { GlobalStyle } from './GlobalStyles'; + +// Import Components +import HeroSection from './components/HeroSection'; +import TechSection from './components/TechSection'; +import ProjectsSection from './components/ProjectsSection'; +import SkillsSection from './components/SkillsSection'; +import Footer from './components/Footer'; +import ArticlesSection from './components/ArticlesSection'; + +// Import Data +import { userData, techSkills, projects, skillsCategories, articles } from './data/portfolioData'; + +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.

+ + + + + + + +