Digital Portfolio Website: A Journey of Learning and Creation

Table of Contents

1. Introduction
2. Technologies Used
3. Prerequisites
4. Installation
5. Website Structure
6. Usage
7. Lessons Learned
8. Future Improvements
9. Contributing
10. License

Introduction

Hi there, I’m Tommy De Leon, a web developer and a lifelong learner. This is my digital portfolio website, where I showcase my skills and projects that I have worked on. I built this website using the Next.js framework and styled it with Tailwind CSS. The website is still a work in progress, but I’m happy to share it with you and get your feedback. You can also connect with me through my social media accounts, which you can find in the introduction section of the website.

Technologies Used

This project was created with:

• React: A JavaScript library for building user interfaces.
• Next.js: A React framework for production-ready websites.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.

Website Structure

Here's an overview of the files and directories in the website:

• page.tsx: The main landing page of the portfolio, which contains an introduction, a skills section, and a projects section.
• ./skills: A page dedicated to showcasing my skills in various domains and technologies.
• /.projects: A page for each of my projects, which contains a description, a demo, and a source code link.
• layouts.tsx: A component that contains the layout for the entire website, which includes a header, a footer, and a main content area.
• globals.css: A file that contains all the global styling for the website, such as fonts, colors, and breakpoints.

Usage

To use this website, you can do the following:

• To learn more about me and my skills, scroll down the landing page or click on the Skills link in the header.
• To view my projects, scroll down the landing page or click on the Projects link in the header. You can also click on each project card to see more details.
• To connect with me, click on the social media icons in the introduction section or in the footer. You can also send me an email by clicking on the envelope icon in the footer.

Lessons Learned

Throughout the development of this portfolio, I learned a lot of things, such as:

• How to use Next.js for building a dynamic website that supports server-side rendering, static site generation, and API routes.
• How to use Tailwind CSS for styling the website with utility classes and customizing the theme with configuration files.
• How to structure the project for easy navigation and future scalability, by following the conventions and best practices of Next.js and React.
• How to deploy the website to Vercel, a platform that integrates seamlessly with Next.js and provides features such as preview deployments, automatic HTTPS, and serverless functions.

Future Improvements

In the future, I plan to improve this website by adding more features and functionalities, such as:

• Adding more interactive elements to the website, such as animations, transitions, and hover effects, to make it more engaging and appealing.
• Adding a blog section to the website, where I can share my thoughts and experiences on various topics related to web development and learning.
• Adding a contact form to the website, where visitors can send me messages directly without leaving the website.
• Adding more projects to the website, especially ones that involve different technologies and frameworks that I want to learn and explore.

Contributing

Contributions are welcome! If you're interested in contributing, please follow the guidelines which will be provided soon.