in a sense**,** is a longer version of a . In modern times, it’s important to showcase your work by uploading your portfolio to a website. The portfolio, Resume Recently I made and deployed my portfolio website under my own domain . I got so much appreciation and amazing feedback for this. https://itsrakesh.co I decided to pass on what I learned to you! I am sharing how I made it, things I learned throughout building it, and challenges I ran into. There are lots of tools out there to generate a portfolio website for you. But I decided to build it myself in order to practice my skills and to make it more customizable. Let's get started! Before we start: The code is available on . Github (Star it - Fork it - Use it) If you are a beginner to web development don't get demotivated by seeing the code. Tools, Technologies, Frameworks, Libraries Common tools are listed . here Language - JavaScript. Frontend - ReactJs, Bootstrap, Sass. Backend(RESTApi) - NodeJs, ExpressJs. Hosting - Netlify, Heroku. Third-party APIs - Dev. A bunch of npm packages. File Structure Frontend If you like this structure, I created a . You can use it to quickly set up your project. template Portfolio/
├── public
└── src/
    ├── assets/
    │   ├── documents
    │   └── images
    ├── common/
    │   └── components/
    │       ├── Footer
    │       ├── Navigation
    │       ├── UIElements/
    │       │   └── loadingAnimations
    │       ├── hooks
    │       └── util
    ├── features/
    │   └── ProfileRedirect
    └── pages/
        ├── 404
        ├── About/
        │   └── components
        ├── Blogs/
        │   └── components
        ├── Contact/
        │   └── components
        ├── Home/
        │   └── components
        ├── Profiles
        └── Work/
            ├── components
            └── projects Backend This website doesn't have a big backend because there is not much business logic involved in this. Server/
└── src/
    ├── controllers/
    ├── data/
    ├── routes/
    ├── services/
    └── util/ I am breaking this blog to separate parts where each part is a page of the website. The website contains 6 pages: Home Work Blogs About Me Contact Profiles All pages have the same navbar and footer. Part 1 - Home Page The is a quick overview of the whole website. It contains a quick intro about me, a few social links, an email and a resume button. home page It also has two different sections - 2 recent projects, why hire me and CTA. That 3d NFT on the hero section is generated from this website called " ". readyplayer.me Part 2 - Work Page The is an overview of what I do. Currently, it has only a projects section but I'm thinking I’ll add more. work page Projects page # contains cards. Each card contains the project photo, title, tech stack, link to the details page and link to live preview. The projects’ page Project Details page Project is actually a markdown file and rendered as HTML. For this, I use an npm package called . Markdown file is Github of respective project's repo. This is a simple trick. details page markdown-to-jsx README.md ...
const [readme, setReadme] = useState("");
...
// getting the README URL
...
const response = await axios.get(
      `https://raw.githubusercontent.com/RakeshPotnuru/${repoName}/${
          'master' || 'main'
   }/README.md`
);
setReadme(response.data);
...
// render markdown
...
<div className="project-item">
      <Markdown children={readme} />
