As a software engineering student, my journey into front-end development has been a fascinating exploration of creativity and technology. Front-end development, the practice of building the user-facing part of websites and applications, offers a unique blend of design and programming that captivates my interest.

My first step was acquainting myself with the essential tools: HTML, CSS, and JavaScript. HTML lays the foundation, structuring the content of web pages. CSS, on the other hand, breathes life into these structures with styles and aesthetics. JavaScript, the most dynamic of the trio, brings interactivity, making web pages responsive and engaging.

Responsive design is a cornerstone of modern front-end development. It ensures that applications look great and function well on any device, from desktops to smartphones. As a student, I learned to use frameworks like Bootstrap and media queries in CSS to make my designs responsive. User Experience (UX) is another critical aspect. It's not just about how the application looks but how it feels to interact with. I delve into principles of UX design to create intuitive and user-friendly interfaces.

Frameworks like React, Vue.js, and Angular have opened new avenues for building complex, efficient applications. As part of my learning, I experiment with these frameworks to understand their strengths and how they can serve different project needs. I have been particularly interested in react and exploring the next.js frameworks by creating some of my most recent projects

What excites me most is the ability to create projects that align with my interests. Be it a portfolio website, a small business's e-commerce site, or a personal blog, front-end development allows me to bring these ideas to life. I enjoy the process of ideation, designing the layout, and then coding it into a functioning website.

The front-end landscape is ever-evolving. Staying updated with the latest trends and technologies is vital. I regularly follow tech blogs, participate in online communities, and contribute to open-source projects. This not only enhances my skills but also keeps me connected with a global network of developers.

As a software engineering student, front-end development has been more than just coding; it's a journey of continuous learning and creativity. It's empowering to see how lines of code can transform into interactive, visually appealing, and user-friendly interfaces. My exploration in front-end development is an ongoing adventure, one where the possibilities are as limitless as my imagination.

Justin Jasa

How I Approach Frontend Development 

Creating a standout online portfolio is a crucial step for any professional looking to showcase their work, and developers are no exception. When I embarked on the journey to build my own, I chose a combination of Sanity.io for content management and Next.js for the frontend framework. This combination promised a blend of flexibility, efficiency, and power. Here’s how I pieced together a dynamic, full-stack portfolio.

 is a powerful headless CMS that separates the content layer from the presentation layer, allowing for immense flexibility. Its real-time content studio, customizable schemas, and excellent content structuring capabilities made it a no-brainer for a content-driven site like a portfolio.

 was an obvious choice for the frontend. Its server-side rendering capabilities are excellent for SEO, and its intuitive page routing and development experience speed up the development process. With Next.js, I could ensure my portfolio would be fast, user-friendly, and highly interactive.

I started by setting up Sanity Studio. With a few commands in my terminal, I installed the Sanity CLI and ran sanity init to create a new project. This process set up the back-end content structure for my portfolio, where I would later add projects, blog posts, and about information.

Schemas in Sanity.io define the structure of the content. I created schemas for my projects, blog posts, and personal information. Each schema was customized to capture all the necessary details. For instance, my project schema included fields for the project title, description, image, technologies used, and the project URL.

On the frontend side, I generated a new Next.js app using create-next-app, which quickly scaffolded a new project. I organized my components, services, and pages, mapping out where I would fetch and display data from Sanity.

Next.js makes fetching data straightforward with its built-in functions like getStaticProps and getServerSideProps. I used these functions to query data from Sanity.io with GROQ (Graph-Relational Object Queries), Sanity’s query language. The integration was seamless, pulling in my project data and blog posts into my Next.js pages.

One of Sanity.io’s impressive features is real-time content preview. I set up a live preview feature for my blog posts, allowing me to see changes instantly as I edited them in Sanity Studio. This was achieved by leveraging the real-time capabilities of Sanity's backend with Next.js's reactivity on the frontend.

The design of the portfolio was minimalist with a focus on usability and responsiveness. I chose a simple color scheme and a clean layout to let my work speak for itself. The navigation was straightforward, with clear links to different sections of my portfolio.

For project thumbnails and images in blog posts, I used Sanity.io’s image pipeline to serve optimized images for different screen sizes. This ensured fast load times and a responsive image experience.

To add some flair, I incorporated subtle animations and interactive elements using Framer Motion. This gave my portfolio a modern and dynamic feel without sacrificing performance.

With my content structured and schemas defined, I deployed the Sanity Studio with a simple sanity deploy command. This hosted the studio on Sanity’s servers, providing me with a content management backend accessible from anywhere.

For the frontend, I chose Vercel, the creators of Next.js, for deployment. Vercel’s integration with GitHub made deployment painless. Every git push to my repository triggered a new deployment, keeping my portfolio up-to-date with the latest changes.

One challenge was ensuring that the schema structures in Sanity.io matched my components in Next.js. Each change in schema required an equivalent update in the frontend components. Additionally, mastering GROQ to query exactly what I needed took some practice.

The flexibility of both platforms was a huge success. Being able to define exactly the data I needed for my portfolio through Sanity.io and then present it effectively with Next.js was empowering. The speed and SEO benefits from Next.js were immediately noticeable, and the workflow between the two was highly productive.

Building my portfolio with Sanity.io and Next.js was an enlightening experience. It taught me a lot about full-stack development, content management, and modern web technologies. Now, with every new project or blog post, I simply update the content in Sanity Studio, and my portfolio is automatically updated. The combination of Sanity.io and Next.js is powerful, and I would recommend it to anyone looking to build a flexible, scalable, and easy-to-maintain portfolio.

Creating a portfolio can be a daunting thing for many. Here is how I created my portfolio using Next.js and Sanity.io to manage my content.



JJ.

My Learnings

How I Approach Frontend Development

Creating My Portfolio with Next.js and Sanity

2022 - Present © Justin Jasa