Complete a retrospective on the current state of my NextJS website, and brainstorm future features to implement.

I need to take some time discussing what I like about my current website design. What needs to be improved, what features can I add?

I'm going to jump right into my retrospective and brainstorming today. I'll try to include pictures and some extensive writing on my thought process.

So I need to start by talking about the design of my website. The website is NextJS (for better or for worse), and is tentatively named "IWantToBeAnAIEngineer.com". The goal of the website is pretty simple, it's a way to document my journey to get my dream job as an AI Engineer. Besides documentation of my daily progress blogs, technical project blogs, and documentation of my projects, it also is intended to have an interactive resume and other tools that I can help use to get myself hired. I want to document my journey mostly for myself to look back on my progress. However, I think I can be doing some interesting AI engineering work that may be interesting to some random people. And the entire website will also serve as a very active example of my AI engineering qualifications. So I intend my website to have 3 intended audiences: 1. Myself. 2. Friends and random people who might be interested in some of my AI Engineering work. 3. Recruiters and other people looking to hire AI Engineers.

The first intended audience is myself. The most important reason I build this site and do my daily progress blogs are for myself. I have wanted to build some kind of blog for a very long time now, in order to document my progress as a young AI Engineer so that I can look back in time and see just how far I've come. The Daily Blogs are the most important feature here for myself, as I can look back almost daily and see my progress. I want to experiment with automatic statistics graphing over time, so I can track my enthusiasm, burnout, and funnier things like leetcode hatred and desire to play steam games (it's always Europa Universalis IV).

The next intended audience is my friends and random people. In this regard my current website is very lacking. It may be interesting for a random person to see some of the advanced AI editor capabilities within my home page and daily blogs, but there's a real lack of condensed technical content. Don't get me wrong, my daily progress blogs contain a lot of technical content and interesting problems. However, these are disparate and sometimes need context from previous days to fully make sense. I really need to work on condensing many days of AI development into a single, cohesive, and interesting technical blog. For example, this Sunday I plan to sit down and write my first technical blog about how I built my "Blog Builder" tool and built out the functionality of Dave. I think there's some really interesting technical information in there, with my favorite example being my prompt technique for optimizing output tokens when 'inserting' annotations to text. Look at the absolute sad state of my technical blogs vs my daily progress blogs:

My third intended audience is people that might be interested in hiring me. In this regard my current website is also very much lacking. I don't provide any contact information, any call to action, and I don't give any information on my formal experience for AI Engineering. The daily blogs serve as a good indicator/signal to a recruiter of my passion and dedication to learning, which is good. My technical blogs need to truly highlight my capabilities for problem solving complex systems as an AI Engineer. I'm already commited to writing a technical blog Sunday, but I need to work on providing more information about myself and streamlining the process for a potential viewer to reach out to me. Here's a funny navBar placeholder of what I wanted to implement on an About Page:

So let's recap on my retrospective; I have really 3 audiences for my website: Myself, people interested in technical content, and people that might actually hire me. My biggest priorities are doing a better job showcasing technical content, which will be started with my first technical blog on Sunday. Next I need to work on providing more information about myself, and improving the likelihood of someone reaching out to hire me. That means I need to work on an interactive resume, as well as an About page. These are the highest priorities.

Let's start implementing the "About" page. This will hold information about me, my interactive resume, and a call to action to reach out and hire me!

I need to brainstorm what content I want on the page. Design the layout, and start making a skeleton. I want to end with working on the interactive resume, which i'm not sure how I want to build

1. Build the barebones NextJS page.tsx for my about page.
2. Research and brainstorm what kind of content I want on my About page.
3. Start implementing a simple first pass.
4. Spend more time brainstorming unique ways I can build an interactive resume.
5. Build the interactive resume.
6. Work on adding polish and content to the first pass.

Experiment with deeper AI integration on the page, such as a chat with Dave

