7 Awesome Portfolio websites

gourav majee — Wed, 23 Jun 2021 11:34:50 +0000

Hello, 👋I'm Gourav,

Building a developer portfolio can be a cumbersome task, we have to think of a good design, best projects, blogs, and other details.

So, here are 7 web developer portfolios 🤩 that I found while making my portfolio website, and also they will give you all the inspiration you need to create your own first portfolio👌.

1. Josh W Comeau

A cool and awesome portfolio from josh . Also, Don't forget to hover around for cool effects. must visit

Link 👉 - here

2. ART

A cool and awesome portfolio from Patricia Aas .this type of PF can be usful for artists for showcasing their art.

Link 👉 - here

3. COW

Every small minimalistic detail in it has its own uniqueness.Go check it out on your own.

Link 👉- here

4. HACK

This is by far the most hacker-style website I've seen. you can change channels and every effect has its own unique effects. A must visit

Link 👉- here

5. FLOWER

Again a very awesome website. minimalistic and cool hover flower effects steal everyone's Hearts. must visit
Link - here

6. PIXEL

A cool indie pixelated sword game portfolio. Every game details are present. must visit
Link 👉 - here

7. POP SHAKE

As a beginner, this website could be useful as it contains many small hover things which I thought could be useful for beginners.
Link 👉- here

💯(everyone like a little extra)💯😄

7+2 websites

8. SWAG

Another cool single-page portfolio. Also, Don't forget to hover on the Get Started and Social icons for cool effects.

Link 👉- here must visit

9. My first portfolio :

Also, I made my simple portfolio from all the learnings I got from different creators.

Link 👉- here

Conclusion 🎀

If you found this article useful or gave you the inspiration you need to build your portfolio. Do like and share with your network.

If you've enjoyed this article ≧◠‿◠≦✌ or You have any questions then contact me @Varougm where I'd be more than happy to answer you 💖 . I'm new to this. if you find any mistake please let me know ✌.

Buy me my first coffee 🥤here

PART 2 coming soon.

portfolio #inspiration #mustread #website

Learn React-router like a PRO 😎

gourav majee — Sun, 06 Jun 2021 07:22:18 +0000

Hey,👋 I'm Gourav

By the title, you might have guessed it right what things we will be discussing. what is react-router, SPA!.!

Well, the first question arises what is Single Page Application 💡?

When a user runs an application and click on links, the content of the page changes, but the page does not reload, i.e., the user stays on the same page for the entire time; such application is called a Single Page Application or SPA's.

*A simple illustration is given below ⬇ *

So, what does that mean, and why it's beneficial?🤔

The main benefit is Performance .
It works inside the browser and does not require page reloading during use.
You use many SPA applications like Facebook, Twitter even some parts of the application in which you are reading this Dev/Hashnode.

React-Router -

React-Router matches the URL and loads up the component for that particular page.

to learn more about router click here

Lets start building

so we will be making a simple SPA like this .the codes are self-explanatory and simple.

Setup the project

( step- 1 )
Open the terminal in your code editor and install react & also install router dom package.

npx create-react-app gourav-spa
npm install react-router-dom

navigate to our directory

cd gourav-spa

( step- 2)

Next, we import the essential components from react-router-dom. We do this in the App.js file

import { BrowserRouter as Router,NavLink, Route } from "react-router-dom";

( step- 3 )

So now let's get into our App.js and start building our skeleton.

The way React Router works is by defining the region, in which there will have two things:

our navigation links

container to load our content into

import { BrowserRouter as Router,NavLink, Route } from "react-router-dom";
import './App.css';

function App() {
  return (
    <Router>
      <div>
        <h1>Hey there everyone, I'm gourav 👋 </h1>
        <ul className="header">
          <li><NavLink to="/">Home</NavLink></li>
          <li><NavLink to="/Fav">Fav</NavLink></li>
          <li><NavLink to="/About">About</NavLink></li>
        </ul>
    </Router>
  );
}
export default App;

( step- 4)

Before making routes let's make our home, fav, about pages first, and then we will connect them afterward.

I'm assuming we know the basics of react and familiar with ESconcepts. let's make our navigation pages.

Creating Home.js

import React from "react";

