Merge pull request #15 from mipt-npm/magprog

Magprog
2021-03-28 22:41:13 +03:00 · 2021-03-28 22:41:13 +03:00 · e7e7a14aca
commit e7e7a14aca
parent 1addafa48f d032352c93
137 changed files with 33945 additions and 66466 deletions
--- a/gatsby-config.js
+++ b/gatsby-config.js
@ -3,7 +3,6 @@ module.exports = {
        title: `MIPT-NPM laboratory`,
        description: `Nuclear Physics Methods Laboratory`,
    },
-
    plugins: [
        {
            resolve: 'gatsby-source-filesystem',
@ -55,6 +54,7 @@ module.exports = {
                path: `${__dirname}/src/intl`,
                languages: [`ru`, `en`],
                defaultLanguage: `ru`,
+
                redirect: true,
                redirectComponent: require.resolve(`./src/components/redirect.js`),
            },
--- a/gatsby-node.js
+++ b/gatsby-node.js
@ -25,22 +25,9 @@ exports.createPages = async ({actions, graphql}) => {
    // language=GraphQL
    const result = await graphql(`
        {
-            courses: allMarkdownRemark(
-                filter: {frontmatter: {content_type: {eq: "page_education"}, published: {eq: true}}}
-            ){
-                edges{
-                    node{
-                        html
-                        frontmatter{
-                            title
-                            path
-                        }
-                    }
-                }
-            }

            news: allMarkdownRemark(
-                filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}}},
+                filter: {frontmatter: {content_type: {eq: "post"}, published: {ne: false}}},
                sort: {fields: [frontmatter___date], order: DESC}
            ) {
                edges{
@ -54,14 +41,30 @@ exports.createPages = async ({actions, graphql}) => {
                    }
                }
            }
-        }`)
+
+            coursePages: allMarkdownRemark(
+                filter: {frontmatter: {content_type: {eq: "course"}, published: {ne: false}}}
+            ){
+                edges{
+                    node{
+                        html
+                        frontmatter{
+                            path
+                            slug
+                        }
+                    }
+                }
+            }
+        }
+    `)

    if (result.errors) {
        throw result.errors;
    }

+    // Render courses
    const courseTemplate = path.resolve(`./src/components/templates/courseTemplate.js`);
-    const courses = result.data.courses.edges;
+    const courses = result.data.coursePages.edges;

    courses.forEach(({node}) => {
        createPage({
@ -70,7 +73,7 @@ exports.createPages = async ({actions, graphql}) => {
        })
    });

-    ///////////////////////////////////////////////////////////////////
+    // Render news page

    const newsTemplate = path.resolve(`./src/components/templates/news.js`);
    const posts = result.data.news.edges;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -2,9 +2,8 @@
  "name": "npm-site",
  "private": true,
  "description": "Nuclear Physics Methods laboratory",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "dependencies": {
-    "@types/bootstrap": "5.0.9",
    "bootstrap": "4.6.0",
    "gatsby": "3.1.1",
    "gatsby-awesome-pagination": "0.3.6",
@ -15,6 +14,7 @@
    "gatsby-plugin-react-helmet": "4.1.0",
    "gatsby-plugin-react-intl": "3.0.0",
    "gatsby-plugin-sharp": "3.1.1",
+    "gatsby-plugin-ts": "^2.7.1",
    "gatsby-remark-images": "4.1.0",
    "gatsby-remark-katex": "4.1.0",
    "gatsby-remark-relative-images": "2.0.2",
@ -22,6 +22,8 @@
    "gatsby-source-graphql": "3.1.0",
    "gatsby-transformer-remark": "3.1.0",
    "gatsby-transformer-sharp": "3.1.0",
+    "node-sass": "^5.0.0",
+    "gatsby-plugin-sass": "4.1.0",
    "html-react-parser": "1.2.4",
    "imagemin-pngquant": "9.0.2",
    "jquery": "3.6.0",
@ -33,9 +35,12 @@
    "react": "17.0.2",
    "react-bootstrap": "1.5.2",
    "react-helmet": "6.1.0",
+    "react-intl": "^5.13.5",
    "redux": "4.0.5",
-    "typescript": "4.2.3",
-    "vertical-timeline-component-for-react": "1.0.7"
+    "typescript": "^4.2.3",
+    "vertical-timeline-component-for-react": "1.0.7",
+    "react-scrollspy": "^3.4.3",
+    "smoothscroll-polyfill": "^0.4.4"
  },
  "devDependencies": {
    "autoprefixer": "10.2.5",
--- a/src/components/footer.js
+++ b/src/components/footer.js
@ -1,11 +1,11 @@
 import React from "react"
 import "../styles/footer.css"

-const Footer = () => (
-    <footer>
-    <div className = "container" style = {{textAlign: `left`,}}>
+const NpmFooter = () => (
+    <footer className="blockquote-footer bg-dark">
+        <div className="container " style={{textAlign: `left`}}>
            <p>
-      © 2016 mipt-npm group | Built with
+                © 2021 mipt-npm lab | Built with
                {` `}
                <a href="https://www.gatsbyjs.org">Gatsby framework</a>
                {` `}
@ -17,4 +17,4 @@ const Footer = () => (
    </footer>
 )

-export default Footer
+export default NpmFooter
--- a/src/components/layout.js
+++ b/src/components/layout.js
@ -1,31 +1,32 @@
 import React from "react"
 import PropTypes from "prop-types"
-import {injectIntl, useIntl} from "gatsby-plugin-react-intl"
+import {injectIntl, useIntl} from "react-intl"

-import Navbar from "./navBar"
-import Footer from "./footer"
+import NpmNavbar from "./navBar"
+import NpmFooter from "./footer"
 import SEO from "./seo"

 import "../styles/layout.css"
 import "../styles/main.css"
 import "katex/dist/katex.min.css"

-const Layout = ({ children }) => {
+const NpmLayout = ({children}) => {
    const intl = useIntl();
    const lang = intl.locale;
    return (
        <>
-      <Navbar />
            <SEO lang={lang} title={intl.formatMessage({id: "title"})}/>
+            <NpmNavbar/>
            <div className="container">
                <main>{children}</main>
            </div>
-      <Footer/>
+            <NpmFooter/>
        </>
-)}
+    )
+}

-Layout.propTypes = {
+NpmLayout.propTypes = {
    children: PropTypes.node.isRequired,
 }

-export default injectIntl(Layout)
+export default injectIntl(NpmLayout)
--- a/src/components/magprog/capabilities/Capabilities.js
+++ b/src/components/magprog/capabilities/Capabilities.js
@ -0,0 +1,29 @@
+import React from 'react';
+import {Link} from 'gatsby';
+
+import CapabilityList from './CapabilityList';
+
+const Capabilities = () =>
+  <section id="two" className="wrapper style3 fade-up">
+    <div className="inner">
+      <h2>What we do</h2>
+      <p>
+        Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam
+        turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus,
+        lacus eget hendrerit bibendum, urna est aliquam sem, sit amet
+        imperdiet est velit quis lorem.
+      </p>
+      <div className="features">
+        <CapabilityList />
+      </div>
+      <ul className="actions">
+        <li>
+          <Link className="button" to="/generic">
+            Learn more
+          </Link>
+        </li>
+      </ul>
+    </div>
+  </section>
+
+export default Capabilities;
--- a/src/components/magprog/capabilities/Capability.js
+++ b/src/components/magprog/capabilities/Capability.js
@ -0,0 +1,10 @@
+import React from 'react';
+
+const Capability = ({ heading, description, iconClass }) =>
+  <section>
+    <span className={`icon major ${iconClass}`} />
+    <h3>{heading}</h3>
+    <p>{description}</p>
+  </section>
+
+export default Capability;
--- a/src/components/magprog/capabilities/CapabilityList.js
+++ b/src/components/magprog/capabilities/CapabilityList.js
@ -0,0 +1,48 @@
+import React from 'react';
+
+import Capability from './Capability';
+
+const CapabilityList = () => {
+  const CAPABILITIES = [
+    {
+      heading: 'Lorem ipsum amet',
+      description: 'Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.',
+      iconClass: 'fa-code',
+    },
+    {
+      heading: 'Morem ipsum amet',
+      description: 'Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.',
+      iconClass: 'fa-lock',
+    },
+    {
+      heading: 'Dorem ipsum amet',
+      description: 'Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.',
+      iconClass: 'fa-cog',
+    },
+    {
+      heading: 'Forem ipsum amet',
+      description: 'Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.',
+      iconClass: 'fa-desktop',
+    },
+    {
+      heading: 'Corem ipsum amet',
+      description: 'Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.',
+      iconClass: 'fa-chain',
+    },
+    {
+      heading: 'Norem ipsum amet',
+      description: 'Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.',
+      iconClass: 'fa-diamond',
+    },
+  ]
+
+  const [capabilities] = React.useState(CAPABILITIES);
+
+  return (
+    <>
+      {capabilities.map((capability) => <Capability key={capability.heading} {...capability} />)}
+    </>
+  )
+}
+
+export default CapabilityList;
--- a/src/components/magprog/common/MagProgLayout.js
+++ b/src/components/magprog/common/MagProgLayout.js
@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import {injectIntl, useIntl} from "react-intl";
+import SEO from "../../seo";
+import NpmNavbar from "../../navBar";
+import {withPrefix} from "gatsby";
+
+import "../../../styles/layout.css"
+import "../../../styles/main.css"
+import "katex/dist/katex.min.css"
+
+const MagProgLayout = ({children}) => {
+    const intl = useIntl();
+    const lang = intl.locale;
+    return (
+        <>
+            <SEO lang={lang} title={intl.formatMessage({id: "title"})}/>
+            <Helmet>
+                <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
+                <link rel="stylesheet" href={withPrefix("magprog/css/main.css")}/>
+                {/*<noscript>{*/}
+                {/*    <link rel="stylesheet" href={withPrefix("magprog/css/noscript.css")}/>*/}
+                {/*</noscript>*/}
+            </Helmet>
+            <NpmNavbar/>
+            <div className="container-fluid">
+                <main>{children}</main>
+            </div>
+            {/*<NpmFooter/>*/}
+        </>
+    )
+}
+
+MagProgLayout.propTypes = {
+    children: PropTypes.node.isRequired,
+}
+
+export default injectIntl(MagProgLayout)
+
--- a/src/components/magprog/common/Scroll.js
+++ b/src/components/magprog/common/Scroll.js
@ -0,0 +1,71 @@
+import smoothscroll from 'smoothscroll-polyfill';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Element = props => {
+  return props.children;
+};
+
+class Scroll extends React.Component {
+  static propTypes = {
+    type: PropTypes.string,
+    element: PropTypes.string,
+    offset: PropTypes.number,
+    timeout: PropTypes.number,
+    children: PropTypes.node.isRequired,
+  };
+  constructor() {
+    super();
+    this.handleClick = this.handleClick.bind(this);
+  }
+  componentDidMount() {
+    smoothscroll.polyfill();
+  }
+  handleClick(e) {
+    e.preventDefault();
+    let elem = 0;
+    let scroll = true;
+    const { type, element, offset, timeout } = this.props;
+    if (type && element) {
+      switch (type) {
+        case 'class':
+          elem = document.getElementsByClassName(element)[0];
+          scroll = !!elem;
+          break;
+        case 'id':
+          elem = document.getElementById(element);
+          scroll = !!elem;
+          break;
+        default:
+      }
+    }
+    scroll
+      ? this.scrollTo(elem, offset, timeout)
+      : console.log(`Element not found: ${element}`); // eslint-disable-line
+  }
+  scrollTo(element, offSet = 0, timeout = null) {
+    const elemPos = element
+      ? element.getBoundingClientRect().top + window.pageYOffset
+      : 0;
+    if (timeout) {
+      setTimeout(() => {
+        window.scroll({ top: elemPos + offSet, left: 0, behavior: 'smooth' });
+      }, timeout);
+    } else {
+      window.scroll({ top: elemPos + offSet, left: 0, behavior: 'smooth' });
+    }
+  }
+  render() {
+    return (
+      <Element>
+        {typeof this.props.children === 'object' ? (
+          React.cloneElement(this.props.children, { onClick: this.handleClick })
+        ) : (
+          <span onClick={this.handleClick}>{this.props.children}</span>
+        )}
+      </Element>
+    );
+  }
+}
+
+export default Scroll;
--- a/src/components/magprog/features/Feature.js
+++ b/src/components/magprog/features/Feature.js
@ -0,0 +1,24 @@
+import React from 'react';
+import {Link} from 'gatsby';
+
+const Feature = ({href, image, heading, description, to}) =>
+  <section>
+    <a href={href} className="image" alt="image">
+      <img src={image} alt="" data-position="center center" />
+    </a>
+    <div className="content">
+      <div className="inner">
+        <h2>{heading}</h2>
+        <p>{description}</p>
+        <ul className="actions">
+          <li>
+            <Link className="button" to={to.href}>
+              {to.label}
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+
+export default Feature;
--- a/src/components/magprog/features/Features.js
+++ b/src/components/magprog/features/Features.js
@ -0,0 +1,52 @@
+import React from 'react';
+
+import pic1 from '../../../../../../temp/gatsby-starter-hyperspace/src/images/pic01.jpg';
+import pic2 from '../../../../../../temp/gatsby-starter-hyperspace/src/images/pic02.jpg';
+import pic3 from '../../../../../../temp/gatsby-starter-hyperspace/src/images/pic03.jpg';
+
+import Feature from './Feature';
+
+const Features = () => {
+  const FEATURES = [
+    {
+      href: '/#',
+      image: pic1,
+      heading: 'Sed ipsum dolor',
+      description: 'Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.',
+      to: {
+        href: '/generic',
+        label: 'Learn more',
+      },
+    },
+    {
+      href: '/#',
+      image: pic2,
+      heading: 'Feugiat consequat',
+      description: 'Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.',
+      to: {
+        href: '/generic',
+        label: 'Learn more',
+      },
+    },
+    {
+      href: '/#',
+      image: pic3,
+      heading: 'Ultricies aliquam',
+      description: 'Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.',
+      to: {
+        href: '/generic',
+        label: 'Learn more',
+      },
+    },
+  ];
+
+  const [features] = React.useState(FEATURES);
+
+  return (
+    <section id="one" className="wrapper style2 spotlights">
+       {features.map(feature => <Feature key={feature.heading} {...feature} />)}
+    </section>
+  );
+}
+
+export default Features;
--- a/src/components/navBar.js
+++ b/src/components/navBar.js
@ -2,53 +2,64 @@ import React from "react"
 import {Link} from "gatsby"
 import {globalHistory as history} from '@reach/router'

-import {FormattedMessage, injectIntl, useIntl} from "gatsby-plugin-react-intl"
+import {FormattedMessage, injectIntl, useIntl} from "react-intl"
 import {Container, Nav, Navbar} from "react-bootstrap"
 import Language from "./language"
-import SEO from "./seo"

 import "../styles/navbar.css"
 import logo from "../images/index/logo_white.png"

-const CustomNavbar = () => {
-  const { location } = history;
-
-  var active = ["", "", "", ""]
-  active[0] = location.pathname.includes('/news/') ? 'active': "link-no-style";
-  active[1] = location.pathname.includes('/about/') ? 'active': "link-no-style";
-  active[2] = location.pathname.includes('/projects/') ? 'active': "link-no-style";
-  active[3] = location.pathname.includes('/partners/') ? 'active': "link-no-style";
-  var activeBrand = location.pathname === "/ru/" || location.pathname === "/en/" ? 'activeBrand': "link-no-style";
-
+const NpmNavbar = () => {
    const intl = useIntl();
-  const lang = intl.locale;
+    const {location} = history;
+    let activeBrand = location.pathname === "/ru/" || location.pathname === "/en/" ? 'activeBrand' : "link-no-style";
+
+    let projectsLinkStyle = location.pathname.startsWith(`/${intl.locale}/projects`) ? "nav-item active" : "nav-item"
+
    return (
        <>
-      <SEO lang={lang} title={intl.formatMessage({ id: "title" })} />
-      <Navbar bg="dark" expand="lg" id="site-navbar" fixed="top">
+            <Navbar bg="dark" expand="lg" id="site-navbar" fixed="top" variant="dark">
                <Container>
-        <Link to="/" className={activeBrand}>
+                    <Link to={"/" + intl.locale + "/"} className={activeBrand}>
                        <Navbar.Brand as="span"><img src={logo} height="50px" alt="npm logo" id="logo"/></Navbar.Brand>
                    </Link>
                    <Navbar.Toggle aria-controls="basic-navbar-nav"/>
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="mr-auto" activeKey={location.pathname}>
-            <Link to="/news" className={active[0]}> {/* news */}
+                            <Link to={`/${intl.locale}/news`} className="nav-item" activeClassName="active"
+                                  partiallyActive={true}>
+                                {/* news */}
                                <Nav.Link as="span" eventKey="news"><FormattedMessage id="header.news"/></Nav.Link>
                            </Link>
-            <Link to="/about" className={active[1]}> {/* about */}
-              <Nav.Link as="span" eventKey="about"><FormattedMessage id="header.group"/></Nav.Link>
+                            <Link to={`/${intl.locale}/about`} className="nav-item" activeClassName="active"
+                                  partiallyActive={true}>
+                                {/* about */}
+                                <Nav.Link as="span" eventKey="about"><FormattedMessage
+                                    id="header.group"/></Nav.Link>
                            </Link>
-            <Link to="/projects/physics" className={active[2]}>
-              <Nav.Link as="span" eventKey="projects"><FormattedMessage id="header.projects"/></Nav.Link>
+                            <Link to={`/${intl.locale}/projects/physics`} className={projectsLinkStyle}>
+                                {/* projects */}
+                                <Nav.Link as="span" eventKey="projects">
+                                    <FormattedMessage id="header.projects"/>
+                                </Nav.Link>
                            </Link>
-            <Link to="/partners" className={active[3]}> {/* partners */}
-              <Nav.Link as="span" eventKey="partners"><FormattedMessage id="header.partners"/></Nav.Link>
+                            <Link to={`/${intl.locale}/partners`} className="nav-item" activeClassName="active"
+                                  partiallyActive={true}>
+                                {/* partners */}
+                                <Nav.Link as="span" eventKey="partners"><FormattedMessage
+                                    id="header.partners"/></Nav.Link>
                            </Link>
-            <Link>
-              <Nav.Link eventKey="language" className="language"><Language/></Nav.Link>
+                            <Link to={`/${intl.locale}/magprog`} className="nav-item" activeClassName="active"
+                                  partiallyActive={true}>
+                                {/* magprog */}
+                                <Nav.Link as="span" eventKey="magprog">
+                                    <FormattedMessage id="header.magprog"/>
+                                </Nav.Link>
                            </Link>
                        </Nav>
+                        <Nav.Link eventKey="language" className="nav-item language">
+                            <Language/>
+                        </Nav.Link>
                    </Navbar.Collapse>
                </Container>
            </Navbar>
@ -56,4 +67,4 @@ const CustomNavbar = () => {
    )
 }

-export default injectIntl(CustomNavbar)
+export default injectIntl(NpmNavbar)
--- a/src/components/projectsNavbar.js
+++ b/src/components/projectsNavbar.js
@ -0,0 +1,41 @@
+import {Link} from "gatsby-plugin-react-intl";
+import {FormattedMessage} from "react-intl";
+import React from "react";
+
+
+export default function ProjectsNavbar({project_type}) {
+    function navClasses(nav) {
+        if (project_type === nav) {
+            return "nav-link active"
+        } else {
+            return "nav-link"
+        }
+    }
+
+    return (
+        <>
+            <ul className="nav nav-tabs">
+                <li className="nav-item">
+                    <Link id="project_physics" className={navClasses("physics")} to="/projects/physics">
+                        <FormattedMessage id="physics.bc_title"/>
+                    </Link>
+                </li>
+                <li className="nav-item">
+                    <Link id="project_education" className={navClasses("education")} to="/projects/education">
+                        <FormattedMessage id="education.bc_title"/>
+                    </Link>
+                </li>
+                <li className="nav-item">
+                    <Link id="project_math" className={navClasses("math")} to="/projects/math">
+                        <FormattedMessage id="math.bc_title"/>
+                    </Link>
+                </li>
+                <li className="nav-item">
+                    <Link id="project_software" className={navClasses("software")} to="/projects/software">
+                        <FormattedMessage id="software.bc_title"/>
+                    </Link>
+                </li>
+            </ul>
+        </>
+    )
+}
--- a/src/components/redirect.js
+++ b/src/components/redirect.js
@ -1,5 +1,5 @@
 import React from "react"
-import {injectIntl} from "gatsby-plugin-react-intl"
+import {injectIntl} from "react-intl"
 import SEO from "./seo"

 const Redirect = ({intl}) => {
--- a/src/components/seo.js
+++ b/src/components/seo.js
@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import Helmet from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
+import {graphql, useStaticQuery} from "gatsby"

 const SEO = ({description, lang, meta, title}) => {
    const {site} = useStaticQuery(
--- a/src/components/templates/courseTemplate.js
+++ b/src/components/templates/courseTemplate.js
@ -1,12 +1,12 @@
 import React from "react"
 import {graphql} from "gatsby"
-import {injectIntl, Link, useIntl} from "gatsby-plugin-react-intl"
+import {injectIntl, useIntl} from "react-intl"
+import {Link} from "gatsby-plugin-react-intl"
 import Parser from "html-react-parser"

-import SEO from "../seo"
 import Layout from "../layout"

-const Template = (props) => {
+const Course = (props) => {
    const intl = useIntl()
    const lang = intl.locale
    const course = props.data.course
@ -43,7 +43,6 @@ const Template = (props) => {
    }
    return (
        <Layout>
-            <SEO lang={lang} title={intl.formatMessage({id: "title"})}/>
            <nav aria-label="breadcrumb">
                <ol className="breadcrumb" style={{margin: 0}}>
                    <li className="breadcrumb-item">
@ -59,11 +58,13 @@ const Template = (props) => {
    )
 }

-export default injectIntl(Template)
+export default injectIntl(Course)

 export const CourseQuery = graphql`
    query CourseByPath($path: String){
-        course: markdownRemark(frontmatter: {slug: {eq: $path}}){
+        course: markdownRemark(
+            frontmatter: {slug: {eq: $path}}
+        ){
            html
            frontmatter{
                title
@ -71,5 +72,6 @@ export const CourseQuery = graphql`
                path
                parent
                slug
-            }}
+            }
+        }
    }`
--- a/src/components/templates/news.js
+++ b/src/components/templates/news.js
@ -6,15 +6,18 @@ import Parser from "html-react-parser"
 import {Timeline, TimelineItem} from 'vertical-timeline-component-for-react'

 import Navbar from "../navBar"
-import Footer from "../footer"
+import NpmFooter from "../footer"

 const NewsTemplate = (props) => {
    const intl = useIntl()
    const lang = intl.locale

    var news = ""
-  if ( lang==="ru" ) { news = props.data.ru_news.edges} 
-  else if ( lang==="en" ) { news = props.data.en_news.edges; }
+    if (lang === "ru") {
+        news = props.data.ru_news.edges
+    } else if (lang === "en") {
+        news = props.data.en_news.edges;
+    }

    const next = props.pageContext.next
    const prev = props.pageContext.prev
@ -42,7 +45,7 @@ const NewsTemplate = ( props ) => {
                    {next && <Link to={`/${next}`}><h1 style={{padding: 10, color: `red`}}>---></h1></Link>}
                </div>
            </nav>
-    <Footer/>
+            <NpmFooter/>
        </>
    )
 }
@ -52,7 +55,7 @@ export default injectIntl(NewsTemplate)
 export const query = graphql`
    query NewsQuery($limit: Int!, $skip: Int!) {
        ru_news: allMarkdownRemark(
-      filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}, language: {eq: "ru"}}},
+            filter: {frontmatter: {content_type: {eq: "post"}, published: {ne: false}, language: {eq: "ru"}}},
            sort: {fields: [frontmatter___date], order: DESC},
            limit: $limit
            skip: $skip
@ -70,7 +73,7 @@ export const query = graphql`
        }

        en_news: allMarkdownRemark(
-      filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}, language: {eq: "en"}}},
+            filter: {frontmatter: {content_type: {eq: "post"}, published: {ne: false}, language: {eq: "en"}}},
            sort: {fields: [frontmatter___date], order: DESC},
            limit: $limit
            skip: $skip
--- a/src/components/templates/projectsTemplate.js
+++ b/src/components/templates/projectsTemplate.js
@ -0,0 +1,40 @@
+import React from "react"
+import {FormattedMessage} from "react-intl"
+import {Link} from "gatsby-plugin-react-intl"
+import Parser from "html-react-parser"
+import ProjectsNavbar from "../projectsNavbar";
+
+export default function Projects({projects, project_type}) {
+    return (
+        <>
+            <ProjectsNavbar project_type={project_type}/>
+
+            <h1 style={{marginTop: `20px`}}><FormattedMessage id={project_type + ".title"}/></h1>
+            <p style={{marginBottom: `5px`}}><FormattedMessage id={project_type + ".description"}/></p>
+
+            <ul>
+                {projects.map(({node}) => {
+                    const link = node.frontmatter.shortTitle;
+                    const id = node.frontmatter.id;
+                    return (
+                        <li><Link to={`/projects/${project_type}#${id}`}>{link}</Link></li>
+                    )
+                })}
+            </ul>
+
+            {projects.map(({node}) => {
+                const title = node.frontmatter.title;
+                const id = node.frontmatter.id;
+                return (
+                    <div className="row" id={id}>
+                        <div className="col-lg-12">
+                            <hr/>
+                            <h2 id={id}>{title}</h2>
+                            <div>{Parser(node.html)}</div>
+                        </div>
+                    </div>
+                )
+            })}
+        </>
+    )
+}
--- a/src/content/en/pages/atom.md
+++ b/src/content/en/pages/atom.md
@ -1,5 +1,5 @@
 ---
-content_type: page_education
+content_type: course
 title: History of the atomic project
 shortTitle: History of the atomic project
 parent: education
--- a/src/content/en/pages/kotlin.md
+++ b/src/content/en/pages/kotlin.md
@ -1,5 +1,5 @@
 ---
-content_type: page_education
+content_type: course
 title: Introduction to Kotlin scientific programming
 shortTitle: Scientific programming
 parent: education
--- a/src/content/en/pages/stat-methods.md
+++ b/src/content/en/pages/stat-methods.md
@ -1,5 +1,5 @@
 ---
-content_type: page_education
+content_type: course
 title: Statistical methods in experimental physics
 shortTitle: Statistical methods
 parent: education
--- a/src/content/en/pages/subterranean.md
+++ b/src/content/en/pages/subterranean.md
@ -1,5 +1,5 @@
 ---
-content_type: page_education
+content_type: course
 title: Low-background experiments in physics of the nucleus, particles and astrophysics
 shortTitle: Low-background experiments
 parent: education
--- a/src/content/en/projects/education/analysis.md
+++ b/src/content/en/projects/education/analysis.md
@ -1,5 +1,6 @@
 ---
-content_type: project_education
+content_type: project
+project_type: education
 id: analysis
 shortTitle: Data analysis course
 title: Statistical methods in experimental physics
--- a/src/content/en/projects/education/atom.md
+++ b/src/content/en/projects/education/atom.md
@ -1,5 +1,6 @@
 ---
-content_type: project_education
+content_type: project
+project_type: education
 id: atom
 shortTitle: Lecture series on the history of the atomic project
 title: History of atomic project
--- a/src/content/en/projects/education/kotlin.md
+++ b/src/content/en/projects/education/kotlin.md
@ -1,5 +1,6 @@
 ---
-content_type: project_education
+content_type: project
+project_type: education
 id: kotlin
 shortTitle: Scientific programming
 title: Introduction to Kotlin scientific programming
--- a/src/content/en/projects/education/labs.md
+++ b/src/content/en/projects/education/labs.md
@ -1,5 +1,6 @@
 ---
-content_type: project_education
+content_type: project
+project_type: education
 id: labs
 shortTitle: Laboratory works
 title: Laboratory work at the department of general physics
--- a/src/content/en/projects/education/lowbackground.md
+++ b/src/content/en/projects/education/lowbackground.md
@ -1,5 +1,6 @@
 ---
-content_type: project_education
+content_type: project
+project_type: education
 id: lowbackground
 shortTitle: Low background experiment course
 title: Low background subterranean laboratory experiments course
--- a/src/content/en/projects/math/deconvolution.md
+++ b/src/content/en/projects/math/deconvolution.md
@ -1,5 +1,6 @@
 ---
-content_type: project_math
+content_type: project
+project_type: math
 id: deconvolution
 shortTitle: Inverse problems
 title: Statistical regularization of incorrect inverse problems
--- a/src/content/en/projects/math/significance.md
+++ b/src/content/en/projects/math/significance.md
@ -1,5 +1,6 @@
 ---
-content_type: project_math
+content_type: project
+project_type: math
 id: significance
 shortTitle: Significance functions
 title: Optimal experiment planning with parameter significance functions
--- a/src/content/en/projects/physics/gerda.md
+++ b/src/content/en/projects/physics/gerda.md
@ -1,5 +1,6 @@
 ---
-content_type: project_physics
+content_type: project
+project_type: physics
 id: gerda
 shortTitle: GERDA
 title: International experiment GERDA
--- a/src/content/en/projects/physics/iaxo.md
+++ b/src/content/en/projects/physics/iaxo.md
@ -1,5 +1,6 @@
 ---
-content_type: project_physics
+content_type: project
+project_type: physics
 id: iaxo
 shortTitle: IAXO
 title: International collaboration IAXO
--- a/src/content/en/projects/physics/mm.md
+++ b/src/content/en/projects/physics/mm.md
@ -1,5 +1,6 @@
 ---
-content_type: project_physics
+content_type: project
+project_type: physics
 id: mounMonitor
 shortTitle: Muon monitor
 title: Muon monitor for subterranean low-background experiments
--- a/src/content/en/projects/physics/numass.md
+++ b/src/content/en/projects/physics/numass.md
@ -1,5 +1,6 @@
 ---
-content_type: project_physics
+content_type: project
+project_type: physics
 id: numass
 shortTitle: Troitsk nu-mass
 title: Neutrino mass search facility Troitsk nu-mass
--- a/src/content/en/projects/physics/satelite.md
+++ b/src/content/en/projects/physics/satelite.md
@ -1,5 +1,6 @@
 ---
-content_type: project_physics
+content_type: project
+project_type: physics
 id: satelite
 shortTitle: Satellite detector
 title: Satellite detector of solar radiation
--- a/src/content/en/projects/physics/spectMatter.md
+++ b/src/content/en/projects/physics/spectMatter.md
@ -1,5 +1,6 @@
 ---
-content_type: project_physics
+content_type: project
+project_type: physics
 id: spectMatter
 shortTitle: Spectator matter
 title: Spectator matter
--- a/src/content/en/projects/physics/tgf.md
+++ b/src/content/en/projects/physics/tgf.md
@ -1,5 +1,6 @@
 ---
-content_type: project_physics
+content_type: project
+project_type: physics
 id: atmosphere
 shortTitle: TGE/TGF
 title: Studying TGE and TGF
--- a/src/content/en/projects/software/biref.md
+++ b/src/content/en/projects/software/biref.md
@ -1,5 +1,6 @@
 ---
-content_type: project_software
+content_type: project
+project_type: software
 id: biref
 shortTitle: Birefringence
 title: Data analysis in laboratory work on birefringence
--- a/src/content/en/projects/software/dataforge.md
+++ b/src/content/en/projects/software/dataforge.md
@ -1,5 +1,6 @@
 ---
-content_type: project_software
+content_type: project
+project_type: software
 id: dataforge
 shortTitle: DataForge
 title: DataForge, an automated data processing system
--- a/src/content/en/projects/software/kmath.md
+++ b/src/content/en/projects/software/kmath.md
@ -1,5 +1,6 @@
 ---
-content_type: project_software
+content_type: project
+project_type: software
 id: dataforge
 shortTitle: Kmath
 title: Experimental Kotlin math library
--- a/src/content/en/projects/software/muon-sim.md
+++ b/src/content/en/projects/software/muon-sim.md
@ -1,5 +1,6 @@
 ---
-content_type: project_software
+content_type: project
+project_type: software
 id: muon-sim
 shortTitle: Modeling Muon Monitor
 title: Muon Monitor experiment data analysis model
--- a/src/content/en/projects/software/plotly.md
+++ b/src/content/en/projects/software/plotly.md
@ -1,5 +1,6 @@
 ---
-content_type: project_software
+content_type: project
+project_type: software
 id: plotly
 shortTitle: Plotly.kt
 title: Plotly.kt wrapper library for kotlin-multiplatform
--- a/src/content/en/projects/software/prog-seminar.md
+++ b/src/content/en/projects/software/prog-seminar.md
@ -1,5 +1,6 @@
 ---
-content_type: project_software
+content_type: project
+project_type: software
 id: prog-seminar
 shortTitle: Programming workshop
 title: Programming in experimental physics
--- a/src/content/en/projects/software/reactor.md
+++ b/src/content/en/projects/software/reactor.md
@ -1,5 +1,6 @@
 ---
-content_type: project_software
+content_type: project
+project_type: software
 id: reactor
 shortTitle: RL-TGE modeling
 title: Macro modeling for a reactor model in atmospheric physics
--- a/src/content/ru/magprog/contacts.md
+++ b/src/content/ru/magprog/contacts.md
@ -0,0 +1,11 @@
+---
+content_type: magprog
+magprog_section: contacts
+section_title: Контакты
+language: ru
+---
+
+
+Все вопросы можно задать в [телеграм канале лаборатории](https://t.me/mipt_npm).
+
+Также можно писать на электронную почту: <a href='mailto&#58;&#110;p&#109;&#64;m%&#54;&#57;%70&#116;&#46;ru'>npm&#64;mip&#116;&#46;ru</a>
--- a/src/content/ru/magprog/enroll.md
+++ b/src/content/ru/magprog/enroll.md
@ -0,0 +1,10 @@
+---
+content_type: magprog
+magprog_section: enroll
+section_title: Как поступить?
+language: ru
+---
+Для поступления на программу необходимо:
+* в срок **до 31 мая** заполнить [анкету]. В анкете надо указать одного или нескольких научных руководителей, с которыми вы бы хотели работать.
+* в срок **до 30 июня** пройти собеседование с научными руководителями и согласовать предполагаемый план обучения.
+* Подать документы в магистратуру МФТИ согласно [правилам поступления](https://pk.mipt.ru/master/) (направление **ЛФИ Математика и физика** или **ФПМИ Информатика**). Если есть соглашение с научным руководителем, но не удалось пройти по конкурсу, то обучение с большой вероятностью будет оплачено нашими партнерами.
--- a/src/content/ru/magprog/partners.md
+++ b/src/content/ru/magprog/partners.md
@ -0,0 +1,16 @@
+---
+content_type: magprog
+magprog_section: partners
+section_title: Партнеры
+language: ru
+---
+* [ЛФИ](https://mipt.ru/education/departments/lpr/)
+* [ПМИ](https://mipt.ru/education/departments/fpmi/)
+* [JetBrains Research](https://research.jetbrains.org/groups/npm/)
+* [JetBrains](https://www.jetbrains.com/)
+* [Таврида электрик](https://www.tavrida.com/ter/)
+* [ИЯИ РАН](https://www.inr.ru/)
+* [ИКИ РАН](http://www.iki.rssi.ru/)
+* [ОИЯИ](https://bmn.jinr.ru/)
+* ВШЭ (физфак и ФКН)
+* [HZG-DESY](https://www.desy.de/research/cooperations__institutes/hzg/index_eng.html)
--- a/src/content/ru/magprog/program.md
+++ b/src/content/ru/magprog/program.md
@ -0,0 +1,17 @@
+---
+content_type: magprog
+magprog_section: program
+section_title: Учебная программа
+language: ru
+---
+
+Особенность данной магистерской программы в том, что она собирает вместе программистов (у которых может не быть понимания предметной области) и физиков (у которых может быть ограниченное понимание программирования), поэтому нет никакой возможности создать четкий план обучения, единый длы всех. Эта проблема решается созданием индивидуальных гибких учебных планов для каждого студента. Учебный план определяется научным руководителем.
+
+Обязательными для всех предметами являются следующие:
+
+* Вычислительные методы (годовой курс)
+* Статистические методы и анализ данных (годовой курс)
+* Научная этика и подготовка научных публикаций (семестр)
+* Семинар по литературе
+
+Остальные курсы выбираются руководителем и согласуются руководством программы. Для выбора курсов можно руководствоваться  [списком рекомендованных курсов] или выбрать любой другой курс, который читается в МФТИ (и возможно в партнерских ВУЗах.
--- a/src/content/ru/magprog/team.md
+++ b/src/content/ru/magprog/team.md
@ -0,0 +1,12 @@
+---
+content_type: magprog
+magprog_section: team
+section_title: Комманда
+language: ru
+---
+
+### Александр Нозик
+**Руководитель программы.**
+
+### Александр Светличный
+**Заместитель руководителя программы**
--- a/src/content/ru/magprog/team/nozik.md
+++ b/src/content/ru/magprog/team/nozik.md
@ -0,0 +1,23 @@
+---
+content_type: magprog_team
+title: Александр Нозик
+id: nozik
+order: 1
+photo: nozik.png
+language: ru
+---
+**Заместитель руководителя группы.**
+ 
+Кандидат физико-математических наук. Старший научный сотрудник ИЯИ РАН (Сектор математического обеспечения экспериментов), ассистент кафедры общей физики МФТИ.
+
+Специалист в области анализа данных в физическом эксперименте. Участник эксперимента "Троицк ню-масс" по прямому измерению массы нейтрино. [Профиль ResearchGate](https://www.researchgate.net/profile/Alexander_Nozik)
+
+Руководитель направления в [JetBrains Research](https://research.jetbrains.org/ru/researchers/altavir).
+
+Секретарь совета [Общества Научных Работников](http://onr-russia.ru/)
+
+**Научные интересы:** Математическая статистика, Научное программное обеспечение, Масса нейтрино.
+
+<p>
+e-mail: <a href="mailto:&#110;&#111;&#122;&#105;&#107;&#046;&#097;&#097;&#064;&#109;&#105;&#112;&#116;&#046;&#114;&#117;">&#110;&#111;&#122;&#105;&#107;&#046;&#097;&#097;&#064;&#109;&#105;&#112;&#116;&#046;&#114;&#117;</a>
+</p>
--- a/src/content/ru/magprog/team/svetlichnii.md
+++ b/src/content/ru/magprog/team/svetlichnii.md
@ -0,0 +1,11 @@
+---
+content_type: magprog_team
+title: Александр Светличный
+id: svetlichnii
+order: 2
+photo: svetlichny.jpeg
+language: ru
+---
+Аспирант МФТИ, преподаватель кафедры общей физики и Физтех-активист.
+
+Занимается физикой столкновений высокоэнергичных ионов под руководством И. А. Пшеничного.
--- a/src/content/ru/magprog/what.md
+++ b/src/content/ru/magprog/what.md
@ -0,0 +1,10 @@
+---
+content_type: magprog
+magprog_section: what
+section_title: Что?
+language: ru
+---
+
+Эта страница посвящена магистерской программе МФТИ под названием **Разработка и применение программного обеспечения в физических исследованиях**. Программа создана на базе [лаборатории методов ядерно-физических экспериментов](/) при поддержке двух школ МФТИ: [ЛФИ](https://mipt.ru/education/departments/lpr/) и [ПМИ](https://mipt.ru/education/departments/fpmi/) и ряда академических и промышленных [партнеров].
+
+Эта страница призвана ответить на вопросы о том, [зачем] создана программа, кто является [научными руководителями] [как поступить] на нее и в чем ее особенности (в частности, что входит в [учебную программу]). Ну и разумеется информация о [команде] и [контактах].
--- a/src/content/ru/magprog/why.md
+++ b/src/content/ru/magprog/why.md
@ -0,0 +1,26 @@
+---
+content_type: magprog
+magprog_section: why
+section_title: Зачем?
+language: ru
+---
+
+*Зачем* физтеху **еще одна** магистерская программа?
+
+Чтобы объединить усилия физиков и программистов для создания лучших компьютерных решений и применения этих решений в области фундаментальной и прикладной физики и инженерии.
+
+*Зачем* нужно объединять эти усилия?
+
+Потому что сейчас существенная (если не основная) часть работы физика и/или инженера так или иначе связана с компьютером. Компьютеры и компьютерные программы используются на всех этапах экспериментального или теоретического исследования. Любой работе предшествует **компьютерное моделирование**, затем требуется **автоматизация сбора и хранения данных**, затем **анализ данных** и, наконец, **представление результатов**. На всех этих этапах нужны компьютеры и компьютерные программы и совершенствование последних является ключевым фактором в исследованиях и разработках.
+
+*Зачем* для этого нужны программисты?
+
+Современная разработка программного обеспечения — это отдельная инженерная дисциплина, требующая опыта и погружения в технологию и соответствующие профессиональные сообщества. Несмотря на то, что современное программирование зародилось в физических исследованиях, с тех пор прошло много времени, и физики в среднем уже не могут похвастаться хорошими знаниями в этой области. Качество программного обеспечения в физике в среднем крайне низкое. Те же проблемы свойствены инженерной индустрии.
+
+*Зачем* для этого нужны физики?
+
+Все прошлые попытки поручить всю работу профессиональным программистам не увенчались успехом. Для того чтобы сформулировать задачу программисту надо знать современные компьютерные технологии и понимать как их лучше применить. Но без погружения в предметную область, программисты тоже не могут сами понять, что нужно делать и как это лучше делать.
+
+*Зачем* все это программистам?
+
+Во-первых, это просто интересно. Задачи, возникающие на стыке физики и программирования на порядок (или два) интереснее того, что ожидает в повседневной рабочей жизни инженера-программиста. Во-вторых, это хороший повод опробовать все самые свежие и экспериментальные технологии. Кроме того, опыт в моделировании, обработке данных и работе с приборами является бесценным в IT среде.
--- a/src/content/ru/pages/atom.md
+++ b/src/content/ru/pages/atom.md
@ -1,5 +1,5 @@
 ---
-content_type: page_education
+content_type: course
 title: История атомного проекта
 shortTitle: История атомного проекта
 parent: education
--- a/src/content/ru/pages/kotlin.md
+++ b/src/content/ru/pages/kotlin.md
@ -1,5 +1,5 @@
 ---
-content_type: page_education
+content_type: course
 title: Введение в научное программирование на языке Kotlin
 shortTitle: Научное программирование
 parent: education
--- a/src/content/ru/pages/stat-methods.md
+++ b/src/content/ru/pages/stat-methods.md
@ -1,5 +1,5 @@
 ---
-content_type: page_education
+content_type: course
 title: Cтатистические методы в экспериментальной физике
 shortTitle: Статистические методы
 parent: education
--- a/src/content/ru/pages/subterranean.md
+++ b/src/content/ru/pages/subterranean.md
@ -1,5 +1,5 @@
 ---
-content_type: page_education
+content_type: course
 title: Низкофоновые эксперименты по физике ядра, частиц и астрофизике
 shortTitle: Низкофоновые эксперименты
 parent: education
--- a/src/content/ru/projects/education/analysis.md
+++ b/src/content/ru/projects/education/analysis.md
@ -1,5 +1,6 @@
 ---
-content_type: project_education
+content_type: project
+project_type: education
 id: analysis
 shortTitle: Курс по анализу данных
 title: Статистические методы в экспериментальной физике
--- a/src/content/ru/projects/education/atom.md
+++ b/src/content/ru/projects/education/atom.md
@ -1,5 +1,6 @@
 ---
-content_type: project_education
+content_type: project
+project_type: education
 id: atom
 shortTitle: Цикл лекций по истории атомного проекта
 title: История атомного проекта
--- a/src/content/ru/projects/education/kotlin.md
+++ b/src/content/ru/projects/education/kotlin.md
@ -1,5 +1,6 @@
 ---
-content_type: project_education
+content_type: project
+project_type: education
 id: kotlin
 shortTitle: Научное программирование
 title: Введение в научное программирование на языке Kotlin
--- a/src/content/ru/projects/education/labs.md
+++ b/src/content/ru/projects/education/labs.md
@ -1,5 +1,6 @@
 ---
-content_type: project_education
+content_type: project
+project_type: education
 id: labs
 shortTitle: Лабораторные работы
 title: Лабораторные работы на кафедре общей физики
--- a/src/content/ru/projects/education/lowbackground.md
+++ b/src/content/ru/projects/education/lowbackground.md
@ -1,5 +1,6 @@
 ---
-content_type: project_education
+content_type: project
+project_type: education
 id: lowbackground
 shortTitle: Курс по низкофоновым экспериментам
 title: Курс по экспериментам, проводимым в низкофоновых подземных лабораториях
--- a/src/content/ru/projects/math/deconvolution.md
+++ b/src/content/ru/projects/math/deconvolution.md
@ -1,5 +1,6 @@
 ---
-content_type: project_math
+content_type: project
+project_type: math
 id: deconvolution
 shortTitle: Обратные задачи
 title: Статистическая регуляризация некорректных обратных задач
--- a/src/content/ru/projects/math/significance.md
+++ b/src/content/ru/projects/math/significance.md
@ -1,5 +1,6 @@
 ---
-content_type: project_math
+content_type: project
+project_type: math
 id: significance
 shortTitle: Функции значимости
 title: Оптимальное планирование эксперимента при помощи функций значимости параметров
--- a/src/content/ru/projects/physics/gerda.md
+++ b/src/content/ru/projects/physics/gerda.md
@ -1,5 +1,6 @@
 ---
-content_type: project_physics
+content_type: project
+project_type: physics
 id: gerda
 shortTitle: GERDA
 title: Международный эксперимент GERDA
--- a/src/content/ru/projects/physics/iaxo.md
+++ b/src/content/ru/projects/physics/iaxo.md
@ -1,5 +1,6 @@
 ---
-content_type: project_physics
+content_type: project
+project_type: physics
 id: iaxo
 shortTitle: IAXO
 title: Международная коллаборация IAXO
--- a/src/content/ru/projects/physics/mm.md
+++ b/src/content/ru/projects/physics/mm.md
@ -1,5 +1,6 @@
 ---
-content_type: project_physics
+content_type: project
+project_type: physics
 id: mounMonitor
 shortTitle: Мюонный монитор
 title: Мюонный монитор для подземных низкофоновых экспериментов
--- a/src/content/ru/projects/physics/numass.md
+++ b/src/content/ru/projects/physics/numass.md
@ -1,5 +1,6 @@
 ---
-content_type: project_physics
+content_type: project
+project_type: physics
 id: numass
 shortTitle: Троицк ню-масс
 title: Установка по поиску массы нейтрино Троицк ню-масс
--- a/src/content/ru/projects/physics/satelite.md
+++ b/src/content/ru/projects/physics/satelite.md
@ -1,5 +1,6 @@
 ---
-content_type: project_physics
+content_type: project
+project_type: physics
 id: satelite
 shortTitle: Спутниковый детектор
 title: Спутниковый детектор солнечного излучения
--- a/src/content/ru/projects/physics/spectMatter.md
+++ b/src/content/ru/projects/physics/spectMatter.md
@ -1,5 +1,6 @@
 ---
-content_type: project_physics
+content_type: project
+project_type: physics
 id: spectMatter
 shortTitle: Спектаторная материя
 title: Спектаторная материя
--- a/src/content/ru/projects/physics/tgf.md
+++ b/src/content/ru/projects/physics/tgf.md
@ -1,5 +1,6 @@
 ---
-content_type: project_physics
+content_type: project
+project_type: physics
 id: atmosphere
 shortTitle: TGE/TGF
 title: Изучение TGE и TGF
--- a/src/content/ru/projects/software/biref.md
+++ b/src/content/ru/projects/software/biref.md
@ -1,5 +1,6 @@
 ---
-content_type: project_software
+content_type: project
+project_type: software
 id: biref
 shortTitle: Двулучепреломление
 title: Анализ данных в лабораторной работе по двулучепреломлению
--- a/src/content/ru/projects/software/dataforge.md
+++ b/src/content/ru/projects/software/dataforge.md
@ -1,5 +1,6 @@
 ---
-content_type: project_software
+content_type: project
+project_type: software
 id: dataforge
 shortTitle: DataForge
 title: Система автоматизированной обработки данных DataForge
--- a/src/content/ru/projects/software/kmath.md
+++ b/src/content/ru/projects/software/kmath.md
@ -1,5 +1,6 @@
 ---
-content_type: project_software
+content_type: project
+project_type: software
 id: dataforge
 shortTitle: Kmath
 title: "Экспериментальная математическая библиотека на kotlin"
--- a/src/content/ru/projects/software/muon-sim.md
+++ b/src/content/ru/projects/software/muon-sim.md
@ -1,5 +1,6 @@
 ---
-content_type: project_software
+content_type: project
+project_type: software
 id: muon-sim
 shortTitle: Моделирование Muon Monitor
 title: Модель для анализа данных эксперимента Muon Monitor
--- a/src/content/ru/projects/software/plotly.md
+++ b/src/content/ru/projects/software/plotly.md
@ -1,5 +1,6 @@
 ---
-content_type: project_software
+content_type: project
+project_type: software
 id: plotly
 shortTitle: Plotly.kt
 title: Plotly.kt для Kotlin-multiplatform
--- a/src/content/ru/projects/software/prog-seminar.md
+++ b/src/content/ru/projects/software/prog-seminar.md
@ -1,5 +1,6 @@
 ---
-content_type: project_software
+content_type: project
+project_type: software
 id: prog-seminar
 shortTitle: Семинар по программированию
 title: Программирование в экспериментальной физике
--- a/src/content/ru/projects/software/reactor.md
+++ b/src/content/ru/projects/software/reactor.md
@ -1,5 +1,6 @@
 ---
-content_type: project_software
+content_type: project
+project_type: software
 id: reactor
 shortTitle: Моделирование RL-TGE
 title: Макро-моделирование для реакторной модели в физике атмосферы
--- a/src/files/plotly.html
+++ b/src/files/plotly.html
--- a/src/images/index/npm-logo-no-text.svg
+++ b/src/images/index/npm-logo-no-text.svg
@ -20,13 +20,15 @@
        height="113.09572"><metadata
   id="metadata70"><rdf:RDF><cc:Work
       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+        rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title></dc:title></cc:Work></rdf:RDF></metadata>
+    <defs
            id="defs68">
 	
 	
 	
 	
-</defs><sodipodi:namedview
+</defs>
+    <sodipodi:namedview
            pagecolor="#ffffff"
            bordercolor="#666666"
            borderopacity="1"
--- a/src/images/partners/JBR.svg
+++ b/src/images/partners/JBR.svg
@ -5,7 +5,6 @@
        xmlns:dc="http://purl.org/dc/elements/1.1/"
        xmlns:cc="http://creativecommons.org/ns#"
        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
--- a/src/images/partners/jetbrains.svg
+++ b/src/images/partners/jetbrains.svg
@ -1,7 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="120.1px" height="130.2px" viewBox="0 0 120.1 130.2" style="enable-background:new 0 0 120.1 130.2;" xml:space="preserve"
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px"
+     y="0px"
+     width="120.1px" height="130.2px" viewBox="0 0 120.1 130.2" style="enable-background:new 0 0 120.1 130.2;"
+     xml:space="preserve"
 >
 <g>
 	<linearGradient id="XMLID_2_" gradientUnits="userSpaceOnUse" x1="31.8412" y1="120.5578" x2="110.2402" y2="73.24">
@ -44,7 +46,8 @@
 				l0,5.3c0,1-0.3,1.8-0.8,2.3c-0.5,0.5-1.3,0.8-2.3,0.8C40.2,52.2,39.4,51.6,38.8,50.8z"/>
            <path id="XMLID_3028_" style="fill:#FFFFFF;" d="M45.3,43.8l6.7,0v1.9l-4.4,0V47l4,0l0,1.8l-4,0l0,1.3l4.5,0l0,2l-6.7,0
 				L45.3,43.8z"/>
-			<path id="XMLID_3026_" style="fill:#FFFFFF;" d="M55,45.8l-2.5,0l0-2l7.3,0l0,2l-2.5,0l0,6.3l-2.3,0L55,45.8z"/>
+            <path id="XMLID_3026_" style="fill:#FFFFFF;"
+                  d="M55,45.8l-2.5,0l0-2l7.3,0l0,2l-2.5,0l0,6.3l-2.3,0L55,45.8z"/>
            <path id="XMLID_3022_" style="fill:#FFFFFF;" d="M39,54l4.3,0c1,0,1.8,0.3,2.3,0.7c0.3,0.3,0.5,0.8,0.5,1.4v0
 				c0,1-0.5,1.5-1.3,1.9c1,0.3,1.6,0.9,1.6,2v0c0,1.4-1.2,2.3-3.1,2.3l-4.3,0L39,54z M43.8,56.6c0-0.5-0.4-0.7-1-0.7l-1.5,0l0,1.5
 				l1.4,0C43.4,57.3,43.8,57.1,43.8,56.6L43.8,56.6z M43,59l-1.8,0l0,1.5H43c0.7,0,1.1-0.3,1.1-0.8v0C44.1,59.2,43.7,59,43,59z"/>
@ -54,7 +57,8 @@
            <path id="XMLID_3016_" style="fill:#FFFFFF;" d="M56.8,54l2.2,0l3.5,8.4l-2.5,0l-0.6-1.5l-3.2,0l-0.6,1.5l-2.4,0L56.8,54z
 				 M58.8,59l-0.9-2.3L57,59L58.8,59z"/>
            <path id="XMLID_3014_" style="fill:#FFFFFF;" d="M62.8,54l2.3,0l0,8.3l-2.3,0L62.8,54z"/>
-			<path id="XMLID_3012_" style="fill:#FFFFFF;" d="M65.7,54l2.1,0l3.4,4.4l0-4.4l2.3,0l0,8.3l-2,0L68,57.8l0,4.6l-2.3,0L65.7,54z"
+            <path id="XMLID_3012_" style="fill:#FFFFFF;"
+                  d="M65.7,54l2.1,0l3.4,4.4l0-4.4l2.3,0l0,8.3l-2,0L68,57.8l0,4.6l-2.3,0L65.7,54z"
            />
            <path id="XMLID_3010_" style="fill:#FFFFFF;" d="M73.7,61.1l1.3-1.5c0.8,0.7,1.7,1,2.7,1c0.6,0,1-0.2,1-0.6v0
 				c0-0.4-0.3-0.5-1.4-0.8c-1.8-0.4-3.1-0.9-3.1-2.6v0c0-1.5,1.2-2.7,3.2-2.7c1.4,0,2.5,0.4,3.4,1.1l-1.2,1.6
--- a/src/images/partners/mtl_logo.svg
+++ b/src/images/partners/mtl_logo.svg
@ -1,7 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <!-- Creator: CorelDRAW X8 -->
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1832px" height="664px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1832px" height="664px" version="1.1"
+     style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
     viewBox="0 0 1832 665"
 >
 <defs>
@ -45,32 +46,55 @@ viewBox="0 0 1832 665"
   </g>
            <g>
    <polygon class="fil3" points="1281,524 1213,524 1271,230 1174,230 1186,170 1445,170 1434,230 1339,230 "/>
-    <path class="fil3" d="M1509 171l204 0 -70 353 -67 0 58 -294 -78 0 -51 187c-8,32 -18,52 -29,67 -17,26 -50,37 -77,39 -15,1 -22,1 -41,1l-2 -63c13,1 27,-1 29,-1 54,-8 63,-56 86,-144l38 -145z"/>
-    <path class="fil4" d="M1795 30c6,0 12,1 18,4 6,3 11,8 14,14 3,6 5,12 5,18 0,7 -2,13 -5,18 -3,6 -8,11 -13,14 -6,3 -12,5 -19,5 -6,0 -12,-2 -18,-5 -6,-3 -10,-8 -14,-14 -3,-5 -4,-11 -4,-18 0,-6 1,-12 4,-18 4,-6 8,-11 14,-14 6,-3 12,-4 18,-4zm0 6c-5,0 -10,1 -15,4 -5,2 -8,6 -11,11 -3,5 -4,10 -4,15 0,6 1,11 4,16 2,4 6,8 11,11 5,3 10,4 15,4 6,0 11,-2 15,-4 5,-3 9,-7 12,-11 3,-5 4,-10 4,-16 0,-5 -2,-10 -4,-15 -3,-5 -7,-9 -12,-11 -5,-3 -10,-4 -15,-4zm-16 50l0 -39 14 0c4,0 8,0 10,1 2,1 3,2 5,4 1,2 2,4 2,6 0,2 -1,5 -3,7 -2,2 -5,4 -9,4 2,0 3,1 4,2 1,1 3,4 6,8l4 7 -7 0 -4 -6c-3,-5 -5,-8 -7,-9 -1,-1 -2,-2 -5,-2l-3 0 0 17 -7 0 0 0zm7 -22l7 0c4,0 7,0 8,-1 1,-1 2,-3 2,-5 0,-1 -1,-2 -1,-3 -1,-1 -2,-2 -3,-2 -1,0 -3,-1 -6,-1l-7 0 0 12z"/>
-    <polygon class="fil3" points="949,523 885,523 873,229 791,523 730,523 828,171 924,171 934,418 1047,171 1144,171 1103,523 1041,523 1079,231 "/>
+                <path class="fil3"
+                      d="M1509 171l204 0 -70 353 -67 0 58 -294 -78 0 -51 187c-8,32 -18,52 -29,67 -17,26 -50,37 -77,39 -15,1 -22,1 -41,1l-2 -63c13,1 27,-1 29,-1 54,-8 63,-56 86,-144l38 -145z"/>
+                <path class="fil4"
+                      d="M1795 30c6,0 12,1 18,4 6,3 11,8 14,14 3,6 5,12 5,18 0,7 -2,13 -5,18 -3,6 -8,11 -13,14 -6,3 -12,5 -19,5 -6,0 -12,-2 -18,-5 -6,-3 -10,-8 -14,-14 -3,-5 -4,-11 -4,-18 0,-6 1,-12 4,-18 4,-6 8,-11 14,-14 6,-3 12,-4 18,-4zm0 6c-5,0 -10,1 -15,4 -5,2 -8,6 -11,11 -3,5 -4,10 -4,15 0,6 1,11 4,16 2,4 6,8 11,11 5,3 10,4 15,4 6,0 11,-2 15,-4 5,-3 9,-7 12,-11 3,-5 4,-10 4,-16 0,-5 -2,-10 -4,-15 -3,-5 -7,-9 -12,-11 -5,-3 -10,-4 -15,-4zm-16 50l0 -39 14 0c4,0 8,0 10,1 2,1 3,2 5,4 1,2 2,4 2,6 0,2 -1,5 -3,7 -2,2 -5,4 -9,4 2,0 3,1 4,2 1,1 3,4 6,8l4 7 -7 0 -4 -6c-3,-5 -5,-8 -7,-9 -1,-1 -2,-2 -5,-2l-3 0 0 17 -7 0 0 0zm7 -22l7 0c4,0 7,0 8,-1 1,-1 2,-3 2,-5 0,-1 -1,-2 -1,-3 -1,-1 -2,-2 -3,-2 -1,0 -3,-1 -6,-1l-7 0 0 12z"/>
+                <polygon class="fil3"
+                         points="949,523 885,523 873,229 791,523 730,523 828,171 924,171 934,418 1047,171 1144,171 1103,523 1041,523 1079,231 "/>
                <g>
-     <path class="fil3" d="M1398 578c-4,0 -8,2 -10,4 -3,2 -5,6 -6,10 -1,3 0,7 2,9 2,3 5,4 9,4 4,0 8,-1 11,-4 3,-2 5,-6 6,-9 0,-5 -1,-8 -3,-11 -2,-2 -5,-3 -9,-3zm3 -11c7,0 12,2 16,7 4,5 5,11 4,18 -2,6 -5,12 -11,17 -6,5 -12,8 -19,8 -7,0 -12,-3 -16,-8 -4,-5 -6,-11 -4,-17 1,-7 5,-13 11,-18 6,-5 12,-7 19,-7l0 0z"/>
-     <polygon class="fil3" points="1329,568 1311,591 1321,615 1308,615 1303,602 1293,615 1280,615 1299,591 1290,568 1303,568 1307,580 1317,568 "/>
-     <polygon class="fil3" points="1239,578 1232,615 1221,615 1229,578 1216,578 1218,568 1254,568 1252,578 "/>
+     <path class="fil3"
+           d="M1398 578c-4,0 -8,2 -10,4 -3,2 -5,6 -6,10 -1,3 0,7 2,9 2,3 5,4 9,4 4,0 8,-1 11,-4 3,-2 5,-6 6,-9 0,-5 -1,-8 -3,-11 -2,-2 -5,-3 -9,-3zm3 -11c7,0 12,2 16,7 4,5 5,11 4,18 -2,6 -5,12 -11,17 -6,5 -12,8 -19,8 -7,0 -12,-3 -16,-8 -4,-5 -6,-11 -4,-17 1,-7 5,-13 11,-18 6,-5 12,-7 19,-7l0 0z"/>
+                    <polygon class="fil3"
+                             points="1329,568 1311,591 1321,615 1308,615 1303,602 1293,615 1280,615 1299,591 1290,568 1303,568 1307,580 1317,568 "/>
+                    <polygon class="fil3"
+                             points="1239,578 1232,615 1221,615 1229,578 1216,578 1218,568 1254,568 1252,578 "/>
                    <polygon class="fil3" points="1091,568 1082,615 1071,615 1080,568 "/>
                    <polygon class="fil3" points="1117,568 1097,591 1109,615 1096,615 1085,593 1086,589 1104,568 "/>
-     <path class="fil3" d="M1059 601l8 6c0,1 -1,1 -3,3 -5,4 -11,6 -18,6 -7,0 -13,-2 -17,-7 -4,-4 -5,-10 -3,-17 1,-7 5,-13 10,-18 6,-5 13,-7 20,-7 7,0 15,3 17,10l-10 6c-2,-2 -4,-5 -10,-5 -3,0 -7,1 -10,4 -3,2 -5,6 -6,10 -1,3 0,7 2,10 2,2 5,3 8,4 3,0 7,-1 10,-3 1,-1 2,-2 2,-2z"/>
-     <polygon class="fil3" points="1014,615 1003,615 1007,597 994,597 991,615 980,615 989,568 1000,568 996,587 1009,588 1013,568 1024,568 "/>
-     <path class="fil4" d="M1538 568l16 0 -2 10 -14 0c-1,0 -2,2 -3,3l-6 34 -11 0 7 -37c1,-6 7,-10 13,-10l0 0z"/>
-     <path class="fil3" d="M1467 568l-23 0c-7,0 -11,4 -13,10 -1,7 -3,18 -5,25 0,1 -1,2 -3,2l-3 0 -2 10 4 0c5,0 7,1 11,-2 3,-3 4,-9 5,-14l4 -21 12 0 -7 38 10 0 10 -48 0 0z"/>
-     <polygon class="fil3" points="886,615 875,615 881,587 862,615 851,615 861,568 872,568 866,595 885,568 895,568 "/>
-     <polygon class="fil3" points="930,626 919,626 921,615 894,615 903,568 914,568 906,605 919,605 927,568 938,568 930,605 934,605 "/>
-     <polygon class="fil3" points="765,615 754,615 760,585 745,615 735,615 732,584 726,615 715,615 724,568 741,568 744,595 758,568 775,568 "/>
-     <path class="fil3" d="M852 568l-23 0c-10,0 -12,5 -13,10l-3 18c-1,2 -2,5 -2,6 -1,1 -3,3 -5,3l-1 0 -4 21 11 0 2 -11 19 0 2 -10 -15 0c1,-1 3,-5 3,-7l4 -20 12 0 -8 37 4 0 -2 11 10 0 5 -21 -4 0 8 -37 0 0z"/>
-     <polygon class="fil3" points="972,615 961,615 967,587 948,615 937,615 947,568 958,568 952,595 971,568 982,568 "/>
-     <polygon class="fil3" points="1150,615 1140,615 1145,587 1127,615 1116,615 1125,568 1136,568 1131,595 1149,568 1160,568 "/>
-     <polygon class="fil3" points="1587,615 1576,615 1581,587 1563,615 1552,615 1561,568 1572,568 1567,595 1585,568 1596,568 "/>
-     <polygon class="fil3" points="1628,615 1617,615 1623,587 1604,615 1594,615 1603,568 1614,568 1609,595 1627,568 1638,568 "/>
-     <path class="fil4" d="M1269 568l16 0 -2 10 -13 0c-3,0 -3,1 -4,4l-1 4 15 0 -2 10 -15 0 -1 6c0,1 0,3 2,3l14 0 -2 10 -17 0c-6,0 -9,-5 -8,-10l5 -27c1,-6 7,-10 13,-10z"/>
-     <polygon class="fil3" points="1360,615 1349,615 1353,597 1340,597 1336,615 1326,615 1335,568 1346,568 1342,587 1355,588 1359,568 1370,568 "/>
-     <path class="fil3" d="M1495 578c-5,0 -8,2 -11,4 -3,2 -5,6 -6,10 -1,3 0,7 2,9 2,3 5,4 9,4 5,0 8,-1 11,-4 3,-2 5,-6 6,-9 1,-5 0,-8 -3,-11 -2,-2 -5,-3 -8,-3zm2 -11c7,0 12,2 16,7 4,5 5,11 4,18 -1,6 -5,12 -11,17 -5,5 -12,8 -19,8 -7,0 -12,-3 -16,-8 -4,-5 -5,-11 -4,-17 2,-7 5,-13 11,-18 6,-5 13,-7 20,-7l-1 0z"/>
-     <path class="fil4" d="M1178 568l16 0 -2 10 -13 0c-3,0 -4,1 -4,4l-1 4 15 0 -2 10 -15 0 -1 6c0,1 0,3 2,3l14 0 -2 10 -17 0c-6,0 -10,-5 -9,-10l6 -27c1,-6 7,-10 13,-10z"/>
-     <path class="fil4" d="M791 568l16 0 -2 10 -13 0c-2,0 -3,1 -4,4l-1 4 15 0 -2 10 -15 0 -1 6c0,1 0,3 2,3l14 0 -2 10 -16 0c-7,0 -10,-5 -9,-10l5 -27c1,-6 7,-10 13,-10z"/>
+                    <path class="fil3"
+                          d="M1059 601l8 6c0,1 -1,1 -3,3 -5,4 -11,6 -18,6 -7,0 -13,-2 -17,-7 -4,-4 -5,-10 -3,-17 1,-7 5,-13 10,-18 6,-5 13,-7 20,-7 7,0 15,3 17,10l-10 6c-2,-2 -4,-5 -10,-5 -3,0 -7,1 -10,4 -3,2 -5,6 -6,10 -1,3 0,7 2,10 2,2 5,3 8,4 3,0 7,-1 10,-3 1,-1 2,-2 2,-2z"/>
+                    <polygon class="fil3"
+                             points="1014,615 1003,615 1007,597 994,597 991,615 980,615 989,568 1000,568 996,587 1009,588 1013,568 1024,568 "/>
+                    <path class="fil4"
+                          d="M1538 568l16 0 -2 10 -14 0c-1,0 -2,2 -3,3l-6 34 -11 0 7 -37c1,-6 7,-10 13,-10l0 0z"/>
+                    <path class="fil3"
+                          d="M1467 568l-23 0c-7,0 -11,4 -13,10 -1,7 -3,18 -5,25 0,1 -1,2 -3,2l-3 0 -2 10 4 0c5,0 7,1 11,-2 3,-3 4,-9 5,-14l4 -21 12 0 -7 38 10 0 10 -48 0 0z"/>
+                    <polygon class="fil3"
+                             points="886,615 875,615 881,587 862,615 851,615 861,568 872,568 866,595 885,568 895,568 "/>
+                    <polygon class="fil3"
+                             points="930,626 919,626 921,615 894,615 903,568 914,568 906,605 919,605 927,568 938,568 930,605 934,605 "/>
+                    <polygon class="fil3"
+                             points="765,615 754,615 760,585 745,615 735,615 732,584 726,615 715,615 724,568 741,568 744,595 758,568 775,568 "/>
+                    <path class="fil3"
+                          d="M852 568l-23 0c-10,0 -12,5 -13,10l-3 18c-1,2 -2,5 -2,6 -1,1 -3,3 -5,3l-1 0 -4 21 11 0 2 -11 19 0 2 -10 -15 0c1,-1 3,-5 3,-7l4 -20 12 0 -8 37 4 0 -2 11 10 0 5 -21 -4 0 8 -37 0 0z"/>
+                    <polygon class="fil3"
+                             points="972,615 961,615 967,587 948,615 937,615 947,568 958,568 952,595 971,568 982,568 "/>
+                    <polygon class="fil3"
+                             points="1150,615 1140,615 1145,587 1127,615 1116,615 1125,568 1136,568 1131,595 1149,568 1160,568 "/>
+                    <polygon class="fil3"
+                             points="1587,615 1576,615 1581,587 1563,615 1552,615 1561,568 1572,568 1567,595 1585,568 1596,568 "/>
+                    <polygon class="fil3"
+                             points="1628,615 1617,615 1623,587 1604,615 1594,615 1603,568 1614,568 1609,595 1627,568 1638,568 "/>
+                    <path class="fil4"
+                          d="M1269 568l16 0 -2 10 -13 0c-3,0 -3,1 -4,4l-1 4 15 0 -2 10 -15 0 -1 6c0,1 0,3 2,3l14 0 -2 10 -17 0c-6,0 -9,-5 -8,-10l5 -27c1,-6 7,-10 13,-10z"/>
+                    <polygon class="fil3"
+                             points="1360,615 1349,615 1353,597 1340,597 1336,615 1326,615 1335,568 1346,568 1342,587 1355,588 1359,568 1370,568 "/>
+                    <path class="fil3"
+                          d="M1495 578c-5,0 -8,2 -11,4 -3,2 -5,6 -6,10 -1,3 0,7 2,9 2,3 5,4 9,4 5,0 8,-1 11,-4 3,-2 5,-6 6,-9 1,-5 0,-8 -3,-11 -2,-2 -5,-3 -8,-3zm2 -11c7,0 12,2 16,7 4,5 5,11 4,18 -1,6 -5,12 -11,17 -5,5 -12,8 -19,8 -7,0 -12,-3 -16,-8 -4,-5 -5,-11 -4,-17 2,-7 5,-13 11,-18 6,-5 13,-7 20,-7l-1 0z"/>
+                    <path class="fil4"
+                          d="M1178 568l16 0 -2 10 -13 0c-3,0 -4,1 -4,4l-1 4 15 0 -2 10 -15 0 -1 6c0,1 0,3 2,3l14 0 -2 10 -17 0c-6,0 -10,-5 -9,-10l6 -27c1,-6 7,-10 13,-10z"/>
+                    <path class="fil4"
+                          d="M791 568l16 0 -2 10 -13 0c-2,0 -3,1 -4,4l-1 4 15 0 -2 10 -15 0 -1 6c0,1 0,3 2,3l14 0 -2 10 -16 0c-7,0 -10,-5 -9,-10l5 -27c1,-6 7,-10 13,-10z"/>
    </g>
   </g>
  </g>
--- a/src/intl/en.json
+++ b/src/intl/en.json
@ -6,7 +6,8 @@
    "news": "News",
    "group": "Laboratory",
    "projects": "Projects",
-    "partners": "Partners"
+    "partners": "Partners",
+    "magprog": "Magistracy"
  },
  "notfound": {
    "header": "NOT FOUND",
--- a/src/intl/ru.json
+++ b/src/intl/ru.json
@ -1,58 +1,63 @@
 {
  "title": "NPM Group",
  "language": "ru",
-  "description": "Лаборатория методов ядерной физики",
+  "description": "Лаборатория методов ядерно-физических экспериментов",
  "header": {
    "news": "Новости",
    "group": "Лаборатория",
    "projects": "Проекты",
-    "partners": "Партнёры" },
+    "partners": "Партнёры",
+    "magprog": "Магистратура"
+  },
  "notfound": {
    "header": "404: СТРАНИЦА НЕ НАЙДЕНА",
-    "description": "Вы перешли по несуществующему пути" },
-
+    "description": "Вы перешли по несуществующему пути"
+  },
  "jumbotron": {
    "labintro": "Лаборатория методов ядерно-физических экспериментов",
    "lead": "Особенности нашего подхода к решению научных задач сегодняшнего времени: ",
    "list": "<ul><li>Лаборатория была создана на базе МФТИ, что позволяет привлекать большое количество заинтересованных лиц из числа студентов.<\/li><li>Благодаря совмещению научной работы с образовательным процессом мы обеспечиваем преемственность научного опыта.<\/li><li>Структура нашей лаборатории позволяет принимать участие в экспериментах мирового уровня даже студентам младших курсов.<\/li><li>Мы применяем самые современные методы в работе на физических экспериментах.<\/li><\/ul><p \/>",
-    "about": "О нашей лаборатории" },
-
+    "about": "О нашей лаборатории"
+  },
  "more": {
    "nuclear_title": "Ядерная физика",
    "nuclear_body": "Лаборатория принимает участие в нескольких международных экспериментах в области физики частиц, таких как эксперимент по безнейтринному двойному бета-распаду GERDA, эксперимент по поиску массы нейтрино Троицк ню-масс и так далее.",
    "nuclear_more": "Подробнее »",
-
    "education_title": "Образование",
    "education_body": "В задачи лаборатории входит разработка новых образовательных программ по физике и методике проведения физического эксперимента, а также совершенствование существующей методической и информационной базы в МФТИ и академических институтах.",
    "education_more": "Подробнее »",
-
    "software_title": "Компьютерные методы",
    "software_body": "Одним из основных направлений деятельности является разработка вычислительных методов и открытого программного обеспечения для использования в образовании и научной деятельности.",
    "software_more": "Подробнее »",
-
-    "news": "Последние новости" },
-
+    "news": "Последние новости"
+  },
  "about": {
    "title": "Лаборатория методики ядерно-физического эксперимента",
    "descr": "Группа была создана в 2015 году на базе кафедры общей физики МФТИ, нескольких лабораторий ИЯИ РАН и при поддержке лаборатории физики высоких энергий МФТИ. Цель создания - разработка методов для проведения и анализа данных экспериментов в области физики частиц и ядерной физики. Помимо этого участники группы занимаются внедрением современных информационных технологий в экспериментальную физику и образование.",
    "pubs": {
      "title": "Публикации",
      "available1": "Публикации группы доступны на ",
-      "available2": "отдельной странице" },
+      "available2": "отдельной странице"
+    },
    "contacts": {
      "title": "Контактная информация",
      "mail": "Электронный адрес: ",
-      "telegram": "Телеграм канал: " }
+      "telegram": "Телеграм канал: "
+    }
  },
-
  "partners": {
    "mipt": {
      "title_fund": "Кафедра общей физики МФТИ",
      "description_fund": "Кафедра общей физики является основной точкой соприкосновения для ученых и преподавателей с одной стороны и студентов с другой стороны. Тесное сотрудничество с кафдерой является залогом постоянного притока молодых сотрудников, а также постоянного самосовершенствования членов группы, работающих со студентами.",
      "title_energy": "Лаборатория физики высоких энергий МФТИ",
-      "description_energy": "Тесное сотрудничество с лабораторией физики высоких энергий позволяет осуществлять прямой контакт между образованием и научным сообществом, не выходя за рамки МФТИ." },
-    "jb": { "description": "Лаборатория активно сотрудничает с компанией JetBrains во внедрении языка Kotlin в научном программировании, преподавании Kotlin и разработке библиотек на Kotlin." },
-    "jbr": { "description": "Группа разработки программного обеспечения входит в международное научное объединение JetBrains Research." },
+      "description_energy": "Тесное сотрудничество с лабораторией физики высоких энергий позволяет осуществлять прямой контакт между образованием и научным сообществом, не выходя за рамки МФТИ."
+    },
+    "jb": {
+      "description": "Лаборатория активно сотрудничает с компанией JetBrains во внедрении языка Kotlin в научном программировании, преподавании Kotlin и разработке библиотек на Kotlin."
+    },
+    "jbr": {
+      "description": "Группа разработки программного обеспечения входит в международное научное объединение JetBrains Research."
+    },
    "ras": {
      "title_exp": "Отдел экспериментальной физики ИЯИ РАН",
      "description_exp": "Ведется очень плотное сотруднничество с ОЭФ ИЯИ РАН в рамках коллабораций Troitsk nu-mass и KATRIN, а также в плане подготовки квалифицированных кадров для работы на эксперименте NICA и в других ускорительных экспериментах. В рамках сотрудничества реализуются как научные так и образовательные задачи.",
@ -61,27 +66,30 @@
      "title_education": "Научно-образовательный центр ИЯИ РАН",
      "description_education": "Часть студентов, участвующих в группе обучается в научно-образовательном центре ИЯИ РАН.",
      "title_iki": "ИКИ РАН",
-      "description_iki": "Группа участвует в математическом моделировании электрических разрядов в атмосфере." }
+      "description_iki": "Группа участвует в математическом моделировании электрических разрядов в атмосфере."
+    }
  },
-
  "physics": {
    "bc_title": "Физика",
    "title": "Ядерная физика",
-    "description": "Традиционно к ядерной физике относят не только исследования, связанные со структурой атомного ядра и ядерными реакциями, но и всю физику элементарных частиц, а также отчасти некоторые разделы астрофизики и космологии. В настоящее время усилия нашей группы сосредоточены в области так называемых неускорительных экспериментов в физике элементарных частиц." },
+    "description": "Традиционно к ядерной физике относят не только исследования, связанные со структурой атомного ядра и ядерными реакциями, но и всю физику элементарных частиц, а также отчасти некоторые разделы астрофизики и космологии. В настоящее время усилия нашей группы сосредоточены в области так называемых неускорительных экспериментов в физике элементарных частиц."
+  },
  "education": {
    "bc_title": "Образование",
    "title": "Образование",
    "description": "Образовательные проекты в побласти ядерной физики и методов проведения и анализа результатов физического эксперимента являются одним из ключевых направлений деятельности группы.",
    "course1": "Подробная информация доступна на ",
-    "course2": "странице курса" },
+    "course2": "странице курса"
+  },
  "math": {
    "bc_title": "Математика",
    "title": "Математические методы",
-    "description": "Математическое моделирование физических процессов и математические методы анализа данных являются неотъемлимой частью современной экспериментальной физики. Постоянно возникает потребность как в совершенствовании существующих методов, так и в разработке принципиально новых подходов." },
+    "description": "Математическое моделирование физических процессов и математические методы анализа данных являются неотъемлимой частью современной экспериментальной физики. Постоянно возникает потребность как в совершенствовании существующих методов, так и в разработке принципиально новых подходов."
+  },
  "software": {
    "bc_title": "Программное обеспечение",
    "title": "Научное программное обеспечение",
-    "description": "Современные эксперименты в физике частиц немыслимы без специального программного обеспечения, которое требуется как на этапе проведения эксперимента и сбора данных, так и при обработке результатов. Разработка научного программного обеспечения является дополнительным, но существенным направлением работы группы." },
-
+    "description": "Современные эксперименты в физике частиц немыслимы без специального программного обеспечения, которое требуется как на этапе проведения эксперимента и сбора данных, так и при обработке результатов. Разработка научного программного обеспечения является дополнительным, но существенным направлением работы группы."
+  },
  "quarks": "Физика"
 }
--- a/src/pages/404.js
+++ b/src/pages/404.js
@ -14,6 +14,7 @@ const NotFoundPage = () => {
                <p style={{textAlign: `center`}}><FormattedMessage id="notfound.description"/></p>
            </div>
        </Layout>
-)}
+    )
+}

 export default injectIntl(NotFoundPage)
--- a/src/pages/about.js
+++ b/src/pages/about.js
@ -4,27 +4,31 @@ import {graphql} from "gatsby"
 import Parser from "html-react-parser"

 import Layout from "../components/layout"
-import SEO from "../components/seo"
 import "../styles/main.css"

 const AboutPage = ({data}) => {
    const intl = useIntl()
    const lang = intl.locale
    var members = ""
-  if ( lang==="ru" ) { members = data.ru_members.edges; } 
-  else if ( lang==="en" ) { members = data.en_members.edges; }
+    if (lang === "ru") {
+        members = data.ru_members.edges;
+    } else if (lang === "en") {
+        members = data.en_members.edges;
+    }
    return (
        <Layout>
-        <SEO lang={lang} title={intl.formatMessage({ id: "title" })} />
-        <h1 style = {{marginTop: `20px`}}><FormattedMessage id="about.title" /></h1>
-        <p style = {{marginTop: `0px`}}><FormattedMessage id="about.descr" /></p>
+            <h1><FormattedMessage id="about.title"/></h1>
+            <p><FormattedMessage id="about.descr"/></p>

            <h2 id="publications"><FormattedMessage id="about.pubs.title"/></h2>
-        <p style = {{marginTop: `0px`, marginBottom: `0px`}}><FormattedMessage id="about.pubs.available1"/><Link to="/publications"><FormattedMessage id="about.pubs.available2"/></Link></p>
+            <p style={{marginTop: `0px`, marginBottom: `0px`}}><FormattedMessage id="about.pubs.available1"/><Link
+                to="/publications"><FormattedMessage id="about.pubs.available2"/></Link></p>

            <h2 id="contacts"><FormattedMessage id="about.contacts.title"/></h2>
-        <p style = {{marginTop: `0px`, marginBottom: `0px`}}><FormattedMessage id="about.contacts.mail" /><a href='mailto&#58;&#110;p&#109;&#64;m%&#54;&#57;%70&#116;&#46;ru'>npm&#64;mip&#116;&#46;ru</a></p>
-        <p style = {{marginTop: `0px`}}><FormattedMessage id="about.contacts.telegram" /><a href="https://t.me/mipt_npm">https://t.me/mipt_npm</a></p>
+            <p style={{marginTop: `0px`, marginBottom: `0px`}}><FormattedMessage id="about.contacts.mail"/><a
+                href='mailto&#58;&#110;p&#109;&#64;m%&#54;&#57;%70&#116;&#46;ru'>npm&#64;mip&#116;&#46;ru</a></p>
+            <p style={{marginTop: `0px`}}><FormattedMessage id="about.contacts.telegram"/><a
+                href="https://t.me/mipt_npm">https://t.me/mipt_npm</a></p>

            {/* ------------------------------ */}

@ -37,7 +41,7 @@ const AboutPage = ({ data }) => {
                        <div>
                            <hr/>
                            <div className="row">
-                <div className = "col-lg-2"></div>
+                                <div className="col-lg-2"/>
                                <div className="col-lg-10">
                                    <h2>{name}</h2>
                                    <div>{Parser(node.html)}</div>
@ -69,7 +73,7 @@ export default injectIntl(AboutPage)

 export const query = graphql`
    query {
-    ru_members: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "member"}, published: {eq: true}, language: {eq: "ru"}}}, 
+        ru_members: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "member"}, published: {ne: false}, language: {eq: "ru"}}},
            sort: {fields: frontmatter___order, order: ASC}) {
            edges{
                node {
@ -83,7 +87,7 @@ query {
            }
        }

-    en_members: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "member"}, published: {eq: true}, language: {eq: "en"}}}, 
+        en_members: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "member"}, published: {ne: false}, language: {eq: "en"}}},
            sort: {fields: frontmatter___order, order: ASC}) {
            edges{
                node {
--- a/src/pages/index.js
+++ b/src/pages/index.js
@ -1,8 +1,8 @@
 import React from "react"
-import {FormattedMessage, injectIntl, Link, useIntl} from "gatsby-plugin-react-intl"
+import {FormattedMessage, injectIntl, useIntl} from "react-intl"
+import {Link} from "gatsby-plugin-react-intl"
 import {graphql} from "gatsby"
 import Layout from "../components/layout"
-import SEO from "../components/seo"
 import Parser from "html-react-parser"

 import head_ru from "../images/index/head.png"
@ -14,8 +14,8 @@ import {Button, Jumbotron} from "react-bootstrap"
 const IndexPage = ({data}) => {
    const intl = useIntl()
    const lang = intl.locale
-    var news = ""
-    var head = ""
+    let news = "";
+    let head = "";
    if (lang === "ru") {
        news = data.ru_posts.edges;
        head = head_ru;
@ -27,8 +27,6 @@ const IndexPage = ({data}) => {

    return (
        <Layout>
-            <SEO lang={lang} title={intl.formatMessage({id: "title"})}/>
-
            {/* --------------------------------- */}
            <Jumbotron>
                <img src={head} width="90%" className="center-block" alt="head"/>
@ -89,7 +87,7 @@ export default injectIntl(IndexPage)

 export const query = graphql`
    query {
-        ru_posts: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}, language: {eq: "ru"}}},
+        ru_posts: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "post"}, published: {ne: false}, language: {eq: "ru"}}},
            sort: {fields: [frontmatter___date], order: DESC}, limit: 3 )
        {
            edges{
@ -104,7 +102,7 @@ export const query = graphql`
            }
        }

-        en_posts: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}, language: {eq: "en"}}},
+        en_posts: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "post"}, published: {ne: false}, language: {eq: "en"}}},
            sort: {fields: [frontmatter___date], order: DESC}, limit: 3 )
        {
            edges{
--- a/src/pages/magprog/elements.js
+++ b/src/pages/magprog/elements.js
@ -0,0 +1,584 @@
+import React from 'react';
+import MagProgLayout from "../../components/magprog/common/MagProgLayout";
+
+const SecondPage = () => (
+    <MagProgLayout>
+
+        <div id="wrapper">
+            <section id="main" className="wrapper">
+                <div className="inner">
+                    <h1 className="major">Elements</h1>
+
+                    <section>
+                        <h2>Text</h2>
+                        <p>
+                            This is <b>bold</b> and this is <strong>strong</strong>. This is{' '}
+                            <i>italic</i> and this is <em>emphasized</em>. This is{' '}
+                            <sup>superscript</sup> text and this is <sub>subscript</sub> text.
+                            This is <u>underlined</u> and this is code: <code>for (;;) </code>
+                            . Finally, <a href="/">this is a link</a>.
+                        </p>
+                        <hr/>
+                        <p>
+                            Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida
+                            odio porttitor sem non mi integer non faucibus ornare mi ut ante
+                            amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem
+                            accumsan varius montes viverra nibh in adipiscing blandit tempus
+                            accumsan.
+                        </p>
+                        <hr/>
+                        <h2>Heading Level 2</h2>
+                        <h3>Heading Level 3</h3>
+                        <h4>Heading Level 4</h4>
+                        <hr/>
+                        <h3>Blockquote</h3>
+                        <blockquote>
+                            Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis
+                            sagittis eget tempus euismod. Vestibulum ante ipsum primis in
+                            faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat
+                            ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in
+                            faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.
+                        </blockquote>
+                        <h3>Preformatted</h3>
+                        <pre>
+              <code>
+                i = 0; while (!deck.isInOrder()) print 'Iteration ' + i;
+                deck.shuffle(); i++; print 'It took ' + i + ' iterations to sort
+                the deck.';
+              </code>
+            </pre>
+                    </section>
+
+                    <section>
+                        <h2>Lists</h2>
+                        <div className="row">
+                            <div className="col-6 col-12-medium">
+                                <h3>Unordered</h3>
+                                <ul>
+                                    <li>Dolor pulvinar etiam.</li>
+                                    <li>Sagittis adipiscing.</li>
+                                    <li>Felis enim feugiat.</li>
+                                </ul>
+                                <h3>Alternate</h3>
+                                <ul className="alt">
+                                    <li>Dolor pulvinar etiam.</li>
+                                    <li>Sagittis adipiscing.</li>
+                                    <li>Felis enim feugiat.</li>
+                                </ul>
+                            </div>
+                            <div className="col-6 col-12-medium">
+                                <h3>Ordered</h3>
+                                <ol>
+                                    <li>Dolor pulvinar etiam.</li>
+                                    <li>Etiam vel felis viverra.</li>
+                                    <li>Felis enim feugiat.</li>
+                                    <li>Dolor pulvinar etiam.</li>
+                                    <li>Etiam vel felis lorem.</li>
+                                    <li>Felis enim et feugiat.</li>
+                                </ol>
+                                <h3>Icons</h3>
+                                <ul className="icons">
+                                    <li>
+                                        <a href="/" className="icon fa-twitter">
+                                            <span className="label">Twitter</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="/" className="icon fa-facebook">
+                                            <span className="label">Facebook</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="/" className="icon fa-instagram">
+                                            <span className="label">Instagram</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="/" className="icon fa-github">
+                                            <span className="label">Github</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                        <h2>Actions</h2>
+                        <div className="row">
+                            <div className="col-6 col-12-medium">
+                                <ul className="actions">
+                                    <li>
+                                        <a href="/" className="button primary">
+                                            Default
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="/" className="button">
+                                            Default
+                                        </a>
+                                    </li>
+                                </ul>
+                                <ul className="actions small">
+                                    <li>
+                                        <a href="/" className="button primary small">
+                                            Small
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="/" className="button small">
+                                            Small
+                                        </a>
+                                    </li>
+                                </ul>
+                                <ul className="actions stacked">
+                                    <li>
+                                        <a href="/" className="button primary">
+                                            Default
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="/" className="button">
+                                            Default
+                                        </a>
+                                    </li>
+                                </ul>
+                                <ul className="actions stacked">
+                                    <li>
+                                        <a href="/" className="button primary small">
+                                            Small
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="/" className="button small">
+                                            Small
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div className="col-6 col-12-medium">
+                                <ul className="actions stacked">
+                                    <li>
+                                        <a href="/" className="button primary fit">
+                                            Default
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="/" className="button fit">
+                                            Default
+                                        </a>
+                                    </li>
+                                </ul>
+                                <ul className="actions stacked">
+                                    <li>
+                                        <a href="/" className="button primary small fit">
+                                            Small
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a href="/" className="button small fit">
+                                            Small
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </section>
+
+                    <section>
+                        <h2>Table</h2>
+                        <h3>Default</h3>
+                        <div className="table-wrapper">
+                            <table>
+                                <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Description</th>
+                                    <th>Price</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr>
+                                    <td>Item One</td>
+                                    <td>Ante turpis integer aliquet porttitor.</td>
+                                    <td>29.99</td>
+                                </tr>
+                                <tr>
+                                    <td>Item Two</td>
+                                    <td>Vis ac commodo adipiscing arcu aliquet.</td>
+                                    <td>19.99</td>
+                                </tr>
+                                <tr>
+                                    <td>Item Three</td>
+                                    <td> Morbi faucibus arcu accumsan lorem.</td>
+                                    <td>29.99</td>
+                                </tr>
+                                <tr>
+                                    <td>Item Four</td>
+                                    <td>Vitae integer tempus condimentum.</td>
+                                    <td>19.99</td>
+                                </tr>
+                                <tr>
+                                    <td>Item Five</td>
+                                    <td>Ante turpis integer aliquet porttitor.</td>
+                                    <td>29.99</td>
+                                </tr>
+                                </tbody>
+                                <tfoot>
+                                <tr>
+                                    <td colSpan="2"/>
+                                    <td>100.00</td>
+                                </tr>
+                                </tfoot>
+                            </table>
+                        </div>
+
+                        <h3>Alternate</h3>
+                        <div className="table-wrapper">
+                            <table className="alt">
+                                <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Description</th>
+                                    <th>Price</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr>
+                                    <td>Item One</td>
+                                    <td>Ante turpis integer aliquet porttitor.</td>
+                                    <td>29.99</td>
+                                </tr>
+                                <tr>
+                                    <td>Item Two</td>
+                                    <td>Vis ac commodo adipiscing arcu aliquet.</td>
+                                    <td>19.99</td>
+                                </tr>
+                                <tr>
+                                    <td>Item Three</td>
+                                    <td> Morbi faucibus arcu accumsan lorem.</td>
+                                    <td>29.99</td>
+                                </tr>
+                                <tr>
+                                    <td>Item Four</td>
+                                    <td>Vitae integer tempus condimentum.</td>
+                                    <td>19.99</td>
+                                </tr>
+                                <tr>
+                                    <td>Item Five</td>
+                                    <td>Ante turpis integer aliquet porttitor.</td>
+                                    <td>29.99</td>
+                                </tr>
+                                </tbody>
+                                <tfoot>
+                                <tr>
+                                    <td colSpan="2"/>
+                                    <td>100.00</td>
+                                </tr>
+                                </tfoot>
+                            </table>
+                        </div>
+                    </section>
+
+                    <section>
+                        <h3>Buttons</h3>
+                        <ul className="actions">
+                            <li>
+                                <a href="/" className="button primary">
+                                    Primary
+                                </a>
+                            </li>
+                            <li>
+                                <a href="/" className="button">
+                                    Default
+                                </a>
+                            </li>
+                        </ul>
+                        <ul className="actions">
+                            <li>
+                                <a href="/" className="button large">
+                                    Large
+                                </a>
+                            </li>
+                            <li>
+                                <a href="/" className="button">
+                                    Default
+                                </a>
+                            </li>
+                            <li>
+                                <a href="/" className="button small">
+                                    Small
+                                </a>
+                            </li>
+                        </ul>
+                        <ul className="actions fit">
+                            <li>
+                                <a href="/" className="button primary fit">
+                                    Fit
+                                </a>
+                            </li>
+                            <li>
+                                <a href="/" className="button fit">
+                                    Fit
+                                </a>
+                            </li>
+                            <li>
+                                <a href="/" className="button fit">
+                                    Fit
+                                </a>
+                            </li>
+                        </ul>
+                        <ul className="actions fit small">
+                            <li>
+                                <a href="/" className="button primary fit small">
+                                    Fit + Small
+                                </a>
+                            </li>
+                            <li>
+                                <a href="/" className="button fit small">
+                                    Fit + Small
+                                </a>
+                            </li>
+                            <li>
+                                <a href="/" className="button fit small">
+                                    Fit + Small
+                                </a>
+                            </li>
+                        </ul>
+                        <ul className="actions">
+                            <li>
+                                <a href="/" className="button primary icon fa-download">
+                                    Icon
+                                </a>
+                            </li>
+                            <li>
+                                <a href="/" className="button icon fa-upload">
+                                    Icon
+                                </a>
+                            </li>
+                            <li>
+                                <a href="/" className="button icon fa-save">
+                                    Icon
+                                </a>
+                            </li>
+                        </ul>
+                        <ul className="actions">
+                            <li>
+                                <span className="button primary disabled">Disabled</span>
+                            </li>
+                            <li>
+                                <span className="button disabled">Disabled</span>
+                            </li>
+                        </ul>
+                    </section>
+
+                    <section>
+                        <h2>Form</h2>
+                        <form method="post" action="#">
+                            <div className="row gtr-uniform">
+                                <div className="col-6 col-12-xsmall">
+                                    <input
+                                        type="text"
+                                        name="demo-name"
+                                        id="demo-name"
+                                        value=""
+                                        placeholder="Name"
+                                    />
+                                </div>
+                                <div className="col-6 col-12-xsmall">
+                                    <input
+                                        type="email"
+                                        name="demo-email"
+                                        id="demo-email"
+                                        value=""
+                                        placeholder="Email"
+                                    />
+                                </div>
+                                <div className="col-12">
+                                    <select name="demo-category" id="demo-category">
+                                        <option value="">- Category -</option>
+                                        <option value="1">Manufacturing</option>
+                                        <option value="1">Shipping</option>
+                                        <option value="1">Administration</option>
+                                        <option value="1">Human Resources</option>
+                                    </select>
+                                </div>
+                                <div className="col-4 col-12-small">
+                                    <input
+                                        type="radio"
+                                        id="demo-priority-low"
+                                        name="demo-priority"
+                                        checked
+                                    />
+                                    <label htmlFor="demo-priority-low">Low</label>
+                                </div>
+                                <div className="col-4 col-12-small">
+                                    <input
+                                        type="radio"
+                                        id="demo-priority-normal"
+                                        name="demo-priority"
+                                    />
+                                    <label htmlFor="demo-priority-normal">Normal</label>
+                                </div>
+                                <div className="col-4 col-12-small">
+                                    <input
+                                        type="radio"
+                                        id="demo-priority-high"
+                                        name="demo-priority"
+                                    />
+                                    <label htmlFor="demo-priority-high">High</label>
+                                </div>
+                                <div className="col-6 col-12-small">
+                                    <input type="checkbox" id="demo-copy" name="demo-copy"/>
+                                    <label htmlFor="demo-copy">Email me a copy</label>
+                                </div>
+                                <div className="col-6 col-12-small">
+                                    <input
+                                        type="checkbox"
+                                        id="demo-human"
+                                        name="demo-human"
+                                        checked
+                                    />
+                                    <label htmlFor="demo-human">Not a robot</label>
+                                </div>
+                                <div className="col-12">
+                  <textarea
+                      name="demo-message"
+                      id="demo-message"
+                      placeholder="Enter your message"
+                      rows="6"
+                  />
+                                </div>
+                                <div className="col-12">
+                                    <ul className="actions">
+                                        <li>
+                                            <input
+                                                type="submit"
+                                                value="Send Message"
+                                                className="primary"
+                                            />
+                                        </li>
+                                        <li>
+                                            <input type="reset" value="Reset"/>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </form>
+                    </section>
+
+                    <section>
+                        <h2>Image</h2>
+                        <h3>Fit</h3>
+                        <div className="box alt">
+                            <div className="row gtr-uniform">
+                                <div className="col-12">
+                  <span className="image fit">
+                    <img src="images/pic04.jpg" alt=""/>
+                  </span>
+                                </div>
+                                <div className="col-4">
+                  <span className="image fit">
+                    <img src="images/pic01.jpg" alt=""/>
+                  </span>
+                                </div>
+                                <div className="col-4">
+                  <span className="image fit">
+                    <img src="images/pic02.jpg" alt=""/>
+                  </span>
+                                </div>
+                                <div className="col-4">
+                  <span className="image fit">
+                    <img src="images/pic03.jpg" alt=""/>
+                  </span>
+                                </div>
+                                <div className="col-4">
+                  <span className="image fit">
+                    <img src="images/pic03.jpg" alt=""/>
+                  </span>
+                                </div>
+                                <div className="col-4">
+                  <span className="image fit">
+                    <img src="images/pic01.jpg" alt=""/>
+                  </span>
+                                </div>
+                                <div className="col-4">
+                  <span className="image fit">
+                    <img src="images/pic02.jpg" alt=""/>
+                  </span>
+                                </div>
+                                <div className="col-4">
+                  <span className="image fit">
+                    <img src="images/pic02.jpg" alt=""/>
+                  </span>
+                                </div>
+                                <div className="col-4">
+                  <span className="image fit">
+                    <img src="images/pic03.jpg" alt=""/>
+                  </span>
+                                </div>
+                                <div className="col-4">
+                  <span className="image fit">
+                    <img src="images/pic01.jpg" alt=""/>
+                  </span>
+                                </div>
+                            </div>
+                        </div>
+                        <h3>Left &amp; Right</h3>
+                        <p>
+              <span className="image left">
+                <img src="images/pic05.jpg" alt=""/>
+              </span>
+                            Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis
+                            sagittis eget. tempus euismod. Vestibulum ante ipsum primis in
+                            faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat
+                            ac adipiscing accumsan eu faucibus. Integer ac pellentesque
+                            praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum
+                            ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu
+                            felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer
+                            ac pellentesque praesent. Donec accumsan interdum nisi, quis
+                            tincidunt felis sagittis eget. tempus euismod. Vestibulum ante
+                            ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis
+                            iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac
+                            pellentesque praesent tincidunt felis sagittis eget. tempus
+                            euismod. Vestibulum ante ipsum primis in faucibus vestibulum.
+                            Blandit adipiscing eu felis iaculis volutpat ac adipiscing
+                            accumsan eu faucibus. Integer ac pellentesque praesent. Blandit
+                            adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu
+                            faucibus. Integer ac pellentesque praesent tincidunt felis
+                            sagittis eget. tempus euismod. Vestibulum ante ipsum primis in
+                            faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat
+                            ac adipiscing accumsan eu faucibus. Integer ac pellentesque
+                            praesent.
+                        </p>
+                        <p>
+              <span className="image right">
+                <img src="images/pic06.jpg" alt=""/>
+              </span>
+                            Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis
+                            sagittis eget. tempus euismod. Vestibulum ante ipsum primis in
+                            faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat
+                            ac adipiscing accumsan eu faucibus. Integer ac pellentesque
+                            praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum
+                            ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu
+                            felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer
+                            ac pellentesque praesent. Donec accumsan interdum nisi, quis
+                            tincidunt felis sagittis eget. tempus euismod. Vestibulum ante
+                            ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis
+                            iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac
+                            pellentesque praesent tincidunt felis sagittis eget. tempus
+                            euismod. Vestibulum ante ipsum primis in faucibus vestibulum.
+                            Blandit adipiscing eu felis iaculis volutpat ac adipiscing
+                            accumsan eu faucibus. Integer ac pellentesque praesent. Blandit
+                            adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu
+                            faucibus. Integer ac pellentesque praesent tincidunt felis
+                            sagittis eget. tempus euismod. Vestibulum ante ipsum primis in
+                            faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat
+                            ac adipiscing accumsan eu faucibus. Integer ac pellentesque
+                            praesent.
+                        </p>
+                    </section>
+                </div>
+            </section>
+        </div>
+    </MagProgLayout>
+);
+
+export default SecondPage;
--- a/src/pages/magprog/generic.js
+++ b/src/pages/magprog/generic.js
@ -0,0 +1,38 @@
+import React from 'react';
+
+import MagProgLayout from "../../components/magprog/common/MagProgLayout";
+
+const SecondPage = () => (
+    <MagProgLayout>
+        <div id="wrapper">
+            <section id="main" className="wrapper">
+                <div className="inner">
+                    <h1 className="major">A Generic Page</h1>
+                    <span className="image fit">
+            <img src="images/pic04.jpg" alt=""/>
+          </span>
+                    <p>
+                        Donec eget ex magna. Interdum et malesuada fames ac ante ipsum
+                        primis in faucibus. Pellentesque venenatis dolor imperdiet dolor
+                        mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor
+                        sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet,
+                        fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit.
+                        Donec urna ex, lacinia in purus ac, pretium pulvinar mauris.
+                        Curabitur sapien risus, commodo eget turpis at, elementum convallis
+                        elit. Pellentesque enim turpis, hendrerit tristique.
+                    </p>
+                    <p>
+                        Interdum et malesuada fames ac ante ipsum primis in faucibus.
+                        Pellentesque venenatis dolor imperdiet dolor mattis sagittis.
+                        Praesent rutrum sem diam, vitae egestas enim auctor sit amet.
+                        Pellentesque leo mauris, consectetur id ipsum sit amet, fersapien
+                        risus, commodo eget turpis at, elementum convallis elit.
+                        Pellentesque enim turpis, hendrerit tristique lorem ipsum dolor.
+                    </p>
+                </div>
+            </section>
+        </div>
+    </MagProgLayout>
+);
+
+export default SecondPage;
--- a/src/pages/magprog/index.js
+++ b/src/pages/magprog/index.js
@ -0,0 +1,137 @@
+import React from 'react';
+import {injectIntl} from "react-intl";
+import {graphql} from "gatsby";
+
+import MagProgLayout from '../../components/magprog/common/MagProgLayout';
+import Parser from "html-react-parser";
+import Scrollspy from "react-scrollspy";
+import Scroll from "../../components/magprog/common/Scroll";
+
+
+const MagProgPage = (props) => {
+    let sections = [props.data.what, props.data.why, props.data.partners, props.data.program, props.data.enroll, props.data.contacts].map(node => {
+        return {
+            id: node.frontmatter.magprog_section,
+            title: node.frontmatter.section_title,
+            body: Parser(node.html)
+        }
+    })
+
+    return (
+        <MagProgLayout>
+            <section id="sidebar">
+                <div className="inner">
+                    <nav>
+                        <Scrollspy
+                            items={sections.map(section => section.id)}
+                            currentClassName="active"
+                            offset={-300}
+                        >
+                            {sections.map(section => {
+                                return <li>
+                                    <Scroll type="id" element={section.id}>
+                                        <a href={`#${section.id}`}>{section.title}</a>
+                                    </Scroll>
+                                </li>
+                            })}
+                        </Scrollspy>
+                    </nav>
+                </div>
+            </section>
+            <div id="wrapper">
+                {sections.map(section => {
+                    return <section id={section.id}
+                                    className="wrapper style1 fullscreen fade-up">
+                        <div className="inner">
+                            <h2>{section.title}</h2>
+                            {section.body}
+                        </div>
+                    </section>
+                })}
+
+                {/*<Features/>*/}
+                {/*<Capabilities/>*/}
+                {/*<Contact/>*/}
+            </div>
+        </MagProgLayout>
+    )
+}
+
+export default injectIntl(MagProgPage)
+
+export const query = graphql`
+    query{
+        what: markdownRemark(frontmatter: {content_type: {eq: "magprog"}, magprog_section: {eq: "what"} published: {ne: false}, language: {eq: "ru"}}){
+            html
+            frontmatter{
+                magprog_section
+                section_title
+            }
+        }
+        why: markdownRemark(frontmatter: {content_type: {eq: "magprog"}, magprog_section: {eq: "why"} published: {ne: false}, language: {eq: "ru"}}){
+            html
+            frontmatter{
+                magprog_section
+                section_title
+            }
+        }
+
+        partners: markdownRemark(frontmatter: {content_type: {eq: "magprog"}, magprog_section: {eq: "partners"} published: {ne: false}, language: {eq: "ru"}}){
+            html
+            frontmatter{
+                magprog_section
+                section_title
+            }
+        }
+
+        #        Научные руководители
+
+        program: markdownRemark(frontmatter: {content_type: {eq: "magprog"}, magprog_section: {eq: "program"} published: {ne: false}, language: {eq: "ru"}}){
+            html
+            frontmatter{
+                magprog_section
+                section_title
+            }
+        }
+
+
+        enroll: markdownRemark(frontmatter: {content_type: {eq: "magprog"}, magprog_section: {eq: "enroll"} published: {ne: false}, language: {eq: "ru"}}){
+            html
+            frontmatter{
+                magprog_section
+                section_title
+            }
+        }
+
+
+        team: markdownRemark(frontmatter: {content_type: {eq: "magprog"}, magprog_section: {eq: "team"} published: {ne: false}, language: {eq: "ru"}}){
+            html
+            frontmatter{
+                magprog_section
+                section_title
+            }
+        }
+
+        contacts: markdownRemark(frontmatter: {content_type: {eq: "magprog"}, magprog_section: {eq: "contacts"} published: {ne: false}, language: {eq: "ru"}}){
+            html
+            frontmatter{
+                magprog_section
+                section_title
+            }
+        }
+        #
+        #        team: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "magprog_team"}, published: {ne: false}, language: {eq: "ru"}}},
+        #            sort: {fields: frontmatter___order, order: ASC}) {
+        #            edges{
+        #                node {
+        #                    html
+        #                    frontmatter {
+        #                        title
+        #                        photo
+        #                        language
+        #                    }
+        #                }
+        #            }
+        #        }
+    }
+`
--- a/src/pages/partners.js
+++ b/src/pages/partners.js
@ -1,32 +1,32 @@
 import React from "react"
 import Layout from "../components/layout"
