added a seperator

src/portfolioapp.cpp

@@ -5,16 +5,15 @@
 #include <string>
 #include <vector>
 #include "portfolioapp.hpp"
+
 using namespace ftxui;
 
-
-
 // ------------------
 // Pages
 // ------------------
 
 Component MakeAboutPage() {
-  std::string content =
+  const std::string content =
       "Hi, I'm Krishna — cybersecurity and AI researcher.\n"
       "🔹 Rustacean | 🔹 CTF Red Teamer | 🔹 OSS Contributor\n\n"
       "Focus areas: Secure systems, ML accuracy, and privacy.";
@@ -25,7 +24,7 @@ Component MakeAboutPage() {
 }
 
 Component MakeProjectsPage() {
-  std::vector<Project> projects = {
+  const std::vector<Project> projects = {
     {"🔐 VaultX — Stego-auth password vault", "https://github.com/krishna/vaultx"},
     {"🌐 P2PChat — Gossip-based secure chat", "https://github.com/krishna/p2pchat"},
     {"📊 Tenderlabs — Options research tool", ""},
@@ -56,7 +55,7 @@ Component MakeProjectsPage() {
 }
 
 Component MakeEducationPage() {
-  std::vector<std::string> entries = {
+  const std::vector<std::string> entries = {
     "🏫 STEM Endorsed High School\nGPA: 4.52 | 2021–2025",
     "🎓 Self-study: MIT OCW (Linear Algebra, ML)",
     "🔍 NSA Codebreaker, Lockheed Red Team"
@@ -77,7 +76,7 @@ Component MakeEducationPage() {
 }
 
 Component MakeWorkPage() {
-  std::vector<std::string> jobs = {
+  const std::vector<std::string> jobs = {
     "🔧 Founder @ Tenderlabs\nQuant research & trading infrastructure",
     "💻 IT Army of Ukraine\nCyberdefense and red-teaming (2023–24)",
     "🏢 Lockheed Martin Competitions\n2nd in 2025, 4th in 2024"
@@ -98,7 +97,7 @@ Component MakeWorkPage() {
 }
 
 Component MakeContactPage() {
-  std::string contact_info =
+  const std::string contact_info =
       "📫 Email: krishna@domain.com\n"
       "💻 GitHub: github.com/krishna\n"
       "🔗 LinkedIn: linkedin.com/in/krishna\n"
@@ -131,14 +130,19 @@ PortfolioApp::PortfolioApp() {
         Button("Projects", [&] { SwitchPage(1); }),
         Button("Education", [&] { SwitchPage(2); }),
         Button("Work", [&] { SwitchPage(3); }),
-        Button("Contact", [&] { SwitchPage(4); }),
+        Button("Contact", [&] { SwitchPage(4); })
     });
 
     // Initial layout
-    Add(Container::Horizontal({
+    // Wrap separator element inside a Component
-        navigation_,
+Component separator_component = Renderer([] { return separator(); });
-        pages_[current_page_]
+
-    }));
+Add(Container::Horizontal(Components{
+    navigation_,
+    separator_component,
+    pages_[current_page_]
+}));
+
 }
 
 // SwitchPage method implementation
@@ -147,29 +151,35 @@ void PortfolioApp::SwitchPage(int index) {
 
     // Clear and rebuild layout
     DetachAllChildren();
-    Add(Container::Horizontal({
+    
+    Component separator_component = Renderer([] { return separator(); });
+
+    Add(Container::Horizontal(Components{
         navigation_,
+        separator_component,
         pages_[current_page_]
     }));
 }
 
 // Render method implementation
-ftxui::Element PortfolioApp::Render() {
+Element PortfolioApp::Render() {
     return hbox({
         navigation_->Render() | border,
+        separator(),
         pages_[current_page_]->Render() | border | flex
     });
 }
 
 // OnEvent method implementation
-bool PortfolioApp::OnEvent(ftxui::Event event) {
+bool PortfolioApp::OnEvent(Event event) {
-    if (event == ftxui::Event::ArrowRight) {
+    if (event == Event::ArrowRight) {
         SwitchPage((current_page_ + 1) % pages_.size());
         return true;
     }
-    if (event == ftxui::Event::ArrowLeft) {
+    if (event == Event::ArrowLeft) {
         SwitchPage((current_page_ - 1 + pages_.size()) % pages_.size());
         return true;
     }
-    return ftxui::ComponentBase::OnEvent(event);
+    return ComponentBase::OnEvent(event);
 }
+