How to Create Own Portfolio Web site

I recently graduated from smoothing iron secret writing Bootcamp in ny and entered the work market. As a frontend net developer trying to find associate degree entry — level position i think it’s vital to possess knowledgeable portfolio web site that displays all of your comes, particularly if you don’t have any previous secret writing expertise or a proper metallic element degree. coming into the work market amidst of coronavirus pandemic is formidable to say the smallest amount therefore i made a decision to use now to follow my skills, learn new ones and hopefully build cool comes on the approach. This journal post is concerning my terribly initial project that I designed throughout quarantine that went live — my personal portfolio web site.

Workflow

Before building my web site I created an idea of however am I attending to approach it. The segments that I required to figure on sounded like this:
Planning — perceive the aim, define deliverables
Design — sketching out ideas, engaged on colour scheme and

typography
Development — writing the code
Publishing — hosting and obtaining a custom name
Planning
To start building something in life it’s useful to possess an {idea|a thought|a concept|an inspiration} or idea of what you would like to make and the way you would like it to appear. It’s nice to start out with the aim in mind, or however Simon Sinek would say — “Start With Why”. In my case my purpose was to make a private portfolio web site that might have all my data, all the comes that I’ve inbuilt the past and my personal bio. This web site ought to be pretty straightforward, buy linkedin accounts, responsive and represent American state as a private also as a talented net developer. it's to possess a clean and fashionable style and have an exquisite interface. It ought to be distinctive and inventive. Phew, that was a lot! however the additional concrete you get on all the main points the better it'll be to execute. In outlining the deliverables I enforced user stories like so:
— the user is greeted with a Home page (this ought to be one thing inventive and distinctive, in my case I used 3.js — a cross-browser JavaScript library wont to produce and show animated 3D camera work in a very net browser)
— the user will navigate to concerning American state page (this page can have a compelling personal story also as data concerning education, current school stack, past work experiences and interests/hobbies — for a private touch)
— the user will navigate to comes page (this is wherever all the simplest comes can live, with descriptions of technologies used and links to Gitub and live video demos)
— the user will navigate to Contact American state page (this page can have all the mandatory contact data also as links to any social media and Github)

Design

After understanding the aim and designing a rough define it’s time to believe design! I’m a really visual person so was positively one among my favorite components. I started with sketching out the wireframes/blueprints for my pages. I merely used pen and paper, however you'll use any tools you prefer, for instance I conjointly like Figma that may be a digital style and prototyping tool. you'll use it to make websites, apps, or smaller interface elements which will be integrated into alternative comes. the primary sketch of my wireframes sounded like this:

Simple wireframing by hand
when the blueprints were finished I started researching the colour theme for my web site. I’m not a designer however I had associate degree understanding that the colour theme ought to be terribly fashionable and clean. i will be able to list some nice resources that I found for color analysis at the top of this journal. when a substantial quantity of analysis I terminated up selecting black as my primary color (mainly as a result of my Home page had a 3D graphics of traveling through space) and Ne pink as my secondary pop of color.
Typography plays a very important role in setting the tone, theme, and message of an internet site. For my web site I picked Orbitron — a geometrical sans-serif face supposed for show functions. It worked utterly with my area theme and it’s equivalent to the fantasy movies I wont to watch and love as a child. The second selection for the font fell to Raleway — it had been one among the foremost in style pairings with Orbitron in keeping with Google Fonts. this can be my concerning page that includes a photograph of the graffiti wall that I took at the smoothing iron faculty in downtown Manhattan, that says “Work arduous, be nice, get positive, keep hungry and have religion that everything can total — The smoothing iron School” — my mantra up to the present day!

Development
Now is the time for the foremost exciting half — writing the code! There’s heaps of dialogue on-line concerning making a custom web site vs employing a model and there ar definitely professionals and cons for each of these choices. As way as I perceive it’s okay to use a model — it’s quicker, additional straightforward and bottom and if you’re simply within the starting of your career as an internet developer it'll positively be easier for you. However, don’t get American state wrong you ought to still customise it and add options and practicality to showcase your programming skills.
I in person started with a Bootstrap model however terminated up making all of my pages from scratch, as a result of that approach I might customise it additional. It positively took approach longer however it had been all worthwhile and I’m terribly pleased with the approach it clothed . the most goal of this portfolio web site is to showcase the comes you’ve designed however the web site itself conjointly counts as a project of course! this can be my comes page that includes the comes I designed at Flatiron:

Publishing
In order to publish your innovative web site you’ll ought to take the name and net hosting. name is that the address of your web site that folks sort within the browser’s uniform resource locator bar to go to your web site. in keeping with my analysis it’s vital to possess a custom name as a result of it will increase believability and helps you get found on-line additional simply, however, it’s not necessary. I in person set to travel with the custom name that I purchased from namecheap.com.
Web hosting is that the place wherever all the files of your web site ar situated. it's just like the home of your web site wherever it truly lives. a decent analogy would be if the name was the address of your house, then net hosting is that the actual house that address points to. All websites on the net, want net hosting.