-import {FormattedMessage, injectIntl, useIntl} from "gatsby-plugin-react-intl"
-import "../styles/main.css"
+import {FormattedMessage, injectIntl} from "react-intl"
+
 ///------------------------------------------------------
 import mipt_logo from "../images/partners/mipt_logo.jpg"
 import inr_linac from "../images/partners/Linac-OUK_big.gif"
 import inr_logo from "../images/partners/inr_logo.png"
 import jetbrains_logo from "../images/partners/jetbrains.svg"
 import jbr from "../images/partners/JBR.svg"
-import SEO from "../components/seo"

 const PartnersPage = () => {
-    const intl = useIntl()
-    const lang = intl.locale
    return (
        <Layout>
-    <SEO lang={lang} title={intl.formatMessage({ id: "title" })} />
-
            <div className="media" style={{marginTop: `30px`}}>
                <div className="media-body">
-            <h1><a aria-label="MIPT general physics" href="https://mipt.ru/education/chair/physics/"><FormattedMessage id="partners.mipt.title_fund"/></a></h1>
+                    <h1><a aria-label="MIPT general physics"
+                           href="https://mipt.ru/education/chair/physics/"><FormattedMessage
+                        id="partners.mipt.title_fund"/></a></h1>
                    <p><FormattedMessage id="partners.mipt.description_fund"/></p>
                    <hr/>
-            <h1><a aria-label="MIPT HEP" href="https://mipt.ru/science/labs/high_energy_physics_lab.php"><FormattedMessage id="partners.mipt.title_energy"/></a></h1>
+                    <h1><a aria-label="MIPT HEP"
+                           href="https://mipt.ru/science/labs/high_energy_physics_lab.php"><FormattedMessage
+                        id="partners.mipt.title_energy"/></a></h1>
                    <p><FormattedMessage id="partners.mipt.description_energy"/></p>
                </div>
                <div className="media-right media-middle">
-            <a href="https://mipt.ru/education/chair/physics/"><img className="media-object" src={mipt_logo} alt="mipt logo" width="400px"/></a>
+                    <a href="https://mipt.ru/education/chair/physics/"><img className="media-object" src={mipt_logo}
+                                                                            alt="mipt logo" width="400px"/></a>
                </div>
            </div>

@ -38,7 +38,9 @@ const PartnersPage = () => {
                    <p><FormattedMessage id="partners.jb.description"/></p>
                </div>
                <div className="media-right media-middle">
-        <a href="https://www.jetbrains.com/"><img className="media-object" src={jetbrains_logo} alt="inr logo" width="150px" style={{marginLeft:`10px`}}/></a>
+                    <a href="https://www.jetbrains.com/"><img className="media-object" src={jetbrains_logo}
+                                                              alt="inr logo" width="150px"
+                                                              style={{marginLeft: `10px`}}/></a>
                </div>
            </div>

@ -50,7 +52,9 @@ const PartnersPage = () => {
                    <p><FormattedMessage id="partners.jbr.description"/></p>
                </div>
                <div className="media-right media-middle">
-        <a href="https://research.jetbrains.org/ru/groups/npm"><img className="media-object" src={jbr} alt="inr logo" width="250px" style={{marginLeft:`10px`}}/></a>
+                    <a href="https://research.jetbrains.org/ru/groups/npm"><img className="media-object" src={jbr}
+                                                                                alt="inr logo" width="250px"
+                                                                                style={{marginLeft: `10px`}}/></a>
                </div>
            </div>

@ -67,10 +71,12 @@ const PartnersPage = () => {

            <div className="media">
                <div className="media-left media-middle">
-        <a href="http://www.inr.ru"><img className="media-object" src={inr_linac} alt="inr logo" width="100px"/></a>
+                    <a href="http://www.inr.ru"><img className="media-object" src={inr_linac} alt="inr logo"
+                                                     width="100px"/></a>
                </div>
                <div className="media-body" style={{marginLeft: `25px`}}>
-        <h1><a aria-label="INR" href="http://www.inr.ru/"><FormattedMessage id="partners.ras.title_beam"/></a></h1>
+                    <h1><a aria-label="INR" href="http://www.inr.ru/"><FormattedMessage
+                        id="partners.ras.title_beam"/></a></h1>
                    <p><FormattedMessage id="partners.ras.description_beam"/></p>
                </div>
            </div>
@ -79,11 +85,13 @@ const PartnersPage = () => {

            <div className="media">
                <div className="media-body">
-        <h1><a aria-label="INR education" href="http://www.inr.ru/"><FormattedMessage id="partners.ras.title_education"/></a></h1>
+                    <h1><a aria-label="INR education" href="http://www.inr.ru/"><FormattedMessage
+                        id="partners.ras.title_education"/></a></h1>
                    <p><FormattedMessage id="partners.ras.description_education"/></p>
                </div>
                <div className="media-right media-middle">
-        <a href="http://www.inr.ru"><img className="media-object" src={inr_logo} alt="inr logo" width="100px" style={{marginLeft:`10px`}}/></a>
+                    <a href="http://www.inr.ru"><img className="media-object" src={inr_logo} alt="inr logo"
+                                                     width="100px" style={{marginLeft: `10px`}}/></a>
                </div>
            </div>

@ -101,15 +109,19 @@ const PartnersPage = () => {

            <div className="media" style={{marginBottom: `30px`}}>
                <div className="media-body">
-        <h1><a aria-label="SRI RAS" href="http://www.iki.rssi.ru/"><FormattedMessage id="partners.ras.title_iki"/></a></h1>
+                    <h1><a aria-label="SRI RAS" href="http://www.iki.rssi.ru/"><FormattedMessage
+                        id="partners.ras.title_iki"/></a></h1>
                    <p><FormattedMessage id="partners.ras.description_iki"/></p>
                </div>
                <div className="media-right media-middle">
-        <a href="http://www.iki.rssi.ru"><img className="media-object" src="http://www.iki.rssi.ru/img/iki.png" alt="iki logo" width="100px"/></a>
+                    <a href="http://www.iki.rssi.ru"><img className="media-object"
+                                                          src="http://www.iki.rssi.ru/img/iki.png" alt="iki logo"
+                                                          width="100px"/></a>
                </div>
            </div>

        </Layout>
-)}
+    )
+}

 export default injectIntl(PartnersPage)
--- a/src/pages/projects/education.js
+++ b/src/pages/projects/education.js
@ -4,24 +4,20 @@ import {FormattedMessage, injectIntl, Link, useIntl} from "gatsby-plugin-react-i
 import Parser from "html-react-parser"

 import Layout from "../../components/layout"
-import SEO from "../../components/seo"
+import ProjectsNavbar from "../../components/projectsNavbar";

 const SoftwarePage = ({data}) => {
    const intl = useIntl()
    const lang = intl.locale
    var posts = ""
-    if ( lang==="ru" ) { posts = data.ru_projects.edges; } 
-    else if ( lang==="en" ) { posts = data.en_projects.edges; }
+    if (lang === "ru") {
+        posts = data.ru_projects.edges;
+    } else if (lang === "en") {
+        posts = data.en_projects.edges;
+    }
    return (
        <Layout>
-        <SEO lang={lang} title={intl.formatMessage({ id: "title" })} />
-
-            <ul className="nav nav-tabs">       
-                <li className="nav-item"><Link id="project" className="nav-link " to="/projects/physics"><FormattedMessage id="physics.bc_title"/></Link></li>
-                <li className="nav-item"><Link id="project" className="nav-link active" to="/projects/education"><FormattedMessage id="education.bc_title"/></Link></li>
-                <li className="nav-item"><Link id="project" className="nav-link " to="/projects/math"><FormattedMessage id="math.bc_title"/></Link></li>
-                <li className="nav-item"><Link id="project" className="nav-link " to="/projects/software"><FormattedMessage id="software.bc_title"/></Link></li>       
-            </ul>
+            <ProjectsNavbar project_type="education"/>

            <h1 style={{marginTop: `20px`}}><FormattedMessage id="education.title"/></h1>
            <p style={{marginBottom: `5px`}}><FormattedMessage id="education.description"/></p>
@ -44,12 +40,13 @@ const SoftwarePage = ({ data }) => {
                    <div className="row" id={id}>
                        <div className="col-lg-12">
                            <hr/>
-                        <h2 name={id}>{title}</h2>
+                            <h2 id={id}>{title}</h2>
                            <div>{Parser(node.html)}</div>
                            <div className="card" style={{backgroundColor: `#F5F5F5`}}>
                                <div className="card-body" style={{padding: `10px`}}>
                                    <p style={{textAlign: `center`, margin: `5px`}}>
-                                    <FormattedMessage id="education.course1"/><Link to={`/pages/${courseName}`}><FormattedMessage id="education.course2"/></Link>
+                                        <FormattedMessage id="education.course1"/><Link
+                                        to={`/pages/${courseName}`}><FormattedMessage id="education.course2"/></Link>
                                    </p>
                                </div>
                            </div>
@ -65,7 +62,7 @@ export default injectIntl(SoftwarePage)

 export const query = graphql`
    query{
-        ru_projects: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "project_education"}, published: {eq: true}, language: {eq: "ru"}}},
+        ru_projects: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "project"}, project_type: {eq: "education"}, published: {ne: false}, language: {eq: "ru"}}},
            sort: {fields: [frontmatter___order], order: ASC}){
            edges{
                node{
@ -79,7 +76,7 @@ export const query = graphql`
                }
            }}

-        en_projects: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "project_education"}, published: {eq: true}, language: {eq: "en"}}},
+        en_projects: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "project"}, project_type: {eq: "education"}, published: {ne: false}, language: {eq: "en"}}},
            sort: {fields: [frontmatter___order], order: ASC}){
            edges{
                node{
--- a/src/pages/projects/math.js
+++ b/src/pages/projects/math.js
@ -1,64 +1,23 @@
 import React from "react"
 import {graphql} from "gatsby"
-import {FormattedMessage, injectIntl, Link, useIntl} from "gatsby-plugin-react-intl"
-import Parser from "html-react-parser"
+import {injectIntl, useIntl} from "gatsby-plugin-react-intl"

 import Layout from "../../components/layout"
-import SEO from "../../components/seo"
+import Projects from "../../components/templates/projectsTemplate";

 const SoftwarePage = ({data}) => {
    const intl = useIntl()
    const lang = intl.locale
-    var posts = ""
+    let mathProjects = [];
    if (lang === "ru") {
-        posts = data.ru_projects.edges;
+        mathProjects = data.ru_projects.edges;
    } else if (lang === "en") {
-        posts = data.en_projects.edges;
+        mathProjects = data.en_projects.edges;
    }
+
    return (
        <Layout>
-            <SEO lang={lang} title={intl.formatMessage({id: "title"})}/>
-
-            <ul className="nav nav-tabs">
-                <li className="nav-item"><Link id="project" className="nav-link "
-                                               to="/projects/physics"><FormattedMessage id="physics.bc_title"/></Link>
-                </li>
-                <li className="nav-item"><Link id="project" className="nav-link "
-                                               to="/projects/education"><FormattedMessage
-                    id="education.bc_title"/></Link></li>
-                <li className="nav-item"><Link id="project" className="nav-link active"
-                                               to="/projects/math"><FormattedMessage id="math.bc_title"/></Link></li>
-                <li className="nav-item"><Link id="project" className="nav-link "
-                                               to="/projects/software"><FormattedMessage id="software.bc_title"/></Link>
-                </li>
-            </ul>
-
-            <h1 style={{marginTop: `20px`}}><FormattedMessage id="math.title"/></h1>
-            <p style={{marginBottom: `5px`}}><FormattedMessage id="math.description"/></p>
-
-            <ul>
-                {posts.map(({node}) => {
-                    const link = node.frontmatter.shortTitle;
-                    const id = node.frontmatter.id;
-                    return (
-                        <li><Link to={`/projects/math#${id}`}>{link}</Link></li>
-                    )
-                })}
-            </ul>
-
-            {posts.map(({node}) => {
-                const title = node.frontmatter.title;
-                const id = node.frontmatter.id;
-                return (
-                    <div className="row" id={id}>
-                        <div className="col-lg-12">
-                            <hr/>
-                            <h2 name={id}>{title}</h2>
-                            <div>{Parser(node.html)}</div>
-                        </div>
-                    </div>
-                )
-            })}
+            <Projects projects={mathProjects} project_type="math"/>
        </Layout>
    )
 }
@ -67,7 +26,7 @@ export default injectIntl(SoftwarePage)

 export const query = graphql`
    query{
-        ru_projects: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "project_math"}, published: {eq: true}, language: {eq: "ru"}}},
+        ru_projects: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "project"}, project_type: {eq: "math"}, published: {ne: false}, language: {eq: "ru"}}},
            sort: {fields: [frontmatter___order], order: ASC}){
            edges{
                node{
@ -80,7 +39,7 @@ export const query = graphql`
                }
            }}

