diff --git a/README.md b/README.md index 200f4282..e17ad662 100644 --- a/README.md +++ b/README.md @@ -1 +1,4 @@ # Portfolio + +Link to Project: +https://malinlundgren.netlify.app/ \ No newline at end of file diff --git a/index.html b/index.html index 6676fb2d..9c264ff9 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,55 @@ - - - - - Portfolio - - -
- - - + + + + + + + + + + + + + Portfolio + + + +
+ + + + \ No newline at end of file diff --git a/package.json b/package.json index 48911600..85ec1970 100644 --- a/package.json +++ b/package.json @@ -11,17 +11,19 @@ }, "dependencies": { "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "styled-components": "^6.1.17" }, "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.4.1", + "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", "globals": "^15.15.0", "vite": "^6.2.0" } -} +} \ No newline at end of file diff --git a/public/assets/arrowdown-icon.svg b/public/assets/arrowdown-icon.svg new file mode 100644 index 00000000..731fbe3f --- /dev/null +++ b/public/assets/arrowdown-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/blue.webp b/public/assets/blue.webp new file mode 100644 index 00000000..85d5ac1f Binary files /dev/null and b/public/assets/blue.webp differ diff --git a/public/assets/bus.webp b/public/assets/bus.webp new file mode 100644 index 00000000..bddadb46 Binary files /dev/null and b/public/assets/bus.webp differ diff --git a/public/assets/business1.webp b/public/assets/business1.webp new file mode 100644 index 00000000..64c2f7dc Binary files /dev/null and b/public/assets/business1.webp differ diff --git a/public/assets/contact-pic.webp b/public/assets/contact-pic.webp new file mode 100644 index 00000000..a6bff12f Binary files /dev/null and b/public/assets/contact-pic.webp differ diff --git a/public/assets/food.webp b/public/assets/food.webp new file mode 100644 index 00000000..30cbbb44 Binary files /dev/null and b/public/assets/food.webp differ diff --git a/public/assets/girl.png b/public/assets/girl.png new file mode 100644 index 00000000..5ae3f6ef Binary files /dev/null and b/public/assets/girl.png differ diff --git a/public/assets/github.svg b/public/assets/github.svg new file mode 100644 index 00000000..ae7a7954 --- /dev/null +++ b/public/assets/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/globe-icon.svg b/public/assets/globe-icon.svg new file mode 100644 index 00000000..4ce51fa6 --- /dev/null +++ b/public/assets/globe-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/instagram-icon.svg b/public/assets/instagram-icon.svg new file mode 100644 index 00000000..ef27bfcd --- /dev/null +++ b/public/assets/instagram-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/it-takes-two.jpg b/public/assets/it-takes-two.jpg new file mode 100644 index 00000000..3612a63d Binary files /dev/null and b/public/assets/it-takes-two.jpg differ diff --git a/public/assets/it-takes-two.webp b/public/assets/it-takes-two.webp new file mode 100644 index 00000000..f580e30c Binary files /dev/null and b/public/assets/it-takes-two.webp differ diff --git a/public/assets/linkedin-icon.svg b/public/assets/linkedin-icon.svg new file mode 100644 index 00000000..cd79edde --- /dev/null +++ b/public/assets/linkedin-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/message.webp b/public/assets/message.webp new file mode 100644 index 00000000..2cd21367 Binary files /dev/null and b/public/assets/message.webp differ diff --git a/public/assets/movie.webp b/public/assets/movie.webp new file mode 100644 index 00000000..c19aa619 Binary files /dev/null and b/public/assets/movie.webp differ diff --git a/public/assets/note-background.webp b/public/assets/note-background.webp new file mode 100644 index 00000000..9332eed9 Binary files /dev/null and b/public/assets/note-background.webp differ diff --git a/public/assets/og-tag.png b/public/assets/og-tag.png new file mode 100644 index 00000000..f355404c Binary files /dev/null and b/public/assets/og-tag.png differ diff --git a/public/assets/profile-pic.png b/public/assets/profile-pic.png new file mode 100644 index 00000000..9e0f140b Binary files /dev/null and b/public/assets/profile-pic.png differ diff --git a/public/assets/purple.webp b/public/assets/purple.webp new file mode 100644 index 00000000..552f00e5 Binary files /dev/null and b/public/assets/purple.webp differ diff --git a/public/assets/rain.webp b/public/assets/rain.webp new file mode 100644 index 00000000..f4c46e94 Binary files /dev/null and b/public/assets/rain.webp differ diff --git a/public/assets/runthornet.webp b/public/assets/runthornet.webp new file mode 100644 index 00000000..25d233d2 Binary files /dev/null and b/public/assets/runthornet.webp differ diff --git a/public/assets/towerfall.webp b/public/assets/towerfall.webp new file mode 100644 index 00000000..6d1b66e3 Binary files /dev/null and b/public/assets/towerfall.webp differ diff --git a/public/assets/towerfall1.webp b/public/assets/towerfall1.webp new file mode 100644 index 00000000..c8f43072 Binary files /dev/null and b/public/assets/towerfall1.webp differ diff --git a/public/assets/yellow.webp b/public/assets/yellow.webp new file mode 100644 index 00000000..cb12e24d Binary files /dev/null and b/public/assets/yellow.webp differ diff --git a/src/App.jsx b/src/App.jsx index a161d8d3..b4cffdf9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,8 +1,25 @@ +import GlobalStyle from "./GlobalStyle" +import { About } from "./sections/About" +import TechSection from "./sections/TechSection" +import ProjectSection from "./sections/ProjectsSection" +import SkillsSection from "./sections/SkillsSection" +import Blog from "./sections/BlogSection" +import ContactSection from "./sections/ContactSection" + + + export const 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/GlobalStyle.jsx b/src/GlobalStyle.jsx new file mode 100644 index 00000000..1cb8a964 --- /dev/null +++ b/src/GlobalStyle.jsx @@ -0,0 +1,12 @@ +import { createGlobalStyle } from "styled-components" + +const GlobalStyle = createGlobalStyle` + * { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: "Poppins", sans-serif; + } +` + +export default GlobalStyle \ No newline at end of file diff --git a/src/components/BlogCard.jsx b/src/components/BlogCard.jsx new file mode 100644 index 00000000..01665e56 --- /dev/null +++ b/src/components/BlogCard.jsx @@ -0,0 +1,49 @@ +import { Button } from "./Button" +import styled from "styled-components" +import { CardTextContent } from "./CardTextContent" +import { BlogImage } from "./BlogImage" +import { media } from "../media" + + +const BlogCardStyle = styled.div` + display: flex; + flex-direction: column; + gap: 32px; + flex: 1 0 0; + + + @media ${media.tablet} { + flex-direction: row; + } + @media ${media.desktop} { + gap: 125px; + } +` +const BlogCardTextStyle = styled.div` + display: flex; + flex-direction: column; + gap: 32px; + +` +const BlogCard = ({ image, alt, tags, name, description, link }) => { + return ( + + + + +