My portfolio website is live!
Tags: react, webdev, beginners, portfolio
Published: 2023-07-14 12:53:31

I'm excited to share some fantastic news. After months of hard work, I am thrilled to announce that my portfolio website is now live! I built this website from scratch, learning a ton of valuable skills along the way. It's been an incredible journey, and I can't wait to showcase my projects, skills, and experiences through this platform. In this post, I'll provide an overview of my portfolio website, its key features, and how you can explore it.

## 1. Website Overview:

My portfolio website, which you can find at [david-clarke.com](https://www.david-clarke.com), is a culmination of my efforts to create a professional and engaging space where I can present my work to potential employers, clients, and fellow developers. It's designed to reflect my personality, showcase my projects effectively, and provide essential information about my experience.

#### Languages & Technology:

JavaScript, HTML, CSS, React, PHP, Wit.ai, Brevo

## 2. Features and Highlights:

#### Custom Chatbot: 
An exciting addition to my website is the chatbot I built from scratch using the Wit.ai API. It can answer queries related to me, my experience, and my projects. Although I feel it is currently quite good at understanding questions about me there is always room for further training. Please note that the chatbot is currently available only on desktop devices. The chatbot uses UseEffect to store messages in the browser's local storage to save the dialogue.

![ChatBot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5c3qx0zg3lnddg24lv8i.PNG)


#### Contact Form: 
I've incorporated a contact form that enables visitors to get in touch with me directly. By utilizing the Brevo API and PHP, the form securely sends email notifications to my personal address, ensuring smooth communication.

![Contact Form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79kacx5i0w8rvlfle3xl.PNG)


#### Mobile Responsiveness: 
One of the core features of my portfolio website is its mobile responsiveness. The design has been meticulously crafted to ensure a seamless user experience across various screen sizes, be it desktop or mobile devices.


#### Navigation Bar: 
You'll find a consistent and intuitive navigation bar throughout the website. It provides easy access to different sections, including the homepage, projects, contact form, GitHub profile, resume, and LinkedIn profile.


#### Project Write-ups: 
Using React Router, I've created dedicated pages for each project, allowing visitors to explore detailed information about my work. These write-ups provide insights into the project's objectives, technologies used, and key takeaways.

![Write-ups](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eogotoik548w25xihgqp.PNG)


#### Skills Section: 
To showcase my proficiency, I've included a dedicated skills section. Each skill is interactive, and clicking on it triggers a React modal with detailed information about the skill, its applications, and my experience with it.

![Skills](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46inbuscyb8echvcts4a.PNG)


#### Scroll Functionality: 
A scroll prompt has been implemented to guide users through the landing page. Clicking on it will scroll to the project section on desktop and the about section on mobile. Once the user scrolls down, the prompt transforms into a "scroll to top" button, enabling easy navigation to the top of the page.


#### 404 Page: 
In the event of a non-existing page, I've added a customized 404 page to ensure a smooth user experience and navigation.

![404](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2h5wgaeqfj4jq5prnw5c.PNG)


#### Styling and Animations:
The website's visual appeal has been enhanced through custom CSS styling and animations. These elements create an immersive and engaging user interface that reflects my design sensibilities.


## Conclusion:
I'm thrilled to present my portfolio website to the Dev.to community. I invite you to visit david-clarke.com to explore my projects, learn more about my skills, and connect with me. Your feedback and support are greatly appreciated. 

#### David