We will start by creating a folder called pages, which Next.js recognises as a route, and then creating our index page inside that folder; that will be our homepage. Change darkMode option to class in tailwind.config.js file to toggle dark mode manually instead of relying on the operating system preference. (now I like it more than Adobe XD). To do that, let's create a components folder, enter it, and create the three main components we will be using: Back to index.js, let's render our WorkFeed component and give it the data from Contentful: Inside WorkFeed, we will loop our data and render a WorkItem for every case-study we have: Now inside the WorkItem, we move on to render all of our data. Create a Modern Ecommerce Project with React, NodeJS, Express.js, https://github.com/WenLonG12345/teo-nextjs-portfolio. Over or undergoing it may leave the users with unpleasant experiences. Create a components folder in the root directory to add your portfolio components. Join our webinars, meetups, conferences and partner events! Changes committed and pushed to master should reflect in a few minutes on your site. The theme object has two properties - light, and dark, for light mode and dark mode respectively. Lets head over to Contentful to set up a webhook which will post to the URL we just generated from Netlify: Hit save on that, and we now have our webhook setup to push to Netlify. A skilled, competent, and diligent individual, specializing in the modern web development (React js - Redux) and Machine Learning algorithms. When a potential client, HR, hiring manager visits your portfolio site, they should get a feel of your strengths and what you are capable of. Let's open up that previous build of the site. The challenges I faced was screen size responsive. Alright, now that we have what we want on the project side, lets get the site deployed to Netlify. Add the following environment variable with key: Production builds can also be tested using. Usually, you may want to make two types of updates: the look-and-feel update and the content update. That's all for now. When you use it right, the food tastes perfect. Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin. Updated on Jan 5 Here is the mind map of the content sources for my portfolio site. This can be modified or removed entirely. The thread below captures some great discussions about it. When I started the initial design, I had plenty of choices in front of me.
For my website, I am using the Manrope font, an open-source modern sans-serif font designed by Mikhail Sharanda in 2018-2019. The name appears at the bottom of the page as: Original names of the brand may also be provided. Deployment with Vercel automatically sets up your repository for continuous deployment. The next thing is about organizing the content. With you every step of your journey. Discover new insights from the Contentful developer community each month. https://twitter.com/tapasadhikary/status/1433763765577662465, In this article, I'm going to take you through my. The Contentful blog helps builders and digital leaders create better digital experiences. Once unpublished, this post will become invisible to the public I completely forgot how to create responsive designs and how to use CSS on the web. I have provided searches, lazyload of content on scroll to limit the content overwhelming to users. Sign up for your free Contentful account in minutes. This has a title and then just a Work field which has a 'many reference' attribute. To add a Footer with social links, Create a Footer.js file in the components folder and add the below code: Add the Footer.js component to _app.js file as below. Once unpublished, all posts by nilanth will become hidden and only accessible to themselves. Support Tapas Adhikary by becoming a sponsor. See you tomorrow on another fresh blog post as I am gonna write quite a lot this year , p.s I recently started a podcast called The Anxious Developer where I share my knowledge on how to reduce your stress, become more present and productive as a Developer. Frontend Developer @ The Reference
By the end of this you should have a good understanding of how I got to this website: With an empty space, we are going to start to add our content types: The main focus on this site is the work items, so well go ahead and add a new content type called Work. Once the installation is completed navigate to your project folder using cd your-portfolio-name and start the dev server using yarn dev command. Any website is NOT a one-time affair. We can create a new project, via the command line, and then move things into it. It means you need to project your face, attitude, work, passion, aspirations, all that someone will find interesting. After a few hours of googling and StackOverflow, I managed to find the solution. Include your profile image from the public folder as above. But mobile apps seems a bit burden as not everyone willing to download and install the apps into their phone just to understand your work right? But, after spending 4 hours figuring out the best class names for my elements, I figured out that I would be much more productive in my beautiful VS Code workflow. 
and only accessible to Nilanth. These stats are subject to change and may increase or decrease depending on the tester's environment and/or changes to source code. People usually just want a click to reach their destination. So you need to select a font that looks clean and easy to eyes. I hope you have found this useful. Adding dark mode is very simple. You can follow me on Twitter(@tapasadhikary), LinkedIn(tapasadhikary), and GitHub(atapas). Math Magicians is a website for performing basic maths calculations, This website is built using REACT and JavaScript libraries. After more than 2 months working in React Native, I was roughly understand how React works. My experience was amazing with all these beautiful UI and animation. .css-y5tg4h{width:1.25rem;height:1.25rem;margin-right:0.5rem;opacity:0.75;fill:currentColor;}.css-r1dmb{width:1.25rem;height:1.25rem;margin-right:0.5rem;opacity:0.75;fill:currentColor;}4 min read, Subscribe to my newsletter and never miss my upcoming articles, As mentioned in my previous article 4-year startup failed, going freelance, I want to start my freelance business. If we look back at the previous build of the site, we can check what fields we need for our content type: Now go ahead and add those into Contentful: Now that we have our content model setup, we can go through, create and fill out all of the work posts in the content area: One more thing to note, I have actually created a custom content model for the Homepage. A portfolio is a place where you can showcase all your skills to the world. The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js. One thing I spent quite some time on was this part: I couldn't figure out how to rotate the text on the right of the image and at the same time keep the wrapper aware of it (because of the transform of the text) for responsive purposes later on. Ive already version-controlled this site and connected my Bitbucket account to Netlify, which has gone and found the repo for me: Now I can input my build command and publish directory, and hit deploy to get this site live. Create a new folder from the root of the project for the JSON file to be written towe will call that data: The last step here before we can run our postinstall scriptwould beinstalling the depedencies: Excellent, we have data from Contentful, written to JSON locally: Now, we will display this data using a few React Components. An open-source portfolio template built with React and Tailwind. MyApp component is used to initialize pages. Building the actual website wasn't too hard. To learn more about Next.js, take a look at the following resources: You can check out the Next.js GitHub repository - your feedback and contributions are welcome! Webpack And Babel Setup With React From Scratch, How I built my portfolio using Next.js, TailwindCSS, TypeScript and Framer Motion, Create Revealing Text Animation with React & GSAP. (let me know in the comments if you have any suggestions, it will be much appreciated! Breakpoints, typography, animations, etc.
This component could actually be broken up into smaller chunks, but as with all personal projects, sometimes you dont have time to make something perfect: Ive left out some of the styling here for presentation purposes. Themes - Dark & light themes are the default choices for the theme design. The pages/api directory is mapped to /api/*. At first, I thought that I could just build it with Create React App, but then I remembered there is something like Next.js and Gatsby that are pretty hyped lately. , Because I enjoy the design process and I don't suck at it too much, I decided to do it myself , For most of the design work, I used to use Adobe XD, but for this project, I wanted to try Figma as it seems like it's becoming very popular among designers. I have been exploring Next.js and tailwindcss for a while now. Most of th, Portfolio Incio Essas instrues fornecero uma cpia do projeto instalado e fu, React Portfolio Using Tailwind UI This project include a portfolio template which is built using React and Tailwind CSS. You can see the below page if you hit http://localhost:3000 in the browser. This is an example demo to combine the. However, if you are a frequent content creator, you may have to update the website frequently. Made online by you. As a developer, you really need a portfolio to showcase your projects, blogs, and much more. ). We'd like to ask you a few questions to help improve ThemeForest. Personal portfolio inspired by VS Code and Github, using React, Context API, html and CSS, This is a Next.js boilerplate using TailwindCSS and other cool stuff. .css-y5tg4h{width:1.25rem;height:1.25rem;margin-right:0.5rem;opacity:0.75;fill:currentColor;}.css-r1dmb{width:1.25rem;height:1.25rem;margin-right:0.5rem;opacity:0.75;fill:currentColor;}8 min read, Subscribe to my newsletter and never miss my upcoming articles. (I was right ). Responsiveness: A majority of the device usages goes to mobile and other hand-held devices. I hope you find it helpful. , Remember, you are worthy, you are loved and you matter! 2022 Envato Pty Ltd. Effortless design and video. It was not showing my capabilities enough. Powered by .css-1wbll7q{-webkit-text-decoration:underline;text-decoration:underline;}Hashnode - a blogging community for software developers. Let's discuss that in the next point where we talk about User Experience(UX). One low cost subscription. Steps to build a portfolio website using Next.js and Tailwind with Dark Mode Support. There was always an urge to do better with UX. A portfolio website provides your professional information to your potential clients, job hires, consumers. Create ThemeSwitch component to add a toggle switch to toggle between Dark Mode and Light Mode. We need to use a custom .babelrc file here to utilize the import / export tokens available to us in that getcontent.js file. The below image is the mind map of my work with myself at the center. At this point, I'd like to show you how to auto-deploy to Netlify whenever we have published or updated anything from inside Contentful. If nilanth is not suspended, they can still re-publish their posts from their dashboard. If you have any feedback, please feel free to let me know. We need to update our package.json file at this point so we are able to run our postinstall script. For further actions, you may consider blocking this person and/or reporting abuse. So, one evening when I sat with the pencil and paper, I could identify five key points to drive changes keeping my motivations high.
Thanks for your time in reading this. Next, we need to add the fields into the work content type. Originally published at betterprogramming.pub. Check out the Developer Showcase to see what's being built with Contentful. Built on Forem the open source software that powers DEV and other inclusive communities. Introducing a subtle introductory animation may set the right mood for your users. They must work together to rule. DEV Community 2016 - 2022. Expect them on your way as articles, videos, and threads. Templates let you quickly answer FAQs or store snippets for re-use. Of course, with Chakra UI, it is very easy to setup both light & dark mode by using useColorModeValue(). Have a great day! Default props in React and Loading page for your application. Typescript, Nestjs, Nextjs, Tailwind, Prisma, Github Actions, Docker, And Reverse proxy configured, Math Magicians Math Magicians is a website for performing basic maths calculations, This website is built using REACT and JavaScript libraries. . I work on many different solutions and eventually obtain the best value for each components. The image below shows the mind map of items that I can accommodate immediately(the green lines), and some are for the future(yellow dotted lines). We're a place where coders share, stay up-to-date and grow their careers. You can build a portfolio like mine after reading this article. It was a great thing to built to showcase all my skills and even good for presenting myself. DEV Community A constructive and inclusive social network for software developers. thomasledoux.be. Trademarks and brands are the property of their respective owners. Examples on how icon names are automatically corrected (not tested for all cases): Commit your changes and push to your repository, Create an account on Vercel and connect your Github account. Let's get into action. (joined the hype train ), Also, for styling, I decided to go yet with another Twitter feed pick. In the modern era, a good portfolio website may replace the olden day's resumes of job seekers. I tried balancing it by providing a list of my recent articles, videos on the home page with the links to get more. It is about identifying. I have a little script Im going to run which will request that from Contentful and then write it to disk. Color Palette: Select the primary brand color in various shades. I have a strong feeling that this technology stack(nextjs-vercel-tailwindcss) is going to stay for a long due to its wide adoption, community support, the ease of use. Im going to open up my code editor and drop in a package.json file with an empty object inside so when we run the next command, the dependencies will actually save to that new package.json file. Let's see them. I decided to pick Next.js as I don't see Gatsby so much in my Twitter feed lately. , Android Dev and Kotlin Lover, Currently learning React Native and planning to do more on Mobile Dev . Tech stack used in this web : - React, Tailwind. I have made extensive research before settling down with a color palette, font choice, and dark theme as a default theme. Credits to Jo Lienhoop! Rewinds Remix Tailwind Starter Kit Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries. Valid icon names can be obtained from simpleicons.org by hovering on the icons. Here are some resources I was inspired from: If the content is a king, the user experience(UX) is the queen. A simple portfolio site, built in Next.js, Tailwind CSS - using this great blogging starter template. Thanks to tech Twitter for pouring in lots of feedback to let me know I'm on the right track. The theme object contains the default colors applied by MUI as an example. Placeholder blur prop in image component is to add loading effects. We can configure tailwind with next.js with a single command. After the above changes, our portfolio looks like below: You can deploy your portfolio in Vercel within 2 steps as below: You can add multiple pages like projects, blogs by creating new files inside the pages folder. ???? Then, an idea came to my mind, why dont I build myself a personal portfolio? This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. Developers are powerful creators. Now your portfolio looks like below: Now let's add dark mode to our portfolio. Open http://localhost:3000 with your browser to see the result. Right, that's what is this article is about. Screen, Personal Website Template Personal Website UI Template using React-TypeScript Class components Personal website can be about anything you want, includ, nextjs-chakra-navigation-example I looked at how to implement navigation in next, I have Created This Beautiful UI Using React.js & Tailwind I'm not much good in ui designing that's why i'm doing practice if you want me recommend me. I already had a portfolio site. Hence, website is my 1st choice! Most of the time I spend in Tailwind documentation trying to remember class names. They can still re-publish the post if they are not suspended. We should have some data shown in the manner we would like it displayed: This export command will output our site into a directory called out, which will be important in the next step. A modern portfolio website UI made with react for a youtube tutorial. Looking good! Cancel any time. Connect your repository and click deploy. github.com, craig-roush-portfolio-template.webflow.io, rans-fancy-website.webflow.io, purrweb.com, First, I thought webflow.com will be a perfect fit as the website doesn't look too complicated. Lets give that a quick test: Thats a quick run-down of how to get a portfolio (static) site up and running, using the combination of Contentful, Next.js and Netlify to produce a great static site. Posted on Aug 27, 2021 Files in this directory are treated as API routes instead of React pages. I hope, it will be helpful for your personal website that showcases your work as a software developer. Here is the list of free API services I'm using. Made by Theodorus Clarence Features, Fullstack Turborepo starter. So you are not required to worry about your portfolio performance. It requires updates and changes to keep it relevant. Lets head back to the browser and hit refresh. Here are a few factors that need primary attention. To start using Contentful yourself, request a demo and go. Now import useTheme from next-theme to ThemeSwitch Component as below: Add ThemeSwitch Component to Navigation component and include next-themes ThemeProvider in _app.js as below: attribute=class is to enable dark and light mode manually. But why do we need to build a portfolio with Next.js? The page auto-updates as you edit the file. Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin. These stats were recorded on Google Chrome's incognito mode for Desktop. Post information from other publications I write for like, Show the side project information from my. An excellent outcome of building something is, you get plenty to share. I needed to add the height of the text element to the width of the parent like so: Where 1.25rem is the height of the text element :), At the time of writing this article, I haven't made my website fully responsive yet.
For that, I figured I need a nice-looking portfolio so clients can get their wallets ready once they scroll through it.
I'll share much technical knowledge I have gained by building the portfolio website in the coming days. can also be modified. As below: The above command automatically configures your Tailwind setup based on the official Next.js example. Smart templates ready for any skill level. Faster , Twitter Followers Tracker using Next.js, NextAuth and TailwindCSS, Redux Toolkit - The Standard Way to Write Redux, 5 Packages to Optimize and Speed Up Your React App During Development, How To Use Axios in an Optimized and Scalable Way With React, 15 Custom Hooks to Make your React Component Lightweight, How to Secure JWT in a Single-Page Application, Redux Auth Starter: A Zero Config CRA Template, Laravel Sanctum Authentication for React App usingBreeze, Twitter Followers Tracker using Next.js, NextAuth andTailwindCSS. Today web technologies provide(confuse) you with many options. Create a file called Navigation.js and add the below code: The navigation component is the header section of your portfolio. This is a Next.js project bootstrapped with create-next-app. Following that, a visit to the Next.js repo lets me find the next command to get moving: Im going to run that script to install the dependencies; that will also automatically save those dependencies to my package.json file. Did I tell you, I have redone my portfolio site from scratch? Lets head back to Netlify to create a new Build hook: Excellent, now we have a URL for running deployments from Netlify, which we can copy and place into Contentful. Some comments have been hidden by the post's author - find out more. But overall, I think it is a good practices for me as a developer and programmer to keep myself passionate on develop something for either myself or the community. "h-5 -mt-2 origin-bottom-left rotate-90 transform-gpu whitespace-nowrap ", craig-roush-portfolio-template.webflow.io, https://andrei-zgirvaci.hashnode.dev/blogging-almost-every-day-in-2021. Typescript for Strapi! Animations: Animations are like salt in your food. The reason Im doing it this way is to make everything as fast as possible by just reading JSON straight from disk; this also helps with caching later. We all know next.js is react framework with out-of-box performance. Despite the classification, theming is not limited to colors only. When I wanted to make my portfolio site fast and easy to maintain,I landed on the following solution to create a static site using Contentful as my content manager, Next.js to display the data, and Netlify for hosting. Above all, how do you promote yourself using your work. It also helps us to reconnect with what we have done in the past from a single place. Building a portfolio and keeping it updated helps in this case. The design was not so open to accommodate a new addition easily. Check out our Next.js deployment documentation for more details. A clean and customizable ReactJS portfolio template for fellow developers. It is an excellent approach as you do not have the burden of maintaining it manually. When your knowledge, creativity, and passion come together, you create something you are most proud of. Love podcasts or audiobooks? After you identify the areas to focus on, you need to think about the content and how best you can organize them. You signed in with another tab or window. Can you extend this tutorial to create the portfolio exactly like yours ? Also, if you have any other questions on how I implemented some parts of the website, don't be shy to ask. Thats it for configuration. Any amount is appreciated! Now that we have that, lets run the project locally and visit localhost:3000 in the browser: Great, now we need to get our Contentful data. As you see, Next.js can communicate to the APIs of each of the services to fetch/create data. In the above code, you can see dark: class to support dark mode. Available Scripts In the project directory, you can run: ya. See. Organization of content: How better you can organize the content so that users do not seek much to get to it. Lifes too short to ES5! Please like/share this post if you find it helpful. Font - When you build a content-oriented website, it will have many things to read. Let's connect. Website: https://teo-nextjs-portfolio.vercel.app/, Github: https://github.com/WenLonG12345/teo-nextjs-portfolio. I spent around 4 days trying to learn Next.js, Tailwind, the latest CSS additions like Grid, and how to make gradient texts like on github.com. Powered by .css-1wbll7q{-webkit-text-decoration:underline;text-decoration:underline;}Hashnode - a blogging community for software developers. It worked great but with a few limitations.