Entwickeln eines persönlichen Portfolios in nur 3 Wochen

Sie haben sich also entschieden, ein persönliches Portfolio zu entwerfen und zu entwickeln. Das ist großartig! Sie sind der Hälfte der Community für Webdesign und -entwicklung weit voraus. Aber was ist mit den restlichen 50%? Sie müssen exklusive Fähigkeiten auf kleinstem Raum zeigen, um in dieser schnell wachsenden Branche zu glänzen.

In den letzten 3 Wochen - seit ich diese Entscheidung getroffen habe, habe ich viel über die Entwicklung eines einzigartigen Portfolios gelernt. Nun habe ich das Gefühl, dass es Zeit ist, dieses neu erworbene Wissen mit Ihnen zu teilen.

Nach diesen 3 Wochen bin ich auf ein cooles, von Spielern inspiriertes Portfolio gestoßen.

Woche 1: Suchen Sie mehr als das, was Sie sehen

Mindestens einmal alle sechs Monate wird ein neuer Web-Trend geboren. Es ist schwer, all diesen Trends zu folgen, unabhängig davon, wie viele Blogs und Entwickler Sie in Ihren sozialen Netzwerken verfolgen. Einseitige Websites, Parallaxe, Schieberegler, minimalistisches Design und so weiter? Die Liste der Web-Trends ist endlos und wir könnten sie den ganzen Tag lang zählen.

Das erste, was Sie tun werden, ist ein kurzes Forschungsprojekt zu was? über Webdesign und Webentwicklungstrends. Eine gute Sache über diese Art von Forschung ist, dass Sie Ideen bekommen und vielleicht einen ersten Entwurf, wie Ihr Portfolio aussehen sollte. Das Problem ist, dass Sie dazu gebracht werden können, Ihre eigenen Ideen mit Kreativität und innovativen Ideen zu verbinden.

Eine wichtige Sache, die Sie in dieser Woche nicht vergessen sollten, ist Ihr gesamtes Marketingmaterial zu schreiben. Ich denke, das ist einer der schwierigsten Teile, mit denen Sie sich befassen werden. Es ist nicht leicht, die Dinge zu schreiben, die im Grunde entscheiden könnten, ob ein Kunde Sie kontaktiert oder nicht. Schreiben Sie es auf Papier und stellen Sie sich folgende Frage: Wenn ich ein potenzieller Kunde wäre, was würde mich veranlassen, mich zu kontaktieren?

Vergessen Sie nicht, dass dieses Portfolio Sie der Welt vorstellt. Sie müssen originelle Ideen, innovatives Denken und ein Portfolio-Konzept entwickeln, das die Menschen umhauen wird.

Was mir nach der ersten Woche einfiel, war eine Entscheidung: Egal wie schwer es sein wird, ich werde mir ein Webspiel entwickeln, das auf Front-End-Programmierung basiert. Drei Wochen habe ich mir dafür gegeben?

Woche # 2: Codieren als gäbe es kein Morgen

Nachdem Sie eine grundlegende Idee haben und nicht einen Moment zuvor, ist es Zeit, über die Entwicklungsphase nachzudenken.

Ich entschied, dass mein Portfolio als webbasiertes Spiel funktionieren wird. Daher begann ich nach JavaScript-Frameworks zu suchen, mit denen ich Zeit und Arbeit sparen kann. Die Sache mit Frameworks ist, dass sie normalerweise gut für den Vorsprung sind - aber langfristig werden sie nicht Ihren Bedürfnissen entsprechen.

Ein gutes Beispiel in meinem Portfolio sind die Leuchtkästen, die Informationen über mich liefern und aktivieren, wenn ein Benutzer ein Haus betritt. Diese Art von Funktionalität gibt es bei einer normalen JS-Spielengine nicht.

Nun gibt es immer eine Option, ein vorhandenes Framework zu übernehmen und durch Hinzufügen von eigenem Code zu verbessern. Berücksichtigen Sie jedoch, dass das Eintauchen in einen anderen Code manchmal länger dauert als der eigene Code. Wenn Sie den Code eines anderen Benutzers neu schreiben, könnte dies bei neuen Versionsversionen ein Problem sein.

Nachdem ich ein paar Spiele-Engine-Frameworks durchlaufen hatte, hatte ich das Gefühl, dass ich keine andere Wahl habe, als meine eigene Game-Engine zu entwickeln, die meinen Bedürfnissen entspricht.

Lassen Sie uns einen kurzen Überblick über die wichtigsten Methoden des Spiels geben.

Für die Behandlung der Pfeiltastaturereignisse habe ich folgenden Code verwendet:

Wie Sie sehen, ist der Code sehr einfach. Falls der Benutzer die Taste? Up? oder? Pfeile nenne ich das? Funktion und im Fall von? Richtig? oder? Ich rufe? MoveX? Funktion.

Ein kurzer Blick auf einen von ihnen zeigt, wo all die Magie passiert:

Für jeden Benutzerschritt überprüfe ich mit einer speziellen Methode namens "canImove". (Kann ich mich bewegen?), Wenn sich der Charakter über die Spielfläche bewegen kann. Diese Methode umfasst Bildschirmgrenzen, Hauspositionen, Straßenbegrenzung usw. Wenn es möglich ist, gebe ich True zurück und der Charakter bewegt sich weiter, ansonsten gebe ich False zurück und der Charakter bleibt in seiner aktuellen Position.

Nun, da wir immer noch über das Web sprechen, hatte ich die Meinung, dass das Bewegen mit den Tastaturpfeilen nicht ausreicht. Sie müssen immer über den Endbenutzer nachdenken - Ihren potenziellen Kunden, der möglicherweise nicht die Zeit hat, "in Ihrer Welt" rumzuhängen. Aus diesem Grund habe ich sowohl eine Navigationsleiste als auch eine Option zum "Teleportieren" hinzugefügt. der Charakter direkt zu einem bestimmten Punkt im Spiel.

Der? Teleporter? Methode sieht so aus:

Ich bekomme das? X? Andy? Parameter aus dem Mausklick-Ereignis mit? event.pageX? und? event.pageY ?, nachdem ich beide habe, ändere ich den Player CSS? und? top? Eigenschaften und verwenden Sie die jQuery? animieren? Methode, um die Deckkraft des Players zu animieren - damit ich das? Fade? bewirken.

Ein guter Tipp, den ich Ihnen leider sagen kann, ist, den Code so dynamisch wie möglich zu halten. Schreiben Sie Code so, dass Sie, wenn Sie in Zukunft weitere Inhalte zu Ihrem Portfolio hinzufügen möchten, durch Ihren Code unterstützt werden.

Woche # 3: Feedback ist dein neuer bester Freund

Die letzte Woche meiner Portfolioentwicklung war sehr schwierig. Ich musste den finalen Design-Touch schließen und Code schreiben, während ich mich selbst darum gekämpft hatte, es nicht bereits zu veröffentlichen. Es war, als würde man ein Geheimnis bewahren, dass man sich nicht sicher ist, ob es absolut wahr ist.

Ich habe eine Lösung für diesen nervigen Widerspruch gefunden. Nehmen Sie zehn Personen, die Sie kennen und denen Sie vertrauen, zeigen Sie ihnen Ihre Arbeit und bitten Sie sie um Feedback. Vorzugsweise sollten diese zehn Personen völlig verschieden sein. Hier sind die zehn Personen, die ich für diese streng geheime Mission ausgewählt habe:

  • Meine Mama
  • Mein Chef
  • Mein bester Freund
  • Mein 6 Jahre alter Neffe
  • Ein leitender Webdesigner
  • Ein leitender Frontend-Entwickler
  • Ein potentieller Kunde
  • Ein Kunde, mit dem ich gearbeitet habe
  • Ein QA-Ingenieur
  • Ein weiterer Super-Multi-Ninja-Webentwickler (Nur für den Fall)

Bitten Sie sie um Rückmeldung zu allem. Angefangen von deiner Mutter, die dir sagt: "Es funktioniert nicht auf meinem Computer!" (Nun, du verwendest IE5.5?) Was dich daran erinnert, dass du einige IE-Fallbacks schreiben musst, an deinen 6-jährigen Neffen, der erstaunlicherweise genug für einen kostenlosen Usability-Test und schließlich für deinen Chef und den? Ninja Webentwickler? Sie erhalten eine sorgfältige detaillierte Überprüfung des Codes, die Ihnen helfen kann, Ihren Code zu verbessern und noch effizienter zu gestalten.

Sie haben keine Ahnung, wie viele gute Änderungen Sie erhalten können. Bleib dabei.

Fazit

Obwohl die Entwicklung eines persönlichen Portfolios definitiv keine leichte Aufgabe ist, ist es jeden Cent wert. Ich habe viel von diesem Prozess gelernt und ein wirklich tolles Feedback erhalten.

Nehmen Sie sich die Zeit und denken Sie über Ihre eigenen, einzigartigen und "umwerfenden" Gedanken nach. Idee für Ihr Portfolio, zögern Sie nicht, sich mit anderen über Design, Benutzeroberflächen und Marketingfragen zu beraten, und sich an das Wichtigste zu erinnern? habe Spaß!