Compare commits
No commits in common. "7a9f716f628716171a1538593e896b1d41d24d8a" and "f45ca70b21a450bbfa287f05663055b5cdd7103f" have entirely different histories.
7a9f716f62
...
f45ca70b21
@ -17,15 +17,6 @@
|
|||||||
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap"
|
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
<link
|
|
||||||
href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
href="https://fonts.googleapis.com/css2?family=Tektur:wght@400;500;600;700;800;900&display=swap"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<title>Mariia Shabelnik</title>
|
<title>Mariia Shabelnik</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
15
package-lock.json
generated
15
package-lock.json
generated
@ -11,7 +11,6 @@
|
|||||||
"hamburger-react": "^2.5.0",
|
"hamburger-react": "^2.5.0",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-icons": "^4.12.0",
|
|
||||||
"react-image-gallery": "^1.3.0",
|
"react-image-gallery": "^1.3.0",
|
||||||
"react-router-dom": "^6.3.0",
|
"react-router-dom": "^6.3.0",
|
||||||
"react-scroll-motion": "^0.3.0",
|
"react-scroll-motion": "^0.3.0",
|
||||||
@ -1985,14 +1984,6 @@
|
|||||||
"react": "^18.2.0"
|
"react": "^18.2.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-icons": {
|
|
||||||
"version": "4.12.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
|
|
||||||
"integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==",
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": "*"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/react-image-gallery": {
|
"node_modules/react-image-gallery": {
|
||||||
"version": "1.3.0",
|
"version": "1.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-1.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-1.3.0.tgz",
|
||||||
@ -3722,12 +3713,6 @@
|
|||||||
"scheduler": "^0.23.0"
|
"scheduler": "^0.23.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"react-icons": {
|
|
||||||
"version": "4.12.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
|
|
||||||
"integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==",
|
|
||||||
"requires": {}
|
|
||||||
},
|
|
||||||
"react-image-gallery": {
|
"react-image-gallery": {
|
||||||
"version": "1.3.0",
|
"version": "1.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-1.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-1.3.0.tgz",
|
||||||
|
|||||||
@ -12,7 +12,6 @@
|
|||||||
"hamburger-react": "^2.5.0",
|
"hamburger-react": "^2.5.0",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-icons": "^4.12.0",
|
|
||||||
"react-image-gallery": "^1.3.0",
|
"react-image-gallery": "^1.3.0",
|
||||||
"react-router-dom": "^6.3.0",
|
"react-router-dom": "^6.3.0",
|
||||||
"react-scroll-motion": "^0.3.0",
|
"react-scroll-motion": "^0.3.0",
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 415 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 641 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
109
src/App.css
Normal file
109
src/App.css
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Roboto Mono", monospace;
|
||||||
|
background-color: #302f39;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav .container {
|
||||||
|
height: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin-top: 5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
background-color: #302f38;
|
||||||
|
height: 4em;
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*box-shadow: inset 0px 3px 20px 10px rgba(0, 0, 0, 0.3);*/
|
||||||
|
|
||||||
|
.nav a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #e5e5ff;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a:hover {
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 0 5px #f2ef00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-items {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-items {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-items div {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo a {
|
||||||
|
text-shadow: 0 0 5px #ccff00, 0 0 15px #ccff00;
|
||||||
|
z-index: 10000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
font-size: 0.7em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-menu {
|
||||||
|
background-color: #302f38;
|
||||||
|
z-index: 100;
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
backdrop-filter: blur(3px) contrast(60%);
|
||||||
|
-webkit-backdrop-filter: blur(3px) contrast(60%);
|
||||||
|
top: 4em;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-menu a {
|
||||||
|
font-size: 2em;
|
||||||
|
text-decoration: none;
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.hamburger {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.menu-items {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -6,9 +6,7 @@ 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";
|
||||||
import FullPage from "./pages/FullPage";
|
|
||||||
import { RecoilRoot } from "recoil";
|
import { RecoilRoot } from "recoil";
|
||||||
import ScrollToAnchor from "./components/ScrollToAnchor";
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
@ -16,11 +14,10 @@ function App() {
|
|||||||
<RecoilRoot>
|
<RecoilRoot>
|
||||||
<main className=" min-h-screen">
|
<main className=" min-h-screen">
|
||||||
<Header />
|
<Header />
|
||||||
<ScrollToAnchor />
|
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<FullPage />} />
|
<Route path="/" element={<Home />} />
|
||||||
{/* <Route path="/experience" element={<Experience />} />
|
<Route path="/experience" element={<Experience />} />
|
||||||
<Route path="/contact" element={<Contact />} />*/}
|
<Route path="/contact" element={<Contact />} />
|
||||||
<Route path="/experience/:id" element={<ExperianceDetail />} />
|
<Route path="/experience/:id" element={<ExperianceDetail />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|||||||
@ -1,21 +1,16 @@
|
|||||||
import { Link, useLocation } from "react-router-dom";
|
import { Link, useLocation } from "react-router-dom";
|
||||||
import { useState, useEffect } from "react";
|
import { Turn as Hamburger } from "hamburger-react";
|
||||||
import { Divide as Hamburger } from "hamburger-react";
|
import { useState } from "react";
|
||||||
|
|
||||||
function Header() {
|
function Header() {
|
||||||
const [isOpen, setOpen] = useState(false);
|
const [isOpen, setOpen] = useState(false);
|
||||||
|
|
||||||
const menuTimeout = 400;
|
const menuTimeout = 400;
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
document.body.style.overflow = isOpen ? "hidden" : "unset";
|
|
||||||
}, [isOpen]);
|
|
||||||
|
|
||||||
const menu = [
|
const menu = [
|
||||||
{ link: "/#about", title: ".me()" },
|
{ link: "/", title: ".me()" },
|
||||||
{ link: "/#experience", title: ".experience()" },
|
{ link: "/experience", title: ".experience()" },
|
||||||
{ link: "/#contact", title: ".contact()" },
|
{ link: "/contact", title: ".contact()" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const menuUI = menu.map((item) => {
|
const menuUI = menu.map((item) => {
|
||||||
@ -26,70 +21,38 @@ function Header() {
|
|||||||
className += " text-white/40";
|
className += " text-white/40";
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<li className="my-10 text-xl md:my-0 md:text-base" key={item.link}>
|
<li key={item.link}>
|
||||||
<Link
|
<Link className={className} to={item.link}>
|
||||||
className={className}
|
|
||||||
onClick={() => {
|
|
||||||
setOpen(false);
|
|
||||||
}}
|
|
||||||
to={item.link}
|
|
||||||
>
|
|
||||||
{item.title}
|
{item.title}
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
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");
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<header className="sticky top-0 z-50 backdrop-blur-sm bg-bgColor/90 ">
|
||||||
{isOpen && (
|
<div className="container mx-auto">
|
||||||
<div className={overlayMenu.join(" ")}>
|
<nav className="flex items-center mx-4 py-4">
|
||||||
<div className=" h-[calc(100vh-20rem)] flex flex-col justify-center">
|
<div className="flex-none text-4xl font-black">
|
||||||
<ul>{menuUI}</ul>
|
<Link
|
||||||
</div>
|
className=" drop-shadow-doublelight hover:drop-shadow-light"
|
||||||
</div>
|
to="/"
|
||||||
)}
|
>
|
||||||
<header className={headerClasses.join(" ")}>
|
|
||||||
<div className="container mx-auto h-full">
|
|
||||||
<nav className="flex items-center h-full px-2">
|
|
||||||
<div className="flex-none text-3xl md:text-4xl font-black font-headline ">
|
|
||||||
<Link className={logoClasses.join(" ")} to="/#start">
|
|
||||||
MS.
|
MS.
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
{/* <div className="hamburger">
|
||||||
|
<Hamburger color="#e5e5ff" toggled={isOpen} toggle={setOpen} />
|
||||||
|
</div> */}
|
||||||
<div className="grow"></div>
|
<div className="grow"></div>
|
||||||
<div className="flex-none hidden md:block ">
|
<div className="flex-none ">
|
||||||
<ul className="flex flex-row gap-4 text-lg">{menuUI}</ul>
|
<ul className="flex flex-row gap-4 text-lg">{menuUI}</ul>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-none block md:hidden">
|
|
||||||
<Hamburger toggled={isOpen} toggle={setOpen} duration={0.9} />
|
|
||||||
</div>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
{isOpen && hamburgerMenu}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,28 +0,0 @@
|
|||||||
import { useEffect, useRef } from "react";
|
|
||||||
import { useLocation } from "react-router-dom";
|
|
||||||
|
|
||||||
function ScrollToAnchor() {
|
|
||||||
const location = useLocation();
|
|
||||||
const lastHash = useRef("");
|
|
||||||
|
|
||||||
// listen to location change using useEffect with location as dependency
|
|
||||||
// https://jasonwatmore.com/react-router-v6-listen-to-location-route-change-without-history-listen
|
|
||||||
useEffect(() => {
|
|
||||||
if (location.hash) {
|
|
||||||
lastHash.current = location.hash.slice(1); // safe hash for further use after navigation
|
|
||||||
}
|
|
||||||
|
|
||||||
if (lastHash.current && document.getElementById(lastHash.current)) {
|
|
||||||
setTimeout(() => {
|
|
||||||
document
|
|
||||||
.getElementById(lastHash.current)
|
|
||||||
?.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
||||||
lastHash.current = "";
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
}, [location]);
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ScrollToAnchor;
|
|
||||||
@ -1,16 +1,12 @@
|
|||||||
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-indigo-500/40 py-2 px-4 rounded-full `} key={keyTag}>
|
||||||
{itemTag}
|
{itemTag}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
return (
|
return <div className="text-xs flex gap-4 mt-6 ">{tagList}</div>;
|
||||||
<div className="text-tags flex flex-wrap gap-2 font-tags text-highlight ">
|
|
||||||
{tagList}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Tags;
|
export default Tags;
|
||||||
|
|||||||
@ -4,8 +4,5 @@
|
|||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
body {
|
body {
|
||||||
background-color: #031417;
|
background-color: #302f39;
|
||||||
}
|
|
||||||
::selection {
|
|
||||||
background: #7d9c00b1;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,41 +0,0 @@
|
|||||||
import { useRecoilValue } from "recoil";
|
|
||||||
import Tags from "../components/Tags";
|
|
||||||
import { skillsAtom } from "../store";
|
|
||||||
|
|
||||||
function About() {
|
|
||||||
const skills = useRecoilValue(skillsAtom);
|
|
||||||
console.log(skills);
|
|
||||||
return (
|
|
||||||
<div className="relative">
|
|
||||||
<div id="about" className=" absolute -top-16 "></div>
|
|
||||||
<h2 className="mb-2 text-subTPhone md:text-subT font-headline">
|
|
||||||
About<span className=" text-highlight">.</span>
|
|
||||||
</h2>
|
|
||||||
<div className="flex flex-col md:flex-row">
|
|
||||||
<div className="basis-2/3 text-base">
|
|
||||||
<p>
|
|
||||||
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 🔗
|
|
||||||
</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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default About;
|
|
||||||
@ -1,8 +1,7 @@
|
|||||||
function Contact() {
|
function Contact() {
|
||||||
return (
|
return (
|
||||||
<div className="relative">
|
<div className="container content">
|
||||||
<div id="contact" className=" absolute -top-16 "></div>
|
<h1>Welcome to Contact</h1>
|
||||||
<h1>Welcome to C#ontact</h1>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -9,7 +9,7 @@ function Experiance() {
|
|||||||
const experianceListUI = experianceList.map((item, key) => {
|
const experianceListUI = experianceList.map((item, key) => {
|
||||||
const position = key % 2;
|
const position = key % 2;
|
||||||
|
|
||||||
const imgClasses = ["basis-1/3", "hidden", "md:block"];
|
const imgClasses = ["flex-1", "hidden", "md:block"];
|
||||||
|
|
||||||
if (position === 1) {
|
if (position === 1) {
|
||||||
imgClasses.push("md:order-last");
|
imgClasses.push("md:order-last");
|
||||||
@ -20,11 +20,9 @@ function Experiance() {
|
|||||||
<div className={imgClasses.join(" ")}>
|
<div className={imgClasses.join(" ")}>
|
||||||
<img className="rounded-md" src={item.img[0]} />
|
<img className="rounded-md" src={item.img[0]} />
|
||||||
</div>
|
</div>
|
||||||
<div className="basis-2/3 flex flex-col">
|
<div className="flex-1 flex flex-col">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-subTMiniPhone md:text-subTMini mb-4 ">
|
<h2 className="text-2xl mb-4"> {item.title}</h2>
|
||||||
{item.title}
|
|
||||||
</h2>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img
|
<img
|
||||||
@ -32,7 +30,7 @@ function Experiance() {
|
|||||||
src={item.img[0]}
|
src={item.img[0]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-base mb-6 line-clamp-3 md:line-clamp-6">
|
<div className="text-sm">
|
||||||
<p>{item.info}</p>
|
<p>{item.info}</p>
|
||||||
</div>
|
</div>
|
||||||
<Tags listOfTags={item.tags} />
|
<Tags listOfTags={item.tags} />
|
||||||
@ -51,11 +49,8 @@ function Experiance() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative">
|
<div className="container mx-auto my-10 px-6">
|
||||||
<div id="experience" className=" absolute -top-16 "></div>
|
<h1>Welcome to Experiance</h1>
|
||||||
<h2 className=" text-subTPhone md:text-subT font-headline">
|
|
||||||
Experience<span className=" text-highlight">.</span>
|
|
||||||
</h2>
|
|
||||||
<div className="py-4">{experianceListUI}</div>
|
<div className="py-4">{experianceListUI}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,14 +1,12 @@
|
|||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useParams } from "react-router-dom";
|
||||||
import { useRecoilValue } from "recoil";
|
import { useRecoilValue } from "recoil";
|
||||||
import { projectsAtom } from "../store";
|
import { projectsAtom } from "../store";
|
||||||
import ImageGallery from "react-image-gallery";
|
import ImageGallery from "react-image-gallery";
|
||||||
import Tags from "../components/Tags";
|
import Tags from "../components/Tags";
|
||||||
import { IoChevronBackOutline as BackButton } from "react-icons/io5";
|
|
||||||
|
|
||||||
function ExperianceDetail() {
|
function ExperianceDetail() {
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
const experianceList = useRecoilValue(projectsAtom);
|
const experianceList = useRecoilValue(projectsAtom);
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
//shorter variant of Find function with IF-sats
|
//shorter variant of Find function with IF-sats
|
||||||
const myProject = experianceList.find((item) => item.id === id);
|
const myProject = experianceList.find((item) => item.id === id);
|
||||||
@ -37,27 +35,16 @@ function ExperianceDetail() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto my-10 px-6">
|
<div className="container mx-auto my-10 px-6">
|
||||||
<button
|
<div className="flex">
|
||||||
className="text-4xl "
|
|
||||||
aria-label="Back"
|
|
||||||
onClick={() => {
|
|
||||||
navigate(-1);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<BackButton />
|
|
||||||
</button>
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<h1 className=" text-subTPhone md:text-subT">
|
<h1>Project: {myProject.title}</h1>
|
||||||
Project: {myProject.title}
|
|
||||||
</h1>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 mt-2 mb-6">
|
|
||||||
<Tags listOfTags={myProject.tags} />
|
<Tags listOfTags={myProject.tags} />
|
||||||
</div>{" "}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col md:flex-row gap-4">
|
{linkUI}
|
||||||
<div className="flex-1">
|
<div className="py-4 mb-8">{myProject.info}</div>
|
||||||
|
<div className="">
|
||||||
<ImageGallery
|
<ImageGallery
|
||||||
showThumbnails={false}
|
showThumbnails={false}
|
||||||
showBullets={true}
|
showBullets={true}
|
||||||
@ -67,16 +54,8 @@ function ExperianceDetail() {
|
|||||||
items={projectImg}
|
items={projectImg}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 text-base">
|
|
||||||
{myProject.info}
|
|
||||||
<div className=" drop-shadow-doublelight hover:drop-shadow-light my-2 text-end">
|
|
||||||
{linkUI}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>{" "}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
4;
|
|
||||||
|
|
||||||
export default ExperianceDetail;
|
export default ExperianceDetail;
|
||||||
|
|||||||
@ -1,17 +0,0 @@
|
|||||||
import About from "./About";
|
|
||||||
import Contact from "./Contact";
|
|
||||||
import Experiance from "./Experience";
|
|
||||||
import Start from "./Start";
|
|
||||||
|
|
||||||
function FullPage() {
|
|
||||||
return (
|
|
||||||
<div className="container mx-auto px-2">
|
|
||||||
<Start />
|
|
||||||
<About />
|
|
||||||
<Experiance />
|
|
||||||
<Contact />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default FullPage;
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
function Start() {
|
|
||||||
return (
|
|
||||||
<div className="relative">
|
|
||||||
<div id="start" className="absolute -top-16 "></div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h1 className="text-titlePhone md:text-title md:leading-tight mb-2 font-headline">
|
|
||||||
Hello, my name is Maria<span className=" text-highlight">.</span>
|
|
||||||
</h1>
|
|
||||||
<h2 className="text-subTPhone md:text-subT font-headline">
|
|
||||||
I'm a<span className=" text-highlight"> Frontend Engineer</span>
|
|
||||||
</h2>
|
|
||||||
<p className="text-base">
|
|
||||||
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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Start;
|
|
||||||
102
src/store.js
102
src/store.js
@ -4,60 +4,68 @@ const experianceList = [
|
|||||||
{
|
{
|
||||||
id: "46bf76ae-8915-4e5d-ae92-4151be80e75a",
|
id: "46bf76ae-8915-4e5d-ae92-4151be80e75a",
|
||||||
title: "Netzero web",
|
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.",
|
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/net0_0.png", "/img/net0_1.png", "/img/net0_2.png"],
|
img: [
|
||||||
tags: [
|
"/img/placeholder.png",
|
||||||
"React",
|
"/img/placeholder.png",
|
||||||
"Vite",
|
"/img/placeholder.png",
|
||||||
"Figma",
|
"/img/placeholder.png",
|
||||||
"Tailwind",
|
|
||||||
"TypeScript",
|
|
||||||
"Rest API",
|
|
||||||
"Node.js",
|
|
||||||
"Postgres",
|
|
||||||
"Prisma",
|
|
||||||
"Javascript",
|
|
||||||
],
|
],
|
||||||
|
tags: ["react", "vite", "wordpress"],
|
||||||
link: "https://www.net0.se",
|
link: "https://www.net0.se",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "55515a25-deb1-451c-bc7d-006d293f54aa",
|
id: "55515a25-deb1-451c-bc7d-006d293f54aa",
|
||||||
title: "Lets fly",
|
title: "Lets fly",
|
||||||
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.",
|
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/letsfly_1.png", "/img/letsfly_2.png", "/img/letsfly_3.png"],
|
img: [
|
||||||
tags: ["React", "NextJS", "Wordpress", "GraphQL", "MySQL", "Tailwind"],
|
"/img/placeholder.png",
|
||||||
link: "https://preview.letsfly.app/",
|
"/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,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export const projectsAtom = atom({ key: "projects", default: experianceList });
|
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",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|||||||
@ -3,35 +3,16 @@ 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"],
|
sans: ["Roboto Mono", "system-ui"],
|
||||||
headline: ["Tektur", "system-ui"],
|
headline: ["Roboto Mono", "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: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
neon: "#ccff00",
|
neon: "#ccff00",
|
||||||
bgColor: "#031417",
|
bgColor: "#302f39",
|
||||||
highlight: "#ccff00",
|
|
||||||
},
|
},
|
||||||
dropShadow: {
|
dropShadow: {
|
||||||
light: "0 0 5px theme('colors.indigo.800')",
|
light: "0 0 5px theme('colors.indigo.800')",
|
||||||
yellow: "0 0 9px theme('colors.lime.400')",
|
|
||||||
doublelight: [
|
doublelight: [
|
||||||
"0 0 5px theme('colors.lime.400')",
|
"0 0 5px theme('colors.lime.400')",
|
||||||
"0 0 15px theme('colors.yellow.400')",
|
"0 0 15px theme('colors.yellow.400')",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user