From Concept to Creation: How I Built My Data Science Portfolio Website
Hello there! This year, I made a firm decision to step up my game in the world of data science. I wanted to be more deliberate about honing my skills and most importantly, showcasing what I’m capable of. The ultimate goal was to create a portfolio that would reflect not just my expertise but also my personal journey and my profound love for data. In this article, I’m excited to walk you through the captivating journey of building my very own data science portfolio website.
The initial question was, how should I go about creating this portfolio website? I began by experimenting with various website templates from platforms like HTML5 UP, where I would customize elements to add a touch of personalization. While they yielded decent results, they didn’t fully capture the essence of what I wanted to convey. They felt somewhat restrictive on how I could express my person and my body of work. That’s when I made a daring yet thrilling decision — to code my website from scratch.
I’m no web dev guru, but I’ve dabbled in HTML and CSS in the past, primarily to enhance the visual appeal of data-related projects. For instance, I used CSS and markdown formatting to improve the user interface of the Stock Price Forecast Web App I developed using the Streamlit framework in Python. However, building an entire portfolio website from scratch was a different beast altogether.
Nevertheless, I’ve always relished a good challenge and thrive on exploring my limits. What did I have to lose after all? I already had something functional to fall back on from the HTML5 UP template, so this was more like a ‘not much at stake’ kind of leap.
So, I went off on this journey. My first stop was YouTube, my go-to platform when I need to learn something new. But before diving into website building demonstrations, I needed a grasp of the fundamentals of web development. I delved into the inner workings of the index.html file, learned the mechanics of CSS styling and layout, and even came to terms with JavaScript, which I initially wanted to avoid but realized was essential for adding interactivity to the website.
But that wasn’t all. I also had to consider responsive design, ensuring that my website would look great on any device. So, with newfound knowledge and ideas in hand, I was ready to dive in.
Now, here’s where it gets interesting. I couldn’t find a tutorial that covered everything I envisioned for my website. Most YouTube demos were geared toward front-end web and creative design portfolios, not data portfolios like mine. But that didn’t deter me. I carefully selected a few videos that had elements resembling what I wanted in mine and used them as guides.
With determination and a bit of trial and error, I began adding lines of code, section by section, until it all came together. Sure, there were challenges along the way, but I wasn’t alone. Whenever I hit a roadblock, I sought help from friends and online communities. It was a remarkable learning experience, a journey filled with creativity, problem-solving and moments of sheer satisfaction when things fell into place.
Introducing My Creation
Now, let me introduce you to my creation. My portfolio website boasts a clean and minimalist design that adapts to screens of all sizes. The header features my logo on the left, providing a touch of personal branding, and navigation links on the right, ensuring seamless scrolling to different sections.
PS: The logo is just something I had fun with while experimenting with designs in the past. It’s nothing crazy, just basically spells out my initials ‘lza’. I guess we’ll be rocking with the lza emblem for now until a need for something bigger and better in the future.
I’ve incorporated both desktop and mobile navigation options. For smaller screens, you’ll find a hamburger menu that reveals the navigation links when clicked. On larger screens, a traditional menu bar takes center stage, offering links to various sections of the website.
Speaking of sections, let me walk you through the ones I included in my website:
Profile Section
This is where you get a glimpse of who I am and what I do. You’ll find a welcoming image and a concise introduction to yours truly, along with a handy button for quick access to my contact info.
About Section
Here, I dive deeper into my journey into data science and machine learning, sharing my passion for problem-solving and my belief in the transformative power of data.
Proficiencies Section
In this section, I showcase my skills with compelling icons and concise descriptions, highlighting my expertise in data analysis, machine learning, data visualization, technical writing and web development.
Projects Section
It’s all about my hands-on experience here. You’ll find a selection of projects with brief descriptions, images and links to GitHub repositories, Medium stories, or live versions where you can explore them in detail.
Other Platforms Section
Here, I invite you to explore my presence on other platforms like GitHub, Medium and Tableau. Links are provided for you to dive into my work and insights across different platforms.
Contact Section
Need to get in touch? This section provides all the essentials, from my email address to my LinkedIn profile, and details on my location, remote work availability and a contact form.
Footer
At the bottom of the page, you’ll spot a copyright notice — a digital signature that protects the content and design of the website.
Styling with CSS
I used CSS to give my portfolio a polished and visually appealing look. Here are some key CSS rules I applied:
- A responsive design approach to ensure my website looks good on screens of all sizes. Media queries were used in adapting the layout and styling for each screen size.
- Stylish navigation bars, beautiful fonts, carefully chosen colors and spacing to create a harmonious design.
- Interactive hover effects on elements like navigation links and project thumbnails to engage users.
Adding Interactivity with JavaScript
JavaScript was crucial in adding interactivity to the website. One standout feature is the mobile-friendly hamburger menu. JavaScript made it possible to toggle the menu smoothly, ensuring an excellent user experience.
Hosting and Deployment
To share my portfolio with the world, I chose to host and deploy it on GitHub. GitHub Pages offered a free and straightforward hosting solution. I created a dedicated repository for my portfolio website, uploaded all the necessary files and configured the settings for GitHub Pages. This deployment process gave my portfolio a global presence, providing a professional platform to showcase my skills and projects to potential employers and collaborators.
My journey from conceptualization to the launch of my data science portfolio website was a challenging yet immensely rewarding experience. It not only allowed me to present my skills and projects effectively but also pushed me to explore the depths of web development, ultimately expanding my skill set.
With all said, I warmly invite you to explore my portfolio website, delve into the curated projects and join me on my data journey at lanre-akinbo.github.io/portfolio/.
