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 />

46
src/components/Header.jsx
View File

@ -13,20 +13,21 @@ 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);
className += " text-white"; if (`/${location.hash}` === item.link) {
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}>
<Link <Link
className={className} className={className}
onClick={() => { onClick={() => {
@ -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;
} }

66
src/pages/About.jsx
View File

@ -4,35 +4,49 @@ 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">
<h2 className="mb-2 text-subTPhone md:text-subT font-headline"> <div>
About<span className=" text-highlight">.</span> <h2 className="mb-2 text-subTPhone md:text-subT font-headline">
</h2> About<span className=" text-highlight">.</span>
<div className="flex flex-col md:flex-row"> </h2>
<div className="basis-2/3 text-base"> <div className="flex flex-col md:flex-row">
<p> <div className="basis-2/3 text-base">
As a prospective Frontend Developer, I seek a challenging career <p>
opportunity in the IT industry, where I can collaborate with a "I’m Mariia Shabelnik, a Stockholm-based developer passionate
dynamic team, continually learn, and foster innovation. My about building innovative, secure digital experiences with a
dedication lies in transforming design concepts into user-friendly focus on both frontend and backend technologies. With expertise
experiences and achieving organizational goals through creativity in JavaScript, React, TypeScript, and a keen eye for web design,
and teamwork. I aspire to engage in work that allows the I create solutions that combine functionality with creativity. I
utilization of technical and creative skills to contribute use Node.js for backend development and SQL for database
effectively to the growth of an organization. If you think you've management, ensuring my applications are both robust and
got an opening that I might like, let's connect 🔗 scalable. I also have a deep passion for 3D design, which adds a
</p> unique, immersive dimension to my work. I thrive in
</div> collaborative environments that encourage continuous learning
<div className=" basis-1/3"> and value creative problem-solving. Let’s collaborate to push
<h4 className="mb-2 text-subTMini">Languages:</h4> the boundaries of digital innovation!"
<Tags listOfTags={skills.languages} /> {/* As a prospective Frontend Developer, I seek a challenging career
<h4 className="my-2 text-subTMini">Frameworks:</h4>{" "} opportunity in the IT industry, where I can collaborate with a
<Tags listOfTags={skills.frameworks} /> dynamic team, continually learn, and foster innovation. My
<h4 className="my-2 text-subTMini">Tools I use:</h4>{" "} dedication lies in transforming design concepts into
<Tags listOfTags={skills.tools} /> 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 🔗 */}
</p>
</div>
<div className=" basis-1/3">
<h4 className="mb-2 text-subTMini">Languages:</h4>
<Tags listOfTags={skills.languages} />
<h4 className="my-2 text-subTMini">Frameworks:</h4>{" "}
<Tags listOfTags={skills.frameworks} />
<h4 className="my-2 text-subTMini">Tools I use:</h4>{" "}
<Tags listOfTags={skills.tools} />
</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>
); );
} }

68
src/pages/Experience.jsx
View File

@ -7,43 +7,35 @@ 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="basis-2/3 flex flex-col"> <div>
<div> <div className="p-4">
<h2 className="text-subTMiniPhone md:text-subTMini mb-4 "> <img className="rounded-3xl" src={item.img[0]} />
{item.title}
</h2>
</div> </div>
<div> <div className="flex flex-col px-4 pt-4 pb-8">
<img <div>
className="block md:hidden mb-4 rounded-md" <h2 className="text-subTMiniPhone md:text-subTMini mb-4 ">
src={item.img[0]} {item.title}
/> </h2>
</div> </div>
<div className="text-base mb-6 line-clamp-3 md:line-clamp-6">
<p>{item.info}</p> <div className="text-base mb-6 line-clamp-3 md:line-clamp-6">
</div> <p>{item.info}</p>
<Tags listOfTags={item.tags} /> </div>
<div className="grow"></div> <Tags listOfTags={item.tags} />
<div className=" text-right"> <div className="grow"></div>
<Link <div className=" text-right">
className=" drop-shadow-doublelight hover:drop-shadow-light " <Link
to={`/experience/${item.id}`} className=" drop-shadow-doublelight hover:drop-shadow-light "
> to={`/experience/${item.id}`}
read more >
</Link> read more
</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;

50
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="">
Hello, my name is Maria<span className=" text-highlight">.</span> <h1 className="text-titlePhone md:text-title md:leading-tight mb-2 font-ht">
</h1> Hello, my name is Maria<span className=" text-highlight">.</span>
<h2 className="text-subTPhone md:text-subT font-headline"> </h1>
I'm a<span className=" text-highlight"> Frontend Engineer</span> <h2 className="text-subTPhone md:text-subT font-tags">
</h2> I'm a<span className=" text-highlight"> Frontend Engineer</span>
<p className="text-base"> </h2>
In my recent journey as a junior frontend engineer, I've gained <p className="text-base w-1/2 text-left my-4">
valuable experience through involvement in various projects within Hi, I’m Mariia! I’m a web developer with startup experience,
startup environments. Passionate about art and design, I've developed building things with JavaScript, React, and Node.js. I’m also into
my skills beyond coding. Let's connect and explore opportunities 3D design and art, and my mini poodle,{" "}
together! By the way, you might catch a glimpse of my black mini <span className="font-black">Oreo</span>{" "}
poodle, Oreo, who's an integral part of my creative space. <img
</p> 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>
</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')",
], ],
}, },
}, },