mariiashabelnik/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI update
Some checks failed
ci/cd / Build (push) Failing after 1s
Details

Browse Source
This commit is contained in:
Mariia Shabelnik 2024-09-25 13:34:57 +02:00
parent 1668da060a
commit f32c26bb7d
No known key found for this signature in database
GPG Key ID: 27F973065C339207
14 changed files with 182 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@ -4,32 +4,36 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link <link
rel="icon" rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22> href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22>, <text y=%22.9em%22 font-size=%2290%22>
<text y=%22.9em%22 font-size=%2290%22> 🫰
👋
</text> </text>
</svg>" </svg>"
/> />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- nav font -->
<link <link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<!-- body font -->
<link <link
href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap" href="https://fonts.googleapis.com/css2?family=Jura:wght@300..700&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<!-- headline-title font -->
<link <link
href="https://fonts.googleapis.com/css2?family=Tektur:wght@400;500;600;700;800;900&display=swap" href="https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap"
rel="stylesheet"
/>
<!-- logo font -->
<link
href="https://fonts.googleapis.com/css2?family=Sixtyfour&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link
href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap"
rel="stylesheet"
/>
<title>Mariia Shabelnik</title> <title>Mariia Shabelnik</title>
</head> </head>
<body> <body>

BIN
public/img/oreo-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 980 B

5
src/App.jsx
View File