-        en_projects: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "project_math"}, published: {eq: true}, language: {eq: "en"}}},
+        en_projects: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "project"}, project_type: {eq: "math"}, published: {ne: false}, language: {eq: "en"}}},
            sort: {fields: [frontmatter___order], order: ASC}){
            edges{
                node{
--- a/src/pages/projects/physics.js
+++ b/src/pages/projects/physics.js
@ -1,53 +1,22 @@
 import React from "react"
 import {graphql} from "gatsby"
-import {FormattedMessage, injectIntl, Link, useIntl} from "gatsby-plugin-react-intl"
-import Parser from "html-react-parser"
+import {injectIntl, useIntl} from "gatsby-plugin-react-intl"

 import Layout from "../../components/layout"
-import SEO from "../../components/seo"
+import Projects from "../../components/templates/projectsTemplate";

 const PhysicsPage = ({data}) => {
    const intl = useIntl()
    const lang = intl.locale
-    var posts = ""
-    if ( lang==="ru" ) { posts = data.ru_projects.edges; } 
-    else if ( lang==="en" ) { posts = data.en_projects.edges; }
+    let physicsProjects = "";
+    if (lang === "ru") {
+        physicsProjects = data.ru_projects.edges;
+    } else if (lang === "en") {
+        physicsProjects = data.en_projects.edges;
+    }
    return (
        <Layout>
-        <SEO lang={lang} title={intl.formatMessage({ id: "title" })} />
-            <ul className="nav nav-tabs">       
-                <li className="nav-item"><Link id="project" className="nav-link active" to="/projects/physics"><FormattedMessage id="physics.bc_title"/></Link></li>
-                <li className="nav-item"><Link id="project" className="nav-link " to="/projects/education"><FormattedMessage id="education.bc_title"/></Link></li>
-                <li className="nav-item"><Link id="project" className="nav-link " to="/projects/math"><FormattedMessage id="math.bc_title"/></Link></li>
-                <li className="nav-item"><Link id="project" className="nav-link " to="/projects/software"><FormattedMessage id="software.bc_title"/></Link></li>       
-            </ul>
-
-            <h1 style = {{marginTop: `20px`}}><FormattedMessage id="physics.title"/></h1>
-            <p style={{marginBottom: `5px`}}><FormattedMessage id="physics.description"/></p>
-
-            <ul>
-            {posts.map(({node}) => {
-                const link = node.frontmatter.shortTitle;
-                const id = node.frontmatter.id;
-                return(
-                    <li><Link to={`/projects/physics#${id}`}>{link}</Link></li>
-                )
-            })}
-            </ul>
-
-            {posts.map(({node}) => {
-                const title = node.frontmatter.title;
-                const id = node.frontmatter.id;
-                return(
-                    <div className="row" id={id}>
-                    <div className="col-lg-12">
-                    <hr/>
-                        <h2 name={id}>{title}</h2>
-                        <div>{Parser(node.html)}</div>
-                    </div>
-                    </div>
-                )
-            })}
+            <Projects projects={physicsProjects} project_type="physics"/>
        </Layout>
    )
 }
@ -56,7 +25,7 @@ export default injectIntl(PhysicsPage)

 export const query = graphql`
    query{
-        ru_projects: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "project_physics"}, published: {eq: true}, language: {eq: "ru"}}},
+        ru_projects: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "project"}, project_type: {eq: "physics"} published: {ne: false}, language: {eq: "ru"}}},
            sort: {fields: [frontmatter___order], order: ASC}){
            edges{
                node{
@ -69,7 +38,7 @@ export const query = graphql`
                }
            }}

