Web Portfolio - My Front-end Web Development Portfolio

Demo:

View the site here

Table of contents

• About the app
• Technologies
• Setup
• Approach
• Status
• Credits

About the app:

I needed a portfolio to display my current web development work and wanted to take on more challenges as a Front-End web developer. I wanted to build a multi-page website, design my UI/UX, create all the artwork, use new technologies like Next.js and particles, create interesting animations and effects, and have fully functioning features like sending emails through a contact form. This is a big step up for me but I have been studying a lot and I learn best by challenging myself through projects.

The skills I learned after completing this project:

• React functional components and their reusability
• Next.js fundamentals
• Next.js file and folder structure
• Next.js routing
• Fundamental CSS properties to improve my flex & grid skills
• Practice styling with Tailwindcss
• Animations and gradients
• Advanced Animations with Framer-motion
• Practice with Media queries for satisfactory responsiveness covering almost all devices
• Particles with tsparticles
• React-email and nodemailer
• Sentry for error reporting

Technologies:

This is a Next.js project bootstrapped with create-next-app.

• Particle effects with tsParticles
• Styling with tailwindcss
• Advanced animations with framer-motion
• Emails with nodemailer and react email
• Error reporting with sentry

Setup:

Clone the project and enter its root directory.

Install Node.js -> Instructions

npm i

Installs all of the project's dependencies.

Next, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Approach:

Because I wasn't working from a Figma design I needed to compile enough inspiration through sketches and images from the web to know what to build. Next, I created a basic Next.js app and set up the routing and file structure. After that, I added some basic styles to my CSS file that I knew I would be resuing. I built each section in the order they appear on the website, tweaking their responsiveness as I went and creating artwork in Photoshop as needed. The design was more loose so I made a lot of design changes as I went. There was also a lot of experimenting with different technologies to get the result I wanted. This was true for setting up the animations and email. This involved a lot of reading the documentation and trying things out. Lastly, I set up Sentry and deployed the site to Vercel's servers.

Status:

This project is finished but will continue to be developed and updated.

Credits:

N/A