+ {React.cloneElement(img, { className: "rounded-2xl h-auto max-h-44" })}
+
+
+
+
+
+
+ );
+};
+
+export default ProjectNode;
diff --git a/src/components/projects/Projects.tsx b/src/components/projects/Projects.tsx
new file mode 100644
index 0000000..2047b55
--- /dev/null
+++ b/src/components/projects/Projects.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { IoMdHome } from "react-icons/io";
+import { Link } from 'react-router-dom';
+
+import ProjectNode from '../project-node/ProjectNode';
+import octokit from "../../assets/octokit.png";
+import osc from "../../assets/osc.png";
+import highlanders from "../../assets/highlanders.png";
+import trello from "../../assets/trello.png";
+
+const Projects = () => {
+ const projects: { [name: string]: { description: string, url: string, img: React.ReactElement{name}
+{description}
+
+
+
+ );
+};
+
+export default Projects;
diff --git a/src/components/stars/StarsContainer.tsx b/src/components/stars/StarsContainer.tsx
new file mode 100644
index 0000000..34635ba
--- /dev/null
+++ b/src/components/stars/StarsContainer.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const StarsContainer = () => {
+ const starClass = "absolute top-0 left-0 w-1 h-1 bg-white rounded-[50%] shadow-star";
+
+ return (
+ <>
+
+
+
+ My projects
+ + +
+
+
+
+ {Object.keys(projects).map(key => {
+ const project = projects[key];
+ return
+
+ {Array(10).fill(true).map((_, i) => )}
+
+
+ );
+};
+
+export default StarsContainer;
diff --git a/src/index.tsx b/src/index.tsx
index 708d3cc..67053b5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,7 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
+import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
@@ -8,6 +9,8 @@ const root = ReactDOM.createRoot(
root.render(
+
+ );
+};
+
+export default MainPage;
diff --git a/src/pages/projects/Projects.tsx b/src/pages/projects/Projects.tsx
new file mode 100644
index 0000000..af636b2
--- /dev/null
+++ b/src/pages/projects/Projects.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Projects from '../../components/projects/Projects';
+
+const ProjectsPage = () => {
+ return (
+ <>
+
+
+
+ );
+};
+
+export default ProjectsPage;
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..879c643
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,22 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ "./src/**/*.{html,js,ts,tsx,jsx}"
+ ],
+ theme: {
+ extend: {
+ colors: {
+ "primary": "#141414",
+ },
+ fontFamily: {
+ "alphacentauri": ["AlphaCentauri"],
+ },
+ boxShadow: {
+ "star": "0 0 0 4px rgba(255, 255, 255, 0.1), 0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 1)",
+ },
+ },
+ },
+ plugins: [
+ require("tailwindcss-animation-delay"),
+ ],
+}