-        en_projects: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "project_physics"}, published: {eq: true}, language: {eq: "en"}}},
+        en_projects: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "project"}, project_type: {eq: "physics"} published: {ne: false}, language: {eq: "en"}}},
            sort: {fields: [frontmatter___order], order: ASC}){
            edges{
                node{
--- a/src/pages/projects/software.js
+++ b/src/pages/projects/software.js
@ -1,73 +1,22 @@
 import React from "react"
 import {graphql} from "gatsby"
-import {FormattedMessage, injectIntl, Link, useIntl} from "gatsby-plugin-react-intl"
-import Parser from "html-react-parser"
+import {injectIntl, useIntl} from "react-intl"

 import Layout from "../../components/layout"
-import SEO from "../../components/seo"
+import Projects from "../../components/templates/projectsTemplate";

 const SoftwarePage = ({data}) => {
    const intl = useIntl()
    const lang = intl.locale
-    var posts = ""
+    let softwareProjects = "";
    if (lang === "ru") {
-        posts = data.ru_projects.edges;
+        softwareProjects = data.ru_projects.edges;
    } else if (lang === "en") {
-        posts = data.en_projects.edges;
+        softwareProjects = data.en_projects.edges;
    }
    return (
        <Layout>
-            <SEO lang={lang} title={intl.formatMessage({id: "title"})}/>
-
-            <ul className="nav nav-tabs">
-                <li className="nav-item">
-                    <Link id="project" className="nav-link " to="/projects/physics">
-                        <FormattedMessage id="physics.bc_title"/>
-                    </Link>
-                </li>
-                <li className="nav-item">
-                    <Link id="project" className="nav-link " to="/projects/education">
-                        <FormattedMessage id="education.bc_title"/>
-                    </Link>
-                </li>
-                <li className="nav-item">
-                    <Link id="project" className="nav-link " to="/projects/math">
-                        <FormattedMessage id="math.bc_title"/>
-                    </Link>
-                </li>
-                <li className="nav-item">
-                    <Link id="project" className="nav-link active" to="/projects/software">
-                        <FormattedMessage id="software.bc_title"/>
-                    </Link>
-                </li>
-            </ul>
-
-            <h1 style={{marginTop: `20px`}}><FormattedMessage id="software.title"/></h1>
-            <p style={{marginBottom: `5px`}}><FormattedMessage id="software.description"/></p>
-
-            <ul>
-                {posts.map(({node}) => {
-                    const link = node.frontmatter.shortTitle;
-                    const id = node.frontmatter.id;
-                    return (
-                        <li><Link to={`/projects/software#${id}`}>{link}</Link></li>
-                    )
-                })}
-            </ul>
-
-            {posts.map(({node}) => {
-                const title = node.frontmatter.title;
-                const id = node.frontmatter.id;
-                return (
-                    <div className="row" id={id}>
-                        <div className="col-lg-12">
-                            <hr/>
-                            <h2 name={id}>{title}</h2>
-                            <div>{Parser(node.html)}</div>
-                        </div>
-                    </div>
-                )
-            })}
+            <Projects projects={softwareProjects} project_type="software"/>
        </Layout>
    )
 }
@ -76,7 +25,7 @@ export default injectIntl(SoftwarePage)

 export const query = graphql`
    query{
-        ru_projects: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "project_software"}, published: {eq: true}, language: {eq: "ru"}}},
+        ru_projects: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "project"}, project_type: {eq: "software"}, published: {ne: false}, language: {eq: "ru"}}},
            sort: {fields: [frontmatter___order], order: ASC}){
            edges{
                node{
@ -89,7 +38,7 @@ export const query = graphql`
                }
            }}

