diff --git a/public/img/ProfileMe.jpg b/public/img/ProfileMe.jpg new file mode 100644 index 0000000..07e7fdc Binary files /dev/null and b/public/img/ProfileMe.jpg differ diff --git a/public/img/mockup_net0.png b/public/img/mockup_net0.png new file mode 100644 index 0000000..226bfb5 Binary files /dev/null and b/public/img/mockup_net0.png differ diff --git a/src/pages/About.jsx b/src/pages/About.jsx index e622234..937ba18 100644 --- a/src/pages/About.jsx +++ b/src/pages/About.jsx @@ -6,28 +6,28 @@ function About() { const skills = useRecoilValue(skillsAtom); return ( -
-
+
+
-

- About. +

+ About me.

-
-
+
+

- "I’m Mariia Shabelnik, a Stockholm-based developer passionate - about building innovative, secure digital experiences with a - focus on both frontend and backend technologies. With expertise - in JavaScript, React, TypeScript, and a keen eye for web design, - I create solutions that combine functionality with creativity. I - use Node.js for backend development and SQL for database - management, ensuring my applications are both robust and - scalable. I also have a deep passion for 3D design, which adds a - unique, immersive dimension to my work. I thrive in - collaborative environments that encourage continuous learning - and value creative problem-solving. Let’s collaborate to push - the boundaries of digital innovation!" + "I’m a Stockholm-based developer passionate about building + innovative, secure digital experiences with a focus on both + frontend and backend technologies. With expertise in JavaScript, + React, TypeScript, and a keen eye for web design, I create + solutions that combine functionality with creativity. I use + Node.js for backend development and SQL for database management, + ensuring my applications are both robust and scalable. I also + have a deep passion for 3D design, which adds a unique, + immersive dimension to my work. I thrive in collaborative + environments that encourage continuous learning and value + creative problem-solving. Let’s collaborate to push the + boundaries of digital innovation!" {/* 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 @@ -38,6 +38,13 @@ function About() { contribute effectively to the growth of an organization. If you think you've got an opening that I might like, let's connect 🔗 */}

+
+
+ profile Image

Languages:

@@ -50,7 +57,7 @@ function About() {
-
+
); } diff --git a/src/pages/Experience.jsx b/src/pages/Experience.jsx index a4648b1..a5d5008 100644 --- a/src/pages/Experience.jsx +++ b/src/pages/Experience.jsx @@ -7,28 +7,38 @@ function Experiance() { const experianceList = useRecoilValue(projectsAtom); const experianceListUI = experianceList.map((item, key) => { + const even = key % 2; + return (
-
-
- +
+
+
-
+
+
-

+

{item.title}

-
+ {/*

{item.info}

-
+
*/}
-
+
-

- Experience. +

+ Projects.

-
+
{experianceListUI}
diff --git a/src/pages/Start.jsx b/src/pages/Start.jsx index 72769a8..370d576 100644 --- a/src/pages/Start.jsx +++ b/src/pages/Start.jsx @@ -8,11 +8,11 @@ function Start() {

Hello, my name is Maria.

-

+

I'm a Frontend Engineer

-

- Hi, I’m Mariia! I’m a web developer with startup experience, +

+ I’m a Stockholm-based web developer with startup experience, building things with JavaScript, React, and Node.js. I’m also into 3D design and art, and my mini poodle,{" "} Oreo{" "} diff --git a/src/store.js b/src/store.js index 5d1e3f3..09b6749 100644 --- a/src/store.js +++ b/src/store.js @@ -6,6 +6,7 @@ const experianceList = [ title: "Netzero web", 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"], + previewImg: "/img/mockup_net0.png", tags: [ "React", "Vite", @@ -27,6 +28,7 @@ const experianceList = [ 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/", + previewImg: "/img/mockup_net0.png", }, ]; @@ -58,6 +60,8 @@ export const skillsAtom = atom({ "TablePlus", "Trello", "Figma", + "Spline", + "Blender", ], }, }); diff --git a/tailwind.config.js b/tailwind.config.js index 211a6d3..e82e4b2 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,15 +3,12 @@ export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { fontFamily: { - /* //3D logo font - logo3D: ["Nabla", "system-ui"], */ - //logo font logo: ["Sixtyfour", "system-ui"], //headline-title text ht: ["Sora", "system-ui"], //body text - sans: ["Jura", "system-ui"], + body: ["Jura", "system-ui"], //nav tags: ["Raleway", "system-ui"], }, @@ -39,7 +36,8 @@ export default { }, //20px 20px 60px #bebebe, -20px -20px 60px #ffffff; boxShadow: { - box: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;", + box: "8px 8px 16px #cacaca,-8px -8px 16px #f6f6f6", + // box: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;", }, dropShadow: {