So I need to briefly go over the structure of my NextJS site. I use typescript (obviously) and I'm on version 14.2 of NextJS. I use the app router, and contain all code within the "src" directory. I have a top level home page, and then directories for each route. Each top level route under the "app" directory is a page which will have a dedicated link on my navBar. Both the dailyBlogs and technicalBlogs have their own page, where I can list all of the currently published blogs. I have a dynamicly routed subdirectory, where the slug is the blogId. I use this for dynamic route generation for each blog. Here's the newly updated directory structure:

I want to show you how I make my navBar. I've used the ShadCN component library in the past, and I very much like the clean look. It's incredibly easy to start using these components, and I can customize quickly. I really enjoy the open source nature, and I choose to manually install them in new projects by copying over all of the components into my code base. Anyway, I use a ShadCN component (see https://ui.shadcn.com/docs/components/navigation-menu). I link all the NavigationMenuItems to different top level routes. I chose to add a popout for the about page, as I plan to have some different distinct features here. I can link to different parts of my about page such as #general, #interactiveResume, or #hireMe. Here's a code snippet of my NavBar implementation:

const NavBar = () => {
    return (
        <header
            className="w-full px-4 py-2 text-base bg-background border-b border-solid"
        >
            <NavigationMenu className="w-full min-w-full">
                <NavigationMenuList>
                    <NavigationMenuItem>
                    <Link href="/" legacyBehavior passHref>
                            <NavigationMenuLink
                                className={navigationMenuTriggerStyle()}
                            >
                                Home
                            </NavigationMenuLink>
                        </Link>
                    </NavigationMenuItem>
                    <NavigationMenuItem>
                        <Link href="/dailyBlogs" legacyBehavior passHref>
                            <NavigationMenuLink
                                className={navigationMenuTriggerStyle()}
                            >
                                Daily Blogs
                            </NavigationMenuLink>
                        </Link>
                    </NavigationMenuItem>
                    <NavigationMenuItem>
                        <Link href="/technicalBlogs" legacyBehavior passHref>
                            <NavigationMenuLink
                                className={navigationMenuTriggerStyle()}
                            >
                                Technical Blogs
                            </NavigationMenuLink>
                        </Link>
                    </NavigationMenuItem>
                    <Link href="/dave" legacyBehavior passHref>
                            <NavigationMenuLink
                                className={navigationMenuTriggerStyle()}
                            >
                                Argue With Dave
                            </NavigationMenuLink>
                        </Link>
                    <NavigationMenuItem>
                        <Link href="/stats" legacyBehavior passHref>
                            <NavigationMenuLink
                                className={navigationMenuTriggerStyle()}
                            >
                                My Statistics
                            </NavigationMenuLink>
                        </Link>
                    </NavigationMenuItem>
                    
                    <NavigationMenuItem>
                        <NavigationMenuTrigger>
                            About Me
                        </NavigationMenuTrigger>
                        <NavigationMenuContent>
                            <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
                                <li className="row-span-3">
                                    <NavigationMenuLink asChild>
                                        <a
                                            className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
                                            href="/about"
                                        >
                                            <div className="mb-2 mt-4 text-lg font-medium">
                                                About Will
                                            </div>
                                            <div className="mb-2 mt-4 text-sm font-medium">
                                                And some shameless self plugging!
                                            </div>
                                        </a>
                                    </NavigationMenuLink>
                                </li>
                                <ListItem href="/about#general" title="More About Me">
                                    Bartending, Football, Pydantic, LLMs... that&apos;s about it.
                                </ListItem>
                                <ListItem href="/about#interactiveResume" title="Interactive Resume">
                                    Take a guided tour of my resume
                                </ListItem>
                                <ListItem href="/about#hireMe" title="I Want To Hire You">
                                    In case of emergency
                                </ListItem>
                            </ul>
                        </NavigationMenuContent>
                    </NavigationMenuItem>
                </NavigationMenuList>
            </NavigationMenu>
        </header>
    );
};


export default NavBar;

There's a weird error with the absolute placement of the popup window for the ShadCN NavigationMenu. I'll have to investigate that further later:

I just spent a lot of time really brainstorming what I wanted to see from the About Me page. I talked for awhile with my favorite AI rubber ducky (ChatGPT) and settled on a plan. My About page would have 3 separate sections, designed to further explain my AI journey (and where I want to be) in a story that had some kind of direction. So I wanted to break up my about into a general introduction, where I talk about my story, then into an interactive resume, which kind of talks about my journey through AI, and then a final call to action section where I can ask readers to hire me as an AI engineer. Obviously, I'll add more polish. Through discussion with ChatGPT, I had it generate the following plan for my about page:

1. General Introduction
Structure
Start with a hero section featuring a headline and a welcoming message.
Follow with a segmented story section that flows through personal background, initial interest in AI, and pivotal projects or experiences.
Content
Headline and Welcome: "Hello, I'm [Your Name], and this is my journey to becoming an AI engineer."
Personal Background: Briefly touch on your educational background and any personal tidbits that add a human touch.
Interest in AI: Discuss what drew you to AI engineering and how your passion developed over time.
Pivotal Moments: Highlight one or two key projects or experiences that significantly influenced your career path.
Design and Interactivity
Visual Timeline: An interactive horizontal line that users can scroll to explore key life events with pop-up information.
Animated Graphics: Use subtle animations for the background, such as floating nodes or a digital grid, to reflect the AI theme.
Video Snippets: Integrate short video clips of you discussing major milestones or demonstrating projects.
2. Interactive Resume
Structure
A central interactive element that showcases your skills, experience, and projects.
Sub-sections for education, skills, and major projects with expandable details.
Content
Education: List your degrees, special courses, or certifications relevant to AI engineering.
Skills: Categorize skills into technical, project management, and interpersonal, with proficiency levels.
Major Projects: Summaries of key projects, the problems solved, technologies used, and the impact created.
Design and Interactivity
Skills Wheel or Radar Chart: Interactive charts that show your skills with hover effects for descriptions.
Collapsible Project Details: Each project can be clicked to reveal more information, such as challenges, solutions, and results.
Timeline: An interactive timeline for career and education milestones, which expands to show more details on click.
3. Call to Action
Structure
Contact information section with direct communication links.
Downloadable content area for your resume.
An invitation for further interaction, like signing up for a newsletter or following on social media.
Content
Contact Information: Email, LinkedIn, GitHub, and other relevant contact forms.
Resume Download: A button to download your detailed resume.
Engagement Invitation: Encourage visitors to connect on professional and social platforms or sign up for updates on your AI journey.
Design and Interactivity
Contact Form: A simple, clean form for quick contact or inquiries.
Hover Effects: Icons for social media and resume download that animate or change color on hover.
Newsletter Signup: An engaging sign-up form with a humorous or catchy call to action, like "Join me on the AI journey!"

Pretty good! Now I'm going to let ChatGPT build a skeleton NextJS about page, with these instructions. It's critical I tell it to focus on structure alone, and to put placeholders for content. My most important instruction is to create dummy React components for things it believes need to be later created into their own react components. From here I got a suitable skeleton with NextJS.

I spent a lot of time working on writing my about page. I wasn't sure exactly how I wanted to tell my story. I utilized ChatGPT heavily to brainstorm and give me ideas on content. I ask ChatGPT to ask questions about me. Answering some of these questions help improve the quality of my writing, and make sure I get most of the important details:

I spent the next hour continuing to write my intro. It's now at an acceptable level, and I went to go find pictures. I had NextJS <Image> and <Link> components where applicable:

<section className="py-8">
                <h2 className="text-3xl font-bold text-gray-800 mb-4">Ask Abe - My First AI Application</h2>
                <div className="text-md text-gray-600 space-y-4">


                    <p>
                        Every Sunday marked an improvement in my capabilities as a software engineer and an increase in my experience using LLM technologies. My dream legal help project started to take shape into a fully functional LLM chatbot. The goal of the project was to democratize access and understanding of legal knowledge to all.
                    </p>
                    <Button variant="link">
                        <Link href="https://www.askabeai.com/">Visit Ask Abe</Link>
                    </Button>


                    <p>
                        A user could ask simple questions to the chatbot, which would search a database of scraped legislation (more on this feat later) to find relevant legislation. It would give legal education and information (never advice, don&apos;t sue me) in a format understandable to all. Included in its answer would be direct citations to the legislation, as well as the ability to view exact text and visit the official .gov website.
                    </p>
                    <Image width={1000} height={800} src="/abeChat.png" alt="Example chat with Abe"></Image>
                    <p>
                        I gave my LLM the persona of Abraham Lincoln, always honest and truthful. Building trust in LLM responses was a big deal back then, and still remains a problem today in critical domains such as legal.
                    </p>

At this point I'm starting to feel more burnout. All of the bad sleep I've been getting has really started to get to me. I've spent a lot of time researching some interesting interactive resumes. When I say interactive resume, I have no idea what I actually want. I just know I want to explain my skills and experience in some interactive/visual way. I'm going to take some time to talk about what I found:

This first example has you going through a resume as a toy car, driving through terrain. It's all done in the browser, in an isometric perpsective. Crazy polished, super interesting idea, but I found myself fucking around with the physic and the car more than actually working with the car. And If this website was named "iwanttobeafrontenddesigner", that may be absolutely perfect. It made me think of a couple of things though, if I'm going to make it interactive, the way it's interactive cannot distract the viewer. Or, if it does distract the viewer, it has to be something directly related to AI Engineering. This kind of rules out something simulation or game based. The next example was something a little more interesting:

The next resume was styled as some kind of side scroller arcade game, with the scrollbar sending you through scripted animations and visuals which highlighted the resume. This style of resume was beautifully animated and great art, and it stuck to more of a script on showing exactly what this user was capable of. It felt more like a creative walk through of a resume. Reminded me of the COD 4 mission Shock and Awe, where the first part of the mission you're manning a turret shooting things. It's interactive, but definitely linear. Allows for a more controlled experience while still letting the user have some control. Almost a mix of gameplay and cutscene. Both of these examples were interesting implementations of an interactive resume. I think it's given me some interesting ideas for tomorrow!

So let's talk about the current state of my about page. The about page currently handles the "about", mini showcases of major projects, and work experience. It's all done through text, and is packaged more as a retelling of how I got here. I like this approach because I get to tell my story in a coherent way. I don't have to rush to experience and bragging about myself. However, I don't want to waste someone's time. I could easily turn all of the separate sections into a "snapshot" in a timeline, kinda a slideshow of my story. I'd let the user control the pace of viewing. If they want to skip to experience, go for it. Now my idea for the twist: at each "snapshot" in my interactive resume, I can have Dave, my AI editor, agressively argue with the user on my behalf. He can have additional knowledge not directly stated, and direct the user to repositories. I can use the text to frame my story and present my experience, and let Dave argue for me. I may have some opportunities coming soon, and I REALLY need to finish a barebones version of this website SOON. That means I'm going to have to focus on building out my project list, work experience, and all the individual parts of my resume first. Any extra time I can work on integrating Dave more deeply. I'm feeling like a ShadCN carousel might be a good starting point. But alas, today I'm done. I've made a lot of progress on writing content on my main website, preparing to make it publishable. To be completely honest, this was way harder and more tiring than any kind of software engineering or AI work. I wish I had spent today grinding instead, but this is just as necessary if not more important.

I spent a lot of time today working on building out the content on my website, as well as doing a lot of research and thinking on how I best want to present my resume, projects, and information about myself. Very hard! I did a little coding and AI work, but mostly as a tool to help me write and build out the frontend more.

Tomorrow is a very important day. I need to finish my "first pass" of resume content on my website, create a page for documenting my many side projects, optionally experiment with some automatic stats tracking, and finally integrate AI Dave more deeply into an interactive resume. Hopefully I can get him to argue for me.

I'm getting really close to publishing the site and starting my job search in earnest. This site serves as a tool for me to post my blogs and progress, but also could be a very powerful tool in getting me hired. I don't want to send someone my resume, I want to send them my website which has everything: Projects, Resume, Skills, Blogs, and of course deep AI integrations. I think if a hiring manager gets on my website and gets into a conversation with my AI Dave on why they should hire me, that's infinitely more powerful than sending over a resume. I'm a big show not tell kind of guy.