-        en_projects: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "project_software"}, published: {eq: true}, language: {eq: "en"}}},
+        en_projects: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "project"}, project_type: {eq: "software"}, published: {ne: false}, language: {eq: "en"}}},
            sort: {fields: [frontmatter___order], order: ASC}){
            edges{
                node{
--- a/src/pages/publications.js
+++ b/src/pages/publications.js
@ -4,7 +4,6 @@ import {injectIntl, Link, useIntl} from "gatsby-plugin-react-intl"
 import Parser from "html-react-parser"

 import Layout from "../components/layout"
-import SEO from "../components/seo"

 const PublicationsPage = ({data}) => {
    const intl = useIntl()
@ -17,8 +16,6 @@ const PublicationsPage = ({data}) => {
    }
    return (
        <Layout>
-            <SEO lang={lang} title={intl.formatMessage({id: "title"})}/>
-
            {publications.map(({node}) => {
                const title = node.frontmatter.title
                return (
@ -44,7 +41,7 @@ export default injectIntl(PublicationsPage)

 export const query = graphql`
    query{
-        ru_publications: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "publications"}, published: {eq: true}, language: {eq: "ru"}}}){
+        ru_publications: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "publications"}, published: {ne: false}, language: {eq: "ru"}}}){
            edges{
                node{
                    html
@ -55,7 +52,7 @@ export const query = graphql`
                }
            }}

-        en_publications: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "publications"}, published: {eq: true}, language: {eq: "en"}}}){
+        en_publications: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "publications"}, published: {ne: false}, language: {eq: "en"}}}){
            edges{
                node{
                    html
--- a/src/pages/quarks.js
+++ b/src/pages/quarks.js
@ -4,18 +4,18 @@ import {FormattedMessage, injectIntl, Link, useIntl} from "gatsby-plugin-react-i
 import Parser from "html-react-parser"

 import Layout from "../components/layout"
-import SEO from "../components/seo"

 const QuarksPage = ({data}) => {
    const intl = useIntl()
    const lang = intl.locale
    var pubs = ""
-    if ( lang==="ru" ) { pubs = data.ru_publications.edges; } 
-    else if ( lang==="en" ) { pubs = data.en_publications.edges; }
+    if (lang === "ru") {
+        pubs = data.ru_publications.edges;
+    } else if (lang === "en") {
+        pubs = data.en_publications.edges;
+    }
    return (
        <Layout>
-      <SEO lang={lang} title={intl.formatMessage({ id: "title" })} />
-
            <nav aria-label="breadcrumb">
                <ol className="breadcrumb" style={{margin: 0}}>
                    <li className="breadcrumb-item">
@ -31,13 +31,14 @@ const QuarksPage = ({ data }) => {
                )
            })}
        </Layout>
-)}
+    )
+}

 export default injectIntl(QuarksPage)

 export const query = graphql`
    query{
-        ru_publications: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "quarks"}, published: {eq: true}, language: {eq: "ru"}}}){
+        ru_publications: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "quarks"}, published: {ne: false}, language: {eq: "ru"}}}){
            edges{
                node{
                    html
@ -47,7 +48,7 @@ export const query = graphql`
                }
            }}

