-
diff --git a/src/components/GHRepoCard.tsx b/src/components/GHRepoCard.tsx
index 61bca90..0458294 100644
--- a/src/components/GHRepoCard.tsx
+++ b/src/components/GHRepoCard.tsx
@@ -9,13 +9,13 @@ function GHRepoCard({ data }: IProps ) {
let tooltip_id = "tooltip-" + data.name + data.language
return <>
- {data?.start_year} - {data?.end_year} {current_year < data?.end_year!! ? (expected) : <>}
+ {data?.start_year} - {data?.end_year} {current_year < data?.end_year!! ? (expected) : <>}
{data?.title_description}
{data?.school}
-
{
data?.grade ?
- Grade: {data?.grade}/{data.max_grade} {data?.withHonours ? with honours : <>}
:
+ Grade: {data?.grade}/{data.max_grade} {data?.withHonours ? with honours : <>}
:
<>
}
{/* 
*/}
diff --git a/src/components/LayoutComponents/DefaultLayout.tsx b/src/components/LayoutComponents/DefaultLayout.tsx
new file mode 100644
index 0000000..2bf3508
--- /dev/null
+++ b/src/components/LayoutComponents/DefaultLayout.tsx
@@ -0,0 +1,16 @@
+import Footer from "./Footer";
+import Navbar from "./Navbar";
+
+type Props = {
+ children: string | JSX.Element | JSX.Element[]
+}
+
+export default function DefaultLayout({ children }: Props) {
+ return <>
+
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
index bb697d0..26b8976 100644
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -5,7 +5,7 @@ interface IProps {
project_info?: ProjectDetails
}
-const month_conversion: { [nr: string]: string } = {
+const monthConversion: { [nr: string]: string } = {
"01": "January",
"02": "February",
"03": "March",
@@ -24,8 +24,8 @@ const month_conversion: { [nr: string]: string } = {
export default function ProjectCard( { project_info }: IProps)
{
- let start_month: string = month_conversion[project_info?.start_date.split("/")[0]!!]
- let end_month: string | undefined = month_conversion[project_info?.end_date?.split("/")[0]!!]
+ let start_month: string = monthConversion[project_info?.start_date.split("/")[0]!!]
+ let end_month: string | undefined = monthConversion[project_info?.end_date?.split("/")[0]!!]
let start_year: string = project_info?.start_date.split("/")[1]!!
let end_year: string | undefined = project_info?.start_date.split("/")[1]!!
@@ -36,14 +36,14 @@ export default function ProjectCard( { project_info }: IProps)
let img_id: string = project_info?.name.toLowerCase().replace(" ", "_")!!
return <>
- Made by {data.author}
- by {data.stars} people
{data.stars === 0 ? —{" you can be the first!"} : <>}
by {data.stars} people
{data.stars === 0 ? —{" you can be the first!"} : <>}
+ { children }
+
+
+
+}
\ No newline at end of file
diff --git a/src/components/Footer.module.css b/src/components/LayoutComponents/Footer.module.css
similarity index 100%
rename from src/components/Footer.module.css
rename to src/components/LayoutComponents/Footer.module.css
diff --git a/src/components/Footer.tsx b/src/components/LayoutComponents/Footer.tsx
similarity index 68%
rename from src/components/Footer.tsx
rename to src/components/LayoutComponents/Footer.tsx
index 12ef22d..86cdee3 100644
--- a/src/components/Footer.tsx
+++ b/src/components/LayoutComponents/Footer.tsx
@@ -3,7 +3,7 @@ import styles from './Footer.module.css'
function Footer()
{
return <>
-
+
{ /* Image container */}
{!project_info?.is_source_available ? : <>} <{project_info?.name}/>
-{project_info?.company} @ {project_info?.location} - from {start_month} {start_year} {end_year ? <>{"to " + end_month + " " + end_year} : <>— ongoing}
+{project_info?.company} @ {project_info?.location} - from {start_month} {start_year} {end_year ? <>{"to " + end_month + " " + end_year} : <>— ongoing}
{project_info?.description}
diff --git a/src/components/ContactCard.tsx b/src/components/SocialCard.tsx
similarity index 58%
rename from src/components/ContactCard.tsx
rename to src/components/SocialCard.tsx
index 7930461..bd5a085 100644
--- a/src/components/ContactCard.tsx
+++ b/src/components/SocialCard.tsx
@@ -1,13 +1,13 @@
-function ContactCard(id: number, tooltipText: string, link: string, size: any, path: string)
+function SocialCard(id: number, tooltipText: string, link: string, size: any, path: string)
{
return <>
-
+
{tooltipText}
@@ -17,4 +17,4 @@ function ContactCard(id: number, tooltipText: string, link: string, size: any, p
}
-export default ContactCard
\ No newline at end of file
+export default SocialCard
\ No newline at end of file
diff --git a/src/components/ThemeSwitcher.module.css b/src/components/ThemeSwitcher.module.css
new file mode 100644
index 0000000..bc56057
--- /dev/null
+++ b/src/components/ThemeSwitcher.module.css
@@ -0,0 +1,71 @@
+/* The switch - the box around the slider */
+.switch {
+ position: relative !important;
+ display: inline-block !important;
+ width: 60px;
+ height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+ opacity: 0 !important;
+ width: 0 !important;
+ height: 0 !important;
+}
+
+/* The slider */
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+}
+
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 40px;
+ width: 40px;
+ left: 0px;
+ bottom: 4px;
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+ box-shadow: 0 0px 15px #2020203d;
+ background: white url('https://i.ibb.co/FxzBYR9/night.png');
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
+input:checked+.slider {
+ background-color: #2196f3;
+}
+
+input:focus+.slider {
+ box-shadow: 0 0 1px #2196f3;
+}
+
+input:checked+.slider:before {
+ -webkit-transform: translateX(24px);
+ -ms-transform: translateX(24px);
+ transform: translateX(24px);
+ background: white url('https://i.ibb.co/7JfqXxB/sunny.png');
+ background-repeat: no-repeat !important;
+ background-position: center !important;
+}
+
+/* Rounded sliders */
+.slider.round {
+ border-radius: 34px !important;
+}
+
+.slider.round:before {
+ border-radius: 50% !important;
+}
\ No newline at end of file
diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
index 0f033a9..6bf3650 100644
--- a/src/components/ThemeSwitcher.tsx
+++ b/src/components/ThemeSwitcher.tsx
@@ -1,17 +1,56 @@
-function SwitchTheme()
-{
- let currentTheme: string = localStorage.getItem("theme")!!
- const newTheme = currentTheme === "dark" ? "light" : "dark"
+import './ThemeSwitcher.module.css'
+import ReactSwitch from 'react-switch'
+import { useState } from 'react'
+import LightOffIco from './icons/LightOffIco'
+import LightOnIco from './icons/LightOnIco'
- document.querySelector("html")?.setAttribute("data-theme", newTheme)
- localStorage.setItem("theme", newTheme)
-}
export default function ThemeSwitcher()
{
+ const [ currentTheme, setCurrentTheme ] = useState(localStorage.getItem("theme")!!)
+ const [ isDarkModeOn, setIsDarkModeOn ] = useState(localStorage.getItem("theme") === "dark")
+
+ function toggleTheme()
+ {
+ const newTheme = currentTheme === "dark" ? "light" : "dark"
+
+ document.querySelector("html")?.setAttribute("data-theme", newTheme)
+ localStorage.setItem("theme", newTheme)
+ setIsDarkModeOn(!isDarkModeOn)
+ setCurrentTheme(newTheme)
+ }
+
+ document.querySelector("html")?.setAttribute("data-theme", currentTheme)
+
return <>
-
+
+
+ }
+ checkedIcon={
+
+
+ }>
+
}
diff --git a/src/components/icons/CarIco.tsx b/src/components/icons/CarIco.tsx
new file mode 100644
index 0000000..63f74ca
--- /dev/null
+++ b/src/components/icons/CarIco.tsx
@@ -0,0 +1,5 @@
+export default function CarIco() {
+ return
+}
\ No newline at end of file
diff --git a/src/components/icons/FromMySelfIco.tsx b/src/components/icons/FromMySelfIco.tsx
new file mode 100644
index 0000000..7a3d78b
--- /dev/null
+++ b/src/components/icons/FromMySelfIco.tsx
@@ -0,0 +1,5 @@
+export default function FromMySelfIco() {
+ return
+}
\ No newline at end of file
diff --git a/src/components/icons/FromSchoolIco.tsx b/src/components/icons/FromSchoolIco.tsx
new file mode 100644
index 0000000..9af4b16
--- /dev/null
+++ b/src/components/icons/FromSchoolIco.tsx
@@ -0,0 +1,5 @@
+export default function FromSchoolIco() {
+ return
+}
\ No newline at end of file
diff --git a/src/components/icons/LightOffIco.tsx b/src/components/icons/LightOffIco.tsx
new file mode 100644
index 0000000..77701d2
--- /dev/null
+++ b/src/components/icons/LightOffIco.tsx
@@ -0,0 +1,45 @@
+export default function LightOffIco() {
+ return
+}
\ No newline at end of file
diff --git a/src/components/icons/LightOnIco.tsx b/src/components/icons/LightOnIco.tsx
new file mode 100644
index 0000000..432b075
--- /dev/null
+++ b/src/components/icons/LightOnIco.tsx
@@ -0,0 +1,59 @@
+export default function LightOnIco() {
+ return
+}
\ No newline at end of file
diff --git a/src/components/icons/MediumBikeIco.tsx b/src/components/icons/MediumBikeIco.tsx
new file mode 100644
index 0000000..f8f36c6
--- /dev/null
+++ b/src/components/icons/MediumBikeIco.tsx
@@ -0,0 +1,24 @@
+export default function MediumBikeIco() {
+ return
+}
\ No newline at end of file
diff --git a/src/components/icons/SmallBikeIco.tsx b/src/components/icons/SmallBikeIco.tsx
new file mode 100644
index 0000000..cd63e57
--- /dev/null
+++ b/src/components/icons/SmallBikeIco.tsx
@@ -0,0 +1,22 @@
+export default function SmallBikeIco() {
+ return
+}
\ No newline at end of file
diff --git a/src/components/icons/light-off.svg b/src/components/icons/light-off.svg
new file mode 100644
index 0000000..717032d
--- /dev/null
+++ b/src/components/icons/light-off.svg
@@ -0,0 +1,43 @@
+
diff --git a/src/components/icons/light-on.svg b/src/components/icons/light-on.svg
new file mode 100644
index 0000000..60e6b75
--- /dev/null
+++ b/src/components/icons/light-on.svg
@@ -0,0 +1,57 @@
+
diff --git a/src/index.css b/src/index.css
index bd6213e..f0050fd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,127 @@
@tailwind base;
@tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+@font-face {
+ font-family: "Figtree";
+ src: url("./assets/fonts/Figtree/static/Figtree-Regular.ttf");
+}
+
+@font-face {
+ font-family: "RubikDoodleShadow";
+ src: url("./assets/fonts/RubikDoodleShadow/RubikDoodleShadow-Regular.ttf");
+}
+
+@font-face {
+ font-family: "AGaramondPro";
+ src: url("./assets/fonts/AGaramondPro-Regular.otf");
+}
+
+[data-theme="dark"] {
+ --nav-bg: #212228;
+ --icon-fill: white;
+ --bg-color: #18181d;
+ --bg-pattern:#474747;
+ --primary-color: white;
+ --secondary-color: rgb(161, 161, 161);
+ --secondary-color-opaque: rgba(161, 161, 161, .3);
+ --accent-color: rgb(209, 0, 0);
+ --accent-color-darker: rgb(148, 6, 6);
+}
+
+[data-theme="light"] {
+ --nav-bg: rgb(255, 255, 255);
+ --icon-fill: black;
+ --bg-color: rgb(245, 245, 245);
+ --bg-pattern:#c6c5c5;
+ --primary-color: black;
+ --secondary-color: rgb(128, 128, 128);
+ --secondary-color-opaque: rgba(128, 128, 128, .3);
+ --accent-color: rgb(209, 0, 0);
+ --accent-color-opaque: rgba(209, 0, 0, .5);
+ --accent-color-darker: rgb(148, 6, 6);
+}
+
+:root {
+ --main-font-family: "PT Sans";
+ --secondary-font-family: "RubikDoodleShadow";
+}
+
+.first-letter {
+ color: var(--accent-color);
+}
+
+body {
+ background: var(--bg-color);
+ background-image: radial-gradient(var(--bg-pattern) 1px, transparent 0);
+ background-size: 40px 40px;
+ /* background-position: -19px -19px; */
+}
+
+nav, footer, input {
+ box-shadow: 0 0 0 1px var(--secondary-color-opaque) !important;
+}
+
+html,
+body {
+ height: 100%;
+}
+
+progress::-moz-progress-bar {
+ background-color: var(--accent-color) !important;
+}
+
+progress::-webkit-progress-value {
+ background: red;
+}
+
+.text-primary {
+ color: var(--primary-color);
+}
+
+.text-secondary {
+ color: var(--secondary-color);
+}
+
+.accent-clr,
+h1,
+h2 {
+ color: var(--accent-color);
+}
+
+a:not(.exclude) {
+ display: inline-block;
+ position: relative;
+ top: 0;
+}
+
+a:not(.exclude)::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ transform: scaleX(0);
+ height: 2px;
+ bottom: 0;
+ left: 0;
+ background-color: var(--accent-color);
+ transform-origin: bottom right;
+ transition: transform 0.25s ease-out;
+}
+
+a:not(.exclude):hover::after {
+ transform: scaleX(1);
+ transform-origin: bottom left;
+}
+
+*,
+body {
+ font-family: var(--main-font-family);
+}
+
+progress::-webkit-progress-bar {
+ background-color: rgba(209, 0, 0, .25);
+}
+
+progress::-webkit-progress-value {
+ background-color: var(--accent-color);
+}
\ No newline at end of file
diff --git a/src/model/Education.tsx b/src/model/Education.tsx
index d1d47d5..80a40f4 100644
--- a/src/model/Education.tsx
+++ b/src/model/Education.tsx
@@ -8,4 +8,59 @@ export interface EducationTitle {
withHonours: boolean
}
-export enum Expertise { Beginner, Intermediate, Excellent }
\ No newline at end of file
+interface Skill {
+ name: String,
+ expertise: ExpertiseLevel
+}
+
+export enum ExpertiseLevel {
+ Beginner,
+ Intermediate,
+ Excellent
+}
+
+export const skillsFromSchool: Skill[] = [
+ {name: "C", expertise: ExpertiseLevel.Intermediate},
+ {name: "C#", expertise: ExpertiseLevel.Intermediate},
+ {name: "Blazor", expertise: ExpertiseLevel.Beginner},
+ {name: "Java", expertise: ExpertiseLevel.Beginner},
+ {name: "Bash", expertise: ExpertiseLevel.Intermediate},
+ {name: "Design a WPF", expertise: ExpertiseLevel.Intermediate},
+ {name: "JavaScript & JQuery", expertise: ExpertiseLevel.Intermediate},
+ {name: "HTML", expertise: ExpertiseLevel.Excellent},
+ {name: "CSS & Bootstrap", expertise: ExpertiseLevel.Excellent},
+ {name: "SQL", expertise: ExpertiseLevel.Intermediate},
+ {name: "Design in Figma", expertise: ExpertiseLevel.Intermediate},
+ {name: "Design a network w/CISCO Packet Tracer", expertise: ExpertiseLevel.Beginner},
+]
+
+export const skillsSelfTaught: Skill[] = [
+ { name: "Python", expertise: ExpertiseLevel.Beginner },
+ { name: "Manim - python library", expertise: ExpertiseLevel.Intermediate },
+ { name: "React", expertise: ExpertiseLevel.Beginner },
+ { name: "Vue", expertise: ExpertiseLevel.Beginner },
+ { name: "Tailwind CSS", expertise: ExpertiseLevel.Intermediate },
+ { name: "Typescript", expertise: ExpertiseLevel.Beginner },
+]
+
+export const educationHistory: EducationTitle[] = [{
+ start_year: 2018,
+ end_year: 2023,
+ title_description: "High School Diploma in Computer Science and Telecommunications",
+ school: "Istituto Tecnico Tecnologico 'B. Pascal' @ Cesena, IT",
+ grade: 100,
+ max_grade: 100,
+ withHonours: true
+ },
+ {
+ start_year: 2023,
+ end_year: 2027,
+ title_description: "Bachelor Degree in Computer Science and Engineering",
+ school: "Alma Mater Studiorum, University of Bologna @ Cesena, IT",
+ grade: NaN,
+ max_grade: 110,
+ withHonours: false
+ }
+]
+
+educationHistory.sort((a, b) => (a.start_year > b.start_year) ? -1 : 1)
\ No newline at end of file
diff --git a/src/pages/ContactMe.tsx b/src/pages/ContactMe.tsx
index 31bcf82..5b3150f 100644
--- a/src/pages/ContactMe.tsx
+++ b/src/pages/ContactMe.tsx
@@ -1,37 +1,29 @@
-// import { useState } from "react"
import Button from "../components/Button"
import './ContactMe.module.css'
-// const [mailData, setMailData] = useState({})
-
-// function sendMail()
-// {
-
-// }
-
function ContactMe()
{
return <>