index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Daniel's portfolio</title>
        <meta name="description" property="og:description" content="Daniel's web development portfolio of HTML, CSS, JavaScript, React and Next.js projects.">
        <meta name="keywords" content="web developer, for hire, programming, web development">
        <link rel="stylesheet" href="./static/style.css"/>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    </head>
    <body id="body" class="">
        <div class="flex flex-justcont-c body">
            <div class="width">
                <header class="flex flex-justcont-c flex-alignit-c">
                    <div class="links">
                        <a href="#projects">Projects</a>
                        <a href="#about">About me</a>
                        <a href="#contact">Contact</a>
                    </div>
                <button id="theme" aria-label="Theme changer" class="flex">
                    <svg xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M448 256c0-106-86-192-192-192V448c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"/></svg>
                </button>
                </header>
                <div class="flex flex-justcont-sb flex-alignit-c hero">
                    <div>
                        <h1>Daniel</h1>
                        <h3>&lt;web developer/&gt</h3>
                        <h4>Hacking stuff since 2005</h4>
                    </div>
                    <a href="#contact" class="hire"><h2>HIRE ME</h2></a>
                </div>
                <div id="projects" class="projects">
                    <div class="flex flex-justcont-c">
                        <h4>Projects</h4>
                    </div>
                    <div class="flex flex-justcont-sb projects-each-first">
                        <div class="flex flex-dir-col projects-width">
                            <h5>Bugtracker</h5>
                            <p>A highly secure full-stack <a href="https://en.wikipedia.org/wiki/Create,_read,_update_and_delete" target="_blank">CRUD</a> app built in Django. Users can sign up, log in/out, and see other people's projects and their tickets (if they're set to public. Otherwise, only the owner can see them).</p>
                            <p><br>The owner alone can edit and delete his/her projects and tickets. There's also a search functionality where the user can filter tickets according to their title.</p>
                            <div class="flex carousel carousel-mobile projects-width desktop-dn">
                                <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
                                <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
                                <div class="flex slides">
                                    <img src="./static/images/bugtracker/bugtracker-home-desktop.png.webp" loading="lazy" alt="Bugtracker homepage on desktop" class="projects-width slide">
                                    <img src="./static/images/bugtracker/bugtracker-home-mobile.png.webp" loading="lazy" alt="Bugtracker homepage on mobile" class="projects-width slide">
                                    <img src="./static/images/bugtracker/bugtracker-tickets-desktop.png.webp" loading="lazy" alt="Bugtracker ticket views on desktop" class="projects-width slide">
                                    <img src="./static/images/bugtracker/bugtracker-tickets-mobile.png.webp" loading="lazy" alt="Bugtracker ticket views on mobile" class="projects-width slide">
                                    <img src="./static/images/bugtracker/bugtracker-details-desktop.png.webp" loading="lazy" alt="Ticket detail page" class="projects-width slide">
                                    <img src="./static/images/bugtracker/bugtracker-newticket-desktop.png.webp" loading="lazy" alt="New ticket" class="projects-width slide">
                                    <img src="./static/images/bugtracker/bugtracker-newproject-desktop.png.webp" loading="lazy" alt="New project" class="projects-width slide">
                                </div>
                            </div>
                            <div class="projects-links">
                                <a href="#" target="_blank" style="display: none">Live website</a>
                                <a href="https://github.com/daniel-web-developer/django.bugtracker" target="_blank">GitHub repo</a>
                            </div>
                            <div class="flex flex-justcont-sb tags">
                                <p>Django</p>
                                <p>HTML</p>
                                <p>Sass/SCSS</p>
                                <p>Vanilla JS</p>
                                <p>PostgreSQL</p>
                            </div>
                        </div>
                        <div class="flex carousel carousel-desktop projects-width mobile-dn">
                            <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
                            <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
                            <div class="flex slides">
                                <img src="./static/images/bugtracker/bugtracker-home-desktop.png.webp" loading="lazy" alt="Bugtracker homepage on desktop" class="projects-width slide">
                                <img src="./static/images/bugtracker/bugtracker-home-mobile.png.webp" loading="lazy" alt="Bugtracker homepage on mobile" class="projects-width slide">
                                <img src="./static/images/bugtracker/bugtracker-tickets-desktop.png.webp" loading="lazy" alt="Bugtracker ticket views on desktop" class="projects-width slide">
                                <img src="./static/images/bugtracker/bugtracker-tickets-mobile.png.webp" loading="lazy" alt="Bugtracker ticket views on mobile" class="projects-width slide">
                                <img src="./static/images/bugtracker/bugtracker-details-desktop.png.webp" loading="lazy" alt="Ticket detail page" class="projects-width slide">
                                <img src="./static/images/bugtracker/bugtracker-newticket-desktop.png.webp" loading="lazy" alt="New ticket" class="projects-width slide">
                                <img src="./static/images/bugtracker/bugtracker-newproject-desktop.png.webp" loading="lazy" alt="New project" class="projects-width slide">
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-justcont-sb projects-each">
                        <div class="flex flex-dir-col projects-width">
                            <h5>Blog</h5>
                            <p>A full-stack blog with <a href="https://en.wikipedia.org/wiki/Create,_read,_update_and_delete" target="_blank">CRUD</a> operations built in Django. Those with permission to log in can create, edit, and delete posts.<br>
                            <br>
                            In this project, I created a <a href="https://en.wikipedia.org/wiki/REST" target="_blank">RESTful API</a> that allows the user to fetch, search, and sort (according to date posted and alphabetical order) the articles in the database.</p>
                            <div class="flex carousel carousel-mobile projects-width desktop-dn">
                                <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
                                <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
                                <div class="flex slides">
                                    <img src="./static/images/blog/blog-home-desktop.png.webp" loading="lazy" alt="Blog homepage on desktop" class="projects-width slide">
                                    <img src="./static/images/blog/blog-home-desktop-rest.png.webp" loading="lazy" alt="Rest of the blog homepage on desktop" class="projects-width slide">
                                    <img src="./static/images/blog/blog-home-mobile.png.webp" loading="lazy" alt="Blog homepage on mobile devices" class="projects-width slide">
                                    <img src="./static/images/blog/blog-home-mobile-rest.png.webp" loading="lazy" alt="Rest of the blog homepage on mobile devices" class="projects-width slide">
                                    <img src="./static/images/blog/blog-article-desktop.png.webp" loading="lazy" alt="Article view on desktop" class="projects-width slide">
                                    <img src="./static/images/blog/blog-article-desktop-text.png.webp" loading="lazy" alt="Rest of the article view on desktop" class="projects-width slide">
                                    <img src="./static/images/blog/blog-article-mobile.png.webp" loading="lazy" alt="Article view on mobile" class="projects-width slide">
                                    <img src="./static/images/blog/blog-article-mobile-text.png.webp" loading="lazy" alt="Rest of the article view on mobile" class="projects-width slide">
                                </div>
                            </div>
                            <div class="projects-links">
                                <a href="#" target="_blank" style="display: none">Live website</a>
                                <a href="https://github.com/daniel-web-developer/blog-django" target="_blank">GitHub repo</a>
                            </div>
                            <div class="flex flex-justcont-sb tags">
                                <p>Django</p>
                                <p>RESTful API</p>
                                <p>PostgreSQL</p>
                                <p>HTML</p>
                                <p>Sass/SCSS</p>
                                <p>Vanilla JS</p>
                            </div>
                        </div>
                        <div class="flex carousel carousel-mobile projects-width mobile-dn">
                            <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
                            <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
                            <div class="flex slides">
                                <img src="./static/images/blog/blog-home-desktop.png.webp" loading="lazy" alt="Blog homepage on desktop" class="projects-width slide">
                                <img src="./static/images/blog/blog-home-desktop-rest.png.webp" loading="lazy" alt="Rest of the blog homepage on desktop" class="projects-width slide">
                                <img src="./static/images/blog/blog-home-mobile.png.webp" loading="lazy" alt="Blog homepage on mobile devices" class="projects-width slide">
                                <img src="./static/images/blog/blog-home-mobile-rest.png.webp" loading="lazy" alt="Rest of the blog homepage on mobile devices" class="projects-width slide">
                                <img src="./static/images/blog/blog-article-desktop.png.webp" loading="lazy" alt="Article view on desktop" class="projects-width slide">
                                <img src="./static/images/blog/blog-article-desktop-text.png.webp" loading="lazy" alt="Rest of the article view on desktop" class="projects-width slide">
                                <img src="./static/images/blog/blog-article-mobile.png.webp" loading="lazy" alt="Article view on mobile" class="projects-width slide">
                                <img src="./static/images/blog/blog-article-mobile-text.png.webp" loading="lazy" alt="Rest of the article view on mobile" class="projects-width slide">
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-justcont-sb projects-each">
                        <div class="flex flex-dir-col">
                            <h5>Portfolio</h5>
                            <p>This project is the website you're seeing right now. I did it without any sort of framework so I could host it (for free!) on GitHub. Also, JavaScript frameworks are definitely overused. I didn't need a lot of functionality other than dragging to scroll the carousel and switching the theme, so the website uses vanilla JS.</p>
                            <div class="projects-links">
                                <a href="https://github.com/daniel-web-developer/new-portfolio" target="_blank">GitHub repo</a>
                            </div>
                            <div class="flex flex-justcont-sb tags">
                                <p>HTML</p>
                                <p>Sass/SCSS</p>
                                <p>Vanilla JS</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-justcont-sb projects-each">
                        <div class="flex flex-dir-col projects-width">
                            <h5>Where in the world</h5>
                            <p>A Next.js app that allows the user to fetch, filter, and search data from an external RESTful API's endpoint.</p>
                            <div class="flex carousel carousel-mobile projects-width desktop-dn">
                                <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
                                <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
                                <div class="flex slides">
                                    <img src="./static/images/countries/home-desktop.png.webp" loading="lazy" alt="Homepage on desktop" class="projects-width slide">
                                    <img src="./static/images/countries/home-mobile.png.webp" loading="lazy" alt="Homepage on mobile" class="projects-width slide">
                                    <img src="./static/images/countries/detail-desktop.png.webp" loading="lazy" alt="Country's details on desktop" class="projects-width slide">
                                    <img src="./static/images/countries/detail-mobile.png.webp" loading="lazy" alt="Country's details on mobile" class="projects-width slide">
                                </div>
                            </div>
                            <div class="projects-links">
                                <a href="https://countries-api-daniel-web-developer.vercel.app/" target="_blank">Live website</a>
                                <a href="https://github.com/daniel-web-developer/flags-api" target="_blank">GitHub repo</a>
                            </div>
                            <div class="flex flex-justcont-sb tags">
                                <p>Next.js/React</p>
                                <p>RESTful API</p>
                                <p>JSX</p>
                                <p>Sass/SCSS</p>
                            </div>
                        </div>
                        <div class="flex carousel carousel-mobile projects-width mobile-dn">
                            <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
                            <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
                            <div class="flex slides">
                                <img src="./static/images/countries/home-desktop.png.webp" loading="lazy" alt="Homepage on desktop" class="projects-width slide">
                                <img src="./static/images/countries/home-mobile.png.webp" loading="lazy" alt="Homepage on mobile" class="projects-width slide">
                                <img src="./static/images/countries/detail-desktop.png.webp" loading="lazy" alt="Country's details on desktop" class="projects-width slide">
                                <img src="./static/images/countries/detail-mobile.png.webp" loading="lazy" alt="Country's details on mobile" class="projects-width slide">
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-justcont-sb projects-each">
                        <div class="flex flex-dir-col projects-width">
                            <h5>Space tourism</h5>
                            <p>A mock space tourism website built with Next.js.</p>
                            <div class="flex carousel carousel-mobile projects-width desktop-dn">
                                <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
                                <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
                                <div class="flex slides">
                                    <img src="./static/images/space/first-desktop.png.webp" loading="lazy" alt="Homepage on desktop" class="projects-width slide">
                                    <img src="./static/images/space/first-mobile.png.webp" loading="lazy" alt="Homepage on mobile" class="projects-width slide">
                                    <img src="./static/images/space/second-desktop.png.webp" loading="lazy" alt="Destination page on desktop" class="projects-width slide">
                                    <img src="./static/images/space/second-mobile.png.webp" loading="lazy" alt="Destination page on mobile" class="projects-width slide">
                                    <img src="./static/images/space/third-desktop.png.webp" loading="lazy" alt="Crew page on desktop" class="projects-width slide">
                                    <img src="./static/images/space/third-mobile.png.webp" loading="lazy" alt="Crew page on mobile" class="projects-width slide">
                                    <img src="./static/images/space/fourth-desktop.png.webp" loading="lazy" alt="Technology page on desktop" class="projects-width slide">
                                    <img src="./static/images/space/fourth-mobile.png.webp" loading="lazy" alt="Technology page on mobile" class="projects-width slide">
                                </div>
                            </div>
                            <div class="projects-links">
                                <a href="https://nextjs-space-turism.vercel.app/" target="_blank">Live website</a>
                                <a href="https://github.com/daniel-web-developer/nextjs-space-turism/" target="_blank">GitHub repo</a>
                            </div>
                            <div class="flex flex-justcont-sb tags">
                                <p>Next.js/React</p>
                                <p>JSX</p>
                                <p>Sass/SCSS</p>
                            </div>
                        </div>
                        <div class="flex carousel carousel-mobile projects-width mobile-dn">
                            <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
                            <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
                            <div class="flex slides">
                                <img src="./static/images/space/first-desktop.png.webp" loading="lazy" alt="Homepage on desktop" class="projects-width slide">
                                <img src="./static/images/space/first-mobile.png.webp" loading="lazy" alt="Homepage on mobile" class="projects-width slide">
                                <img src="./static/images/space/second-desktop.png.webp" loading="lazy" alt="Destination page on desktop" class="projects-width slide">
                                <img src="./static/images/space/second-mobile.png.webp" loading="lazy" alt="Destination page on mobile" class="projects-width slide">
                                <img src="./static/images/space/third-desktop.png.webp" loading="lazy" alt="Crew page on desktop" class="projects-width slide">
                                <img src="./static/images/space/third-mobile.png.webp" loading="lazy" alt="Crew page on mobile" class="projects-width slide">
                                <img src="./static/images/space/fourth-desktop.png.webp" loading="lazy" alt="Technology page on desktop" class="projects-width slide">
                                <img src="./static/images/space/fourth-mobile.png.webp" loading="lazy" alt="Technology page on mobile" class="projects-width slide">
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-justcont-sb projects-each">
                        <div class="flex flex-dir-col projects-width">
                            <h5>Frontend Mentor projects</h5>
                            <p>This is a repository linking to the remainder of my Frontend Mentor projects.</p>
                            <div class="flex carousel carousel-mobile projects-width desktop-dn">
                                <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
                                <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
                                <div class="flex slides">
                                    <img src="./static/images/others/first.png.webp" loading="lazy" alt="Part 1 of my projects" class="projects-width slide">
                                    <img src="./static/images/others/second.png.webp" loading="lazy" alt="Part 2 of my projects" class="projects-width slide">
                                </div>
                            </div>
                            <div class="projects-links">
                                <a href="https://github.com/daniel-web-developer/frontendmentor-projects" target="_blank">Github repository</a>
                            </div>
                        </div>
                        <div class="flex carousel carousel-mobile projects-width mobile-dn">
                            <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-prev"><</p>
                            <p class="flex flex-justcont-c flex-alignit-c slides-buttons slides-buttons-next">></p>
                            <div class="flex slides">
                                <img src="./static/images/others/first.png.webp" loading="lazy" alt="Part 1 of my projects" class="projects-width slide">
                                <img src="./static/images/others/second.png.webp" loading="lazy" alt="Part 2 of my projects" class="projects-width slide">
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-justcont-c flex-alignit-c detail">
                        <div style="overflow: scroll; max-width: 90vw;">
                            <img class="detail-image">
                        </div>
                        <div aria-label="Close image" class="flex flex-justcont-c flex-alignit-c detail-button">
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </div>
                <div id="about" class="about">
                    <div class="flex flex-justcont-c">
                        <h4>About me</h4>
                    </div>
                    <p>I'm Daniel, a full-stack web developer dedicated to crafting exceptional online experiences. With a diverse skill set and a commitment to staying at the forefront of industry trends, I excel at tackling complex challenges and delivering innovative solutions. I invite you to explore my portfolio and join me on this journey of creativity, innovation, and web development excellence.</p>
                    <div class="about-skills">
                        <p>Front-end: HTML, CSS (Sass), JavaScript, React, and Next.js.</p>
                        <p>Back-end: Django, PostgreSQL.</p>
                        <p>Tools: Neovim, Docker and Docker Compose, Git.</p>
                    </div>
                </div>
                <div id="contact">
                    <h5>Contact information</h5>
                    <p>Interested in hiring me? Great! You can reach me through my social media:</p>
                    <div class="flex flex-dir-col social">
                        <a href="https://www.linkedin.com/in/daniel-web-developer/" target="_blank">LinkedIn</a>
                        <a href="https://github.com/daniel-web-developer/" target="_blank">GitHub</a>
                        <a href="https://codepen.io/daniel-web-developer" target="_blank">CodePen</a>
                        <p>Email: daniel_web_developer at proton dot me</p>
                    </div>
                </div>
            </div>
        </div>
        <script src="./static/script.js" defer></script>
    </body>
</html>