@ -1,8 +1,5 @@
//import "./App.css"; //import "./App.css";
import { Routes, Route } from "react-router-dom"; import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Experience from "./pages/Experience";
import Contact from "./pages/Contact";
import Footer from "./components/Footer"; import Footer from "./components/Footer";
import Header from "./components/Header"; import Header from "./components/Header";
import ExperianceDetail from "./pages/ExperienceDetail"; import ExperianceDetail from "./pages/ExperienceDetail";
@ -12,7 +9,7 @@ import ScrollToAnchor from "./components/ScrollToAnchor";
function App() { function App() {
return ( return (
<div className="text-white"> <div className=" text-gray-600 ">
<RecoilRoot> <RecoilRoot>
<main className=" min-h-screen"> <main className=" min-h-screen">
<Header /> <Header />

40
src/components/Header.jsx
View File

@ -13,17 +13,18 @@ function Header() {
}, [isOpen]); }, [isOpen]);
const menu = [ const menu = [
{ link: "/#about", title: ".me()" }, { link: "/#about", title: ".about( )" },
{ link: "/#experience", title: ".experience()" }, { link: "/#experience", title: ".projects( )" },
{ link: "/#contact", title: ".contact( )" }, { link: "/#contact", title: ".contact( )" },
]; ];
const menuUI = menu.map((item) => { const menuUI = menu.map((item) => {
let className = "drop-shadow-light hover:drop-shadow-doublelight"; let className = "drop-shadow-doublelight hover:drop-shadow-active";
if (location.pathname === item.link) { console.log(location);
if (`/${location.hash}` === item.link) {
className += " text-white "; className += " text-white ";
} else { } else {
className += " text-white/40"; className += " text-gray-500";
} }
return ( return (
<li className="my-10 text-xl md:my-0 md:text-base " key={item.link}> <li className="my-10 text-xl md:my-0 md:text-base " key={item.link}>
@ -40,10 +41,19 @@ function Header() {
); );
}); });
const headerClasses = ["sticky", "top-0", "z-40", "backdrop-blur-md", "h-16"]; const headerClasses = [
"sticky",
"top-0",
"z-40",
"backdrop-blur-sm",
"h-16",
"border-b-[1px]",
"border-white",
"rounded-b-[1rem]",
];
const logoClasses = ["hover:drop-shadow-light"]; const logoClasses = ["hover:drop-shadow-light"];
const overlayMenu = [ const overlayMenu = [
"bg-black/90", "bg-white/90",
"z-50", "z-50",
"fixed", "fixed",
"left-0", "left-0",
@ -54,11 +64,11 @@ function Header() {
"p-2", "p-2",
]; ];
if (isOpen) { if (isOpen) {
headerClasses.push("bg-black/90"); headerClasses.push("bg-white/70");
logoClasses.push("drop-shadow-yellow"); logoClasses.push("drop-shadow-gray");
} else { } else {
headerClasses.push("bg-bgColor/90"); headerClasses.push("bg-bgColor/70");
logoClasses.push("drop-shadow-doublelight"); logoClasses.push("drop-shadow-active");
} }
return ( return (
@ -71,11 +81,11 @@ function Header() {
</div> </div>
)} )}
<header className={headerClasses.join(" ")}> <header className={headerClasses.join(" ")}>
<div className="container mx-auto h-full"> <div className="container mx-auto h-full max-w-7xl ">
<nav className="flex items-center h-full px-2"> <nav className="flex items-center h-full px-10 ">
<div className="flex-none text-3xl md:text-4xl font-black font-logo "> <div className="flex-none text-3xl md:text-4xl font-logo text-[#6d6d6d] ">
<Link className={logoClasses.join(" ")} to="/#start"> <Link className={logoClasses.join(" ")} to="/#start">
MW MS
</Link> </Link>
</div> </div>

4
src/components/Tags.jsx
View File

@ -1,13 +1,13 @@
function Tags({ listOfTags }) { function Tags({ listOfTags }) {
const tagList = listOfTags.map((itemTag, keyTag) => { const tagList = listOfTags.map((itemTag, keyTag) => {
return ( return (
<div className={`bg-gray-800 py-1 px-2 rounded-xl `} key={keyTag}> <div className={`bg-gray-500 py-1 px-2 rounded-xl `} key={keyTag}>
{itemTag} {itemTag}
</div> </div>
); );
}); });
return ( return (
<div className="text-tags flex flex-wrap gap-2 font-tags text-highlight "> <div className="text-tags flex flex-wrap gap-2 font-tags text-white ">
{tagList} {tagList}
</div> </div>
); );

4
src/index.css
View File

@ -4,8 +4,8 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
body { body {
background-color: #031417; background-color: #f0f0f3;
} }
::selection { ::selection {
background: #7d9c00b1; background: #caebfa;
} }

32
src/pages/About.jsx
View File

@ -4,26 +4,39 @@ import { skillsAtom } from "../store";
function About() { function About() {
const skills = useRecoilValue(skillsAtom); const skills = useRecoilValue(skillsAtom);
console.log(skills);
return ( return (
<div className="relative"> <div className="relative">
<div id="about" className=" absolute -top-16 "></div> <div id="about" className=" absolute -top-16 "></div>
<div className=" h-screen"> <div className=" min-h-screen flex items-center">
<div>
<h2 className="mb-2 text-subTPhone md:text-subT font-headline"> <h2 className="mb-2 text-subTPhone md:text-subT font-headline">
About<span className=" text-highlight">.</span> About<span className=" text-highlight">.</span>
</h2> </h2>
<div className="flex flex-col md:flex-row"> <div className="flex flex-col md:flex-row">
<div className="basis-2/3 text-base"> <div className="basis-2/3 text-base">
<p> <p>
As a prospective Frontend Developer, I seek a challenging career "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!"
{/* As a prospective Frontend Developer, I seek a challenging career
opportunity in the IT industry, where I can collaborate with a opportunity in the IT industry, where I can collaborate with a
dynamic team, continually learn, and foster innovation. My dynamic team, continually learn, and foster innovation. My
dedication lies in transforming design concepts into user-friendly dedication lies in transforming design concepts into
experiences and achieving organizational goals through creativity user-friendly experiences and achieving organizational goals
and teamwork. I aspire to engage in work that allows the through creativity and teamwork. I aspire to engage in work that
utilization of technical and creative skills to contribute allows the utilization of technical and creative skills to
effectively to the growth of an organization. If you think you've contribute effectively to the growth of an organization. If you
got an opening that I might like, let's connect 🔗 think you've got an opening that I might like, let's connect 🔗 */}
</p> </p>
</div> </div>
<div className=" basis-1/3"> <div className=" basis-1/3">
@ -37,6 +50,7 @@ function About() {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }

2
src/pages/Contact.jsx
View File

@ -2,7 +2,7 @@ function Contact() {
return ( return (
<div className="relative"> <div className="relative">
<div id="contact" className=" absolute -top-16 "></div> <div id="contact" className=" absolute -top-16 "></div>
<h1>Welcome to C#ontact</h1> <h1>Contact me</h1>
</div> </div>
); );
} }

34
src/pages/Experience.jsx
View File

@ -7,31 +7,22 @@ function Experiance() {
const experianceList = useRecoilValue(projectsAtom); const experianceList = useRecoilValue(projectsAtom);
const experianceListUI = experianceList.map((item, key) => { const experianceListUI = experianceList.map((item, key) => {
const position = key % 2;
const imgClasses = ["basis-1/3", "hidden", "md:block"];
if (position === 1) {
imgClasses.push("md:order-last");
}
return ( return (
<section className="flex flex-col md:flex-row gap-4 mb-12" key={item.id}> <section
<div className={imgClasses.join(" ")}> className="flex-1 gap-4 mb-12 bg-[#e0e0e0] border rounded-3xl shadow-box"
<img className="rounded-md" src={item.img[0]} /> key={item.id}
>
<div>
<div className="p-4">
<img className="rounded-3xl" src={item.img[0]} />
</div> </div>
<div className="basis-2/3 flex flex-col"> <div className="flex flex-col px-4 pt-4 pb-8">
<div> <div>
<h2 className="text-subTMiniPhone md:text-subTMini mb-4 "> <h2 className="text-subTMiniPhone md:text-subTMini mb-4 ">
{item.title} {item.title}
</h2> </h2>
</div> </div>
<div>
<img
className="block md:hidden mb-4 rounded-md"
src={item.img[0]}
/>
</div>
<div className="text-base mb-6 line-clamp-3 md:line-clamp-6"> <div className="text-base mb-6 line-clamp-3 md:line-clamp-6">
<p>{item.info}</p> <p>{item.info}</p>
</div> </div>
@ -46,6 +37,7 @@ function Experiance() {
</Link> </Link>
</div> </div>
</div> </div>
</div>
</section> </section>
); );
}); });
@ -53,11 +45,13 @@ function Experiance() {
return ( return (
<div className="relative"> <div className="relative">
<div id="experience" className=" absolute -top-16 "></div> <div id="experience" className=" absolute -top-16 "></div>
<div className=" h-screen"> <div className=" min-h-screen">
<h2 className=" text-subTPhone md:text-subT font-headline"> <h2 className=" text-subTPhone md:text-subT font-headline">
Experience<span className=" text-highlight">.</span> Experience<span className=" text-highlight">.</span>
</h2> </h2>
<div className="py-4">{experianceListUI}</div> <div className="py-4 flex flex-col md:flex-row gap-4">
{experianceListUI}
</div>
</div> </div>
</div> </div>
); );

2
src/pages/FullPage.jsx
View File

@ -5,7 +5,7 @@ import Start from "./Start";
function FullPage() { function FullPage() {
return ( return (
<div className="container mx-auto px-2"> <div className="container mx-auto px-10 max-w-7xl">
<Start /> <Start />
<About /> <About />
<Experiance /> <Experiance />

78
src/pages/Home.jsx
View File

@ -1,78 +0,0 @@
import {
Animator,
ScrollContainer,
ScrollPage,
batch,
Fade,
FadeIn,
FadeOut,
Move,
MoveIn,
MoveOut,
Sticky,
StickyIn,
StickyOut,
Zoom,
ZoomIn,
ZoomOut,
} from "react-scroll-motion";
function Home() {
const ZoomInScrollOut = batch(StickyIn(), FadeIn(), ZoomIn());
const FadeUp = batch(Fade(), Move(), Sticky());
return (
<ScrollContainer>
<ScrollPage>
<Animator animation={batch(Fade(), Sticky(), MoveOut(0, 200))}>
<span>Hello, my name is Mariia 😀</span>
</Animator>
<span style={{ fontSize: "40px" }}>
<Animator animation={MoveIn(-1000, 0)}>Hello Guys 👋🏻</Animator>
</span>
</ScrollPage>
<ScrollPage>
<Animator animation={ZoomInScrollOut}>
<span style={{ fontSize: "40px" }}>I'm Frontend developer ✨</span>
</Animator>
</ScrollPage>
<ScrollPage>
<Animator animation={FadeUp}>
<span style={{ fontSize: "40px" }}>I'm Webbdesigner ⛅️</span>
</Animator>
</ScrollPage>
<ScrollPage>
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
}}
>
<span style={{ fontSize: "40px" }}>
<Animator animation={MoveIn(1000, 0)}>Nice to meet you 🙋🏻‍♀️</Animator>
- I'm Dante Chun -
<Animator animation={MoveOut(1000, 0)}>Good bye ✋🏻</Animator>
<Animator animation={MoveOut(-1000, 0)}>See you 💛</Animator>
</span>
</div>
</ScrollPage>
<ScrollPage>
<Animator animation={batch(Fade(), Sticky())}>
<span style={{ fontSize: "40px" }}>Done</span>
<br />
<span style={{ fontSize: "30px" }}>
There's FadeAnimation, MoveAnimation, StickyAnimation, ZoomAnimation
</span>
</Animator>
</ScrollPage>
</ScrollContainer>
);
}
export default Home;

40
src/pages/Start.jsx
View File

@ -3,21 +3,41 @@ function Start() {
<div className="relative"> <div className="relative">
<div id="start" className="absolute -top-16 "></div> <div id="start" className="absolute -top-16 "></div>
<div className=" h-screen"> <div className=" min-h-screen flex items-center">
<h1 className="text-titlePhone md:text-title md:leading-tight mb-2 font-headline"> <div className="">
<h1 className="text-titlePhone md:text-title md:leading-tight mb-2 font-ht">
Hello, my name is Maria<span className=" text-highlight">.</span> Hello, my name is Maria<span className=" text-highlight">.</span>
</h1> </h1>
<h2 className="text-subTPhone md:text-subT font-headline"> <h2 className="text-subTPhone md:text-subT font-tags">
I'm a<span className=" text-highlight"> Frontend Engineer</span> I'm a<span className=" text-highlight"> Frontend Engineer</span>
</h2> </h2>
<p className="text-base"> <p className="text-base w-1/2 text-left my-4">
In my recent journey as a junior frontend engineer, I've gained Hi, I’m Mariia! I’m a web developer with startup experience,
valuable experience through involvement in various projects within building things with JavaScript, React, and Node.js. I’m also into
startup environments. Passionate about art and design, I've developed 3D design and art, and my mini poodle,{" "}
my skills beyond coding. Let's connect and explore opportunities <span className="font-black">Oreo</span>{" "}
together! By the way, you might catch a glimpse of my black mini <img
poodle, Oreo, who's an integral part of my creative space. src="/img/oreo-logo.png"
alt="oreo_logo"
className=" inline h-"
/>{" "}
, is always in my creative space. Let’s chat!
{/* Hi, I’m Mariia! I’m a developer who loves building functional,
user-friendly web experiences with a creative twist. I’ve been
working as a junior frontend engineer in startups, gaining hands-on
experience. I use JavaScript, React, Node.js, and SQL, and I’m
always exploring 3D design to add a little extra flair. Let’s
connect and maybe you’ll meet my mini poodle,{" "}
<span className="font-black">Oreo</span>{" "}
<img
src="/img/oreo-logo.png"
alt="oreo_logo"
className=" inline h-"
/>{" "}
, who’s always hanging out with me while I work! */}
{/* "Hi, I’m Mariia! I’m a frontend developer with experience in startup projects, working with JavaScript, React, Node.js, and SQL. I love combining my technical skills with my passion for art and design, especially through 3D projects. Let’s connect and see what we can create together—also, say hi to my mini poodle, Oreo, who’s always by my side in my creative space!" */}
</p> </p>
</div>{" "}
</div> </div>
</div> </div>
); );

2
src/store.js
View File

@ -54,7 +54,7 @@ export const skillsAtom = atom({
"MySQL", "MySQL",
"Docker", "Docker",
"Visual Studio Code", "Visual Studio Code",
"Postman API", "Rapid API",
"TablePlus", "TablePlus",
"Trello", "Trello",
"Figma", "Figma",

42
tailwind.config.js
View File

@ -3,10 +3,17 @@ export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: { theme: {
fontFamily: { fontFamily: {
sans: ["Ubuntu Mono", "system-ui"], /* //3D logo font
logo: ["Dela Gothic One", "system-ui"], logo3D: ["Nabla", "system-ui"], */
tags: ["Ubuntu Mono", "system-ui"],
headline: ["Tektur", "system-ui"], //logo font
logo: ["Sixtyfour", "system-ui"],
//headline-title text
ht: ["Sora", "system-ui"],
//body text
sans: ["Jura", "system-ui"],
//nav
tags: ["Raleway", "system-ui"],
}, },
fontSize: { fontSize: {
title: ["5rem", { lineHeight: "5rem", fontWeight: "900" }], title: ["5rem", { lineHeight: "5rem", fontWeight: "900" }],
@ -17,7 +24,7 @@ export default {
subTMiniPhone: ["1.2rem", { lineHeight: "1.2rem", fontWeight: "800" }], subTMiniPhone: ["1.2rem", { lineHeight: "1.2rem", fontWeight: "800" }],
tags: ["0.8rem", { fontWeight: "400" }], tags: ["0.8rem", { fontWeight: "400" }],
sm: "0.8rem", sm: "0.8rem",
base: "1rem", base: "1.2rem",
xl: "1.25rem", xl: "1.25rem",
"2xl": "1.563rem", "2xl": "1.563rem",
"3xl": "1.953rem", "3xl": "1.953rem",
@ -26,20 +33,23 @@ export default {
}, },
extend: { extend: {
colors: { colors: {
neon: "#ccff00", neon: "#caebfa",
bgColor: "#031417", bgColor: "#F0F0F3",
highlight: "#ccff00", highlight: "#D2D2D2",
}, },
//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;",
},
dropShadow: { dropShadow: {
light: "0 0 5px theme('colors.indigo.800')", light: "0 0 5px theme('colors.sky.100')",
yellow: "0 0 9px theme('colors.lime.400')", gray: "0 0 9px #8c92a8",
doublelight: [ doublelight: ["0 0 5px #96989a", "0 0 15px #a0d9fa"],
"0 0 5px theme('colors.lime.400')", //doublelight:
"0 0 15px theme('colors.yellow.400')",
],
active: [ active: [
"0 0 5px theme('colors.lime.400')", "0 0 5px theme('colors.sky.300')",
"0 0 15px theme('colors.indigo.950')", "0 0 15px theme('colors.sky.100')",
], ],
}, },
}, },