-        en_publications: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "quarks"}, published: {eq: true}, language: {eq: "en"}}}){
+        en_publications: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "quarks"}, published: {ne: false}, language: {eq: "en"}}}){
            edges{
                node{
                    html
--- a/src/styles/footer.css
+++ b/src/styles/footer.css
@ -6,11 +6,25 @@ footer {
    padding: 2px;
    text-align: center;
    color: rgb(108, 117, 125);
-    font-family: Segoe UI;
+    font-family: Segoe UI, serif;
    font-size: 20px;
-    text-decoration: none solid rgb(108, 117, 125); }
+    text-decoration: none solid rgb(108, 117, 125);
+}

-footer .container p { margin-bottom: 15px; }
-footer p a { color: rgb(0, 86, 179); text-decoration: none; }
-footer p a:hover { color: rgb(12, 65, 124); text-decoration: underline; }
-footer a:visited { color: rgb(0, 86, 179); }
+footer .container p {
+    margin-bottom: 15px;
+}
+
+footer p a {
+    color: rgb(0, 86, 179);
+    text-decoration: none;
+}
+
+footer p a:hover {
+    color: rgb(12, 65, 124);
+    text-decoration: underline;
+}
+
+footer a:visited {
+    color: rgb(0, 86, 179);
+}
--- a/Show More
+++ b/Show More