Moje portfolio w HTML5

Wątek przeniesiony 2015-10-05 07:59 z Off-Topic przez Adam Boduch.

LI
  • Rejestracja:prawie 17 lat
  • Ostatnio:około 9 lat
22

Cześć wszystkim,

Właśnie skończyłem tworzyć swoje portfolio.
Będę wdzięczny za wszelkie opinie i uwagi :)

http://damian.drygiel.com

Pozdro!

Fi3rce
Gadaj jak się nauczyłeś tak projektować grafikę, albo siłą to z Ciebie wyciągnę :D
grzesiek51114
grzesiek51114
@Fi3rce głodem go weźmy! Albo prądem!
Pixello
  • Rejestracja:prawie 10 lat
  • Ostatnio:4 miesiące
  • Lokalizacja:Podkarpacie
  • Postów:448
0

Bardzo fajna strona, 10/10 ;)

Patryk27
Moderator
  • Rejestracja:ponad 17 lat
  • Ostatnio:ponad rok
  • Lokalizacja:Wrocław
  • Postów:13042
2

Mi również się podoba, good work ;)


Fi3rce
  • Rejestracja:ponad 10 lat
  • Ostatnio:ponad 9 lat
  • Postów:423
2

Również mi się bardzo podoba. Sam jesteś odpowiedzialny za design? Wielki szacun


„Every Pro was once an amateur, every expert was once a beginner.”
grzesiek51114
grzesiek51114
  • Rejestracja:ponad 11 lat
  • Ostatnio:ponad 4 lata
  • Postów:2442
3

Niesamowite. Jakie w ogóle wyczucie stylu! :) Znam html'a ale móc tak projektować grafikę i elementy strony to dla mnie naprawdę Mount-Everest :)

Augustin? "Jestem na Tak", Małgosia?! "Jestem na tak!" Jednym słowem:

3-razy-tak-przechodzisz-dalej.jpg

Swietna strona :)

edytowany 4x, ostatnio: grzesiek51114
Lectre
  • Rejestracja:około 10 lat
  • Ostatnio:ponad 6 lat
  • Lokalizacja:Warszawa
  • Postów:293
1

Leonardo frontu. Bardzo mi się podoba.

KA
KA
  • Rejestracja:prawie 12 lat
  • Ostatnio:prawie 5 lat
  • Lokalizacja:Warszawa
  • Postów:1683
1

Fajna taka dla ludzi. Osobiście mi się nie podoba, nie lubię takich wodotrysków.


PROGRAMY NA ZAMÓWIENIE, ZALICZENIA STUDENCKIE, KONFIGURACJA SERWERÓW, SYSTEMÓW I BAZ DANYCH, STRONY INTERNETOWE, POMOC W PROGRAMOWANIU, POPRAWIENIE I OPTYMALIZACJA APLIKACJI
JAVA, C++, LINUX, WWW, SQL, PYTHON
POSIADAM KOMERCYJNE DOŚWIADCZENIE
TANIO, SZYBKO I PORZĄDNIE
Z KOMENTARZAMI OBJAŚNIAJĄCYMI KOD
PISZ NA PRYWATNĄ WIADOMOŚĆ
CENY JUŻ OD 49,99ZŁ ZA PROGRAM
ZAJMIJ SIĘ TYM CO CIĘ NAPRAWDĘ INTERESUJE!
grzesiek51114
grzesiek51114
  • Rejestracja:ponad 11 lat
  • Ostatnio:ponad 4 lata
  • Postów:2442
0

@Karolina ja uważam wręcz odwrotnie. Jak ktoś taki jak autor będzie startował na stanowisko developera jakiegoś front-endu webowego itp. to od razu widać, że ma pojęcie o tym co robi, a przede wszystkim ma gust! Wszystko na tej stronie współgra ze sobą i taka wizytówka na pewno może być nawet jako jego CV :)

edytowany 1x, ostatnio: grzesiek51114
0

Ciekawe czy gdyby mial 44 lat, czy tez by wywalil na frontendzie i'm 44 ;). Ogólnie efektowne portofolio, ale z drugiej strony jakies takie walace sie w mozg odbiorcy zbyt gwaltownie.

Bartosz Wójcik
  • Rejestracja:około 14 lat
  • Ostatnio:ponad 4 lata
  • Postów:439
1

Fajna stronka, jednak brakuje mi tu spójnego stylu i kolorystyki, z jednej strony używasz elementów 3d, cieniowania nagłówków, a potem od razu flat style, spróbuj zastosować spójny styl elementów i kolorystykę (znajdź pasujące kolory np. Color Schemer-em).

