Freelancer Pavel Grishaev HTML layout compvit - Portofoliu - Layout HTML, CSS, JavaScript - layout, html, html5, css, javascript, jquery, adaptive, responsive, responsive, layout designer. Freelancer Pavel Grishaev HTML layout compvit - Portofoliu

Competent compus și proiectat vizual, în cazul nostru, așa este pagină separată, este un element important al unui site web sau blog personal pentru orice specialist care a atins un anumit nivel de măiestrie în activitate profesională.
O pagină de portofoliu este un fel de raport, sau rezumat vizual, cu ajutorul căruia poți demonstra în mod clar cititorilor și vizitatorilor site-ului/blog-ului tău un set al celor mai reușite lucrări finalizate, fie că este vorba de fotografii, articole, publicații, elemente de design. , etc.
Nu am o astfel de pagină și, din partea mea, aceasta este o omisiune enervantă care trebuie corectată cât mai curând posibil, care este de fapt în acest moment iar eu muncesc.
În spații nesfârșite retea globala, poate fi găsit o cantitate mareșabloane de pagină gata făcute pentru organizarea unui portofoliu, iar varietatea acestor pagini este cu adevărat impresionantă. Deci, cei cărora nu le pasă să se adâncească în toate complexitățile designului și dezvoltării web vor putea întotdeauna să găsească o opțiune potrivită pentru ei înșiși. Ei bine, pentru cei cărora le lipsesc cunoștințele în construirea site-ului, propun să se uite la un exemplu de layout adaptiv, o pagină de portofoliu simplă, cu filtrarea lucrărilor finalizate pe categorii, realizate în , diluată cu un efect de tranziție atractiv, cu elemente de animație.

Aspectul paginii, javascript executabil și unele elemente de design au fost create de minunatul web designer și dezvoltator Kevin Liew (queness.com). Atunci când am ales soluția optimă, a fost important pentru mine că a fost ușor de implementat, funcționalitatea pluginului jQuery, munca corectaîn toate browserele moderne și având în vedere popularitatea tot mai mare a utilizării diverselor dispozitive mobile, pentru navigarea pe Internet, adaptabilitatea designului viitoarei pagini. Fără clopote și fluiere de designer sau pluginuri grele.

Aspectul de bază constă din două elemente principale interfața cu utilizatorul, pe care trebuie să le construim sunt navigarea cu file pentru filtrarea categoriilor de lucrări trimise și grila de miniaturi în sine cu efectul unei subtitrări pop-up la hover.
Pentru început, pentru ca totul să funcționeze în cele din urmă, veți avea nevoie de versiunea jQuery 1.7.0 sau mai mare. Dacă nu îl aveți încă conectat, adăugați următoarea linie înainte de etichetă:

Lansați pluginul MixItUp, introduceți acest cod după fișierele de mai sus:

