fict.itmo

📝📅 The site is the hallmark of ITMO Faculty of ICT.
The site should provide accessible information about the activities of the faculty,
disciplines and teachers

View Demo

Table of Contents

1. About the project
2. Map
3. Features
4. Built With
5. Project setup

✨ About The Project

The Faculty of Infocommunication Technologies is the main starting point in the development of professional skills. The site is the hallmark of ITMO Faculty of ICT. When going to the site, the entrant or his parents should have an understanding of what kind of faculty it is and what its specialization is. The site contains accessible information about the activities, information about disciplines and teachers. There are also pages for administration.

(back to top)

🗺️ Map

basic

• home
  • articles
• events
  • all news
  • events, news, announcements
• for students
  • articles
• admission
  • list of directions for master's degree, bachelor's degree
    • directions pages
      • disciplines of the direction
• contacts

admin panel

• login page
• published
  • editing
• create an entry
• favorites
  • editing
• tags

(back to top)

🌟 FEATURES

• dark and light theme
• animation:
  • spinning hexagons with text appearance
  • carousel with popup oval with text
  • an arrow moving along the road and passing the marks, reaching which the text appears. at the end of the road is a book that changes the position and text
  • smooth appearance of the element when scrolling
  • lines emerging from the sides of the page
  • block with photos moving along ovals with hover effect
• admin:
  • crop photos on upload
  • changing the format of photos when previewing blocks (double and slider)
  • preview of the post, preview of blocks for articles that will lead to the article itself on the pages
  • six types of custom blocks in post creation (two blocks, text, image, slider, quote, subtitle)
  • draggable blocks
• pagination, search, news filtering
• carousels:
  • with oval blocks
  • with 6 (4) images in two lines
  • with 4 (2) zoom hover effect
  • with 1 image and height adjusted to the first one in the queue
• expansion-panel with outgoing lines

(back to top)

🏗️ Built With

• Vue
• Vuex
• Vue-router
• Vue-moment
• Vuetify
• Vue2-editor
• Vuedraggable
• Vue-slick-carousel
• Vue-croppie
• Axios

(back to top)

⚙️ Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

(back to top)