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.

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:-

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:

• saurabhdaware.in
• rleonardi.com

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

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:-

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

• React.js Learn More
• SASS (For Styling) Learn More

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:

• web.dev
• gtmetrix.com
• Page Speed Insights

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

Example

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

• Netlify (Provides free SSL)
• Firebase hosting (Provides free SSL)
• 000webhost
• Heroku (One of the most popular to host full stack applications with both a client & a server)

Following are some of the widely used paid providers

• GoDaddy
• Digital Ocean

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.