< script type= "text/javascript" >$(function () ( var filterList = ( init: function () ( $("#portfoliolist") . mixitup(( targetSelector: ".portfolio" , filterSelector: ".filter" , efecte: [ "fade" ] , easing) : "snap" , // apelează efectul hover peMixEnd: filterList. hoverEffect() ) ; ) , hoverEffect: function () ( $("#portfoliolist .portfolio" ) . hover( function () ( $(this) . find (".label" ) . stop() . animate(( jos: 0 ) , 200 , "easeOutQuad" ) ; $(this) . find("img" ) . stop() . animate(( sus: - 30 ) , 500 , "easeOutQuad" ) ; ) , funcția () ( $(this) . find(".label" ) . stop() . animate(( jos: - 40 ) , 200 , "easeInQuad" ) ; $( this ) . find("img" ) . stop() . animate(( sus: 0 ) , 300 , "easeOutQuad" ) ; ) ) ; ) ); filterList. init() ; ) );

$(function () ( var filterList = ( init: function () ( $("#portfoliolist")).mixitup(( targetSelector: ".portfolio", filterSelector: ".filter", efecte: ["fade"], easing : "snap", // apelează efectul hover peMixEnd: filterList.hoverEffect() )); ), hoverEffect: function () ( $("#portfoliolist .portfolio").hover(function () ( $(this). find(".label").stop().animate((jos: 0), 200, "easeOutQuad"); $(this).find("img").stop().animate((sus: -30) ), 500, „easeOutQuad”); ), funcția () ( $(this).find(”.label”).stop().animate((jos: -40), 200, „easeInQuad”); $( this).find("img").stop().animate((sus: 0), 300, "easeOutQuad"); )); ) ); filterList.init(); ));

Nu are rost să luați în considerare toate opțiunile de plugin separat; setările implicite sunt destul de bune cea mai buna varianta. Ei bine, dacă cineva dorește să experimenteze cu parametrii, vă rugăm să faceți tot ce vă stă în putere.

Pentru a forma aspectul paginii și aspectul elementelor, conectați câteva fișiere la document. , unul pentru stiluri de bază, să-l numim de exemplu: layout.css și un alt fișier CSS mic normalize.css, pentru a asigura o mai bună consistență a browserului în designul standard al elementelor:

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

Acum să privim totul în ordine, dacă este posibil fără apă inutilă, într-un mod accesibil și de înțeles, în limba noastră maternă, îndelung răbdătoare.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >Toate< li>< span class = "filter" data- filter= "app" >Aplicații< li>< span class = "filter" data- filter= "card" >Carti de vizita< li>< span class = "filter" data- filter= "icon" >icoane< li>< span class = "filter" data- filter= "logo" >Siglă< li>< span class = "filter" data- filter= "web" >web design

Toate
Aplicații
Carti de vizita
icoane
Siglă
web design

Pe panoul de navigare plasăm întreaga listă de lucrări, împărțită pe categorii. Trebuie să asociem fiecare categorie de portofoliu prin atributul data-cat cu unul sau altul element din bara de navigare în conformitate cu valoarea din atributul data-filter. Prin potrivirea valorilor data-filter cu data-cat, articolele din portofoliu vor fi filtrate pe categorii.
În plus, vom adăuga la miniatură, ascunsă deocamdată, un mic panou cu numele lucrării și titlul categoriei, care apare doar când treci cu mouse-ul peste poză. Și pentru a fi mai ușor de format aspect Pentru toată această structură în CSS, să atribuim elementelor clasele corespunzătoare:

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >Naște găzduire. Ru< span class = "text-category" >Siglă< div class = "label-bg" > .........

Gazduire Beget.Ru Siglă.........

Vă rugăm să rețineți că puteți adăuga link-uri către imagine sau direct către semnătură, astfel încât utilizatorul să poată vedea pe deplin toată munca dvs.

CSS

Acum, în liniște, să trecem la partea cea mai interesantă, la formarea în CSS a stilurilor generale ale interfeței de utilizator a paginii noastre de portofoliu și a versiunii sale adaptive. În articol voi indica doar valorile de bază (implicite), adică fără imagini de fundal și fonturi conectate; toate acestea, pentru cei care au nevoie, pot fi văzute în demo, sau găsite în arhivă cu codul sursă .

.container ( poziție : relativă ; lățime : 960px ; margine : 0 auto ; /* Veți putea vedea lanțul de tranziții când redimensionați fereastra browserului */ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o -tranziție: toate 1s ease; tranziție: toate 1s ease; ) #filtre ( marjă : 1% ; padding : 0 ; list-style : niciunul ; ) #filtre li ( float : stânga ; ) #filtre li span (afișare: bloc; umplutură: 5px 20px; text-decor: niciunul; culoare: #666 ; /* adăugați o mică umbră pentru text */ text-shadow: 1px 1px #FFFFFF ; cursor: pointer ; ) /* modificare fundalul categoriei la trecerea cu mouse-ul */ # filtrează li span: hover ( fundal : #34B7CD ; text-shadow : 0 0 2px #004B7D ; culoare : #fff ; ) /* fundalul articolului din categoria activă */ #filters li span. activ ( fundal : rgb (62 , 151 , 221 ); text-shadow : 0 0 2px #004B7D ; culoare : #fff ; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box ; -moz-box-sizing: border-box ; -o-box-sizing: border-box ; latime: 23%; marja: 1%; afișaj: niciunul; plutește la stânga; preaplin: ascuns; ) .portfolio-wrapper ( overflow : ascuns ; poziție : relativ ! important ; fundal : #666 ; cursor : pointer ; ) .portfolio img ( max-width : 100% ; poziție : relativ ; ) /* semnăturile sunt ascunse implicit * / .portfolio .label ( poziție : absolut ; lățime : 100% ; înălțime : 40px ; jos : -40px ; ) .portfolio .label-bg ( fundal : rgb (62 , 151 , 221 ) ; lățime : 100% ; înălțime : 100 % ; poziție : absolut ; sus : 0 ; stânga : 0 ; ) .portfolio .label-text ( culoare : #fff ; poziție : relativ ; z-index : 500 ; padding : 5px 8px ; ) .portfolio .text-category (afișare: bloc; dimensiunea fontului: 9px;)

Container ( poziție: relativă; lățime: 960px; margine: 0 auto; /* Veți putea vedea lanțul de tranziții când redimensionați fereastra browserului */ -webkit-transition: all 1s ease; -moz-transition: all 1s ușurință; -o- tranziție: ușurință pentru toate 1; tranziție: ușurință pentru toate 1; ) #filtre (marjă:1%; padding:0; list-style:none; ) #filtre li (float:left; ) #filtre li span ( afișare: bloc; padding: 5px 20px; text-decoration:none; color:#666; /* adăugați o mică umbră pentru text */ text-shadow: 1px 1px #FFFFFF; cursor: pointer; ) /* schimbați fundal categorie la trecerea cursorului */ #filtre li span:hover ( fundal: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; ) /* fundal al articolului din categoria activă */ #filters li span.active ( fundal: rgb(62, 151, 221); text-shadow: 0 0 2px #004B7D; culoare:#fff; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box; -moz-box-sizing : border-box; -o-box- sizing: border-box; width:23%; margin:1%; display:none; float:left; overflow:hidden; ) .portfolio-wrapper ( overflow:hidden; poziție: relativă !important; fundal: #666; cursor:pointer; ) .portfolio img (max-width:100%; position: relative; ) /* semnăturile sunt ascunse implicit */ .portfolio .label (poziție: absolute; width: 100%; height:40px; bottom:-40px; ) . portofoliu .label-bg ( fundal: rgb(62, 151, 221); lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; ) .portfolio .label-text ( culoare: # fff; poziție: relativă; z-index:500; padding:5px 8px; ) .portfolio .text-category ( display:block; font-size:9px; )

În a doua parte, chiar în aceeași foaie de stil, folosind mai multe interogări media, vom crea secțiuni CSS alternative. Pentru a ne asigura că aspectul paginii noastre este afișat corect pe ecranele diferitelor dispozitive mobile, vom adăuga și reguli CSS alternative pentru diferite ecrane la aceste secțiuni. Astfel, putem trece cu ușurință peste orice reguli stabilite anterior în tabelul nostru CSS pentru browserele obișnuite și putem obține acea adaptabilitate mult dorită.

/* Tabletă */ Ecran numai pentru @media și (lățime minimă: 768 px ) și (lățime maximă: 959 px ) ( .container ( lățime : 768 px ; ) ) /* Mobil - Notă: Design pentru lățime de 320 px*/ numai pentru @media ecran și (max-width: 767px ) ( .container ( width : 95% ; ) #portfoliolist .portfolio ( width : 48% ; margin : 1% ; ) ) ) /* Mobile - Notă: Design for 480px width */ @media numai ecran și (lățime minimă: 480 px) și (lățime maximă: 767 px) (.container (lățime: 70%;))

/* Tabletă */ Ecran numai pentru @media și (lățime minimă: 768 px) și (lățime maximă: 959 px) ( .container ( lățime: 768 px; ) ) /* Mobil - Notă: Design pentru lățime de 320 px*/ numai @media ecran și (max-width: 767px) ( .container ( width: 95%; ) #portfoliolist .portfolio ( width:48%; margin:1%; ) ) /* Mobile - Notă: Design for 480px width */ @media numai ecran și (lățime minimă: 480 px) și (lățime maximă: 767 px) ( .container ( lățime: 70%; ) )

Asta e tot. Minunata noastră pagină sub titlul încăpător „Portofoliu” este gata, tot ce rămâne este să o umpleți cu lucrările dumneavoastră la fel de minunate și remarcabile și să o expuneți pentru ca lumea întreagă să le vadă. Încă poți fi liniștit, modest, mândru de tine. Principalul lucru este să nu exagerați în această chestiune.
Priviți din nou exemplul și, dacă este necesar, luați codul sursă; în timpul liber, într-un mediu de acasă liniștit, puteți duce această lucrare la perfecțiune.

La crearea lecției s-a folosit următorul material: . Pagina de portofoliu originală, curată, proaspătă din stiloul autorului, se află acolo.

Succes tuturor și bucurați-vă de restul scurtei veri!

Continuăm seria de lecții despre aspectul site-ului de la zero. Am așezat antetul aspectului. Urmează un bloc dintr-o fotografie mare ca fundal. Acest bloc este situat pe primul ecran al browserului, ceea ce înseamnă că este în centrul atenției utilizatorului. Prin urmare, plasați în această zonă doar o imagine atractivă din punct de vedere vizual, care transmite esența site-ului și informații importante.

După cum ați observat, creăm un aspect de portofoliu, dar nu unul obișnuit, ci unul de câine. Cu toate acestea, lăsând glumele deoparte, rezultatul va fi un șablon standard în stilul popularului design plat, pe care îl puteți folosi pentru dvs., înlocuind textul și fotografiile. Designul plat se caracterizează prin contraste de culoare. Întreaga pagină este împărțită în mai multe blocuri, unde un bloc luminos îl înlocuiește pe unul întunecat și așa mai departe pe toată înălțimea paginii, mai multe ecrane. În mod ideal, fiecare bloc ar trebui să conțină același conținut.

Întregul aspect constă dintr-un antet, patru secțiuni și un subsol.

..
Imagine
Portofoliu
Despre mine
Formular și Contacte
..

Fundal: url("imaginea_dvs..jpg") no-repeat;

Selectorul de dimensiune de fundal controlează dimensiunea imaginii. Inserați întreaga imagine în lățime și înălțime. Când dimensiunea ecranului crește, imaginea va fi întinsă, iar când dimensiunea ecranului scade, aceasta va fi scalată fără a menține proporțiile.

Dimensiunea fundalului: 100% 100%;

În interiorul containerului de secțiuni, vom plasa un bloc div cu un titlu, text și un buton.

Lipim întregul cod în programul nostru document HTML, după etichetă.

E greu să fii „drăguț”

În fiecare zi mă trezesc cu un singur gând despre cât de greu este să fii drăguț. Dar nu pretind că m-am săturat de „mângâierile” și „șchiopăturile” tale.

Află mai multe

Cod pentru style.css:

Mops_bg(
fundal: url(images/articles/html_coding_banner.jpg) no-repeat;
dimensiunea fundalului: 100% 100%;
}
.mops_text(
umplutură: 20% 0%;
}
.mops_text h2 (
culoare: #fff;
dimensiunea fontului: 2.9em;
greutate font: 600;
indicele z: 10;
text-align: centru;
poziție: relativă; /* poziționarea relativă a titlului */
margine-sus: -140px;
}
.mops_text h2 span (
dimensiunea fontului: 1.1em;
greutate font: 290;
}
.mops_text p(
culoare: #fff;
dimensiunea fontului: 1.2em;
text-align: centru;
marja: 1.4em auto;
latime: 76%;
greutate font: 200;
înălțimea liniei: 1,3 em;
}
.mops_text .da-butt (
afisare: bloc;
culoare de fundal: #a97b7b;
culoare: #fff;
dimensiunea fontului: 1em;
text-transform: majuscule;
marja: 0 auto;
latime: 10%;
text-align: centru;
umplutură: 1em 2em;
}
.da-fund (
poziție: absolută; /* pozitionarea absoluta a butonului */
stânga: 750px; sus: 370px; /* indentare din marginile browserului */
}
.mops_text .da-butt:hover
{
fundal:#d0a5a5;
}
.butt-img(
latime: 50px;
înălțime: 50px;
afisare: bloc;
marja: 2em auto 1em;
fundal: url(images/articles/html_coding_buttonimg.png);
-webkit-tranziție: toate 0.5s ease-in-out; /* tranzitie lina */
-moz-tranziție: toate 0.5s ease-in-out; /* tranzitie lina */
-o-tranziție: toate 0.5s ease-in-out; /* tranzitie lina */
-ms-tranziție: toate 0.5s ease-in-out; /* tranzitie lina */
tranziție: toate 0.5s ease-in-out; /* tranzitie lina */
poziție: relativă; /* poziționarea absolută a săgeții */
stânga: 210px; sus: 130px; /* indentare de la părinte */
}
.butt-img:hover(
afisare: bloc;
latime: 50px;
înălțime: 50px;
fundal: url(images/articles/html_coding_buttonimgh.png);
}

Rezultatul lucrării poate fi văzut la

Mai întâi, să markupăm noul document HTML5. În secțiunea antet vom activa stilul paginii. Biblioteca jQuery, pluginul Quicksand și fișierul nostru script.js va fi inclus înainte de eticheta de închidere a corpului:

index.html

Portofoliul meu

Elementul antet HTML5 conține antetul nostru h1 (care este stilat ca logo). Elementul secțiune conține o listă neordonată de articole din portofoliu (alte liste sunt adăugate cu codul jQuery) Elementul nav, stilat ca o bară verde, acționează ca un filtru de conținut.

Lista neordonată #stage conține articolele noastre din portofoliu. Fiecare articol are un atribut de date care specifică o serie de etichete separate prin virgulă. Mai târziu, în codul jQuery, parcurgem lista, înregistrăm etichetele și creăm categorii care pot fi selectate din bara de meniu verde.

Puteți plasa alte lucrări în lista de articole și puteți utiliza alte etichete.

jQuery

Pluginul Quicksand compară două liste neordonate, găsește aceleași elemente li în ele și animă procesul de aranjare. Scriptul jQuery din această parte a tutorialului parcurge elementele din portofoliu din lista #stage și creează liste noi (ascunse) neordonate pentru fiecare etichetă pe care o găsește. Aceste liste vor fi apoi folosite pentru a rula pluginul Quicksand.

După ce pagina se încarcă, rulăm o buclă pentru a detecta etichetele.

script.js - Partea 1

$(document).ready(function())( var items = $("#stage li"), itemsByTags = (); // Buclă prin toate elementele li: items.each(function(i)( var elem = $ ( this), tags = elem.data("tags").split(","); // Adăugați atributul data-id. Solicitat de pluginul Quicksand: elem.attr("data-id",i); $.each( tags,function(cheie,valoare)( // Șterge spatii suplimentare: valoare = $.trim(valoare); if(!(valoarea în itemsByTags))( // Creați o matrice goală pentru articole: itemsByTags = ; ) // Fiecare articol este adăugat la o matrice prin etichetă: itemsByTags.push(elem); )); ));

Fiecare etichetă este adăugată obiectului itemsByTags ca o matrice. Aceasta înseamnă că itemsByTags[„Web Design”] va conține o serie de toate articolele care au eticheta „Web Design”. Folosim acest obiect pentru a crea o listă neordonată ascunsă pe pagină pentru pluginul Quicksand.

Să creăm funcții auxiliare

script.js - Partea 2

Funcția createList(text,items)( // Funcție de ajutor care primește textul butonului de meniu și // o matrice de articole li // Creați o listă neordonată goală var ul = $("

",( html: text, href:"#", date: (list:ul) )).appendTo("#filter"); )

Această funcție primește numele grupului și o matrice de li articole ca parametri. Apoi clonează aceste elemente în noua lista ul și adaugă un link către bara verde.

Acum parcurgem toate grupurile și apelăm funcția de ajutor și, de asemenea, adăugăm gestionarea evenimentelor de clic pentru elementele de meniu.

// Creați opțiunea "Toate" în meniu: createList("Toate",items); // Buclă prin matricele din itemsByTags: $.each(itemsByTags,function(k,v)( createList(k,v); )); $("#filtru a").live("click",function(e)( var link = $(this); link.addClass("activ").frati().removeClass("activ"); // Folosim pluginul Quicksand pentru a anima elementele li. // Folosește date ("listă") definite de funcția noastră createList: $("#stage").quicksand(link.data("list").find("li ")); e.preventDefault(); )); $("#filtru a:primul").click();

Partea cea mai interesantă Stiluri CSS- dungă verde #filtru. Folosește pseudo-elementele :before / :after pentru a crea colțuri atractive pe părțile laterale ale benzii. Deoarece sunt poziționate absolut, atunci când dimensiunea benzii se schimbă, vor apărea acolo unde sunt necesare.

#filter ( fundal: url("../img/bar.png") repeat-x 0 -94px; afișare: bloc; înălțime: 39px; margine: 55px automat; poziție: relativă; lățime: 600px; text-align: center; -moz-box-shadow:0 4px 4px #000; -webkit-box-shadow:0 4px 4px #000; box-shadow:0 4px 4px #000; ) #filtru:înainte, #filtru:după ( fundal : url("../img/bar.png") nu se repetă; înălțime: 43px; poziție: absolut; sus: 0; lățime: 78px; conținut: ""; -moz-box-shadow:0 2px 0 rgba (0,0,0,0.4); -webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4); box-shadow:0 2px 0 rgba(0,0,0,0.4); ) #filtru:înainte (poziția de fundal: 0 -47px; stânga: -78px; ) #filtru:după (poziția de fundal: 0 0; dreapta: -78px; ) #filtru a( culoare: #FFFFFF; afișare: inline- bloc; înălțime: 39px; înălțime linie: 37px; umplutură: 0 15px; text-shadow:1px 1px 1px #315218; ) #filter a:hover( text-decoration:none; ) #filter a.active( fundal: url (""../img/bar.png") repeat-x 0 -138px; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), -1px 0 0 rgba(255, 255, 255, 0.2 ), 1px 0 1px rgba(0,0,0,0.2) inset, -1px 0 1px rgba(0,0,0,0.2) inset; )

Puteți utiliza șablonul pentru proiectele dvs. Modificarea conținutului portofoliului este ușoară. Dacă utilizatorul are JavaScript dezactivat, el va vedea în continuare lucrarea, ceea ce are un efect benefic asupra SEO a site-ului.

ÎN lumea modernă uneori, a avea propriul site web este la fel de important ca, de exemplu, a avea un număr de telefon sau o adresă E-mail. Din păcate, nu toată lumea poate crea un site web profesional frumos pe cont propriu și, uneori, nici măcar nu funcționează. De asemenea, comanda de la programatori nu este o soluție ideală, deoarece nu toată lumea își poate permite.

Cele gratuite te vor ajuta să ieși din această situație Șabloane HTML site-uri. Un șablon de site web HTML este un set de pagini statice gata făcute pentru un site web pe un anumit subiect. Cu ajutorul unui astfel de șablon, puteți crea un site web simplu în doar câteva ore, dacă aveți cunoștințe de bază Marcaj HTML. În secțiunea HTML, veți dobândi aceste cunoștințe dacă mai petreceți câteva ore studiind, iar dacă vă faceți timp pentru a studia secțiunea CSS, veți putea controla pe deplin designul șabloanelor de site web HTML și le veți personaliza complet pentru a se potrivi. nevoile tale.

Un alt avantaj incontestabil al șabloanelor de site-uri web este că, în majoritatea cazurilor, acestea sunt scrise de profesioniști. Un șablon profesional de site web înseamnă nu doar un design frumos și modern, ci și modul în care este scris codul. Motoare de căutare Ei se uită la modul în care este scris site-ul dvs., dacă codul este optimizat SEO sau nu, și pe baza acestui lucru vă scad sau măresc poziția în rezultatele căutării. Prin urmare, un site bun nu trebuie să fie doar frumos și modern, ceea ce este important, ci și scris corect din punct de vedere al codului.

Descărcați șabloane de site web HTML gratuite și creați-vă proiectele în cel mai scurt timp.

Fac aspectul site-ului web.
7 ani de experiență generală în dezvoltare web (design, layout, programare).

Abilități de bază: HTML, CSS, JS, SVG, jQuery, Node.js, WordPress, web design (Photoshop, Corel), git.
Uneori folosesc: PHP, MySQL.

Avantajele aspectului meu:
- Știu cum funcționează totul, de la design la server, așa că aspectul este concis și ușor de înțeles. Pot lucra în echipă cu designerul și programatorul dvs. Designerii primesc o corespondență pixel cu pixel a aspectului cu designul lor. Și programatorii înșurubează rapid aspectul acolo unde este necesar, fără probleme.
- O fac pentru computere, tablete și telefoane.
- Pentru toți browsere moderne. Pot pentru cele vechi dacă este nevoie de la IE6 :)
- Programez tot ce este necesar pe pagini: cereri către server, animații, interfață, calculatoare.
- Scriu tot codul de mână.
- Codul este absolut valabil.
- Viteza paginii de până la 100% în Google PageSpeed.

Beneficiile lucrului cu mine:
- Dacă suntem de acord, atunci o fac imediat și fără întârziere.
- O fac repede. Calitatea nu are de suferit. Dacă cineva îți promite mai repede, cel mai probabil vei primi ceva incomparabil mai rău.
- De obicei lucrez cu plata ulterioară, dar pe părți. A făcut piesa, ai verificat, plata.
- Corectez cu calm greselile dupa depunerea lucrarii, daca sunt.
- Dacă nu pot face ceva, vei afla înainte de a începe munca și nu mai târziu.

Particularitati:
- O fac doar de la zero. Acesta ar putea fi întregul site, o pagină, un bloc pe o pagină și așa mai departe. Adică, nu editez aspectul altcuiva.
- Nu folosesc Bootstrap. Este pentru prototipare sau Lansare rapidă, nu pentru design normal.
- Fac din design-uri în formate PSD, AI sau CDR. Nu o fac de la alții.

Lucrările prezentate mai jos sunt capturi de ecran din browser ale aspectului real pe care l-am finalizat, nu al designului. Multe lucrări excelente nu au fost incluse în portofoliu din cauza reticenței clienților.