Tiku 2.0 website

Tiku Web­site 2.0 — I made the first major update to my web­site since it launched in 2012. It all start­ed with the fact that I want­ed to trans­fer the site to CMS Word­Press. Pre­vi­ous­ly, only the blog on my site worked on Word­Press, and the rest of the site was sta­t­ic, i.e., made in pure HTLM and CSS.

Task. Make a new ver­sion of the Tiku web­site and trans­fer the site to CMS WordPress.

I decid­ed to use card stock as the main design idea. This approach is now called Ben­to Grids. This approach seemed to me quite uni­ver­sal and at the same time flex­i­ble and with ample oppor­tu­ni­ties for fur­ther devel­op­ment. When new types of con­tent appear, you can sim­ply cre­ate a new type of card and add them to the gen­er­al feed.

One of the main sec­tions of my web­site has always been a resume. I have com­plete­ly redesigned this sec­tion, mak­ing it more mod­ern and infor­ma­tive. I pre­sent­ed my work expe­ri­ence and edu­ca­tion in the form of a ver­ti­cal time­line. And I divid­ed all the basic skills into hard and soft. I also visu­al­ized skills in the form of progress bars with the lev­el of knowl­edge as a percentage.

Major updates

Before con­tin­u­ing the review of spe­cif­ic pages and sec­tions of the Tiku 2.0 web­site, I will tell you about the main fea­tures and inno­va­tions that I intro­duced in the update, here they are:

• Dark theme
• Web­site ver­sion in English
• Uni­ver­sal ben­to net that adapts to the num­ber of blocks
• Block of sim­i­lar posts
• Likes, num­ber of views and time spent read­ing on a blog
• Block next entry
• Visu­al­iza­tion of fre­quen­cy dia­gram for music
• Site search
• Feed­back form
• Agree with coockie
• Opti­miza­tion of adap­tive layout
• Favorites in port­fo­lio and music
• Mov­ing the Deer­ror web­site to the music section
• Page scroll indicator

Some things were done using stan­dard Word­Press func­tions, while oth­ers I wrote myself or used exter­nal libraries and code snippets.

For port­fo­lios and music, I also imple­ment­ed tag­ging by styles, types and for­mats of work. This makes it eas­i­er to group relat­ed works and music releases.

After migrat­ing all con­tent from the Deer­ror web­site, the brand’s col­or scheme was retained. The new design has also been adapt­ed to match the Deer­ror col­or scheme.

The sec­tion with Deer­ror music is also made based on the gen­er­al design in the style of Ben­to Grids cards with a sig­na­ture gra­di­ent stylization.

New sub­sec­tions have been added to the port­fo­lio to pro­vide greater detail of work by type and for­mat. New main sec­tions have also been added to the port­fo­lio. One of the new sec­tions is “Video”. “Pho­tos” and “Ani­ma­tion” have also been improved.

In addi­tion to the deep­er struc­ture in the port­fo­lio, I have also post­ed many new works and updat­ed the detailed descrip­tion tem­plate for each of the works. The descrip­tion of the work has become more vivid, large image for­mats and addi­tion­al styl­iza­tion have been added.

The site now has many addi­tion­al sec­tions and tem­plate ele­ments. Some of them are designed to com­ply with the require­ments of the law regard­ing per­son­al data. Also, new sec­tions are often func­tion­al and are used for inter­nal link­ing on many pages of the site.

The site now has a full-fledged “base­ment”. It con­tains an adver­tis­ing unit and addi­tion­al nav­i­ga­tion includ­ing “bread­crumbs”.

The blog sec­tion has also under­gone sig­nif­i­cant revi­sions and improve­ments. On the main page of the blog I added a block with pop­u­lar posts. A new blog post is high­light­ed with a large for­mat and an addi­tion­al sig­na­ture. In addi­tion, the feed with post announce­ments now has a “Load More” func­tion, which also syn­chro­nizes with stan­dard pagination.

Addi­tion­al blocks have appeared in the pub­li­ca­tion tem­plate, such as: sim­i­lar posts, next post and a block indi­cat­ing the author. A block with sim­i­lar posts and a block with the next post per­form sev­er­al func­tions at once. They pro­vide addi­tion­al engage­ment for site vis­i­tors and also pro­vide effec­tive inter­nal page linking.

All text blocks in the blog and through­out the site were designed tak­ing into account the opti­mal line length. This point is often ignored in web­site design, which has a neg­a­tive impact on speed and ease of reading.

The new site also pro­vid­ed the basis for the devel­op­ment of an Eng­lish ver­sion. To do this, I used the stan­dard Word­Press Mul­ti­site fea­ture. This fea­ture makes it much eas­i­er to man­age and main­tain mul­ti­ple sites that share a com­mon Word­Press core. In addi­tion, mul­ti­sites use a sin­gle admin­is­tra­tive part and a com­mon template.

I imple­ment­ed text trans­la­tion in inter­face ele­ments based on PHP con­di­tions and spe­cial Word­Press vari­ables that deter­mine the cur­rent site.