Grafiki są w niskiej jakości, np. http://damian.drygiel.com/img/cert1.gif zastanów się nad SVG, po przeskalowaniu np. u kogoś kto ma w OS 120 DPI ustawione te grafiki jeszcze gorzej wyglądają.

"TIMELINE" i ustawiony text shadow na wyższym DPI generują brzydko wyglądające krawędzie cieniujące (Chrome).

Używanie

 
chyba nie jest poprawnym rozwiązaniem.</p>

Używasz popularnego fontu Raleway, teraz zrób tą samą stronę po polsku :)

Sekcja "Some of my work" wygląda zupełnie inaczej na Chrome, Opera, FF a Safari.

Spróbuj także dodać spójny styl dla line-height w CSS, niektóre paragrafy mają fajne odległości między liniami, inne są nienaturalnie "ściśnięte".

Masz błędne linki na stronie (obecnie redirectują) np.

http://dibby.pl/
http://drygiel.com/projects/aso
http://drygiel.com/projects/see-math
http://goo.gl/maps/2c3ts
http://msdn.microsoft.com/en-us/library/ff727815.aspx
http://www.devexpress.com/
http://www.emgu.com/
http://www.windowsazure.com/
https://plus.google.com/104280025056258231436?rel=author
https://prod.ceidg.gov.pl/

Część z nich wskazuje gdzie indziej lub przenieśli się na HTTPS (kody błędów 301 i 302).

Nie masz ustawionego w nagłówku canonical url.

Style masz bezpośrednio w kodzie umieszczone zamiast w zewnętrznym pliku CSS.

<article class="simage left">
</article>

Dawno nie widziałem, żeby ktoś jeszcze korzystał z target="_blank" mnie to osobiście denerwuje, że strona decyduje za mnie, gdzie ma zostać otwarta.

Drobne rzeczy, które można łatwo poprawić.

S9
  • Rejestracja:ponad 10 lat
  • Ostatnio:5 miesięcy
  • Lokalizacja:Warszawa
  • Postów:3573
0

10/10


"w haśle <młody dynamiczny zespół> nie chodzi o to ile masz lat tylko jak często zmienia się skład"
MrHyperion
  • Rejestracja:ponad 9 lat
  • Ostatnio:ponad 3 lata
  • Postów:112
0

Czytanie Twojego portfolio sprawiło mi dużo przyjemności. Bardzo ładnie.

AK
  • Rejestracja:prawie 10 lat
  • Ostatnio:ponad 8 lat
  • Postów:21
0

11/10 :)

1

Najlepsze jakie widziałem
Masz skilla :)
Keep up the good work

LI
Widziałem ;) Prawdziwy majstersztyk!
flowCRANE
Moderator Delphi/Pascal
  • Rejestracja:ponad 13 lat
  • Ostatnio:2 minuty
  • Lokalizacja:Tuchów
  • Postów:12154
3

Raczej nie spotkasz się z Kiepskim w pośredniaku - na bezrobocie się nie zanosi; Gratuluję, świetny design :]


Pracuję nad własną, arcade'ową, docelowo komercyjną grą z gatunku action/adventure w stylu retro (pixel art), programując silnik i powłokę gry od zupełnych podstaw, przy użyciu Free Pascala i SDL3. Więcej informacji znajdziesz na moim mikroblogu.
edytowany 1x, ostatnio: flowCRANE
AreQrm
  • Rejestracja:prawie 11 lat
  • Ostatnio:17 dni
  • Lokalizacja:Londyn
  • Postów:873
1

Bardzo fajna!
Zazdroszczę ;-)


Gjorni
  • Rejestracja:około 12 lat
  • Ostatnio:około 3 lata
0

Ogólne wrażenie bardzo dobre. Posiedziałbym jednak jeszcze troszkę nad sekcją Timeline. Jest w niej coś takiego, co w konfrontacji z resztą strony prosi się o jakieś ostateczne pociągnięcie pędzlem.


The quieter you become, the more you are able to hear.
LI
  • Rejestracja:prawie 17 lat
  • Ostatnio:około 9 lat
0
Fi3rce napisał(a):

Sam jesteś odpowiedzialny za design?

Wszystko na stronie stworzyłem sam od podstaw żeby móc się tym pochwalić pracodawcy.
Strony stawiane na szablonach nie zaimponują nikomu z branży.

Nie ukrywam, że zanim powstał gotowy prototyp w Photoshopie zrobiłem spory research w poszukiwaniu inspiracji.
Dla przykładu strona główna powstała o koncepcję "tła-kodu", który spodobał mi się tutaj: http://duoco.de

