Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, laborum! Maxime animi nostrum facilis distinctio neque labore consectetur beatae eum ipsum excepturi voluptatum, dicta repellendus incidunt fugiat, consequatur rem aperiam.
+
+
+
+ Julia Demianetc
+
+
+ +46 00 00 00 00 00
+
+
+ julia.demianetc@gmail.com
+
+
+
+
+ );
+};
diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx
new file mode 100644
index 00000000..2ca9d82e
--- /dev/null
+++ b/src/components/layout/Header.jsx
@@ -0,0 +1,53 @@
+import styled from "styled-components";
+import { media } from "../../media";
+import { H1 } from "../Typography";
+import { H2 } from "../Typography";
+import { BodyText } from "../Typography";
+
+import HeroCarousel from "../HeroCarousel";
+
+const SectionWrapper = styled.section`
+ padding: 120px 120px 20px 120px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ text-align: center;
+
+ ${media.mobile} {
+ p {
+ font-size: 18px !important;
+ }
+ }
+
+ ${media.tablet} {
+ p {
+ font-size: 18px !important;
+ }
+ }
+`;
+
+export const Header = () => {
+ return (
+
+
+ Hi there, I'm{" "}
+
+
+ Julia
+
+
+
+ Dedicated Web&Frontend Developer with a background in UX/UI Design
+
+
+ Julia is a Web and Front-Developer with strong emphasis on user
+ experience that she took from her years of being UX/UI Designer. With a
+ foundation in design and a growing passion for code, she is exploring
+ how JavaScript, React, Node.js, APIs, and Web Accessibility can create
+ digital experiences that feel both intuitive and deeply human. Now
+ looking for an LIA/internship to grow as a developer and
+ contribute to a team with her with curiosity and problem-solving skills.
+
+
+ );
+};
diff --git a/src/components/layout/MainSection.jsx b/src/components/layout/MainSection.jsx
new file mode 100644
index 00000000..8b05a045
--- /dev/null
+++ b/src/components/layout/MainSection.jsx
@@ -0,0 +1,15 @@
+import { TechSection } from "../Sections/TechSection";
+import { SkillSection } from "../Sections/SkillSection";
+import { ProjectSection } from "../Sections/ProjectSection";
+import { BlogSection } from "../Sections/BlogSection";
+
+export const MainSection = () => {
+ return (
+
+
+
+
+
+
+ );
+};
diff --git a/src/data/articles.json b/src/data/articles.json
new file mode 100644
index 00000000..6c87e241
--- /dev/null
+++ b/src/data/articles.json
@@ -0,0 +1,25 @@
+{
+ "article": [
+ {
+ "name": "Career change for the Nth time. Wow or ouch?",
+ "image": "/img/project1.jpg",
+ "date": "July 14th",
+ "about": "The chat bot app is a conversational AI-powered tool designed to enhance user experience by providing instant, personalized, and automated responses to user inquiries.",
+ "article": "link"
+ },
+ {
+ "name": "Local girl is trying to use logic",
+ "image": "/img/project1.jpg",
+ "date": "June 8th",
+ "about": "The chat bot app is a conversational AI-powered tool designed to enhance user experience by providing instant, personalized, and automated responses to user inquiries.",
+ "article": "link"
+ },
+ {
+ "name": "Do it while scared and in doubt",
+ "image": "/img/project1.jpg",
+ "date": "May 22nd",
+ "about": "The chat bot app is a conversational AI-powered tool designed to enhance user experience by providing instant, personalized, and automated responses to user inquiries.",
+ "article": "link"
+ }
+ ]
+}
diff --git a/src/data/projects.json b/src/data/projects.json
index 7c426028..bc86b185 100644
--- a/src/data/projects.json
+++ b/src/data/projects.json
@@ -1,28 +1,44 @@
{
"projects": [
{
- "name": "Business site",
- "image": "https://images.unsplash.com/photo-1557008075-7f2c5efa4cfd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2497&q=80",
- "tags": [
- "HTML5",
- "CSS3",
- "JavaScript"
- ],
+ "name": "Chatbot built in javascript",
+ "image": "/img/project1.jpg",
+ "tags": ["HTML5", "CSS3", "React", "Node"],
+ "about": "The chat bot app is a conversational AI-powered tool designed to enhance user experience by providing instant, personalized, and automated responses to user inquiries.",
"netlify": "link",
"github": "link"
},
{
"name": "Weather app",
- "image": "https://images.unsplash.com/photo-1520792532857-293bd046307a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2370&q=80",
- "tags": [
- "HTML5",
- "CSS3",
- "JavaScript",
- "TypeScript",
- "APIs"
- ],
- "netlify": "link",
- "github": "link"
+ "image": "/img/project1.jpg",
+ "tags": ["HTML5", "CSS3", "JavaScript", "TypeScript", "APIs"],
+ "about": "Simple web app for weather forecast built with API XXX as a group prject with mob programming approach.",
+ "netlify": "https://weather-app-rock-3.netlify.app/",
+ "github": "https://github.com/Nicolinabl/js-project-weather-app"
+ },
+ {
+ "name": "Bookclub subscription: Accessibility in focus",
+ "image": "/img/project1.jpg",
+ "tags": ["HTML5", "CSS3", "JavaScript"],
+ "about": "Fully accessible subscription to bookclub.",
+ "netlify": "https://the-reading-room-accesibility-project.netlify.app/",
+ "github": "https://github.com/carro-barro/js-project-accessibility"
+ },
+ {
+ "name": "Recipes through API",
+ "image": "/img/project1.jpg",
+ "tags": ["HTML5", "CSS3", "JavaScript"],
+ "about": "A recipe page that fetches recipes from API to help people find something new for a dinner.",
+ "netlify": "https://juls-recipe-library.netlify.app/",
+ "github": "https://github.com/Demijuls/js-project-recipe-library"
+ },
+ {
+ "name": "Business site",
+ "image": "/img/project1.jpg",
+ "tags": ["HTML5", "CSS3", "JavaScript"],
+ "about": "Simple business site built with HTML5 and CSS3. First solo project in TechniGo.",
+ "netlify": "https://demijuls-technigo-project1.netlify.app/",
+ "github": "https://github.com/Demijuls/js-project-business-sitek"
}
]
-}
\ No newline at end of file
+}
diff --git a/src/data/skillslist.json b/src/data/skillslist.json
new file mode 100644
index 00000000..ae68189e
--- /dev/null
+++ b/src/data/skillslist.json
@@ -0,0 +1,33 @@
+[
+ {
+ "title": "Code",
+ "items": ["HTML5", "CSS3", "Javascript ES6", "Styled Components", "GitHub"]
+ },
+ {
+ "title": "Toolbox",
+ "items": [
+ "Figma",
+ "Protopie",
+ "Adobe Photoshop",
+ "Adobe Illustrator",
+ "Adobe AfterEffects",
+ "Jira",
+ "Slack",
+ "Notion"
+ ]
+ },
+ {
+ "title": "Upcoming",
+ "items": ["React", "Node.js"]
+ },
+ {
+ "title": "More",
+ "items": [
+ "Human-centred design",
+ "Communication",
+ "UX/UI Design",
+ "Prototyping Development",
+ "Agile methodology"
+ ]
+ }
+]
diff --git a/src/globalStyles.jsx b/src/globalStyles.jsx
new file mode 100644
index 00000000..38271f7a
--- /dev/null
+++ b/src/globalStyles.jsx
@@ -0,0 +1,24 @@
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyle = createGlobalStyle`
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+
+ body {
+ scroll-behavior: smooth;
+ background-color: white;
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ * {
+ animation: none !important;
+ transition: none !important;
+ transform: none !important;
+ }
+}
+`;
+
+export default GlobalStyle;
diff --git a/src/index.css b/src/index.css
index 61010be6..7e5561f1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+
body {
- background: pink;
- color: hotpink;
+ background: #fff;
+ color: #000;
}
\ No newline at end of file
diff --git a/src/media.jsx b/src/media.jsx
new file mode 100644
index 00000000..8b8f7613
--- /dev/null
+++ b/src/media.jsx
@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const media = {
+ mobile: "@media (max-width: 768px)",
+ tablet: "@media (max-width: 1024px)",
+ desktop: "@media (min-width: 1025px)",
+};