In today’s digital world, showcasing your skills and projects through a personal portfolio website is more important than ever. In this guide, we will walk you through the process of building a stunning portfolio website using GatsbyJS for the frontend and ExpressJS for the backend. This combination allows for a powerful, efficient, and modern web experience.

Features of the Project

• Built with React 16.x and the Gatsby framework
• PWA (Progressive Web App) compatibility for both desktop and mobile
• Utilizes functional components with Recompose React Hooks
• Frontend design crafted by [@smakosh](https://github.com/smakosh)
• Illustrations provided by Undraw.co
• Express framework for backend
• Seamless integration of Socket.IO for real-time notifications and online user counters
• A simple authentication system powered by PassportJS
• Contact form secured with Google reCAPTCHA

Prerequisites

• Latest version of Node.js
• GatsbyJS installed on your system

How to Install the Portfolio Project

Now that we’ve covered the features and prerequisites, let’s get started with the installation process:

1. Clone the repository: The easiest way to get started is to clone the repository from the source.
2. Configure the project: Navigate to the root folder and change the config.js file.
3. Create a configuration file for the server: In the server folder, create a new file named config.js and adjust the following content:

const PORT = 3005;
const EMAIL = "your@email.com";
const EMAIL_PASSWORD = "your-mail-password";
const SESSION_SECRET = "Zsjfkrkwujskcfjskwm";
const isHTTPS = true;
const privateKey_path = "PATH_TO_THIS_FILE/privkey.pem";
const certificate_path = "PATH_TO_THIS_FILE/cert.pem";
const ca_path = "PATH_TO_THIS_FILE/chain.pem";
module.exports = { EMAIL, EMAIL_PASSWORD, PORT, SESSION_SECRET, isHTTPS, privateKey_path, certificate_path, ca_path };

4. Install dependencies: Run npm install in both the root and server folders.
5. Start the server: In the server folder, run node server.js.
6. Run the Gatsby application: From the root folder, execute gatsby develop to launch your app.

Code Analogy

Think of configuring your portfolio website like setting up a modular home. Each section represents a different part of your portfolio:

• The roof is your ExpressJS server—it protects and hosts all your vital components.
• The walls are the GatsbyJS frontend—they hold everything together, showcasing your work to the world.
• Windows symbolize your framework dependencies—you customize them with specific features, like illustrations from Undraw.co and designs by Smakosh.
• Last but not least, doors represent your configurations for email and authentication, allowing secure access to your digital home.

Troubleshooting

If you encounter issues during installation or setup, here are some troubleshooting ideas:

• Ensure that Node.js and GatsbyJS are up to date with their respective latest versions.
• Double-check your file paths in the config.js for SSL settings to ensure they point to the correct files.
• Review your terminal for error messages; they usually provide hints on what went wrong.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

Building your personal portfolio website using GatsbyJS and ExpressJS allows for a feature-rich and responsive site that highlights your skills. With careful configuration and a bit of creativity, you’ll have a stunning showcase of your work.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.