Nagrałem pulpit jak coś tam robię w Visualu a potem to lekko obrobiłem w After Effects (kolory, tempo, blur, kąt).
Żeby zaoszczędzić na rozmiarze zapisałem w 15FPS :)

Fi3rce napisał(a):

Gadaj jak się nauczyłeś tak projektować grafikę, albo siłą to z Ciebie wyciągnę :D

Tak szczerze to jakiś tam talent do rysowania miałem od dziecka, ale zanim zacząłem tworzyć coś sensownego musiałem trochę natworzyć syfu.
Jak dzisiaj patrzę na swoje stare portfolio to mi niedobrze (http://drygiel.com/projects/old-portfolio), a wtedy wydawało mi się boskie ;)
Bardzo możliwe, że za 2 lata powiem to samo o aktualnym CV ;)

Podsumowując - nie da się tego nauczyć z tutoriala - gust trzeba trochę wytrenować ;)

Brzęczący Bombus napisał(a):

Ciekawe czy gdyby mial 44 lat, czy tez by wywalil na frontendzie i'm 44

Tak ;P bo wg mnie to dość istotna informacja dla pracodawcy. Np nikt nie weźmie 20 latka na dyrektora banku ;P

Bartosz Wójcik napisał(a):

Fajna stronka, jednak brakuje mi tu spójnego stylu i kolorystyki, z jednej strony używasz elementów 3d, cieniowania nagłówków, a potem od razu flat style, spróbuj zastosować spójny styl elementów i kolorystykę

Kwestia gustu ale ogólnie masz rację - daleko mi do idealnego designera ale na moje szczęście aplikuję na programistę back-endowego ;) Front-end to bardziej hobby, w którym czuję się dobrze, ale na dłuższą metę mnie nudzi i muszę robić sobie przerwy od tego.

Bartosz Wójcik napisał(a):

"TIMELINE" i ustawiony text shadow na wyższym DPI generują brzydko wyglądające krawędzie cieniujące (Chrome).

Używanie

 
chyba nie jest poprawnym rozwiązaniem.
...
Używasz popularnego fontu Raleway, teraz zrób tą samą stronę po polsku :)
...
Spróbuj także dodać spójny styl dla line-height w CSS, niektóre paragrafy mają fajne odległości między liniami, inne są nienaturalnie "ściśnięte".
...
Nie masz ustawionego w nagłówku canonical url.
...
Style masz bezpośrednio w kodzie umieszczone zamiast w zewnętrznym pliku CSS.
...
Drobne rzeczy, które można łatwo poprawić.</p>

Tworząc tę stronę miałem ograniczony budżet czasowy - a roboty maaasę. Czasem jak widać szedłem na skróty.
Założyłem sobie pewien deadline i za wszelką cenę zależało mi żeby się w nim zmieścić stąd pewne uproszczenia, babole i kompromisy.

Wielkie dzięki Bartosz za dogłębną analizę i za Twój czas ;)
Masz moje słowo, że następnym razem jak będę aktualizował portfolio będzie to pięknie poprawione :)

mr-owl
  • Rejestracja:prawie 10 lat
  • Ostatnio:ponad rok
  • Postów:206
0

Witam,

Strona bardzo słabo prezentuje się gdy JS jest nieaktywny...

Pozdrawiam,

mr-owl

Sarrus
Kto dzisiaj wyłącza js? Wiele stron przestanie wtedy działać... bardzo wiele...
mr-owl
W erze śmieci które wylewają się na nas ze stron internetowych to NoScript+AdBlock to podstawa używania internetu.
Sarrus
A to forum działa ci poprawnie? Bez js nie powinieneś móc komentować właściwie...
Pixello
  • Rejestracja:prawie 10 lat
  • Ostatnio:4 miesiące
  • Lokalizacja:Podkarpacie
  • Postów:448
0

Zauważyłem, że na lumii się animacje rozjeżdżają troszkę

0

Extra

Schakal
  • Rejestracja:ponad 10 lat
  • Ostatnio:prawie 3 lata
  • Lokalizacja:Wrocław
  • Postów:29
1

Czytanie tego sprawia przyjemność. Jak dla mnie czad. Z taką prezentacją będziesz miał okazję wybierać wśród najlepszych pracodawców

Sarrus
  • Rejestracja:prawie 14 lat
  • Ostatnio:2 dni
  • Postów:2512
2

Co do samej strony, to mi się tez podoba, ale ja wyjątkowo nie o tym.

Chodzi o liczbę technologii jakie deklarujesz, że jesteś ekspertem, albo bardzo dobry i dobry. Albo masz inną definicję eksperta, albo chłopie nie masz życia.
Nie zamierzam podważać Twoich kompetencji, ale jako potencjalny pracodawca patrzyłbym bardzo sceptycznie na taką listę.