</div>
... Part 3 - Blogs Page is my favourite page. The Blogs page I took some inspiration from the amazon prime video TV app 😂. Why that preview? - I cross-post my articles on three platforms - Dev, Hashnode and medium because everyone read articles on their favourite platform. So this idea of showing preview is to include those three links and show a small part of the blog. How does this work? - I used the Dev API to pull the blogs from dev. Each blog contains data that includes cover image, title, description, reactions, views, read time, publication date, etc. With this data, I made a card. That data also contains the blog URL and the canonical link. So the "Read Blog" URL is the canonical URL, the "dev" URL is the blog URL and still can't figure out the "medium" URL ☹️ because medium adds "id" at the end of URL(Current all blogs redirect to my medium profile page). To conclude, everything on this page is automated and I don't need to upload any data to the database. Part 4 - About Me Page page is a brief overview of everything about me. It contains some quick links, a Github contributions graph, blogs analytics, tools I use, languages, frameworks I know, my skills (Need to remove that percentage bar) and my achievements. About Me For the Github contributions graph, I used an npm package called . github-calendar-graph Part 5 - Contact Form Page contains a simple form for people to leave a quick message to me. The contact page How does this form work? - I used " " to send emails with NodeJs and " " as a mail service. nodemailer sendgrid So whenever a user clicks "Send Message" I send mail to myself that contains the user message :). (Please don't spam I have a monthly limit as part of the free plan :(. ) Part 6 - Profiles Page contains links to some main profiles. The profiles page And here's a cool thing - You can find any online profile of me with the URL , it will redirect you to my profile. https://itsrakesh.co/profiles/<websitename> For example, will redirect you to my Twitter profile. https://itsrakesh.co/profiles/twitter Animations This website doesn't have too many animations, just a few like those buttons on the home page, counting animations etc. Most of these animations are inspired by the " " community. codepen Loaders This website has many loading animations because they are great for the user experience. There are different types of loaders like a single spinner, placeholders and some creative loaders. I used spinner for page load and bootstrap's placeholder for placeholder animations like the above picture. Page load animation? - There is a feature in React called "Code-Splitting" which means the browser loads only files that are required. While the browser loads the files you can use that waiting time to show some animation instead of a blank page. Here's how to do it: import { lazy } from 'react';

const Home = lazy(() => import('./pages/Home/Home'));

...
<React.Suspense fallback={<LoadingSpinner />}>
     <Routes>
          <Route path="/" element={<Home />} />
     </Routes>
</React.Suspense>
... Analytics There is a visits count in the footer section of the website. I used CountAPI to count the number of times this website has been visited. I also used Google Analytics even though not needed :). I used it to learn GA. Search Consoles Finally, I submitted my website to Google search console and Bing webmaster tools to get indexed on search engines even though not needed :). But these tools help to find issues with your website. Challenges I Ran Into Apart from those common errors every developer experiences, I struggled to find a good design, colour combinations, layout etc. I spent(wasted) a whole day figuring out a simple issue with the blogs page to avoid duplicates. Most of the challenges I faced are only with the frontend because there is not much to do with the backend, it's just a simple RESTApi. Things I Learned This is my first portfolio website so I learned so much throughout building it. Not only technical things but also how to be consistent, how to design from a user point of view, how to mix different colours etc. Throughout the building, I made a lot of googling, so I learned how to solve an issue by just googling, what are the right places to find solutions, how not to waste time etc. I also used StackOverflow very effectively that I don't even get a chance to ask a question(Asking question on StackOverflow is still my dream). How you can have a portfolio website if you are not into web dev? Now, if you want a portfolio and you are not a web developer or you are not a frontend person then you can just use some online no-code tools like , etc. wix WordPress And if want a simple page, there are some great websites Here are a few alternatives I know: 1. Github Profile You can create a great-looking profile with Github. For example, here's mine - Github 2. Peerlist is great for anyone. It gives you a really nice profile page where you can include all about you, your work, your blogs, projects etc. Peerlist 3. Showwcase is a community for developers. And it has a cool feature that gives you a page and a free custom domain. Showwcase What's this? - Basically, you include all your skills, projects, experience, tech stack, social links, profile photo and profile banner in your Showwcase profile and Showwcase makes a page with all these details and gives you a free domain. So you can just share that link to show your profile. Cool, right? Here's mine - itsrakesh.showwcase.com That's it! That's how I made it.
I hope you find this useful. If so, follow me for more useful blogs like this every week. Feedback Please give me feedback on how I can improve my website or the things you like in it. This helps me a lot. (To give detailed feedback there is a google form link in the footer or if it's simple feedback leave a comment below.) Thank you 😇. Also published here.

Amazon

BUNCH

CodePen

Google

Heroku

Twitter

Online Playgrounds to Learn Every Tech Stack on the Web

3 Most Common Ways to Connect your Node and React Applications

Website

Hire Me

Nominated for 2022 - HackerNoon Contributor of the Year - Mongodb

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Too Long; Didn't Read

How to Get Your Personal Website to the Next Level 

How to Get Your Personal Website to the Next Level

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

3 Most Common Ways to Connect your Node and React Applications

10 Fascinating PHP and PHP-friendly admin templates

20+ Bootstrap 4 Template for 2020

15 Best Web Development Tools To Use In 2021

6 Reasons for Using Bootstrap Framework

3 Most Common Ways to Connect your Node and React Applications

10 Fascinating PHP and PHP-friendly admin templates

20+ Bootstrap 4 Template for 2020

15 Best Web Development Tools To Use In 2021

6 Reasons for Using Bootstrap Framework

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps