Tomas Stveracek

Posted on Oct 23

🚀 Creating a Developer's Portfolio Inspired by VS Code

#javascript #react #webdev #portfolio

Hey there, fellow developers! 👋 Today, I want to share with you my journey in building a personal portfolio that feels like home for any coder—because it’s designed like Visual Studio Code! If you love the look and feel of VS Code, you’ll enjoy exploring this project. 💻

🛠️ What’s Inside:

A modern portfolio with a familiar look
Built with React and a simple Express server 🧑‍💻
Handling API requests to display dynamic content 🔄
Deployed with Netlify and serverless functions ☁️

1. 💡 Why a VS Code-Inspired Portfolio?

I wanted to create a portfolio that would not only show my skills and projects but would also be unique and fun to explore. Since I spend so much time coding in Visual Studio Code, I thought—why not make my portfolio look like it? This project combines the technical skills of a developer with a design that every coder can relate to.

Key Features:

🖥️ VS Code Feel: A sidebar, tabs, and a title bar that make it feel like a real coding environment.
🌗 Dark/Light Theme: Switch between themes based on your preference.
📝 Live Data: Fetches my latest articles from dev.to and displays projects using custom APIs.
🔐 Serverless Functions: Securely handles API requests without exposing my API keys.
📱 Responsive Design: While it works on mobile, it’s best experienced on a desktop.

2. ⚙️ How I Built It

To get started, you’ll need Node.js and a Dev.to API key if you want to display your own articles.

Step-by-Step:

📥 Clone the Project:

git clone https://github.com/tomasdevs/portfolio-vscode.git
cd portfolio-vscode

📦 Install the Packages: Install everything you need for both the main app and the API:

npm install
cd api
npm install

🔑 Set Up Environment Variables: Add your Dev.to API key in the .env file:

VITE_DEV_TO_API_KEY=your_api_key_here

🚀 Start the App: Run the server for API requests and start the Vite development server:

cd api
node server.js
npm run dev

🌐 View it on Your Browser:

Go to http://localhost:5173 to see the portfolio in action!

3. 🔄 Handling API Requests and Data

One of the tricky parts was securely fetching data from my Dev.to profile without exposing the API key. I used Express and a serverless function on Netlify to create a simple backend for handling requests:

const response = await fetch("https://dev.to/api/articles/me/published", {
  headers: {
    "api-key": process.env.VITE_DEV_TO_API_KEY,
  },
});

This way, I can safely display my latest articles on the live site without worrying about security.

4. 📚 What I Learned Along the Way

🔒 Learning to Think About Security: Making sure my API keys are secure was a big part of this project. I learned how to use environment variables, Express, and serverless functions to protect sensitive data.

🎨 Designing for Developers: It was a fun challenge to make a portfolio that is both functional and appealing to other developers. It’s not every day you see a portfolio that looks like an IDE!

💡 Deploying with Netlify: Netlify made it easy to deploy my project with built-in serverless functions. It was my first time using this feature, and I was impressed by how smoothly it worked.

5. 🌍 Check It Out!

I’m excited to share this project with you all, and I hope it inspires other developers to think outside the box when creating their own portfolios. If you love coding and want a portfolio that feels like coding, give it a try! 🚀

Live Portfolio Demo

DEV Community