Fi3rce
Trudno mi powiedzieć ile czasu zajmuje nauczenie się tego, ale patrząc na 24 lata na froncie też mnie to zdziwiło. Później zjechałem dalej i zobaczyłem, że zaczął się tym interesować jak miał ~ 16/17 lat, więc kto wie.. 7 lat to już sporo czasu
Sarrus
Ja pierwsze swoje programy pisałem 13 lat temu więc wiem, że nie tylko o czas tu chodzi.
T2
  • Rejestracja:ponad 10 lat
  • Ostatnio:7 miesięcy
  • Postów:194
1

Ile czasu poświęciłeś na tworzenie ?

LI
Ok 3-4 miesięcy po kilka h dziennie. Czasami z przerwami na kilka dni. Pisałem to od zera przy okazji ucząc się Canvas 2D i Three.js
LukeJL
a te wstążki niebieskie i zielone, które się ruszają jak się najedzie myszą (te przy datach i doświadczeniu), to też sam zrobiłeś, czy to jakiś gotowy widżet? Albo wyżej - te powierzchnie wireframowe 3D (poniżej napisu "SELECT * FROM World") to sam zrobiłeś w Three.js, czy to gotowiec?
LI
Samemu to pisałem od zera. Sporo z tym zabawy było. Przerobilem po kilka tutoriali od grafiki 2D i 3D
kate87
  • Rejestracja:około 15 lat
  • Ostatnio:około 3 lata
0

Gratuluję, takiej stronki jeszcze nie widziałam piękna. :)

Zbijlud
  • Rejestracja:ponad 10 lat
  • Ostatnio:około 7 lat
  • Postów:17
0

Strona robi wrażenie, jest świetna.
Nie wiem czy też to dostrzegłeś, ale jak jesteś w "o mnie" to przy najechaniu na "umiejętności" bądź na "kontakt" napisy się zlewają.

33jpqpz.png

edytowany 2x, ostatnio: flowCRANE
flowCRANE
Wrzucaj obrazki do załączników postów, dzięki temu nie będzie problemu z ich wyświetlaniem i nigdy nie wygasną;
mr-owl
  • Rejestracja:prawie 10 lat
  • Ostatnio:ponad rok
  • Postów:206
0

Witam,

Nie wiem jak wy ale ja tutaj nie widzę informacji o tym że strona wymaga JavaScript, profesjonalista o tym nie pomyślał?

xPQcr.png

Pozdrawiam,

mr-owl

edytowany 1x, ostatnio: flowCRANE
flowCRANE
Ty też pamiętaj o dorzucaniu obrazków do załączników; Byle nie JPEG, bo z nimi Coyote ma problem;
EroSanin
Sówka ( @mr-owl ), ja rozumiem znajdywanie błędów ale Twoje złośliwości ujawniają jedynie Twoje kompleksy. Pozdrawiam. Ero
mr-owl
Kilka uwag zostało już poruszonych, całość jest niespójna wizualnie, jeśli ktoś chce zaprezentować swoje umiejętności powinien dążyć do prezentacji majstersztyku programistycznego a nie tylko zaprezentować kilka efektów które można osiągnąć dzięki html5. Strona na dzień dobry powinna prezentować jakąś spójną zawartość po wyłączeniu JS jak i odwiedzeniu jej za pomocą przeglądarki tekstowej. To jest strona na której programista prezentuje swoje umiejętności a nie "niedouczony" technicznie grafik. To nie jest jeden z projektów które robię dla klienta i on akceptuje jego jakoś.
ZD
  • Rejestracja:ponad 9 lat
  • Ostatnio:ponad 7 lat
  • Postów:99
0

@mr-owl Szczegół, do poprawienia - każdemu może się przydarzyć ;)

Całość naprawdę robi wrażenie! Jak dla mnie super ;)

edytowany 1x, ostatnio: Zdziwiony
O5
  • Rejestracja:około 10 lat
  • Ostatnio:około 9 lat
  • Postów:4
0

Zniszczyłeś mi życie.
Już wydawało mi się, że dzięki ciężkiej pracy, nauce gdy inni się bawią, wyrzeczeniom staję się bardzo dobry we front-endzie.
Patrząc na twoją stronę wiem, że "wydawało się" to słowa klucze.

Gratuluje z całej siły! Widać bardzo dużo serca włożonego w tą stronę. Nigdy czegoś podobnego nie widziałem.

0

Wow, świetnie to wygląda! Dobra robota. :)

Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)