const Home = () => {
  return (
      <div>
        <h2>This is home page</h2>
        <h3>
          there is nothing much to say. 
          this is a simple home page
        </h3>
        <p>i hope this helps you out in learning this topic.</p>
      </div>
  );
};
export default Home;

Creating Fav.js

import React from "react";import React from "react";

const Fav = () => {
  return (
      <div>
        <h2>My fav things</h2>
        <p>there are so many things .here are some of them</p>
        <ol>
          <li>eating fruits 🥭🍇🍉</li>
          <li>memes 🔥</li>
          <li>tweeting ✨</li>
          <li>multiplayer games 🎮</li>
          <li>etc..</li>
        </ol>
      </div>
  );
};
export default Fav;

Creating About.js

import React from "react";
let gouravpic ="https://pbs.twimg.com/profile_images/1393097871960854530/JEo6JhS1_400x400.jpg",
twitter= "https://twitter.com/Varougm",
github =" https://github.com/varuogm/";

const About = () => {
  return (
      <div className="both">
         <h2>About</h2><br/>
         <div>
            <img className="image" src={gouravpic} alt="img" />
         </div>
        <div className="data">
            <h3>Name - Gourav Majee</h3>
            <h3>Student , CS ungrad</h3>
            <h3>Developer </h3>
            <h3>twitter :<a href={twitter}>here 🐦</a>  </h3>
            <h3>Github :<a href={github}>here </a> </h3>
        </div>
      </div>
  );
};
export default About;

lets add some css to make it pretty🎀

body {
  background-color: #4b93cd6b;
  padding: 20px;
  margin: 0;
}
h1, h2, p, ul, li {
  font-family: sans-serif;
}
ul.header li {
  display: inline;
  list-style-type: none;
  margin: 0;
}
ul.header {
  background-color: rgb(0, 0, 0);
  padding: 0;
}
ul.header li a {
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
  padding: 20px;
  display: inline-block;
}
.content {
  background-color: #FFF;
  padding: 20px;
}
.content h2 {
  padding: 0;
  margin: 0;
}
.content li {
  margin-bottom: 10px;
}
.image{
  float:left; width:250px; height:250px; margin-right:55px;
}

Now it would look like this.great job

But gourav.. it's still not navigating us to our desired path

yes because we haven't set up the Route paths yet.

// add this in your app.js file under your nav links div
 <div className="content">
        <Route exact path="/" component={Home} />
        <Route exact path="/fav" component={Fav} />
        <Route exact path="/about" component={About} />
</div>

the Route component contains a path prop. The value you specify for the path determines when this route is going to be active. When any route is active,the component specified by the component prop gets rendered.

we have used exact path so that it returns the route if the path is an EXACT match.

So our SPA is ready. let's see how does it look like.

Its not the end. Add your personal things /items /colors and play with the code .

Conclusion

🎉That brings us to the end of this demonstration of how we can build single page application with react-router 🎉Congrats.

I think you'll agree that it was a reasonably easy thing to set up. The next step might be to play around with the router, switches to have a grip on those.

Buy me my first coffee here

Thank you for reading. ;)

Thanks DEV for giving me place to post my article.💖

Forem: gourav majee

7 Awesome Portfolio websites

Hello, 👋I'm Gourav,

So, here are 7 web developer portfolios 🤩 that I found while making my portfolio website, and also they will give you all the inspiration you need to create your own first portfolio👌.

1. Josh W Comeau

2. ART

3. COW

4. HACK

5. FLOWER

6. PIXEL

7. POP SHAKE

💯(everyone like a little extra)💯😄

8. SWAG

9. My first portfolio :

Conclusion 🎀

portfolio #inspiration #mustread #website

Learn React-router like a PRO 😎

Well, the first question arises what is Single Page Application 💡?

So, what does that mean, and why it's beneficial?🤔

React-Router -

Lets start building

Setup the project

Creating Home.js

Creating Fav.js

Creating About.js

lets add some css to make it pretty🎀

But gourav.. it's still not navigating us to our desired path

So our SPA is ready. let's see how does it look like.

Conclusion

🎉That brings us to the end of this demonstration of how we can build single page application with react-router 🎉Congrats.

Thank you for reading. ;)