-
+
-
+
-
+
-
+
-
+
-
+
+
+ );
+}
+
+export default FallbackSpinner;
diff --git a/frontend/public/src/components/Header.tsx b/frontend/public/src/components/Header.tsx
new file mode 100644
index 0000000..c412c71
--- /dev/null
+++ b/frontend/public/src/components/Header.tsx
@@ -0,0 +1,11 @@
+import '../App.css';
+
+interface HeaderProps {
+ title: string,
+}
+
+const Header = ({ title }: HeaderProps) => {
+ return {title}
;
+}
+
+export default Header;
diff --git a/frontend/public/src/components/NavBar.tsx b/frontend/public/src/components/NavBar.tsx
new file mode 100644
index 0000000..ec6eb9d
--- /dev/null
+++ b/frontend/public/src/components/NavBar.tsx
@@ -0,0 +1,106 @@
+import { Navbar, Nav, Container } from 'react-bootstrap';
+import {useState, useContext, CSSProperties} from 'react';
+import { NavLink } from 'react-router-dom';
+import styled, { ThemeContext } from 'styled-components';
+import ThemeToggler from './ThemeToggler';
+import navbar from "../constants/navbar";
+
+const styles: {[key: string]: CSSProperties} = {
+ logoStyle: {
+ width: 50,
+ height: 40,
+ },
+};
+
+const ExternalNavLink = styled.a`
+ color: ${(props) => props.theme.navbarTheme.linkColor};
+ &:hover {
+ color: ${(props) => props.theme.navbarTheme.linkHoverColor};
+ }
+ &::after {
+ background-color: ${(props) => props.theme.accentColor};
+ }
+`;
+
+const InternalNavLink = styled(NavLink)`
+ color: ${(props) => props.theme.navbarTheme.linkColor};
+ &:hover {
+ color: ${(props) => props.theme.navbarTheme.linkHoverColor};
+ }
+ &::after {
+ background-color: ${(props) => props.theme.accentColor};
+ }
+ &.navbar__link.active {
+ color: ${(props) => props.theme.navbarTheme.linkActiveColor};
+ }
+`;
+
+const NavBar = () => {
+ const theme = useContext(ThemeContext);
+ const [expanded, setExpanded] = useState(false);
+
+ return (
+
+
+ );
+}
+export default NotFound;
diff --git a/frontend/public/src/components/Social.tsx b/frontend/public/src/components/Social.tsx
new file mode 100644
index 0000000..dc5dd69
--- /dev/null
+++ b/frontend/public/src/components/Social.tsx
@@ -0,0 +1,62 @@
+import {useContext, CSSProperties} from 'react';
+import { SocialIcon } from 'react-social-icons';
+import { ThemeContext } from 'styled-components';
+
+const styles: {[key: string]: CSSProperties} = {
+ iconStyle: {
+ marginLeft: 10,
+ marginRight: 10,
+ marginBottom: 10,
+ },
+};
+
+interface SocialParams {
+ github: string,
+ linkedin: string,
+ email: string,
+}
+
+const Social = ({github, linkedin, email}: SocialParams) => {
+ const theme = useContext(ThemeContext);
+ const mailTo = 'mailto:' + email;
+
+ return (
+ 404 - Not Found!
++ Go to the home page +
+
+
+ {linkedin ? (
+
+ );
+}
+
+export default Social;
diff --git a/frontend/public/src/components/ThemeToggler.tsx b/frontend/public/src/components/ThemeToggler.tsx
new file mode 100644
index 0000000..c47b8ab
--- /dev/null
+++ b/frontend/public/src/components/ThemeToggler.tsx
@@ -0,0 +1,30 @@
+import DarkModeToggle from 'react-dark-mode-toggle';
+import {AppContextConsumer} from '../AppContext';
+import {DarkMode} from "use-dark-mode";
+
+export interface ThemeTogglerInterface {
+ onClick: () => void
+}
+
+const ThemeToggler = ({onClick}: ThemeTogglerInterface) => {
+ const handleOnChange = (darkMode: DarkMode) => {
+ darkMode.toggle();
+ onClick();
+ };
+
+ return (
+
+ handleOnChange(appContext.darkMode)}
+ checked={appContext.darkMode.value}
+ size={50}
+ />
+
+ )}
+
+
+ {isLoading === false
+ ? (
+
+
+ 
+
+ ) : null}
+
+
+ )
+ :
+
+
+ );
+}
+
+export default About;
diff --git a/frontend/public/src/pages/Education/EducationPage.tsx b/frontend/public/src/pages/Education/EducationPage.tsx
new file mode 100644
index 0000000..fb7bf5a
--- /dev/null
+++ b/frontend/public/src/pages/Education/EducationPage.tsx
@@ -0,0 +1,71 @@
+import { useEffect, useState, useContext } from 'react';
+import { Chrono } from 'react-chrono';
+import { Container } from 'react-bootstrap';
+import { Fade } from 'react-awesome-reveal';
+import { ThemeContext } from 'styled-components';
+import '../../css/education.css';
+import FallbackSpinner from "../../components/FallbackSpinner";
+import ApiService, {PaginatedCollection, Education} from "../../services/ApiService";
+import Header from "../../components/Header";
+import {TimelineItemModel} from "react-chrono/dist/models/TimelineItemModel";
+
+interface EducationProps {
+ header: string,
+}
+
+const EducationPage = ({ header }: EducationProps) => {
+ const theme = useContext(ThemeContext);
+ const [data, setData] = useState
+
+
+
+
+
+
+
+
+
+ {data.data.map((item: Job) => (
+
+
+ ))}
+
+
+
+
+ ) : + {item.name} +
+
+
+ + {item.company.name} +
+ {item.type && ( ++ · + {' '} + {item.type} +
+ )} +-
+
+
+
+ +
+
+ {userName}
+
+
+ I'm
+
+
+
+ {data.data?.map((project: Project) => (
+
+
+ ))}
+
+
+ {showMore
+ && (
+
+ )}
+
+
+ ) :
+
+ );
+
+ return (
+ <>
+
+
+ {renderSkillsIntro(headerText)}
+ {data.data?.map((section: Section) => (
+
+
+
+
+
+ ))}
+ +
{section.name}
+ {section.skills.map((skill: Skill) => ( +
+ 
+
+ ))}
+
+ {skill.name}
+
+ {% if userPhoto != null %}
+ 
+ {% endif %}
+
+
+
+
+ Sergey Rashin
+Backend Developer
+-
+
-
+
+
+ {{ links.phoneNumber }}
+
+
+ -
+
+ {{ links.emailAddress }}
+
+ -
+
+ rashin.me
+
+ -
+
+ GitHub
+
+ -
+
+
+ LinkedIn
+
+
+
+
+
+
+ {% endif %}
+
+ {% if sections|length > 0 %}
+ ABOUT
+
+ {{ about }}
+
+
+
+
+
+ {% endif %}
+
+ {% if jobs|length > 0 %}
+ SKILLS
+
+ {% for key, section in sections %}
+
+
+
+ {% endfor %}
+ {{ section.name }}
+
+ {% for key, skill in section.skills %}
+ {{ skill.name }}{% if section.skills|length != key+1 %},{% endif %}
+ {% endfor %}
+
+
+
+
+
+ {% endif %}
+
+ {% if projects|length > 0 %}
+ WORK EXPERIENCE
+
+ {% for key, job in jobs %}
+
+
+
+
+
+ {% endfor %}
+
+
+
+
+
+ {{ job.name }}
+
+
+
+
+
+ {{ job.company.name }}
+
+
+ {{ job.type }}
+
+
+ {{ job.fromDate|date('m-Y') }}/{% if job.toDate == null %}Present{% else %}{{ job.toDate|date('m-Y') }}{% endif %}
+
+
+
+
+ {{ job.description }}
+
+
+
+
+ {% endif %}
+
+ {% if educations|length > 0 %}
+ PROJECTS
+
+ {% for key, project in projects %}
+
+
+
+
+
+ {% endfor %}
+
+
+ {% if project.links|length > 0 %}
+ {{ project.name }}
+
+ {% for key, link in project.links %}
+
+ {{ link.title }}
+
+ {% endfor %}
+
+ {% endif %}
+
+
+ {{ project.description }}
+
+
+
+
+
+ {% endif %}
+ EDUCATION
+
+ {% for key, education in educations %}
+
+
+
+
+
+ {% endfor %}
+
+
+ {{ education.institution }}
+
+
+
+
+ {{ education.faculty }}
+
+
+ {{ education.fromDate|date('m-Y') }}/{% if education.toDate == null %}Present{% else %}{{ education.toDate|date('m-Y') }}{% endif %}
+
+
+
+ {{ education.specialization }}
+
+