loading...
Cover image for How I Created My Portfolio: From Thought Process To Deployment.

How I Created My Portfolio: From Thought Process To Deployment.

pika1998 profile image Prafulla Raichurkar ใƒป4 min read

It had always been in my bucket list to have a portfolio before entering the corporate world and I am glad to share that around a month ago that task has been completed๐ŸŽ‰.

You can check my portfolio at https://prafulla.tech.

In this post, I would like to share my journey from thought process to deployment.

I would break down the entire process in the following section

  1. Planning & Design
  2. Project Strucutre
  3. Optimization
  4. Deployment

Planning & Design

In this phase, I have used a browser-based design & prototype tool Figma. Other tools like Adobe XD, Sketch, etc would also work.

This is the Figma planning board for my portfolio.
Figma Planning Board

The reason why I have put the planning & designing phase on a single page is that it makes implementing thoughts into actions easier.

The planning phase consists of two steps:

Objectives

Writing down basic requirements expected out of the portfolio helps in generating a stronger purpose & makes one think twice if the implemented design & content will fulfill them.

Example:-
Objectives

References

Before directly jumping into development & design, it's better to refer some sample websites and list out some idea's you like about them.

You can find reference websites easily by simply searching
Top portfolio websites in <xyz> field.

Following are some of the portfolios I referred:

Make a note of features that you feel you must have in your portfolio.
Example:-
References

Designing Phase

This is the phase where I put the visualized design into action.

I put my design in the following format for every page/section.
Requirements
Light Mode Mobile & Desktop View
Dark Mode Mobile & Desktop View

Example:-

Design

The Requirement specifies the components which I feel should be present in this page/section.

Putting requirements besides section designs helps find creative ways to implement the requirement and also reduces the chances of missing out putting important details.

Project Structure

In this section, I would like to talk more about the tech stack I have used & the way I have organized my code.

I have used react.js to create my portfolio since I had just started learning about javascript frameworks at that point in time.

My portfolio is totally static with no back-end requirement, hence there was no need to implement complex state management, database connectivity, etc.

I have used SASS, which is a CSS Preprocessor which makes styling components more flexible.

Stack Used

Since I wanted a single page application(SPA), there was no need to even implement a react-router.

File Structure

.
โ”œโ”€โ”€ src
    โ”œโ”€โ”€๐Ÿ“‚components
         โ”œโ”€โ”€๐Ÿ“‚about
              โ”œโ”€โ”€ ๐Ÿ“„About.scss
              โ”œโ”€โ”€ ๐Ÿ“„About.js
         โ”œโ”€โ”€๐Ÿ“‚footer
         โ”œโ”€โ”€๐Ÿ“‚....(Other Components)

โ”‚   โ””โ”€โ”€๐Ÿ“‚services (APIs)  
|   โ””โ”€โ”€๐Ÿ“„App.js (Root App) 
|   โ””โ”€โ”€๐Ÿ“„index.js
|   โ””โ”€โ”€๐Ÿ“„_variables.scss (Variables) 

In my codebase, every page/section of portfolio is React Class Based Component stored in components directory with its respective style file.

๐Ÿ“„App.js
It is a root level component which consists of all the components in the desired order. Here is a rough template of my App.js

// Module Imports

class App extends React.Component {
  constructor(props){
    super(props);
    let theme = localStorage.getItem("theme");
    // Switch Theme as per time Logic

  }

  componentDidMount(){
    // Console Log Messages
  }
  changeTheme = (theme)=>{
    // Change Theme Helper Function
  }
  render(){
    // * Render the components as a SPA
    return <div className={'App app-'+this.state.theme}>
          <ThemeToggler theme={this.state.theme} changeTheme={this.changeTheme}></ThemeToggler>
          <NavWidget theme={this.state.theme}></NavWidget>
          <Landing theme={this.state.theme}></Landing>
          <Projects theme={this.state.theme}></Projects>
          <About theme={this.state.theme}></About>
          <Skills theme={this.state.theme}></Skills>
          <Hobbies theme={this.state.theme}></Hobbies>
          <Footer theme={this.state.theme}></Footer>
      </div>;
  }
}

export default App;

The ๐Ÿ“‚services directory consists of helper methods which call the backend APIs needed (For example I use DEV's API to fetch my articles and display it on my portfolio)

๐Ÿ“„_variables.scss
It is a SASS file which consist of color combinations & other helpful variables that can be imported in other styles to make them more reusable.
Example

 // Text Colors
  $lightPrimaryText:#3F3D56;
  $darkPrimaryText:#FAFAFA;
  $darkSecondaryColor:#FDCA13;
  $lightSecondaryColor:#66BB6A;
  $lightTextColorGray:#828282;
  $darkTextColorBlue:#0d47a1;
  // Container Colors
  $lightContainerColor:#FFFFFF;
  $darkContainerColor:#202D36;
  $maxWidth: 800px;

The main idea here is to Define things once, call multiple times

Optimization

Don't think your portfolio is good enough? How do you benchmark it?

There are some of the tools which help you benchmark your websites with different parameters:

These sites will benchmark your websites & will also provide a detailed report to help you make them better.

Example
Report

Following are some of the steps which I found helpful to increase my SEO and Performance:

  • Use Content Delivery Network (CDN) to serve static assets (I use Cloudinary)
  • Half of the SEO is meta tags (keywords, description, title, favicon, open-graph tags, etc) and the other half is content (make sure to include content related to keywords).
  • Minify CSS & JS Files (You will find various tools online to do so)
  • Lazy Load Images/Videos
  • Use Compressed File Formats (Example .webp for images)
  • Use plugins to check color contrasts (Check this for Figma)
  • Have a xml sitemap, submit sitemap to google.

Deployment

This is the last phase which consists of hosting your websites.

Following are some the free hosting providers

Following are some of the widely used paid providers

I use Netlify & Heroku mostly because it is easier to integrate with GitHub's Continuous Integration & Deployment.

๐Ÿ’– Feel free to share your portfolios and any other helpful resources in the comments.

Posted on by:

pika1998 profile

Prafulla Raichurkar

@pika1998

Developer. 21 y/o IT Engineering Student

Discussion

markdown guide
 

Excellent article and a charming portfolio! I just posted this week an article about Lighthouse (also made about my portfolio) : 6 ways to improve Lighthouse, maybe it will add more value to this article :)

 

Thanks, I checked your article and it's very informative as well ๐Ÿ˜

 

Hey! This is great, man!

Is there a reason you didn't use Gatsby for this? I personally don't think SPAs are really well cutout for static websites like portfolios and marketing websites. They're better suited for web applications.

You could really enhance your SEO and Performance scores by using Gatsby as it comes with all the optimization out-of-the-box.

 

Hey, thank you๐Ÿ˜‡, there is no particular reason for not using Gatsby, at that point of time I was just starting to learn react and I wasn't aware of Gatsby, sure might switch to Gatsby when I plan to rebuild my next version of portfolio๐Ÿ˜

 

Thanking the DEV community for such an unexpected response to this post. I would like to share some hidden animations I had left for visitors to explore in my portfolio.
Animations
Check them out on my portfolio if you haven't yet โœจ
Might create a post later on how to make such animations ๐Ÿ‘จโ€๐Ÿ’ป

 

Good read nice to see that you actually came up with a design before building it not everybody does that. I did the same with my portfolio too I also used Figma for the design.

 

Thank you ๐Ÿ˜‡, I checked your portfolio & i really appreciate the whitespace, it's perfect ๐Ÿ˜