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
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:
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:
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
I use Netlify & Heroku mostly because it is easier to integrate with GitHub's Continuous Integration & Deployment.
Top comments (11)
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 😁
Good way to talk about your approach. Is complete and reaches many stages with a good explanation.
Thanks for the article. I will save it for a future implementation of my site.
And congrats for the final work!
Thank you soo much 😇❤️
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.
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 😁
This is really cool...I loved it🙌
Thank you Kunal😇