- ${t.list.map(fact => /*html*/`
+ ${t.list
+ .map(
+ (fact) => /*html*/ `
- ${fact}
- `).join("")}
+ `
+ )
+ .join("")}
@@ -14,5 +18,5 @@ export default (t) => {
- `
-}
\ No newline at end of file
+ `;
+};
diff --git a/src/app/blocks/about/Skills.js b/src/app/blocks/about/Skills.js
index 0196733..368071a 100644
--- a/src/app/blocks/about/Skills.js
+++ b/src/app/blocks/about/Skills.js
@@ -1,15 +1,15 @@
-import SkillBlock from "@/components/SkillBlock"
-import skills from "@/consts/skills"
+import SkillBlock from "@/components/SkillBlock";
+import skills from "@/consts/skills";
export default (t, t2) => {
- return /*html*/`
+ return /*html*/ `
${t.title}
${Object.keys(skills)
- .map((id) => SkillBlock({ id }, t2))
- .join("")}
+ .map((id) => SkillBlock({ id }, t2))
+ .join("")}
- `
-}
+ `;
+};
diff --git a/src/app/blocks/home/About.js b/src/app/blocks/home/About.js
index 07d50d6..e654c72 100644
--- a/src/app/blocks/home/About.js
+++ b/src/app/blocks/home/About.js
@@ -4,10 +4,12 @@ export default (t) => {
${t.title}
- ${t.description.map(
- (text) =>
- /*html*/ `
${text}
`
- ).join("")}
+ ${t.description
+ .map(
+ (text) =>
+ /*html*/ `
${text}
`
+ )
+ .join("")}
diff --git a/src/app/blocks/home/Contacts.js b/src/app/blocks/home/Contacts.js
index 5b31d07..dc21af5 100644
--- a/src/app/blocks/home/Contacts.js
+++ b/src/app/blocks/home/Contacts.js
@@ -8,7 +8,7 @@ const contacts = [
{
name: "email",
text: media.emailRaw,
- }
+ },
];
export default (t) => {
diff --git a/src/app/blocks/home/Quote.js b/src/app/blocks/home/Quote.js
index 025ac01..deb768a 100644
--- a/src/app/blocks/home/Quote.js
+++ b/src/app/blocks/home/Quote.js
@@ -1,8 +1,8 @@
export default (t) => {
- return /*html*/`
+ return /*html*/ `
${t.text}
${t.author}
- `
-}
\ No newline at end of file
+ `;
+};
diff --git a/src/app/blocks/home/Skills.js b/src/app/blocks/home/Skills.js
index 9ba7955..205c2f8 100644
--- a/src/app/blocks/home/Skills.js
+++ b/src/app/blocks/home/Skills.js
@@ -14,7 +14,7 @@ export default (t, t2) => {
${Object.keys(skills)
- .filter(id => id !== "tool")
+ .filter((id) => id !== "tool")
.map((id) => SkillBlock({ id }, t2))
.join("")}
diff --git a/src/app/components/Dots.js b/src/app/components/Dots.js
index 2807bd3..e7ea2a3 100644
--- a/src/app/components/Dots.js
+++ b/src/app/components/Dots.js
@@ -2,20 +2,22 @@ const radius = 4;
const gap = 16;
export default ({ width = 5, height = 5 } = {}) => {
- const svgWidth = (radius * 2 + gap) * width - gap
- const svgHeight = (radius * 2 + gap) * height - gap
+ const svgWidth = (radius * 2 + gap) * width - gap;
+ const svgHeight = (radius * 2 + gap) * height - gap;
return /*html*/ `
diff --git a/src/app/components/Header.js b/src/app/components/Header.js
index 1035fae..1bf2911 100644
--- a/src/app/components/Header.js
+++ b/src/app/components/Header.js
@@ -1,7 +1,7 @@
import routes from "@/consts/routes";
import MediaIcon from "./MediaIcon";
-const paths = ["/", "/projects", "/about-me"]
+const paths = ["/", "/projects", "/about-me"];
export default (t) => {
return /*html*/ `
diff --git a/src/app/components/Path.js b/src/app/components/Path.js
index fc9a9a0..4104d24 100644
--- a/src/app/components/Path.js
+++ b/src/app/components/Path.js
@@ -1,8 +1,8 @@
export default ({ description }) => {
- return /*html*/`
+ return /*html*/ `
${window.location.pathname.slice(1)}
${description}
- `
-}
\ No newline at end of file
+ `;
+};
diff --git a/src/app/components/Project.js b/src/app/components/Project.js
index 55389f6..064666e 100644
--- a/src/app/components/Project.js
+++ b/src/app/components/Project.js
@@ -6,11 +6,12 @@ import media from "@/consts/media";
function mapLinks(links) {
function map(link) {
let href =
- "https://" + (link === "live" ? "" : websites[link]) + links[link];
-
- if (link === "figma") href = `https://figma.com/community/file/${links[link]}`
- if (link === "github" && links[link].startsWith("/")) href = media.github + links[link]
+ "https://" + (link === "live" ? "" : websites[link]) + links[link];
+ if (link === "figma")
+ href = `https://figma.com/community/file/${links[link]}`;
+ if (link === "github" && links[link].startsWith("/"))
+ href = media.github + links[link];
const className = link === "cached" ? "button__secondary" : "";
const name = `${link[0].toUpperCase()}${link.slice(1)}`;
@@ -22,9 +23,11 @@ function mapLinks(links) {
}
export default ({ id }, t) => {
- const { hasImage, techs: projectTech, links } = projects.find(
- (project) => project.id === id
- );
+ const {
+ hasImage,
+ techs: projectTech,
+ links,
+ } = projects.find((project) => project.id === id);
return /*html*/ `
diff --git a/src/app/components/ProjectList.js b/src/app/components/ProjectList.js
index b850740..fbe04b3 100644
--- a/src/app/components/ProjectList.js
+++ b/src/app/components/ProjectList.js
@@ -1,7 +1,6 @@
import Project from "@/components/Project";
import projects from "@/consts/projects";
-
export default ({ title, filter = () => true, limit = projects.length }, t) => {
return /*html*/ `
${title ? `
${title}
` : ""}
diff --git a/src/app/components/SkillBlock.js b/src/app/components/SkillBlock.js
index e7a1c73..eba0153 100644
--- a/src/app/components/SkillBlock.js
+++ b/src/app/components/SkillBlock.js
@@ -6,7 +6,8 @@ export default ({ id }, t) => {
${t[id]}
- ${(skills[id].map((techIndex) => techs[techIndex]))
+ ${skills[id]
+ .map((techIndex) => techs[techIndex])
.map(
(tech) =>
/*html*/ `- ${tech}
`
diff --git a/src/app/consts/media.js b/src/app/consts/media.js
index 9caed82..47268d2 100644
--- a/src/app/consts/media.js
+++ b/src/app/consts/media.js
@@ -1,4 +1,4 @@
-import proxy from "../proxies/media"
+import proxy from "../proxies/media";
const media = {
discord: {
@@ -17,9 +17,7 @@ const media = {
cssBattle: "elias_dev",
codepen: "elias_dev",
dribble: "Elias_dev",
- email: "elias.devis@protonmail.com"
-
-}
+ email: "elias.devis@protonmail.com",
+};
export default new Proxy(media, proxy);
-
diff --git a/src/app/consts/projects.js b/src/app/consts/projects.js
index 93b641e..09e623c 100644
--- a/src/app/consts/projects.js
+++ b/src/app/consts/projects.js
@@ -7,7 +7,7 @@ const projects = [
links: {
figma: "1198393124994627983",
live: "deplos.github.io",
- github: "Deplos/deplos.github.io"
+ github: "Deplos/deplos.github.io",
},
techs: ["pug", "stylus", "node"],
hasImage: true,
@@ -19,13 +19,13 @@ const projects = [
github: "pixelate-it/pixelbattle-frontend",
},
techs: ["preact", "css", "pixijs", "ts"],
- hasImage: true
+ hasImage: true,
},
{
id: "feedrum",
links: {
github: "Feedrum-Project/feedrum-next",
- figma: "1314605686829534158"
+ figma: "1314605686829534158",
},
techs: ["node", "next", "react", "zod"],
hasImage: true,
@@ -70,7 +70,7 @@ const projects = [
links: {
figma: "1164933568884615740",
github: "/EliasDevis.github.io",
- live: "eliasdevis.github.io"
+ live: "eliasdevis.github.io",
},
hasImage: true,
},
diff --git a/src/app/consts/routes.js b/src/app/consts/routes.js
index 0cf527d..f8c1d37 100644
--- a/src/app/consts/routes.js
+++ b/src/app/consts/routes.js
@@ -1,4 +1,3 @@
-
/**
* @type {import("../../types/Routes").Routes}
*/
@@ -19,9 +18,9 @@ export default {
name: "404",
element: "PageNotFound",
},
-
+
// "/contacts": {
// name: "contacts",
// element: "Contacts",
// },
-};
\ No newline at end of file
+};
diff --git a/src/app/consts/skills.js b/src/app/consts/skills.js
index b19da3c..85ae8d6 100644
--- a/src/app/consts/skills.js
+++ b/src/app/consts/skills.js
@@ -1,7 +1,17 @@
export default {
language: ["js", "ts", "python"],
database: ["sqlite", "postgreSql"],
- other: ["html", "css", "sass", "scss", "less", "stylus", "ejs", "jinja", "pug"],
+ other: [
+ "html",
+ "css",
+ "sass",
+ "scss",
+ "less",
+ "stylus",
+ "ejs",
+ "jinja",
+ "pug",
+ ],
tool: ["vscode", "nvim", "figma", "git"],
- framework: ["react", "next", "gulp", "express", "flask", "quart"]
-}
\ No newline at end of file
+ framework: ["react", "next", "gulp", "express", "flask", "quart"],
+};
diff --git a/src/app/consts/techs.js b/src/app/consts/techs.js
index 0e2d9a0..f27980f 100644
--- a/src/app/consts/techs.js
+++ b/src/app/consts/techs.js
@@ -33,4 +33,4 @@ export default {
deno: "Deno",
pixijs: "PixiJS",
preact: "Preact",
-}
\ No newline at end of file
+};
diff --git a/src/app/consts/websites.js b/src/app/consts/websites.js
index bfbbc92..6f162b9 100644
--- a/src/app/consts/websites.js
+++ b/src/app/consts/websites.js
@@ -9,5 +9,5 @@ export default {
cssBattle: "cssbattle.dev/player/",
codepen: "codepen.io/",
dribble: "dribbble.com/",
- email: "mailto:"
-}
\ No newline at end of file
+ email: "mailto:",
+};
diff --git a/src/app/helpers/loadCssFile.js b/src/app/helpers/loadCssFile.js
deleted file mode 100644
index 860369e..0000000
--- a/src/app/helpers/loadCssFile.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default (pathName) => {
- const link = document.createElement("link")
- link.href = `/css/${pathName}.css`;
- link.rel = "stylesheet"
-
- document.head.appendChild(link)
-}
\ No newline at end of file
diff --git a/src/app/helpers/localeHandler.js b/src/app/helpers/localeHandler.js
index 668e5c1..92f4c2f 100644
--- a/src/app/helpers/localeHandler.js
+++ b/src/app/helpers/localeHandler.js
@@ -1,13 +1,15 @@
-const defaultLocale = "en"
-
+const defaultLocale = "en";
function setLocaleHander() {
const options = document.querySelectorAll(".dropdown__option");
const label = document.querySelector(".dropdown__label");
options.forEach((option) => {
- if (option.innerHTML === localStorage.locale)
- [label.innerHTML, option.innerHTML] = [localStorage.locale, label.innerHTML]
+ if (option.innerHTML === localStorage.locale)
+ [label.innerHTML, option.innerHTML] = [
+ localStorage.locale,
+ label.innerHTML,
+ ];
option.addEventListener("click", () => {
localStorage.locale = option.innerHTML;
@@ -18,10 +20,12 @@ function setLocaleHander() {
}
async function getLocale() {
- const locale = localStorage.locale ?? defaultLocale
+ const locale = localStorage.locale ?? defaultLocale;
- return fetch(`/locales/${locale}.json`).then(res => res.json())
+ // Using Vite's dynamic import for JSON
+ const localeModule = await import(`../../locales/${locale}.json`);
+ return localeModule.default;
}
export default setLocaleHander;
-export { getLocale }
+export { getLocale };
diff --git a/src/app/helpers/replacePath.js b/src/app/helpers/replacePath.js
index c1c8205..8f4add4 100644
--- a/src/app/helpers/replacePath.js
+++ b/src/app/helpers/replacePath.js
@@ -1,4 +1,3 @@
-
// From https://github.com/rafgraph/spa-github-pages
export default async () => {
const l = window.location;
@@ -16,4 +15,4 @@ export default async () => {
l.pathname.slice(0, -1) + decoded + l.hash
);
}
-}
\ No newline at end of file
+};
diff --git a/src/app/helpers/startTitleAnimation.js b/src/app/helpers/startTitleAnimation.js
index 256a095..574eb5a 100644
--- a/src/app/helpers/startTitleAnimation.js
+++ b/src/app/helpers/startTitleAnimation.js
@@ -1,6 +1,5 @@
-
const steps = "/-\\|";
-const FPS = 2
+const FPS = 2;
const frameInterval = 1000 / FPS;
let step = 0;
@@ -19,4 +18,4 @@ export default (pathName) => {
window.requestAnimationFrame(animation);
}
-}
\ No newline at end of file
+};
diff --git a/src/app/index.js b/src/app/index.js
index 4b0f79a..1aa44a3 100644
--- a/src/app/index.js
+++ b/src/app/index.js
@@ -1,8 +1,6 @@
-import Layout from "./views/Layout";
import routes from "./consts/routes";
import startTitleAnimation from "./helpers/startTitleAnimation";
import localeHandler from "./helpers/localeHandler";
-import loadCssFile from "./helpers/loadCssFile";
import replacePath from "./helpers/replacePath";
import "styles/styles.sass";
@@ -11,13 +9,12 @@ const rootId = "root";
async function render() {
const path = routes[window.location.pathname] ?? routes["/404"];
- loadCssFile(path.name);
+ const Layout = (await import("./views/Layout.js")).default;
+
startTitleAnimation(path.name);
document.getElementById(rootId).innerHTML = await Layout(
- (
- await import(`./views/${path.element}`)
- ).default,
+ (await import(`./views/${path.element}.js`)).default,
path
);
}
diff --git a/src/app/proxies/media.js b/src/app/proxies/media.js
index 9a685b4..25c5362 100644
--- a/src/app/proxies/media.js
+++ b/src/app/proxies/media.js
@@ -1,14 +1,13 @@
-import websites from "../consts/websites"
-
+import websites from "../consts/websites";
export default {
get(target, name) {
- if (name === "emailRaw")
- return target.email
-
- if (name === "discord") return `https://${websites.discord}${target.discord.id}`
- if (name === "discordTag") return target.discord.tag
+ if (name === "emailRaw") return target.email;
+
+ if (name === "discord")
+ return `https://${websites.discord}${target.discord.id}`;
+ if (name === "discordTag") return target.discord.tag;
- return `${name === "email" ? "" : "https://"}${websites[name] ?? ""}${target[name]}`
- }
-}
\ No newline at end of file
+ return `${name === "email" ? "" : "https://"}${websites[name] ?? ""}${target[name]}`;
+ },
+};
diff --git a/src/app/spaHandler.js b/src/app/spaHandler.js
deleted file mode 100644
index e1f7abe..0000000
--- a/src/app/spaHandler.js
+++ /dev/null
@@ -1,27 +0,0 @@
-
-// From https://github.com/rafgraph/spa-github-pages
-
-let pathSegmentsToKeep = 0;
-let l = window.location;
-
-l.replace(
- l.protocol +
- "//" +
- l.hostname +
- (l.port ? ":" + l.port : "") +
- l.pathname
- .split("/")
- .slice(0, 1 + pathSegmentsToKeep)
- .join("/") +
- "/?/" +
- l.pathname
- .slice(1)
- .split("/")
- .slice(pathSegmentsToKeep)
- .join("/")
- .replace(/&/g, "~and~") +
- (l.search
- ? "&" + l.search.slice(1).replace(/&/g, "~and~")
- : "") +
- l.hash
-);
\ No newline at end of file
diff --git a/src/app/views/About.js b/src/app/views/About.js
index 0a51f5c..ea6771e 100644
--- a/src/app/views/About.js
+++ b/src/app/views/About.js
@@ -1,9 +1,9 @@
import Path from "@/components/Path.js";
-import About from "@/blocks/about/About.js"
+import About from "@/blocks/about/About.js";
import Skills from "@/blocks/about/Skills.js";
import Facts from "@/blocks/about/Facts.js";
-import "styles/pages/about.sass"
+import "styles/pages/about.sass";
export default (t, locale) => {
return /*html*/ `
diff --git a/src/app/views/Contacts.js b/src/app/views/Contacts.js
index a73a30e..387f187 100644
--- a/src/app/views/Contacts.js
+++ b/src/app/views/Contacts.js
@@ -1,6 +1,5 @@
import Path from "@/components/Path.js";
-
export default (t) => {
return /*html*/ `${Path({ description: t.description })}`;
};
diff --git a/src/app/views/Home.js b/src/app/views/Home.js
index 2b4fb42..f19ebde 100644
--- a/src/app/views/Home.js
+++ b/src/app/views/Home.js
@@ -5,11 +5,10 @@ import Skills from "@/blocks/home/Skills.js";
import About from "@/blocks/home/About.js";
import Contacts from "@/blocks/home/Contacts.js";
-import "styles/pages/home.sass"
-
+import "styles/pages/home.sass";
export default (t, locale) => {
- return /*html*/`
+ return /*html*/ `
${Hero(t.hero)}
${Quote(t.quote)}
${Projects(t.projects, locale.projects)}
diff --git a/src/app/views/Layout.js b/src/app/views/Layout.js
index 3bf16a6..8f9633b 100644
--- a/src/app/views/Layout.js
+++ b/src/app/views/Layout.js
@@ -3,7 +3,7 @@ import Header from "@/components/Header.js";
import { getLocale } from "@/helpers/localeHandler.js";
export default async (content, path) => {
- const locale = await getLocale()
+ const locale = await getLocale();
return /*html*/ `
${Header(locale.header)}
diff --git a/src/app/views/Projects.js b/src/app/views/Projects.js
index cbb4278..7f247b3 100644
--- a/src/app/views/Projects.js
+++ b/src/app/views/Projects.js
@@ -1,7 +1,7 @@
import Path from "../components/Path.js";
import ProjectList from "../components/ProjectList.js";
-import "styles/pages/projects.sass"
+import "styles/pages/projects.sass";
export default (t, t2) => {
return /*html*/ `
diff --git a/src/assets/fonts/fira-code/FiraCode-Bold.ttf b/src/assets/fonts/fira-code/FiraCode-Bold.ttf
new file mode 100644
index 0000000..9a3d65f
Binary files /dev/null and b/src/assets/fonts/fira-code/FiraCode-Bold.ttf differ
diff --git a/src/assets/fonts/fira-code/FiraCode-Bold.woff b/src/assets/fonts/fira-code/FiraCode-Bold.woff
deleted file mode 100644
index 74e57c4..0000000
Binary files a/src/assets/fonts/fira-code/FiraCode-Bold.woff and /dev/null differ
diff --git a/src/assets/fonts/fira-code/FiraCode-Light.ttf b/src/assets/fonts/fira-code/FiraCode-Light.ttf
new file mode 100644
index 0000000..87ff012
Binary files /dev/null and b/src/assets/fonts/fira-code/FiraCode-Light.ttf differ
diff --git a/src/assets/fonts/fira-code/FiraCode-Light.woff b/src/assets/fonts/fira-code/FiraCode-Light.woff
deleted file mode 100644
index 1c1ebc6..0000000
Binary files a/src/assets/fonts/fira-code/FiraCode-Light.woff and /dev/null differ
diff --git a/src/assets/fonts/fira-code/FiraCode-Medium.ttf b/src/assets/fonts/fira-code/FiraCode-Medium.ttf
new file mode 100644
index 0000000..7a9c38e
Binary files /dev/null and b/src/assets/fonts/fira-code/FiraCode-Medium.ttf differ
diff --git a/src/assets/fonts/fira-code/FiraCode-Medium.woff b/src/assets/fonts/fira-code/FiraCode-Medium.woff
deleted file mode 100644
index 19251b0..0000000
Binary files a/src/assets/fonts/fira-code/FiraCode-Medium.woff and /dev/null differ
diff --git a/src/assets/fonts/fira-code/FiraCode-Regular.ttf b/src/assets/fonts/fira-code/FiraCode-Regular.ttf
new file mode 100644
index 0000000..b8a44d2
Binary files /dev/null and b/src/assets/fonts/fira-code/FiraCode-Regular.ttf differ
diff --git a/src/assets/fonts/fira-code/FiraCode-Regular.woff b/src/assets/fonts/fira-code/FiraCode-Regular.woff
deleted file mode 100644
index 8816b69..0000000
Binary files a/src/assets/fonts/fira-code/FiraCode-Regular.woff and /dev/null differ
diff --git a/src/assets/fonts/fira-code/FiraCode-SemiBold.ttf b/src/assets/fonts/fira-code/FiraCode-SemiBold.ttf
new file mode 100644
index 0000000..45cfed7
Binary files /dev/null and b/src/assets/fonts/fira-code/FiraCode-SemiBold.ttf differ
diff --git a/src/assets/fonts/fira-code/FiraCode-SemiBold.woff b/src/assets/fonts/fira-code/FiraCode-SemiBold.woff
deleted file mode 100644
index 97857db..0000000
Binary files a/src/assets/fonts/fira-code/FiraCode-SemiBold.woff and /dev/null differ
diff --git a/src/assets/fonts/fira-code/FiraCode-VF.woff b/src/assets/fonts/fira-code/FiraCode-VF.woff
deleted file mode 100644
index c3407ed..0000000
Binary files a/src/assets/fonts/fira-code/FiraCode-VF.woff and /dev/null differ
diff --git a/src/assets/styles/default/font.sass b/src/assets/styles/default/font.sass
deleted file mode 100644
index 646a874..0000000
--- a/src/assets/styles/default/font.sass
+++ /dev/null
@@ -1,11 +0,0 @@
-
-$fonts: ("Light": 300,"Regular": 400,"Medium": 500,"SemiBold": 600,"Bold": 700)
-$format: "woff"
-
-@each $name, $weight in $fonts
- @font-face
- font:
- family: "Fira Code"
- weight: $weight
- style: normal
- src: url("fonts/FiraCode-#{$name}.#{$format}") format($format)
diff --git a/src/assets/styles/default/variables.scss b/src/assets/styles/default/variables.scss
index 2ca19a1..5fd888d 100644
--- a/src/assets/styles/default/variables.scss
+++ b/src/assets/styles/default/variables.scss
@@ -7,9 +7,6 @@ $colors: (
white: 0 0% 100%,
);
-
$desktopScreen: 1024px;
$tabletScreen: 768px;
$mobileScreen: 500px;
-
-
diff --git a/src/assets/styles/pages/about.sass b/src/assets/styles/pages/about.sass
deleted file mode 100644
index f38e62e..0000000
--- a/src/assets/styles/pages/about.sass
+++ /dev/null
@@ -1,6 +0,0 @@
-@import ../default/variables
-
-@import ../components/skillBlock
-@import ../blocks/about/about
-@import ../blocks/about/skills
-@import ../blocks/about/facts
\ No newline at end of file
diff --git a/src/assets/styles/pages/home.sass b/src/assets/styles/pages/home.sass
deleted file mode 100644
index e7454c2..0000000
--- a/src/assets/styles/pages/home.sass
+++ /dev/null
@@ -1,11 +0,0 @@
-@import ../default/variables
-
-@import ../blocks/home/about
-@import ../blocks/home/contacts
-@import ../blocks/home/hero
-@import ../blocks/home/projects
-@import ../blocks/home/quote
-@import ../blocks/home/skills
-
-@import ../components/project
-@import ../components/skillBlock
diff --git a/src/assets/styles/pages/projects.sass b/src/assets/styles/pages/projects.sass
deleted file mode 100644
index 7020524..0000000
--- a/src/assets/styles/pages/projects.sass
+++ /dev/null
@@ -1,4 +0,0 @@
-
-@import ../default/variables
-
-@import ../components/project
\ No newline at end of file
diff --git a/src/assets/styles/styles.sass b/src/assets/styles/styles.sass
deleted file mode 100644
index b57088b..0000000
--- a/src/assets/styles/styles.sass
+++ /dev/null
@@ -1,18 +0,0 @@
-@import default/font
-@import default/variables
-@import default/reset
-@import default/default
-
-@import components/header
-@import components/footer
-@import components/button
-@import components/dropdown
-@import components/mediaIcon
-@import components/path
-@import components/h2
-@import components/container
-@import components/logo
-
-:root
- @each $key, $value in $colors
- --#{$key}: hsl(#{$value})
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..eeaf632
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Elias Portfolio
+
+
+
+
+
+
diff --git a/src/assets/locales/en.json b/src/locales/en.json
similarity index 98%
rename from src/assets/locales/en.json
rename to src/locales/en.json
index e3788a1..5323d6c 100644
--- a/src/assets/locales/en.json
+++ b/src/locales/en.json
@@ -126,9 +126,9 @@
"facts": {
"title": "fun-facts",
"list": [
- "I like winter more than summer",
+ "I like winter more than summer",
"I often bike with my friends",
- "I like pizza and pasta",
+ "I like pizza and pasta",
"My favorite movie is The Green Mile"
]
}
@@ -137,4 +137,4 @@
"description": "How to contact me"
}
}
-}
\ No newline at end of file
+}
diff --git a/src/assets/locales/ru.json b/src/locales/ru.json
similarity index 98%
rename from src/assets/locales/ru.json
rename to src/locales/ru.json
index 5cb5211..c14d7bf 100644
--- a/src/assets/locales/ru.json
+++ b/src/locales/ru.json
@@ -110,7 +110,6 @@
"decent": "неплохие",
"small": "маленькие",
"inProgress": "недоделанные"
-
},
"about": {
"description": "Кто я такой",
@@ -127,9 +126,9 @@
"facts": {
"title": "факты-обо-мне",
"list": [
- "Я очень люблю зиму",
+ "Я очень люблю зиму",
"Я часто катаюсь на велосипеде с моими друзьями",
- "Люблю пиццу и пасту",
+ "Люблю пиццу и пасту",
"Мой любимый фильм это Зеленая Миля"
]
}
@@ -138,4 +137,4 @@
"description": "Как со мной можно связаться"
}
}
-}
\ No newline at end of file
+}
diff --git a/src/assets/locales/ua.json b/src/locales/ua.json
similarity index 98%
rename from src/assets/locales/ua.json
rename to src/locales/ua.json
index 9fbe981..e6e24f4 100644
--- a/src/assets/locales/ua.json
+++ b/src/locales/ua.json
@@ -110,7 +110,6 @@
"decent": "непогані",
"small": "маленькі",
"inProgress": "недороблені"
-
},
"about": {
"description": "Хто я такий",
@@ -127,9 +126,9 @@
"facts": {
"title": "факти-про-мене",
"list": [
- "Я дуже полюбляю зиму",
+ "Я дуже полюбляю зиму",
"Я часто їзджу на велосипеді з моїми друзями",
- "Люблю піцу та пасту",
+ "Люблю піцу та пасту",
"Мій улюблений фільм це Зелена миля"
]
}
@@ -138,4 +137,4 @@
"description": "Як можно зі мною зв'язатися"
}
}
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/blocks/about/about.sass b/src/styles/blocks/about/about.sass
similarity index 100%
rename from src/assets/styles/blocks/about/about.sass
rename to src/styles/blocks/about/about.sass
diff --git a/src/assets/styles/blocks/about/facts.sass b/src/styles/blocks/about/facts.sass
similarity index 100%
rename from src/assets/styles/blocks/about/facts.sass
rename to src/styles/blocks/about/facts.sass
diff --git a/src/assets/styles/blocks/about/skills.sass b/src/styles/blocks/about/skills.sass
similarity index 100%
rename from src/assets/styles/blocks/about/skills.sass
rename to src/styles/blocks/about/skills.sass
diff --git a/src/assets/styles/blocks/home/about.sass b/src/styles/blocks/home/about.sass
similarity index 100%
rename from src/assets/styles/blocks/home/about.sass
rename to src/styles/blocks/home/about.sass
diff --git a/src/assets/styles/blocks/home/contacts.sass b/src/styles/blocks/home/contacts.sass
similarity index 100%
rename from src/assets/styles/blocks/home/contacts.sass
rename to src/styles/blocks/home/contacts.sass
diff --git a/src/assets/styles/blocks/home/hero.sass b/src/styles/blocks/home/hero.sass
similarity index 100%
rename from src/assets/styles/blocks/home/hero.sass
rename to src/styles/blocks/home/hero.sass
diff --git a/src/assets/styles/blocks/home/projects.sass b/src/styles/blocks/home/projects.sass
similarity index 100%
rename from src/assets/styles/blocks/home/projects.sass
rename to src/styles/blocks/home/projects.sass
diff --git a/src/assets/styles/blocks/home/quote.sass b/src/styles/blocks/home/quote.sass
similarity index 100%
rename from src/assets/styles/blocks/home/quote.sass
rename to src/styles/blocks/home/quote.sass
diff --git a/src/assets/styles/blocks/home/skills.sass b/src/styles/blocks/home/skills.sass
similarity index 95%
rename from src/assets/styles/blocks/home/skills.sass
rename to src/styles/blocks/home/skills.sass
index 5d397ac..0c55ac2 100644
--- a/src/assets/styles/blocks/home/skills.sass
+++ b/src/styles/blocks/home/skills.sass
@@ -1,3 +1,5 @@
+@use '../../default/variables' as *
+
.skills
width: 100%
diff --git a/src/styles/components/_index.sass b/src/styles/components/_index.sass
new file mode 100644
index 0000000..5a43175
--- /dev/null
+++ b/src/styles/components/_index.sass
@@ -0,0 +1,11 @@
+@forward 'header'
+@forward 'footer'
+@forward 'button'
+@forward 'dropdown'
+@forward 'mediaIcon'
+@forward 'path'
+@forward 'h2'
+@forward 'container'
+@forward 'logo'
+@forward 'skillBlock'
+@forward 'project'
diff --git a/src/assets/styles/components/button.sass b/src/styles/components/button.sass
similarity index 100%
rename from src/assets/styles/components/button.sass
rename to src/styles/components/button.sass
diff --git a/src/assets/styles/components/container.sass b/src/styles/components/container.sass
similarity index 89%
rename from src/assets/styles/components/container.sass
rename to src/styles/components/container.sass
index 2b08b64..347b27c 100644
--- a/src/assets/styles/components/container.sass
+++ b/src/styles/components/container.sass
@@ -1,5 +1,6 @@
-.container
+@use '../default/variables' as *
+.container
max-width: $desktopScreen
margin: 0 auto
position: relative
diff --git a/src/assets/styles/components/dropdown.sass b/src/styles/components/dropdown.sass
similarity index 100%
rename from src/assets/styles/components/dropdown.sass
rename to src/styles/components/dropdown.sass
diff --git a/src/assets/styles/components/footer.sass b/src/styles/components/footer.sass
similarity index 100%
rename from src/assets/styles/components/footer.sass
rename to src/styles/components/footer.sass
diff --git a/src/assets/styles/components/h2.sass b/src/styles/components/h2.sass
similarity index 100%
rename from src/assets/styles/components/h2.sass
rename to src/styles/components/h2.sass
diff --git a/src/assets/styles/components/header.sass b/src/styles/components/header.sass
similarity index 99%
rename from src/assets/styles/components/header.sass
rename to src/styles/components/header.sass
index 769d1b4..31ff12e 100644
--- a/src/assets/styles/components/header.sass
+++ b/src/styles/components/header.sass
@@ -1,3 +1,4 @@
+@use '../default/variables' as *
$screen: 768px
diff --git a/src/assets/styles/components/logo.sass b/src/styles/components/logo.sass
similarity index 100%
rename from src/assets/styles/components/logo.sass
rename to src/styles/components/logo.sass
diff --git a/src/assets/styles/components/mediaIcon.sass b/src/styles/components/mediaIcon.sass
similarity index 100%
rename from src/assets/styles/components/mediaIcon.sass
rename to src/styles/components/mediaIcon.sass
diff --git a/src/assets/styles/components/path.sass b/src/styles/components/path.sass
similarity index 100%
rename from src/assets/styles/components/path.sass
rename to src/styles/components/path.sass
diff --git a/src/assets/styles/components/project.sass b/src/styles/components/project.sass
similarity index 64%
rename from src/assets/styles/components/project.sass
rename to src/styles/components/project.sass
index 596cd9a..a8983a8 100644
--- a/src/assets/styles/components/project.sass
+++ b/src/styles/components/project.sass
@@ -1,6 +1,21 @@
+@use '../default/variables' as *
+
.project
+ display: grid
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
+ gap: 16px
+ align-items: start
+ margin-top: 48px
border: 1px solid var(--gray)
+ @media (max-width: $desktopScreen)
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
+ &
+ gap: 16px
+ align-items: start
+ margin-top: 48px
+
+
&__links
display: flex
flex-wrap: wrap
@@ -14,9 +29,8 @@
padding: 16px
&__name
- font:
- size: 24px
- weight: 500
+ font-size: 24px
+ font-weight: 500
&__description
color: var(--gray)
@@ -33,12 +47,10 @@
.project-list
width: 100%
display: grid
-
grid-template-columns: repeat(3, 1fr)
-
- @media (max-width: $desktopScreen)
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
-
gap: 16px
align-items: start
margin-top: 48px
+
+ @media (max-width: $desktopScreen)
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
diff --git a/src/assets/styles/components/skillBlock.sass b/src/styles/components/skillBlock.sass
similarity index 100%
rename from src/assets/styles/components/skillBlock.sass
rename to src/styles/components/skillBlock.sass
diff --git a/src/styles/default/_index.sass b/src/styles/default/_index.sass
new file mode 100644
index 0000000..1fe8133
--- /dev/null
+++ b/src/styles/default/_index.sass
@@ -0,0 +1,4 @@
+@forward 'variables'
+@forward 'font'
+@forward 'reset'
+@forward 'default'
\ No newline at end of file
diff --git a/src/assets/styles/default/default.sass b/src/styles/default/default.sass
similarity index 100%
rename from src/assets/styles/default/default.sass
rename to src/styles/default/default.sass
diff --git a/src/styles/default/font.sass b/src/styles/default/font.sass
new file mode 100644
index 0000000..04562d8
--- /dev/null
+++ b/src/styles/default/font.sass
@@ -0,0 +1,10 @@
+$fonts: ("Light": 300, "Regular": 400, "Medium": 500, "SemiBold": 600, "Bold": 700)
+$format: "ttf"
+
+@each $name, $weight in $fonts
+ @font-face
+ font:
+ family: "Fira Code"
+ weight: $weight
+ style: normal
+ src: url("/fonts/FiraCode-#{$name}.#{$format}") format($format)
diff --git a/src/assets/styles/default/reset.sass b/src/styles/default/reset.sass
similarity index 100%
rename from src/assets/styles/default/reset.sass
rename to src/styles/default/reset.sass
diff --git a/src/styles/default/variables.scss b/src/styles/default/variables.scss
new file mode 100644
index 0000000..cd4bad0
--- /dev/null
+++ b/src/styles/default/variables.scss
@@ -0,0 +1,12 @@
+$colors: (
+ "primary": 287 60% 65%,
+ "primary-op": 287 60% 65% / 0.1,
+ "gray": 219 14% 71%,
+ "gray-op": 219 14% 71% / 0.1,
+ "background": 218 12% 18%,
+ "white": 0 0% 100%,
+);
+
+$desktopScreen: 1024px;
+$tabletScreen: 768px;
+$mobileScreen: 500px;
diff --git a/src/styles/pages/about.sass b/src/styles/pages/about.sass
new file mode 100644
index 0000000..828ac2d
--- /dev/null
+++ b/src/styles/pages/about.sass
@@ -0,0 +1,6 @@
+@use "../default/variables"
+
+@use "../components/skillBlock"
+@use "../blocks/about/about"
+@use "../blocks/about/skills"
+@use "../blocks/about/facts"
\ No newline at end of file
diff --git a/src/styles/pages/home.sass b/src/styles/pages/home.sass
new file mode 100644
index 0000000..1ff11a2
--- /dev/null
+++ b/src/styles/pages/home.sass
@@ -0,0 +1,10 @@
+@use '../default/variables'
+@use '../blocks/home/hero'
+@use '../blocks/home/about'
+@use '../blocks/home/contacts'
+@use '../blocks/home/projects'
+@use '../blocks/home/quote'
+@use '../blocks/home/skills'
+
+@use "../components/skillBlock"
+@use "../components/project"
diff --git a/src/styles/pages/projects.sass b/src/styles/pages/projects.sass
new file mode 100644
index 0000000..18bf1b3
--- /dev/null
+++ b/src/styles/pages/projects.sass
@@ -0,0 +1,4 @@
+
+@use "../default/variables"
+
+@use "../components/project"
\ No newline at end of file
diff --git a/src/styles/styles.sass b/src/styles/styles.sass
new file mode 100644
index 0000000..ce32014
--- /dev/null
+++ b/src/styles/styles.sass
@@ -0,0 +1,6 @@
+@use 'default' as *
+@use 'components' as *
+
+:root
+ @each $key, $value in $colors
+ --#{$key}: hsl(#{$value})
diff --git a/src/templates/404.ejs b/src/templates/404.ejs
deleted file mode 100644
index 8fa533c..0000000
--- a/src/templates/404.ejs
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/templates/index.ejs b/src/templates/index.ejs
deleted file mode 100644
index e913542..0000000
--- a/src/templates/index.ejs
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/types/Project.d.ts b/src/types/Project.d.ts
index 4408d06..e982233 100644
--- a/src/types/Project.d.ts
+++ b/src/types/Project.d.ts
@@ -3,10 +3,10 @@ export interface Project {
links: {
live?: `${string}.${string}`;
figma?: string;
- github?: `/${string}` | `${string}/${string}`
+ github?: `/${string}` | `${string}/${string}`;
};
techs: string[];
hasImage?: boolean;
isSmall?: boolean;
- isInProgress?: boolean
-}
\ No newline at end of file
+ isInProgress?: boolean;
+}
diff --git a/src/types/Routes.d.ts b/src/types/Routes.d.ts
index 28de137..495b009 100644
--- a/src/types/Routes.d.ts
+++ b/src/types/Routes.d.ts
@@ -2,5 +2,5 @@ export interface Routes {
[key: `/${string}`]: {
name: string;
element: string;
- }
-}
\ No newline at end of file
+ };
+}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..cdc1c6a
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,23 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+
+export default defineConfig({
+ root: "src",
+ build: {
+ outDir: "../dist",
+ emptyOutDir: true,
+ },
+ resolve: {
+ alias: {
+ "@": resolve(__dirname, "src/app"),
+ styles: resolve(__dirname, "src/styles"),
+ },
+ },
+ publicDir: resolve(__dirname, "src/assets"),
+ server: {
+ port: 9000,
+ },
+});
diff --git a/webpack.config.js b/webpack.config.js
deleted file mode 100644
index 754af17..0000000
--- a/webpack.config.js
+++ /dev/null
@@ -1,117 +0,0 @@
-const { resolve, join } = require("path");
-const plugins = {
- html: require("html-webpack-plugin"),
- css: require("mini-css-extract-plugin"),
- copy: require("copy-webpack-plugin"),
- json: require("json-minimizer-webpack-plugin")
-}
-
-module.exports = {
- entry: {
- index: "./src/app/index.js",
- spaHandler: "./src/app/spaHandler.js",
- },
- output: {
- path: resolve(__dirname, "dist"),
- filename: "js/[name].js",
- chunkFilename: "js/[chunkhash].js"
- },
- mode: "development",
- plugins: [
- new plugins.html({
- template: "src/templates/index.ejs",
- filename: "index.html",
- excludeChunks: ["spaHandler"],
- title: "Elias Portfolio",
- 'meta': {
- 'viewport': 'width=device-width, initial-scale=1, shrink-to-fit=no',
- 'theme-color': '#C778DD',
- }
- }),
- new plugins.html({
- template: "src/templates/404.ejs",
- filename: "404.html",
- chunks: ["spaHandler"]
- }),
- new plugins.css({
- filename: "css/[name].css",
- chunkFilename: (pathData) => {
- if (typeof pathData.chunk.id === "number") return "css/[name].css"
- const name = pathData.chunk.id.split("_").at(-2).toLowerCase()
-
- return `css/${name}.css`
- }
- }),
- new plugins.copy({
- patterns: [
- { from: "src/assets/images", to: "images" },
- { from: "src/assets/locales", to: "locales" },
- ],
- })
- ],
- module: {
- rules: [
- {
- test: /\.(sass)$/,
- use: [plugins.css.loader, "css-loader", "sass-loader"],
- include: [
- join(__dirname, "src/assets/styles")
- ]
- },
- {
- test: /\.json$/i,
- type: "asset/resource",
- include: [
- join(__dirname, "src/assets/locales")
- ]
- },
-
- {
- test: /\.(png|svg|jpe?g|gif)$/i,
- include: [
- join(__dirname, "src/assets/images")
- ],
- type: "asset/resource",
- generator: {
- filename: "images/[contenthash][ext]",
- }
- },
- {
- test: /\.(woff(2)?|eot|(o|t)tf)$/i,
- type: "asset/resource",
- include: [
- join(__dirname, "src/assets/fonts/")
- ],
- generator: {
- filename: "fonts/[contenthash][ext]",
- }
- },
- ],
- },
- devServer: {
- static: {
- directory: join(__dirname, 'dist'),
- },
- port: 9000,
- historyApiFallback: {
- rewrites: [
- { from: /./, to: "/404.html" },
- ],
- }
- },
-
- resolve: {
- alias: {
- "@": resolve(__dirname, "src/app/"),
- styles: resolve(__dirname, "src/assets/styles/"),
- fonts: resolve(__dirname, "src/assets/fonts/fira-code/")
- },
- },
- optimization: {
- minimize: true,
- minimizer: [
- new plugins.json(),
- ],
- },
-
-};
