-
+ const headerClasses = ["sticky", "top-0", "z-40", "backdrop-blur-md", "h-16"];
+ const logoClasses = ["hover:drop-shadow-light"];
+ const overlayMenu = [
+ "bg-black/90",
+ "z-50",
+ "fixed",
+ "left-0",
+ "right-0",
+ "top-16",
+ "h-screen",
+ "backdrop-blur-sm",
+ "p-2",
+ ];
+ if (isOpen) {
+ headerClasses.push("bg-black/90");
+ logoClasses.push("drop-shadow-yellow");
+ } else {
+ headerClasses.push("bg-bgColor/90");
+ logoClasses.push("drop-shadow-doublelight");
+ }
- {isOpen && hamburgerMenu}
-
-
+
+ )}
+
+
+ - {menuUI}
+
+
+
+
{itemTag}
);
});
- return {tagList}
;
+ return (
+
+ {tagList}
+
+ );
}
export default Tags;
diff --git a/src/index.css b/src/index.css
index 50d57c9..80ed16c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,5 +4,8 @@
@tailwind components;
@tailwind utilities;
body {
- background-color: #302f39;
+ background-color: #031417;
+}
+::selection {
+ background: #7d9c00b1;
}
diff --git a/src/pages/About.jsx b/src/pages/About.jsx
new file mode 100644
index 0000000..06124e1
--- /dev/null
+++ b/src/pages/About.jsx
@@ -0,0 +1,41 @@
+import { useRecoilValue } from "recoil";
+import Tags from "../components/Tags";
+import { skillsAtom } from "../store";
+
+function About() {
+ const skills = useRecoilValue(skillsAtom);
+ console.log(skills);
+ return (
+
+
+
+ );
+}
+
+export default About;
diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx
index ba51322..971d1b8 100644
--- a/src/pages/Contact.jsx
+++ b/src/pages/Contact.jsx
@@ -1,7 +1,8 @@
function Contact() {
return (
- + About. +
+
+
+
+
+ + As a prospective Frontend Developer, I seek a challenging career + opportunity in the IT industry, where I can collaborate with a + dynamic team, continually learn, and foster innovation. My + dedication lies in transforming design concepts into user-friendly + experiences and achieving organizational goals through creativity + and teamwork. I aspire to engage in work that allows the utilization + of technical and creative skills to contribute effectively to the + growth of an organization. If you think you've got an opening that I + might like, let's connect 🔗 +
+
+
+ Languages:
+Frameworks:
{" "} +Tools I use:
{" "} +
-
-
Welcome to Contact
+
+
+
);
}
diff --git a/src/pages/Experience.jsx b/src/pages/Experience.jsx
index 777eade..3318e39 100644
--- a/src/pages/Experience.jsx
+++ b/src/pages/Experience.jsx
@@ -9,7 +9,7 @@ function Experiance() {
const experianceListUI = experianceList.map((item, key) => {
const position = key % 2;
- const imgClasses = ["flex-1", "hidden", "md:block"];
+ const imgClasses = ["basis-1/3", "hidden", "md:block"];
if (position === 1) {
imgClasses.push("md:order-last");
@@ -20,9 +20,11 @@ function Experiance() {
Welcome to C#ontact
+
-
-
{item.title}
++ {item.title} +
+
{item.info}
-
Welcome to Experiance
+
+
+
);
diff --git a/src/pages/ExperienceDetail.jsx b/src/pages/ExperienceDetail.jsx
index d980fe6..f06c9f2 100644
--- a/src/pages/ExperienceDetail.jsx
+++ b/src/pages/ExperienceDetail.jsx
@@ -1,12 +1,14 @@
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
import { useRecoilValue } from "recoil";
import { projectsAtom } from "../store";
import ImageGallery from "react-image-gallery";
import Tags from "../components/Tags";
+import { IoChevronBackOutline as BackButton } from "react-icons/io5";
function ExperianceDetail() {
const { id } = useParams();
const experianceList = useRecoilValue(projectsAtom);
+ const navigate = useNavigate();
//shorter variant of Find function with IF-sats
const myProject = experianceList.find((item) => item.id === id);
@@ -35,27 +37,46 @@ function ExperianceDetail() {
return (
+ Experience. +
{experianceListUI}
-
+
+
);
}
+4;
export default ExperianceDetail;
diff --git a/src/pages/FullPage.jsx b/src/pages/FullPage.jsx
new file mode 100644
index 0000000..8575b9d
--- /dev/null
+++ b/src/pages/FullPage.jsx
@@ -0,0 +1,17 @@
+import About from "./About";
+import Contact from "./Contact";
+import Experiance from "./Experience";
+import Start from "./Start";
+
+function FullPage() {
+ return (
+
-
-
- Project: {myProject.title}
++ Project: {myProject.title} +
{myProject.info}
-
-
+
+
{" "}
+
{" "}
+
+
+ {myProject.info}
+
+
+ {linkUI}
+
+
+
+ );
+}
+
+export default FullPage;
diff --git a/src/pages/Start.jsx b/src/pages/Start.jsx
new file mode 100644
index 0000000..04a4902
--- /dev/null
+++ b/src/pages/Start.jsx
@@ -0,0 +1,26 @@
+function Start() {
+ return (
+
+
+
+
+ );
+}
+
+export default Start;
diff --git a/src/store.js b/src/store.js
index d04b28d..36f232a 100644
--- a/src/store.js
+++ b/src/store.js
@@ -4,68 +4,60 @@ const experianceList = [
{
id: "46bf76ae-8915-4e5d-ae92-4151be80e75a",
title: "Netzero web",
- info: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae cumque laborum, placeat nobis fugit nemo ipsa voluptates error quo possimus ea velit quos voluptatum magnam id eius quam accusamus. Eum blanditiis aperiam minus inventore laboriosam, et vel ipsam perspiciatis a facilis cum, iure alias recusandae dolorem adipisci illum. Quo maxime nisi minus mollitia praesentium cumque, temporibus incidunt nulla culpa eligendi consequatur doloremque repudiandae aspernatur quas necessitatibus tenetur. Similique fuga rerum provident distinctio doloremque qui accusamus, sequi voluptate eveniet voluptatum autem odio placeat quasi temporibus quas nulla laborum sunt tenetur dolorum, incidunt error porro amet modi? Temporibus amet optio mollitia omnis?",
- img: [
- "/img/placeholder.png",
- "/img/placeholder.png",
- "/img/placeholder.png",
- "/img/placeholder.png",
+ info: "Discover the intersection of sustainability and technology in my collaboration with Net0. As the creative force behind the UI/UX design, I meticulously crafted a seamless and visually appealing user experience. Bringing this vision to life, I also spearheaded the frontend development, using React to construct an intuitive and efficient system for Net0. Immerse yourself in the synergy of eco-conscious practices and cutting-edge technology as we navigate towards a greener future, one React component at a time.",
+ img: ["/img/net0_0.png", "/img/net0_1.png", "/img/net0_2.png"],
+ tags: [
+ "React",
+ "Vite",
+ "Figma",
+ "Tailwind",
+ "TypeScript",
+ "Rest API",
+ "Node.js",
+ "Postgres",
+ "Prisma",
+ "Javascript",
],
- tags: ["react", "vite", "wordpress"],
link: "https://www.net0.se",
},
{
id: "55515a25-deb1-451c-bc7d-006d293f54aa",
title: "Lets fly",
- info: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae cumque laborum, placeat nobis fugit nemo ipsa voluptates error quo possimus ea velit quos voluptatum magnam id eius quam accusamus. Eum blanditiis aperiam minus inventore laboriosam, et vel ipsam perspiciatis a facilis cum, iure alias recusandae dolorem adipisci illum. Quo maxime nisi minus mollitia praesentium cumque, temporibus incidunt nulla culpa eligendi consequatur doloremque repudiandae aspernatur quas necessitatibus tenetur. Similique fuga rerum provident distinctio doloremque qui accusamus, sequi voluptate eveniet voluptatum autem odio placeat quasi temporibus quas nulla laborum sunt tenetur dolorum, incidunt error porro amet modi? Temporibus amet optio mollitia omnis?",
- img: [
- "/img/placeholder.png",
- "/img/placeholder.png",
- "/img/placeholder.png",
- "/img/placeholder.png",
- ],
- tags: ["react", "vite", "shopify"],
- link: undefined,
- },
- {
- id: "e93a5d54-3442-4b19-b568-8ae550aa09fe",
- title: "Project 3",
- info: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae cumque laborum, placeat nobis fugit nemo ipsa voluptates error quo possimus ea velit quos voluptatum magnam id eius quam accusamus. Eum blanditiis aperiam minus inventore laboriosam, et vel ipsam perspiciatis a facilis cum, iure alias recusandae dolorem adipisci illum. Quo maxime nisi minus mollitia praesentium cumque, temporibus incidunt nulla culpa eligendi consequatur doloremque repudiandae aspernatur quas necessitatibus tenetur. Similique fuga rerum provident distinctio doloremque qui accusamus, sequi voluptate eveniet voluptatum autem odio placeat quasi temporibus quas nulla laborum sunt tenetur dolorum, incidunt error porro amet modi? Temporibus amet optio mollitia omnis?",
- img: [
- "/img/placeholder.png",
- "/img/placeholder.png",
- "/img/placeholder.png",
- "/img/placeholder.png",
- ],
- tags: ["react", "vite", "wordpress"],
- link: undefined,
- },
- {
- id: "cedeb531-0409-4e1f-b7e9-9668dcaa5e71",
- title: "Project 4",
- info: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae cumque laborum, placeat nobis fugit nemo ipsa voluptates error quo possimus ea velit quos voluptatum magnam id eius quam accusamus. Eum blanditiis aperiam minus inventore laboriosam, et vel ipsam perspiciatis a facilis cum, iure alias recusandae dolorem adipisci illum. Quo maxime nisi minus mollitia praesentium cumque, temporibus incidunt nulla culpa eligendi consequatur doloremque repudiandae aspernatur quas necessitatibus tenetur. Similique fuga rerum provident distinctio doloremque qui accusamus, sequi voluptate eveniet voluptatum autem odio placeat quasi temporibus quas nulla laborum sunt tenetur dolorum, incidunt error porro amet modi? Temporibus amet optio mollitia omnis?",
- img: [
- "/img/placeholder.png",
- "/img/placeholder.png",
- "/img/placeholder.png",
- "/img/placeholder.png",
- ],
- tags: ["react", "vite", "wordpress"],
- link: undefined,
- },
- {
- id: "5e2ea8b8-bb1e-4c9d-a723-42406bf7be72",
- title: "Project 5",
- info: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae cumque laborum, placeat nobis fugit nemo ipsa voluptates error quo possimus ea velit quos voluptatum magnam id eius quam accusamus. Eum blanditiis aperiam minus inventore laboriosam, et vel ipsam perspiciatis a facilis cum, iure alias recusandae dolorem adipisci illum. Quo maxime nisi minus mollitia praesentium cumque, temporibus incidunt nulla culpa eligendi consequatur doloremque repudiandae aspernatur quas necessitatibus tenetur. Similique fuga rerum provident distinctio doloremque qui accusamus, sequi voluptate eveniet voluptatum autem odio placeat quasi temporibus quas nulla laborum sunt tenetur dolorum, incidunt error porro amet modi? Temporibus amet optio mollitia omnis?",
- img: [
- "/img/placeholder.png",
- "/img/placeholder.png",
- "/img/placeholder.png",
- "/img/placeholder.png",
- ],
- tags: ["react", "vite", "wordpress"],
- link: undefined,
+ info: "Letsfly is a website aimed at providing a platform for aviation-related services and information. Built on Next.js, a popular React framework, the website leverages its server-side rendering (SSR) capability to enhance performance and user experience. Tailwind was used as the CSS framework to quickly and efficiently create an attractive and responsive design. WordPress, a well-known Content Management System (CMS), was employed as the content management system to administer and publish content on the website. The reason for choosing WordPress was a client request; he was familiar with this system and wanted to be able to modify the content himself. GraphQL was selected as the API layer to enable efficient data management and flexible data queries between the frontend and backend.",
+ img: ["/img/letsfly_1.png", "/img/letsfly_2.png", "/img/letsfly_3.png"],
+ tags: ["React", "NextJS", "Wordpress", "GraphQL", "MySQL", "Tailwind"],
+ link: "https://preview.letsfly.app/",
},
];
export const projectsAtom = atom({ key: "projects", default: experianceList });
+export const skillsAtom = atom({
+ key: "skills",
+ default: {
+ languages: ["JavaScript", "TypeScript", "SQL", "HTML", "CSS"],
+ frameworks: [
+ "React",
+ "Node.js",
+ "Next.js",
+ "Vite.js",
+ "Apollo GraphQL",
+ "Tailwind",
+ "Material UI",
+ "Chakra UI",
+ "Axios & Fetch",
+ "Framer Motion",
+ "WordPress",
+ "Shopify",
+ ],
+ tools: [
+ "GIT",
+ "MySQL",
+ "Docker",
+ "Visual Studio Code",
+ "Postman API",
+ "TablePlus",
+ "Trello",
+ "Figma",
+ ],
+ },
+});
diff --git a/tailwind.config.js b/tailwind.config.js
index 1ff1d89..5ff0a9f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,16 +3,35 @@ export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
fontFamily: {
- sans: ["Roboto Mono", "system-ui"],
- headline: ["Roboto Mono", "system-ui"],
+ sans: ["Ubuntu Mono", "system-ui"],
+ headline: ["Tektur", "system-ui"],
+ tags: ["Ubuntu Mono", "system-ui"],
+ },
+ fontSize: {
+ title: ["5rem", { lineHeight: "5rem", fontWeight: "900" }],
+ titlePhone: ["3rem", { lineHeight: "3rem", fontWeight: "900" }],
+ subT: ["3.5rem", { lineHeight: "3.5rem", fontWeight: "800" }],
+ subTPhone: ["2.5rem", { lineHeight: "2.5rem", fontWeight: "800" }],
+ subTMini: ["1.4rem", { lineHeight: "1.4rem", fontWeight: "900" }],
+ subTMiniPhone: ["1.2rem", { lineHeight: "1.2rem", fontWeight: "800" }],
+ tags: ["0.8rem", { fontWeight: "400" }],
+ sm: "0.8rem",
+ base: "1rem",
+ xl: "1.25rem",
+ "2xl": "1.563rem",
+ "3xl": "1.953rem",
+ "4xl": "2.441rem",
+ "5xl": "3.052rem",
},
extend: {
colors: {
neon: "#ccff00",
- bgColor: "#302f39",
+ bgColor: "#031417",
+ highlight: "#ccff00",
},
dropShadow: {
light: "0 0 5px theme('colors.indigo.800')",
+ yellow: "0 0 9px theme('colors.lime.400')",
doublelight: [
"0 0 5px theme('colors.lime.400')",
"0 0 15px theme('colors.yellow.400')",
+
+ + Hello, my name is Maria. +
++ I'm a Frontend Engineer +
++ In my recent journey as a junior frontend engineer, I've gained + valuable experience through involvement in various projects within + startup environments. Passionate about art and design, I've developed + my skills beyond coding. Let's connect and explore opportunities + together! By the way, you might catch a glimpse of my black mini + poodle, Oreo, who's an integral part of my creative space. +
+